In Tutorials Jun 15, 200846
Create an Interactive Stack of Photos
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.
46 Comments
Jun 15, 2008
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!
Jun 15, 2008
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
Jun 15, 2008
Brian,
Glad you like it
I fixed the weird behavior that you mentioned. The code snippets and the example file are both updated.
Jun 16, 2008
Very nice tutorial! Good look for next great tutorials.
Jun 16, 2008
Once again you deliver. Thanx!
Jun 16, 2008
Great tutorial thx.
Jun 16, 2008
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?
Jun 16, 2008
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.
Jun 24, 2008
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
Jul 6, 2008
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.
Jul 7, 2008
@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.
Jul 14, 2008
Has anyone been able to make this work in as2 If so please share your code because I have not. Thanks
Jul 21, 2008
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)
Jul 21, 2008
I was doing something stupid. Worked it out though. Sorry guys. Awesome tutorial, thank you very very much.
Aug 11, 2008
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..)
Sep 15, 2008
Thanks you very much ! Great tutorial
Oct 7, 2008
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?
Nov 20, 2008
will this work with CS4?
Dec 13, 2008
Thanks for this. I’m going to try this on my website.
Jan 7, 2009
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
Jan 7, 2009
I’m such a noob.
I forgot to give each image an instance name.
Again, awesome tutorial.
Jan 8, 2009
why doesn’t the example work?????
Jan 12, 2009
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?
Jan 26, 2009
nice tutorial. thanks.
Jan 29, 2009
thanks, is a great tutorial!!! help me a lot!
Feb 18, 2009
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.
Feb 26, 2009
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
Mar 3, 2009
Excellent tutorial… was able to create a great stack of photos for a client’s website. Worked wonderfully. Fun to learn new things.
Mar 28, 2009
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.
May 26, 2009
will this work with AS2, i’m interesting but my project is in AS2
Jun 20, 2009
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.
Jul 9, 2009
nice info about how to handle colorz …….ill surly read your blog on regular basis i am glad that i bumped into your blog
Jul 28, 2009
Very thanks for this tutorial! It’s simple and great!
Aug 6, 2009
Create an Interactive Stack of Photos…
In this tutorial, you will learn how to build an interactive stack of photos using Flash….
Aug 7, 2009
Nice Charleston shoutout
Aug 10, 2009
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!
Aug 22, 2009
[...] Originally posted here: Create an Interactive Stack of Photos | Design Reviver [...]
Sep 25, 2009
[...] Schnüffel, schnüffel [...]
Sep 26, 2009
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.
Nov 5, 2009
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!!
Dec 23, 2009
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.
Dec 29, 2009
Wow, I love your tutorial. Thanks a lot for sharing this. A great help for every aspiring web designers.
Feb 14, 2010
[...] ???????? ????????????? ???? ?????????? [...]
Feb 15, 2010
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?
Feb 15, 2010
i worked it out…
i downloaded the wrong tweener… make sure ur downloading the AS3 versionn
Mar 3, 2010
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.
Leave a Comment