Create a Flash Photo Stack Gallery
May 6th, 2010 in Flash | 7 CommentsLearn how to create an auto-played Photo Stack Gallery inside Flash with Actionscript 3 and Tweenlite.
1. Create a new flash file (Actionscript 3.0) and save it as stackGallery.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. Arrange them into a stack.
Select all your photos and convert the selection to a movie clip with registration point at the top left. Give it an instance name of “gallery”.
3. Create a new “actions” layer. We’ll use the Tweenlite engine, so first go download its AS3 version.
Open the actions panel.
First make the following imports that in order to use the Twenlite engine and its easing properties.
import com.greensock.*; import com.greensock.easing.*;
4. Next as we want the gallery to auto-play, we’ll use a Timer.
var timer:Timer = new Timer(4000); timer.addEventListener(TimerEvent.TIMER,showNext); timer.start();
5. The showNext function consists of moving the stack’s front photo to the right so that the next photo appears.
To do so, retrieve the front photo and use the Tweenlite engine to change its x, y and rotation properties.
When this Tween will be complete, we call the moveBack function.
var frontPhoto:MovieClip;
function showNext(e:TimerEvent):void{
frontPhoto = MovieClip(gallery.getChildAt(gallery.numChildren-1));
TweenLite.to(frontPhoto, .8,{x:600,y:-200,rotation:45,ease:Quart.easeIn,onComplete:moveBack});
}
6. The moveBack function is used to put the photo at the back of the stack. To do so, we change its depth to 0 and use Tweenlite to set its x and y properties to random values (near 0) and the rotation property to 0.
function moveBack():void{
gallery.setChildIndex(frontPhoto,0)
TweenLite.to(frontPhoto, 1,{x:Math.random()*80 -40 , y:Math.random()*40 -20 ,rotation:0});
}
7. Here’s the final code, test your movie to see it in action.
import com.greensock.*;
import com.greensock.easing.*;
var timer:Timer = new Timer(4000);
timer.addEventListener(TimerEvent.TIMER,showNext);
timer.start();
var frontPhoto:MovieClip;
function showNext(e:TimerEvent):void{
frontPhoto = MovieClip(gallery.getChildAt(gallery.numChildren-1));
TweenLite.to(frontPhoto, .8,{x:600,y:-200,rotation:45,ease:Quart.easeIn,onComplete:moveBack});
}
function moveBack():void{
gallery.setChildIndex(frontPhoto,0)
TweenLite.to(frontPhoto, 1,{x:Math.random()*80 -40 , y:Math.random()*40 -20 ,rotation:0});
}
May 12th, 2010
hi, i’m newbie for flash.
i did copy paste the code, i followed the steps you told, but when i debugged the movie, there were errors in code below:
“frontPhoto = MovieClip(gallery.getChildAt(gallery.numChildren-1));”
the error message shown “1120: Undefined property object”
pls advise
May 13th, 2010
This is perfect – came to my rescue as I need this for a project I’m currently working on. I’m going to see if I can get this working with a mouse click instead of a timed event.
Thanks!
May 24th, 2010
Excellent!
Very good explanations and it works! Do more please! Thank you very much.
Jun 14th, 2010
cen u tell how can I get this working with a mouse click instead of a timed event.??? That would be perfect
Jul 3rd, 2010
Dude, remove this:
var timer:Timer = new Timer(4000);
timer.addEventListener(TimerEvent.TIMER,showNext);
timer.start();
and use this code instead:
timer.addEventListener(MouseEvent.CLICK,showNext);
function showNext(e:MouseEvent):void{
The rest remain the same.
Aug 9th, 2010
hi, can you tell how to make next, previous option to navigate around? and at the same time we can had an option for automatic slide show. So when we off the auto slide show, the images can only move by using the previous and next options. But if we on the auto slideshow option, images will autoplay again.
thanks
Sep 22nd, 2011
1172: Definition com.greensock could not be found.
1172: Definition com.greensock.easing could not be found.
1172: Definition com.greensock could not be found.
1172: Definition com.greensock.easing could not be found.
1120: Access of undefined property TweenLite.
1120: Access of undefined property Quart.
TweenLite.to(frontPhoto, 1,{x:Math.random()*80 -40 , y:Math.random()*40 -20 ,rotation:0});