Swinging Image Effect with AS3

In this simple tutorial, let’s create a Swinging Image effect with Actionscript 3.

1. As we’ll use one of Flash Player 10’s 3D features, you need at least Flash CS4 to follow this tutorial.
Create a new flash file (Actionscript 3.0) and save it as swingingImages.fla.

2. Rename “layer 1″ to “content”. Import your images on the stage and convert each to a movie clip with registration point at the top left. Give them respective instance names of “pic1″, “pic2″ etc…

3. Create a new layer called “button”. Create your own button and give it an instance name of “btn”.

4. Then create an “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. Store your images inside an array.

var images : Array = [pic1,pic2,pic3,pic4]  ;

6. Create an init() function to loop through the “images” array and set for each movie clip its alpha property to 0 and its rotationX property to 270. Thereby the images will be lifted and not visible.

function init():void{
	for (var i:int = 0; i < images.length; i++){
		var mc:MovieClip = images[i] as MovieClip;
		mc.alpha = 0;
		mc.rotationX = 270;
	}
}

7. Next add a CLICK event listener to the button, event that will be handled by the swingImages function.
Inside the swingImages function we first call the init() function.
Then we loop through the “images” array and use the Tweenlite engine to animate its alpha and rotationX property. We specify the delay parameter to make the images appear one after another.

btn.addEventListener(MouseEvent.CLICK,swingImages);

function swingImages(e:MouseEvent):void{
	init();
	for (var i:int = 0; i < images.length; i++){
     		var mc:MovieClip = images[i] as MovieClip;
            TweenLite.to(mc,.5,{alpha: 1,rotationX: 0,delay: i*.4});
	}
}

8. Finally call the init() function so that the images are not visible at the beginning.
Here’s the final code, test your movie to see it in action.

import com.greensock.*;

var images : Array = [pic1,pic2,pic3,pic4] ;
	
function init():void{
	for (var i:int = 0; i < images.length; i++){
		var mc:MovieClip = images[i] as MovieClip;
		mc.alpha = 0;
		mc.rotationX = 270;
	}
}

btn.addEventListener(MouseEvent.CLICK,swingImages);

function swingImages(e:MouseEvent):void{
	init();
	for (var i:int = 0; i < images.length; i++){
     		var mc:MovieClip = images[i] as MovieClip;
            TweenLite.to(mc,.5,{alpha: 1,rotationX: 0,delay: i*.4});
	}
}

init();