Swinging Image Effect with AS3
June 1st, 2010 in Flash | 8 CommentsIn 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();
Jun 2nd, 2010
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
Jun 4th, 2010
Nice Tutorials,
Brilliant works,really good collection dude.. thanks
visit : pepitup.blogspot.com
Jun 11th, 2010
is this AS2 ? or AS3 ?
Jul 9th, 2010
[...] View Tutorial [...]
Oct 21st, 2010
Thank you…
Oct 22nd, 2010
superb….
Dec 13th, 2010
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!
Dec 16th, 2010
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