Vertical Flip Effect Animation

Another easy and quick tutorial to animate movie clips using the Tweenlite engine. In this one, we are going to animate a “Welcome” text with a vertical flip effect. This is a neat little trick to learn, and will help you in gaining a few more skills along the way. Of course, the text doesn’t have to say “welcome,” but it’ll sure make things easier. Whether you’re looking to welcome people to your Mobile Phones UK review site, or you’re creating a special greeting for someone, this is a smart way to do it. That, and you’ll look like an animation pro – win-win, surely.

View DemoDownload Source

1. With Flash CS4 or CS5, create a new flash file (Actionscript 3.0) and save it as flip.fla.

2. Rename “layer 1” to “content”. Create all your movie clips that you want to animate. Set their registration point at the center.

3. Create a new layer named “button”. Create your button and set its instance name to “btn”.

4. Create a new “actions” layer. We’ll use the Tweenlite engine, so first if you don’t already have it go download its AS3 version. Open the actions panel.
First make the following import in order to use it.

import com.greensock.*;

5. At first we don’t want to see the movie clips. Loop through all the objects contained in “content_mc” to set their alpha property to 0.

function init():void{
	for (var i:int =0; i < content_mc.numChildren; i++) {
		 var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		 mc.alpha = 0;
	}
}

6. Next add a CLICK event listener to the button.
In the flipAll() function, we begin by removing the button from the stage.
Next we loop through all the movie clips. For each, we set its index to 0 so that if ever a movie clip intersects with one which is in front of it, this movie clip will stay at the back. And we use the Tweenlite engine to animate its alpha, rotationX and z properties. We specify the delay parameter to make the movie clips appear one after another.

btn.addEventListener(MouseEvent.CLICK,flipAll);

function flipAll(e:MouseEvent):void{
	removeChild(btn);
	for (var i:int = 0; i < content_mc.numChildren; i++){
     		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
			content_mc.setChildIndex(mc,0);
			TweenLite.to(mc,.8,
						 {alpha: 1,
						 rotationX : mc.rotationX -360,
						 z:mc.z - 200,
						 delay: i*.3}
						 );
	}
}

7. Here’s the final code, test your movie to see it in action.

import com.greensock.*;

function init():void{
	for (var i:int =0; i < content_mc.numChildren; i++) {
		 var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
		 mc.alpha = 0;
	}
}

btn.addEventListener(MouseEvent.CLICK,flipAll);

function flipAll(e:MouseEvent):void{
	removeChild(btn);
	for (var i:int = 0; i < content_mc.numChildren; i++){
     		var mc:MovieClip = content_mc.getChildAt(i) as MovieClip;
			content_mc.setChildIndex(mc,0);
			TweenLite.to(mc,.8,
						 {alpha: 1,
						 rotationX : mc.rotationX -360,
						 z:mc.z - 200,
						 delay: i*.3}
						 );
	}
}

init();

7 thoughts on “Vertical Flip Effect Animation

  1. andy

    The pixelation of the images occurs because whenever flash detects that an object’s 3d properties have been changed, it adds anti-aliasing to that object because it assumes you want to animate this and the anti-aliasing is applied to make the animation render more smoothly.

    This is ok, but unfortunately if the object’s animation has stopped, flash doesn’t think to itself, hey it’s not animating anymore, I’m gonna make the graphics more crisp by getting rid of this anti-aliasing.

    There is a way you can do this yourself and that’s what you’re going to have to do:

    When you’re object’s animation is complete just set this property to null:

    myMovieClip.transform.matrix3D = null;

  2. Paul

    Hey,

    ii just came across it and i love it.

    I have a question, is it possible to lose the button all together? So it animates without the click?

    Thank you,
    Paul

Leave a Reply

Your email address will not be published. Required fields are marked *