Photo Gallery with transitions(AS 3.0).

     In this tutorial we will make a Photo Gallery.Will use ActionScript 3.0 because we want to leave ActionScript 2.0 in the back.ActionScript 3.0 it’s much cleaner and powerfull.
Our gallery will look like the old Polaroid photos. We will learn how to load external content, how to setup a timer, how to work with transitions and other things.
The finally gallery will look like this:

First let’s build the graphical part.

• 1.Go to File – New select Flash file(ActionScript 3.0) and click Ok.
• 2.Add three new layers (Insert – Timeline – Layer).
• 3.Now we should have four layers. Select the first layer from the bottom double click on his name and rename it to frame. Select the next layer name it bg, select the next layer name it display and finally set the name of the last layer to actions and lock it.

Your timeline should look like this:

• 4.In the Properties panel change the color of the stage to black.
• 5.Select the frame layer, pick the Rectangle tool set it’s stroke to none and the fill to white and draw a rectangle with the width = 350 and height = 350 (a square).Set it’s X value to 100 and Y to 25.This will put the rectangle in the middle of the stage.
• 6. Lock the frame layer, select the bg layer and with the rectangle tool (stroke: none and fill: black) draw a rectangle with width = 320 and height = 240 set it’s position to X= 115 and Y = 52.
• 7.Lock the bg layer, select the display layer and with the rectangle tool (stroke: none and fill: black) draw a rectangle with width = 320 and height = 240 set it’s position to X= 115 and Y = 52.With the rectangle selected hit F8 to convert it to a symbol. Set it’s name to frame, it’s type to MovieClip and the registration point in the top left like and hit ok.In the Properties Inspector set its instance name to frame.

This is how it must look:

Ok the graphical part is over.

     Now let’s setup the structure of our folders.
On your hard drive make a folder name it Polaroid_gallery ( or else it’s your choice).In this folder make another one and name it photos. In this folder you will put your photos , the photos must have 320 width and 240 height.
Back in the main folder (Polaroid_gallery) right click New – Text Document name this file photosNumber.txt. Double click on this file to open it and type : totalPics = 5.
5 in my case it’s the number of photos that I have in the photos folder, if you have more photos type the number of your photos.

Back in the Flash save our file in the Polaroid_gallery name it how you want I name it polaroid_gallery.fla.
Let’s recap. In the Polaroid_gallery folder you must have:

• a file named photosNumber.txt
• a folder named photos
• the fla file named polaroid_gallery.fla

If everything is ok let’s continue with the ActionScript 3.0 code.

- Go to frame 1 in actions layer hit F9 to open the ActionScript panel copy the next code and paste it in the panel.

1. import fl.transitions.*;
2. import fl.transitions.easing.*;
3. var photoCounter:int = 1;
4. var photoNumber:int;
5. var photoTimer:Timer;
6. var photoNumberRequest:URLRequest = new URLRequest("photosNumber.txt");
7. var photoNumberLoader:URLLoader = new URLLoader(photoNumberRequest);
8. photoNumberLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
9. photoNumberLoader.addEventListener(Event.COMPLETE,photoNumberComplete);
10. function photoNumberComplete(event:Event):void
{
photoNumber = int(event.target.data.totalPics);
photoTimer = new Timer(4000);
photoTimer.start();
photoTimer.addEventListener(TimerEvent.TIMER,showPhoto);
}
11. function showPhoto(event:TimerEvent):void
{
var photoLoader:Loader = new Loader();
photoLoader.load(new URLRequest("photos/Romania_" +photoCounter+ ".png"));
photoLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadComplete);
photoCounter += 1;
if (photoCounter >photoNumber)
{
photoCounter = 1;
}
}
12. function loadComplete(event:Event):void
{
var photo:Sprite = new Sprite();
addChild(photo);
photo.addChild(event.target.content);
frame.addChild(photo);
if (photoCounter%2 ==0)
{
TransitionManager.start(frame, {type:Iris, direction:Transition.IN, duration:2,easing:Strong.easeOut, startPoint:5, shape:Iris.SQUARE});
}
else
{
TransitionManager.start(frame,{type:Fly, direction:Transition.OUT, duration:3,easing:Strong.easeInOut, startPoint:3});
}
}

-Remove the numbers before lines hit Ctrl + Enter to test your movie and Voila your new Gallery. Great .Now a little bit of ActionScript 3.0.
In line 1 and 2 we imported some classes we will need them in our code.
Next we setup a variable that will keep count of current photo (photoCounter), one that will hold the total numbers of pictures (photoNumber) and a variable for our Timer(photoTimer).

In lines 6,7,8,9 we request the data(URLRequest("photosNumber.txt")) , load the data (
URLLoader(photoNumberRequest)) and add a COMPLETE event that will fire when our data is complete loaded.

In line 10 we handle our Event.COMPLETE. After the data is complete loaded we assign
the number of picture from the external file (photosNumber.txt) to our photoNumber variable. Setup a timer witch fires every 4 seconds and loops forever (or not if you close the swf it stops) , start the timer and add a TIMER event.

In line 11 we handle the TIMER event. In this function we setup a loader that will load our photos (photoLoader), request the file (URLRequest("photos/Romania_" +photoCounter+ ".png") and add another Event.COMPLETE for our loader.
The "photos/Romania_" +photoCounter+ ".png" represent the path to our photos.
In the same function we increase our photoCounter by 1, this variable will be increased every 4 seconds (the interval on witch fires our timer).And we setup a if condition that will reset our photoCounter to 1 if photoCounter becomes equal to photoNumber variable.

In line 12 we display our loaded photos to stage and add a little transitions to them.

And that it’s all.


I hope that I was clear enough.
If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.I will see you on next tutorial.
You can download the source file from here:Photo Gallery with transitions