[Suche] Transition Effekte

[[je]]

Hi,

ich suche zur Zeit ein paar nette Übergangs-Effekte die ihr vielleicht mal gemacht habt.

Möchte grade eine kleine Geschichte basteln die verschiedene States einer Applikation handhaben kann. Ähnlich wie in dem Video zu Flex2, wer es gesehen hat.

Für das setzen eines neuen State suche ich noch kleine Effekte (denn so ein einfacher Fade sieht doch irgendwo langweilig aus).

Schön wäre es, wenn sie mit BitmapData arbeiten würden.
Je mehr, desto besser! Wäre nett wenn ich sie dann (natürlich mit Credits) einbauen dürfte.

[André Michelle]

Mit BitmapData.threshold kannst du superschnell wirre Effekte bauen.

Ich habe hier (aus Zeitgründen nur 3 oder 4) Transitions eingebaut. Mit jedem Klick bekommst du einen neuen Pattern. Da die Pattern sehr dunkel sind, sieht du das nicht immer gut. Aber generell brauchst du nur Muster, bzw.Formen in einem Farbkanal zu haben und dann kannst du mit einem hochzählenden threshold-parameter die Bereiche freigeben.
Das Winamp angelehnte Spektakel werde ich bis zur Spark noch hoffentlich weitervorantreiben und eine Timeline einbauen. Man muss die Transition schon gut zur Musik plazieren, damit das Spass macht :)

Hier ein Beispiel:

import de.popforge.bitmap.Shape;

import flash.display.BitmapData;
import flash.geom.Matrix;

import fpop.Transition;

class fpop.transition.Blocks extends Transition
{
	private var blocks: BitmapData;
	private var mix: BitmapData;
	
	private var value: Number;
		
	public function Blocks( from: BitmapData, to: BitmapData )
	{
		super( from, to );
	}
	
	public function start(): Void
	{
		var m: Matrix = new Matrix();
		
		var g: Shape = Shape.get();
		
		var blockSize: Number = 32;
		var b2: Number = blockSize / 2;
		
		//-- left
		m.createGradientBox( b2, b2, 0, 0, 0 );
		g.beginGradientFill( 'linear', [ 0, 0xffffff ], [ 100, 100 ], [ 0, 0xff ], m );
		g.moveTo( 0, 0 );
		g.lineTo( b2, b2 );
		g.lineTo( 0, blockSize );
		g.endFill();
		
		//-- right
		m.createGradientBox( b2, b2, Math.PI, b2, 0 );
		g.beginGradientFill( 'linear', [ 0, 0xffffff ], [ 100, 100 ], [ 0, 0xff ], m );
		g.moveTo( blockSize, 0 );
		g.lineTo( blockSize, blockSize );
		g.lineTo( b2, b2 );
		g.endFill();
		
		//-- top
		m.createGradientBox( b2, b2, Math.PI/2, 0, 0 );
		g.beginGradientFill( 'linear', [ 0, 0xffffff ], [ 100, 100 ], [ 0, 0xff ], m );
		g.moveTo( 0, 0 );
		g.lineTo( b2, b2 );
		g.lineTo( blockSize, 0 );
		g.endFill();
		
		//-- down
		m.createGradientBox( b2, b2, Math.PI*3/2, 0, b2 );
		g.beginGradientFill( 'linear', [ 0, 0xffffff ], [ 100, 100 ], [ 0, 0xff ], m );
		g.moveTo( 0, blockSize );
		g.lineTo( blockSize, blockSize );
		g.lineTo( b2, b2 );
		g.endFill();
		
		//-- save block as bitmap
		
		var block: BitmapData = new BitmapData( blockSize, blockSize, false, 0 );
		block.draw( g );
		
		m.identity();
		g.clear();
		
		//-- use bitmap for pattern
		
		g.beginBitmapFill( block, m, true, false );
		g.moveTo( 0, 0 );
		g.lineTo( 256, 0 );
		g.lineTo( 256, 256 );
		g.lineTo( 0, 256 );
		g.lineTo( 0, 0 );
		g.endFill();
		
		blocks = new BitmapData( 256, 256, false, 0 );
		blocks.draw( g );
		
		g.removeMovieClip();
		
		value = 0;
		
		//-- alpha channel needed
		mix = new BitmapData( 256, 256, true, 0 );
	}
	
	public function run(): Void
	{
		mix.copyPixels( to, to.rectangle, origin );
		
		mix.threshold( blocks, blocks.rectangle, origin, '>=', value, 0, 0xff, false );
		
		from.copyPixels( mix, from.rectangle, origin );
		
		value += 8;
		
		if( value >= 256 )
		{
			onTransition();
		}
	}
}

Die Shape Klasse ist nur ein Container, von dem ich MovieClips abziehen kann, um darin was zu zeichnen, was ich danach in ein Bitmap reinpacke. Die SuperClass Transition ist nur als Typ da und nimmt die beiden Bilder auf, die überblendet werden sollen.

[michael]

oh doch schon die katze aus dem sack gelassen?
die neuen patterns sehen spitze aus.
du machst mir angst.

[root_alpha]

Respekt, da sieht man mal was jetzt so alles machbar ist man muss nur die Ideen dazu haben

Gefällt mir sehr gut auch die Musik finde ich passend

[André Michelle]

oh doch schon die katze aus dem sack gelassen?

Ja, ich habe eh zu wenig Zeit da noch richtig lange dran zu sitzen. Danke für das Feedback. Ich konnte es schon langsam nicht mehr sehen. Ich glaube, ich habe den Song jetzt schon 200x komplett durchgehört :)

[Aerks]

Sehr schön.

Meine Favoriten sind "Warp" und "Burst".
Da bekommt man richtig Lust auf Drogen.

Viele Gruesse
=:] Aerks

[[je]]

Danke André,
dann werd ich wohl auch mal ein wenig mit dem Filter spielen.

[André Michelle]

Hehe, kein einziger Pattern arbeitet mit auch nur einem Filter :-)

[Aerks]

Hehe, kein einziger Pattern arbeitet mit auch nur einem Filter :-)

Wahrscheinlich kommt der blur durch die eingeschaltete Interpolation beim ständigen ranzoomen, oder?

Viele Gruesse
=:] Aerks

[André Michelle]

Wahrscheinlich kommt der blur durch die eingeschaltete Interpolation beim ständigen ranzoomen, oder?

Ja, die Möglichkeit immer wieder in einem Bitmap drüber zu zeichnen ist schon enorm. Leider gibt es auch Fehler in der Darstellung. Man kann ab und zu die Aufteilung in 4 gleichgrosse Quadranten beobachten. Daher waren manche Patterns nicht möglich oder unschön. Auf Quality="LOW" kann man schön sehen, was da alles schiefläuft.

[michael]

hoier sind auch noch eine paar schöne transitions dabei
http://www.senocular.com/pub/flash/8...fliptransition

[Rey]

ich habe das aus deinem link mal dl um es anzuschauen und es sieht sehr cool aus meine frage ist wie kann ich die bild pfade änderen das meine bilder da erscheinen die ich einfügen will?

Stage.scaleMode = 'noScale';

var speed = .3;
var delay = 3;
var switchblur = 9;

var images = ["hil", "mtn", "ice"];
var index = 0;
var transbmp = new flash.display.BitmapData(300,300);
var blurfilter = new flash.filters.BlurFilter();

loadTransBitmap(images[index]);
var clips = createGrid(this, 1, transbmp, 40);
click_mc.swapDepths(2);

function onMouseDown(){
index++;
index %= images.length;
loadTransBitmap(images[index]);
startTransition(clips, transbmp, speed, delay);
}

function loadTransBitmap(id){
var tempbmp = flash.display.BitmapData.loadBitmap(id);
transbmp.copyPixels(tempbmp, tempbmp.rectangle, new flash.geom.Point(0,0));
tempbmp.dispose();
}

function createGrid(target, targdepth, sourcebmp, size){
var home = target.createEmptyMovieClip("transition_mc", targdepth);
var depth = 0;
var clips = new Array();
var row, rows = Math.ceil(sourcebmp.height/size);
var col = Math.ceil(sourcebmp.width/size);
var mc;
var offset = new flash.geom.Point(0,0);
while(col--){
row = rows;
clips[col] = new Array();
while(row--){
mc = home.createEmptyMovieClip("grid"+row+"_"+col, depth);
mc.rect = new flash.geom.Rectangle(size*col, size*row, size, size);
mc._x = mc.rect.left;
mc._y = mc.rect.top;
mc.rotate = 0;
mc.speed = 0;
mc.bitmap = new flash.display.BitmapData(mc.rect.width, mc.rect.height, true, 0);
mc.bitmap.copyPixels(sourcebmp, mc.rect, offset);
mc.attachBitmap(mc.bitmap, 1);
mc.transition = null;
clips[col][row] = mc;
depth++;
}
}
return clips;
}

function startTransition(clips, sourcebmp, speed, delay){
var row, rows = clips[0].length;
var col = clips.length;
while(col--){
row = rows;
while(row--){
clips[col][row].onEnterFrame = transOnEnterFrame;
clips[col][row].transition = sourcebmp;
clips[col][row].rotate = -(delay*(col+row)/2)/Math.PI;
clips[col][row].speed = speed;
}
}
}

function transOnEnterFrame(){

this.rotate += this.speed;

if (this.rotate < 0) return;
if (this.rotate > Math.PI){
this.rotate = Math.PI;
delete this.onEnterFrame;
}

if (this.transition && this.rotate >= (Math.PI/2)){
this.bitmap.copyPixels(this.transition, this.rect, new flash.geom.Point(0,0));
this.transition = null;
}

var sin = Math.sin(this.rotate);

var matrix = new flash.geom.Matrix();
matrix.tx = this.rect.left + sin*this.rect.width/2;
matrix.ty = this.rect.top + sin*this.rect.height/2;
matrix.b = matrix.c = -sin/2;
matrix.a = matrix.d = 1 + matrix.b;

this.transform.matrix = matrix;

blurfilter.blurX = blurfilter.blurY = Math.floor(switchblur*sin);
this.filters = [blurfilter];
}

[KlarkKent]

@ Andre:

Geiles Beispiel... insbesondere wegen der Darstellung des Spektrums weniger wegen der Transitions (auch wenn das hier das Thema ist)
Besonders nett wirds ja dann wenn man das ab Flash9 ohne SwiftMP3 machen kann. ... Die Tage von SiftMP3 sind wohl gezählt