Cool Transition Effect

Here are some examples of a pretty cool effect that Kheavy taught me. Its a pretty simple effect but it works well if implemented properly. Many thanks Kheavy.

Below are 5 different variations of the same effect. In the last example, I implemented a picture reveal and disappear. Just click on each movie to see the transition. I realized that what majorly affects the outcome of how the transition behaves is what is put into the delay. I only supplied the source for the first transition. The rest are just variations of it. So play around to get some crazy results.

TweenLite is needed for this to work. You can replace the TweenLite code with any Tween Engine of your choice.

Download Source Here

Transitions Example 1

[kml_flashembed movie="http://www.kreativeking.com/downloads/examples/transitions/transitions.swf" height="400" width="550" /]

Transitions Example 2

[kml_flashembed movie="http://www.kreativeking.com/downloads/examples/transitions/transitions2.swf" height="400" width="550" /]

Transitions Example 3

[kml_flashembed movie="http://www.kreativeking.com/downloads/examples/transitions/transitions3.swf" height="400" width="550" /]

Transitions Example 4

[kml_flashembed movie="http://www.kreativeking.com/downloads/examples/transitions/transitions4.swf" height="400" width="550" /]

Transitions Example 5

[kml_flashembed movie="http://www.kreativeking.com/downloads/examples/transitions/transitions5.swf" height="400" width="550" /]

Here is the Code:

import flash.display.Sprite;
import gs.TweenLite;
import fl.motion.easing.*;

var sw:int = 0;
var sh:int = 0;

var currentBG:Sprite;

startUp();

function startUp():void{
	stage.align = StageAlign.TOP_LEFT;
	stage.scaleMode = StageScaleMode.NO_SCALE;

	drawTiles();
	stage.addEventListener(MouseEvent.CLICK, redrawTiles);
}

function redrawTiles(event:MouseEvent):void {
	drawTiles();
}

function drawTiles():void{
	sw = stage.stageWidth;
	sh = stage.stageHeight;

	if(currentBG) {
		removeChild(currentBG);
		currentBG = null;
	}

	currentBG = new Sprite();

	addChild(currentBG);

	var nx:int = Math.ceil(sw/30);
	var ny:int = Math.ceil(sh/30);

	for(var a:int = 0; a		for(var b:int = 0; b			var t:tile = new tile();

			t.x = b*30;
			t.y = a*30;
			t.alpha = 0;

			currentBG.addChild(t);

			TweenLite.to(t, .5, {alpha:1, ease:Quadratic.easeOut, delay:((b*2+a)*.01)});
		}
	}
}