Create a Flash Photo Stack Gallery

Learn how to create an auto-played Photo Stack Gallery inside Flash with Actionscript 3 and Tweenlite.

View DemoDownload Source

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

7 thoughts on “Create a Flash Photo Stack Gallery

  1. Reza Yusuf

    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

  2. rbwakefield

    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!

  3. lee

    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.

  4. dan

    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

  5. shona

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

Leave a Reply

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