Create an Interactive Stack of Photos

June 15, 2008 • By

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