In Tutorials Jun 15, 200850
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.
50 Comments
Jun 15, 2008
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
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
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
Jun 16, 2008
Jun 16, 2008
Jun 16, 2008
Jun 16, 2008
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
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
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
Hope this helps.
@tony3000 – I think Jake is right in what he told you.
Jul 14, 2008
Jul 21, 2008
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
Aug 11, 2008
Sep 15, 2008
Oct 7, 2008
Nov 20, 2008
Dec 13, 2008
Jan 7, 2009
Thanks.MT
Jan 7, 2009
I forgot to give each image an instance name.
Again, awesome tutorial.
Jan 8, 2009
Jan 12, 2009
Jan 26, 2009
Jan 29, 2009
Feb 18, 2009
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
function photoSlideOut(e:Event):void
Total de errores de ActionScript: 1 Errores comunicados: 1
ayuda
Mar 3, 2009
Mar 28, 2009
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
Jun 20, 2009
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
Jul 28, 2009
Aug 6, 2009
In this tutorial, you will learn how to build an interactive stack of photos using Flash….
Aug 7, 2009
Aug 10, 2009
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
Sep 25, 2009
Sep 26, 2009
Nov 5, 2009
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
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
Feb 14, 2010
Feb 15, 2010
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 downloaded the wrong tweener… make sure ur downloading the AS3 versionn
Mar 3, 2010
But i have a have a question, i should i do to make the photo up and down instead of going right and left.
Mar 22, 2010
Oct 11, 2010
Dec 23, 2010
Jul 3, 2011
Leave a Comment