In Tutorials Jun 15, 200815
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.
15 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..)
Leave a Comment