Swinging Image Effect with AS3

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

View DemoDownload Source

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

8 thoughts on “Swinging Image Effect with AS3

  1. arnold

    dude I always love when you use greensock on your tutorials , which I cant find on any website…

    thanks man, I really appreciate your stuff

  2. Pingback: Swinging Image Effect

  3. Don

    This was a great tutorial. I’m interested in learning about some 3D motion, I knew nothing of greensock’s TweenLite. This tutorial gives me a great starting point! Short and sweet! Thanks a bunch!

  4. carl

    another great tutorial. very neat effect. A little bonus would be to use TweenMax.allFrom() or TweenMax.allTo() which automatically applies tweens to all MovieClips in an array.

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

    the above code can be replaced with

    TweenMax.allTo(images, .5, {alpha:1, rotationX:0}, .4)

    no need to change the import statements or anything, but there is a slight kb increase in final swf.

    its a lot of fun

Leave a Reply

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