Create a Photo Gallery

by kirupa   | filed under Flash and ActionScript

One thing that I have always been thankful for was the great people who help keep the site's content fresh and engaging. More often than not, I have often been inspired to write a tutorial based on a user's post on the forum. This tutorial is no exception. This tutorial would not be possible without the help of the great moderator sbeener (suprabeener in the old forums). He was more than kind enough to share a more efficient version of a photo gallery that I created, and his version is what you will be duly pleased with at the end of completing this tutorial.

Use your arrow keys or press the green left and right arrows in the following animation to navigate through the photo gallery:

[ use your arrow keys or click on the green arrows to move through the gallery]

You will create something similar to the above animation in a short while.

Creating a Photo Gallery:

1. Create a new movie in Flash MX. Set the width and height to anything you want.
    
2. Now, draw a rectangle the size of the images you will load and make it a movie clip. To convert something into a movie clip, select it and press F8. From the Convert to Symbol Dialog box that appears, select the Movie Clip option and press OK:

[ the convert to symbol dialog box ]

3. Once you have created your movie clip, select the movie clip with your mouse pointer. The Properties panel will display. Give the movie clip the instance name photo:

[ give the mc the name 'photo' in the instance panel ]

4. After you have done that, insert a new layer on your timeline. Right click on the blank keyframe on the new layer and select Actions. The Actions dialog box will appear.
   
   Copy and paste the following code:

//Code written by sbeener (suprabeener) /* i wrote this code, but you can use and abuse it however you like. the methods are defined in the order which they occur to make it easier to understand. */ // variables ------------------------------------------ // put the path to your pics here, include the slashes (ie. "pics/") // leave it blank if they're in the same directory this.pathToPics = "animation/"; // fill this array with your pics this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg"]; this.fadeSpeed = 20; this.pIndex = 0; // MovieClip methods ---------------------------------- // d=direction; should 1 or -1 but can be any number //loads an image automatically when you run animation loadMovie(this.pathToPics+this.pArray[0], _root.photo); MovieClip.prototype.changePhoto = function(d) { // make sure pIndex falls within pArray.length this.pIndex = (this.pIndex+d)%this.pArray.length; if (this.pIndex<0) { this.pIndex += this.pArray.length; } this.onEnterFrame = fadeOut; }; MovieClip.prototype.fadeOut = function() { if (this.photo._alpha>this.fadeSpeed) { this.photo._alpha -= this.fadeSpeed; } else { this.loadPhoto(); } }; MovieClip.prototype.loadPhoto = function() { // specify the movieclip to load images into var p = _root.photo; //------------------------------------------ p._alpha = 0; p.loadMovie(this.pathToPics+this.pArray[this.pIndex]); this.onEnterFrame = loadMeter; }; MovieClip.prototype.loadMeter = function() { var i, l, t; l = this.photo.getBytesLoaded(); t = this.photo.getBytesTotal(); if (t>0 && t == l) { this.onEnterFrame = fadeIn; } else { trace(l/t); } }; MovieClip.prototype.fadeIn = function() { if (this.photo._alpha<100-this.fadeSpeed) { this.photo._alpha += this.fadeSpeed; } else { this.photo._alpha = 100; this.onEnterFrame = null; } }; // Actions ----------------------------------------- // these aren't necessary, just an example implementation this.onKeyDown = function() { if (Key.getCode() == Key.LEFT) { this.changePhoto(-1); } else if (Key.getCode() == Key.RIGHT) { this.changePhoto(1); } }; Key.addListener(this);

[ add the above lines of code to the empty keyframe ]

5. Would you believe me if I told you that you are done? You are, but to make it work, read on for customizing the photo gallery with your own images, image paths, etc.

Customizing the Photo Gallery Code
Now here comes the relatively simple part of customizing the code to work with your own pictures to make your photo gallery something more meaningful than 10 pictures of wildlife I found over at the National Geographic site. Make sure your Actions dialog box is displayed with the code you pasted and read on!

More than likely, you have your images stored in a certain location on your Web site or on your hard drive that is different from where your Flash animation is stored.

Find the first line of code (it is a variable actually) that says: this.pathToPics. Modify the path set by the aforementioned variable to the folder containing your images. For example, in the version of the code in the tutorial, the images are stored in the animation folder. Therefore, the variables pathToPics equals "animation/". If your images are stored in the SAME directory as your animation, simply make pathToPics equal "" as in:

this.pathToPics = "animation/";

Other examples of how you can modify the code include:

this.pathToPics = "../animation/";
this.pathToPics = "http://www.kirupa.com/pics/";

Now, you get the chance to specify the file name for the images that will be used! Find the line that says this.pArray. Replace all the image names I have written with the images that you will use instead. If you have more images than spaces provided, simply add more image names by adding a comma with the image name in quotation marks.

The code for just two images would be:

this.pArray = ["flash.jpg", "windows.jpg"];

Again, you can have as many or as few images in the photo gallery. The code that sbeener wrote is intelligent enough to count the number of images you specify in the pArray variable and customize the gallery accordingly.

You are done with customizing the code and this tutorial (for the second time). Preview the animation and see how it works. If you are good with ActionScript, you can tweak the code with a few modifications of your own.

Creating the Back and Forward Buttons
You have finished everything except the Back and Forward buttons. While this is optional, it is always nice to provide users a way of navigating your photo gallery without having to use the back and forward keys. To create the back and forward buttons, try the following steps:

1. Draw the arrows or text that you choose to use for the back and forward buttons.
    
2. Select a button and press F8. From the Convert to Symbol dialog box, select Button and press OK. Repeat this step for the other button.
    
3. Right click on the button for "back" and select Actions. Add the following line of code:

on (release) { _root.changePhoto(-1); }

4. Similarly, right click on the button for "forward" and select Actions. Add the following line of code:

on (release) { _root.changePhoto(1); }

Rejoice! You have just completed your photo gallery tutorial (again) with the next and forward buttons.