Most Popular

• Create a sliding content in flash
• Flash Flip Letter Effect
• Create a Show/Hide Sliding Panel using Flex
• 3D rotation with Flash CS4
• Capture images from the webcam
• Sliding menu with actionscript 3 and TweenLite
• Create a 360° panorama viewer with AS3
• Create an Auto-Scrolling Vertical Content
• Eyes follow the cursor
• Circular rotation with as3

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.

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();