In this tutorial, you will learn how to build an interactive stack of photos using Flash. This is a great technique to display numerous images in a limited amount of space, and the best part is that it is extremely easy to execute.

Check out the final result. Click on the photos.

Step 1

First, open up a new ActionScript 3 document in Flash, and create three layers: actions, photos, and background. In the properties panel, set the size of your stage. I used 500 x 338 for this example.

Step 2

Our photos need something to lay on, so import a texture to the “background” layer. I chose a nice wood texture.

Select the “photos” layer and import one of your photos to the stage(File > Import > Import to Stage). Before importing, make sure your photos have been resized to fit well on your stage. My photos are 173px x 260px. Select the photo and convert it to a MovieClip(Modify > Convert to Symbol). Make sure that registration point is in the middle and name it “photo1″.

Step 3

Once the image has been converted to a MovieClip, double click on it to view it’s time line. Create a new layer below the one that the photo is on. On this layer, we are going to create a border. Using the Rectangle Tool, create a box that is 20px taller and wider than the photo, and make sure that it is aligned with it’s center.

Step 4

Now lets lift our photo off the table a bit by adding a shadow. To do this, back out to the main time line and select your photo. Next to the properties panel, click on the “Filters” tab and add a Glow filter. Set the color to black and the blur to 10. Now position the photo on the left side of your stage, so there is enough room on the right for it to slide out. Make sure to give it an instance name of “photo1″.

Step 5

Repeat steps 2 – 4 for each of your photos, each time incrementing the number in the name (photo1, photo2, etc).

Step 6

Before we start adding any ActionScript, download the AS3 version of tweener, a class that makes it easy to move things with code. Then extract the “caurina” folder into your projects directory.

Step 7

On the main time line, select frame 1 on the “actions” layer. The first line of our code imports tweener, so we can have access the class. Then we need to define some variables that will make it easy to customize the photo stack later without having to alter the main code.


import caurina.transitions.*;

var photoOriginX:Number = photo1.x;
var photoDestX:Number = photoOriginX + 200;
var speed:Number = .5;
var rotationRange:Number = 10;
var photoCount:Number = 3;
var easeType:String = "easeoutquad";

Step 8

Now lets add two functions. The first is called when a photo is clicked. It moves the photo to the x position that we defined in step 7. It also rotates the photo to a random value.

The second function moves the photo back to it’s origin and changes the depth so that it is on the bottom of the stack. It is called when the first tween is complete.


function photoSlideOut(e:Event):void
{
	e.target.parent.setChildIndex(e.target, e.target.parent.numChildren - 1);
	Tweener.addTween(e.target, {x: photoDestX, time: speed, transition: easeType, onComplete:photoSlideIn, onCompleteParams:[e.target]});
	Tweener.addTween(e.target, {rotation: Math.floor(Math.random()*(rotationRange*2))-rotationRange, time: speed*2, transition: easeType});	
}

function photoSlideIn(p:MovieClip)
{
	p.parent.setChildIndex(p, 1);
	Tweener.addTween(p, {x: photoOriginX, time: speed, transition: easeType});	
}

Step 9

Initialize the photos by looping through each one and adding the mouse down event and setting an initial random rotation.


for(var i=1; i<=photoCount; i++)
{
	this["photo"+i].addEventListener(MouseEvent.MOUSE_DOWN, photoSlideOut);	
	this["photo"+i].rotation =  Math.floor(Math.random()*(rotationRange*2))-rotationRange;
}

That's it. Feel free to experiment with the speed and rotation variables to achieve different types of motion.

Download Example

  • http://www.cajebo.com Michael

    Thanks for this well-written Tute.

    As I’m simply a well-rounded designer that knows enough about Flash to get into trouble, this little nugget is JUST what I’ve been looking for as a way to simply commit some photo examples to a joomla site i’m working on.

    Thanks again!

  • http://www.bwigg.com Brian

    Great tutorial!

    I had some issues with copying and pasting some of your code. The “easeoutquad” in the photoSlideOut function didn’t copy over, it has something to do with the quotes that surround the value. Figured out the error after looking at the files in the example zip.

    Thanks again

  • http://henryjones.us Henry

    Brian,

    Glad you like it :)

    I fixed the weird behavior that you mentioned. The code snippets and the example file are both updated.

  • http://kralik.profitux.cz Králík

    Very nice tutorial! Good look for next great tutorials.

  • dZine

    Once again you deliver. Thanx!

  • http://blografik.com Mehmet

    Great tutorial thx.

  • http://www.onerutter.com Jake Rutter

    Very nicely written tutorial, there is a lot that you can do with this. So once you click the image, then it moves to the right – is there another listener being set so once its done moving to the right – the depth changes and then it moves to the left?

  • http://henryjones.us Henry

    Jake,

    The Tweener.addTween method allows you to pass in a call back function. That way when a tween is complete you can fire off another one.

    If you take a closer look at the photoSlideOut function, you will see what I mean.

  • tony3000

    Thanks for the tutorial
    i tried to change the width and height of the stage and photos, it works but when the photo1 moves to the right, it moves to the middle of photo2 and go behind, i mean there is cut when photo1 moves to the right and to the left.

    one more thing, what if i want to let the photos move to the left of random.

    thanks again for your time

  • Jake Mauer

    Hi Henry,

    Like everyone else I’d like to thank you for this tutorial and code, it’s probably going to save my butt on a current project.

    I have a bunch of questions but I’m trying to save them until I really get stuck. One question I will ask now is if there’s a way to alter the code to work with the Flash 8 / AS2 version of tweener? I’m targeting that version of flash so I can’t really use anything AS3 specific.

    Thanks for your time!

    Also to Tony3000 I’m not exactly sure if this will help or if I understand correctly but you need to adjust your “photoDestX:Number” So if you’ve enlarged the size of the images you’ll need to increase the “photoOriginX + 200;” number until it looks right. Also if you want your images to fly to the left just change the + to a -. Maybe you knew all of this already, but it was worth mentioning anyway.

  • http://henryjones.us Henry

    @Jake – I’m not sure about the differences of as2 version of tweener since I have never used it, but converting the rest of the code shouldn’t be a problem. Instead of using the event listeners for the button events create an onPress function, and use swapDepth instead of setChildIndex. Also remember that as2 properties have a “_” in front of them. So, instead of movieClip.x, it is movieClip._x.

    Hope this helps.

    @tony3000 – I think Jake is right in what he told you.

  • tdurant

    Has anyone been able to make this work in as2 If so please share your code because I have not. Thanks

  • Ryan Moore

    I am having issues. Compile error: 1120: Access of undefined property photo1.

    I am guessing I’m doing something stupid, does anybody have any idea? I have copied and pasted the code and made the relevant adjustments (ie number of images and distance to travel)

  • Ryan Moore

    I was doing something stupid. Worked it out though. Sorry guys. Awesome tutorial, thank you very very much.

  • anne

    really awsome! any chance to “read” images from a directory instead of importing in flash..? maybe in combination with xml or flash (sorry, i am not an actionscript-master..)

  • http://www.danhbaweb20.com/ Danh ba web 2.0

    Thanks you very much ! Great tutorial

  • Kathleen

    This is a really fun concept. I am trying to get this to work rotating the photos automatically every X seconds instead of on mouse click. Any suggestions?

  • Lisa

    will this work with CS4?

  • http://meldeinesipes.com ememfrick

    Thanks for this. I’m going to try this on my website.

  • Madtoban

    Ok, I’m relatively new to flash actionscripting and am playing with this awesome tutorial. Can anyone let me know exactly how to increase the number of images?

    Thanks.MT

  • Madtoban

    I’m such a noob.
    I forgot to give each image an instance name.
    Again, awesome tutorial.

  • dwayneericatrippcolin

    why doesn’t the example work?????

  • Fernando

    Thanks it looks nice but i had some problems with the tweener, flash shows some errors of constants when i run it. I just unzip the cuarine file in the same folder of the fla there is something else needed?

  • http://www.atakteknoloji.com Atak Teknoloji

    nice tutorial. thanks.

  • Claudia Fernández

    thanks, is a great tutorial!!! help me a lot!

  • http://www.thinkflick.com thinkflick

    Marvellous
    Good tutorial by which we can create the comprehensive stack of images or photos. great work! i would refer it to learn as it is the place where u have fun and knowledge at the same time.

  • marloniceteam

    hola tengo problemas con el action me aparece el error **Error** Escena=Escena 1, capa=acciones, fotograma=1:Línea 9: No se pudo cargar la clase o interfaz ‘Event’.
    function photoSlideOut(e:Event):void

    Total de errores de ActionScript: 1 Errores comunicados: 1

    ayuda

  • Darla

    Excellent tutorial… was able to create a great stack of photos for a client’s website. Worked wonderfully. Fun to learn new things.

  • Andy

    Hey, super tutorial! :)

    I have a problem, It will load the caurina and all the codes, but I get this error message:

    1120: Access of undefined property photo1.

  • ponkye

    will this work with AS2, i’m interesting but my project is in AS2

  • bendLight

    Hey,

    This is very cool. Any thoughts on converting this to be Lightroom compatible to use in their web module slideshow services? It would be a very cool theme to use as a slideshow if it was also customizable.

    I would definitely pay to have a slideshow flash template like this one. Currently I am using Autoviewer which is nice and free but this is a cool concept that I think can catch on for LR users.

    Anyway good work.

  • http://www.ntiremedia.com ntiremedia

    nice info about how to handle colorz …….ill surly read your blog on regular basis i am glad that i bumped into your blog

  • Monica

    Very thanks for this tutorial! It’s simple and great!

  • Pingback: You are now listed on FAQPAL()

  • http://twitter.com/samwithans Sam

    Nice Charleston shoutout :)

  • Evan Borden

    Request:

    Is it possible to make it so that the photos rotate automatically, one after another… say 10 seconds each, instead of having to click each photo?

    Let me know! Great tutorial thanks!

  • Pingback: Create an Interactive Stack of Photos | Design Reviver()

  • Pingback: WaggelDaggel » Blog Archive » stack of photos()

  • Valkyr

    Nice tutorial, could you make one ( or link to one ) that uses 2 buttons to do this animation ? I mean that, when you press a button the top one goes to bottom and when you press an other button the bottom one comes back on top.

  • http://www.nuriaayma.com nuria ayma

    hi, thanks for this useful tutorial.

    I’m trying it, but I have to say that I’m not very good in flash and action, neither actionscript.

    my question is:

    where exactly I have to put the step 7 and 8 and how?

    thank you very much!!

  • Nineve

    I loved your tutorial, there are just two things going on that I need to figure out how to fix.

    1. You can select a picture that is not on top and when you click it gets shuffled leaving the one on top still there. This is not major but is there a way to make only the top image click-able?

    2. I’ve followed your directions implicitly, even tried copying directly from your sample, yet when I click on the top image it only goes down one. Meaning it does not go to the back but instead just down one so that I am constantly shuffling just two images. Any idea why or how I can fix it?

    I appreciate your hard work and thank you for sharing it with everyone.

  • http://www.addscrave.com Roxanne

    Wow, I love your tutorial. Thanks a lot for sharing this. A great help for every aspiring web designers.

  • Pingback: ? ???????? ???? 15, 200842 « 3d max()

  • kiera

    i keep getting this code error

    5007: An ActionScript file must have at least one externally visible definition.

    its doing my head in, how do i address it?

  • kiera

    i worked it out…

    i downloaded the wrong tweener… make sure ur downloading the AS3 versionn

  • Jabaruoky

    Congratulations for the tutorial, it’s pretty cool.

    But i have a have a question, i should i do to make the photo up and down instead of going right and left.

  • Pingback: Advanced Authoring » Some posts related to images and galleries()

  • damian

    Ok this maybe a very stupid question, but what or where is the “project directory” in flash?

  • http://www.joyoohairextensions.com wholesale hair extensions

    Chinese virgin hair, Chinese virgin hair, Malaysian virgin hair. While we guarantee our products are 100% human hair, So if you have any demands in buying the hair products, you can contact us and we would like to answer you all the questions till you are satisfied.

  • einsight

    Nice and simple tutorial. I was searching a similar stack photo script but a little more towards http://www.templatesrule.com/web-templates/view-template-3228.html i’m new to development so no idea if using the this method i can produce similar website.