Making the ultimate dynamic image gallery in Flash 8

In this Flash 8 lesson explained in extreme detail, I will teach you how to make a powerful image gallery. Before proceeding, please note that this lesson is made for intermediate and advanced Flash users — the ActionScript code behind this image gallery is nearly 250 lines long. This image gallery will have the following characteristics:

• It will be dynamic, meaning that the image-related data (the location of images — the file paths, and the descriptions) will be loaded from an external XML file.
• The dynamic nature of the gallery will allow you to update it just by changing the external XML file and re-upload it to the server along with the new images, without having to modify the SWF movie at all. Once the SWF is finished and ready, you don't have to touch it any more.
• The gallery can feature an unlimited number of images.
• The image gallery will feature a menu which will enable the users to select a particular section and have the related thumbnails displayed.
• The menu will be created dynamically (on the fly) via ActionScript, making it expandable. It can store as many sections as you like.
• The menu will be scrollable, with a nice easing effect added to it.
• Every thumbnail section and every individual image will have its own textual description.
• Every thumbnail will have its own preloader, as well as every image.
• Once a user clicks on a thumbnail, the external JPEG image will be loaded (a percentage preloader will be used to show the downloading progress), and once it is fully loaded, it will show up with an alpha fade-in effect.
• By clicking on the loaded image, the user will go back to the thumbnail section.
• The image gallery is extremely small in filesize (the SWF itself weighs less than 30 KB), because all the JPEG images will be stored externally.
• Last but not least, the gallery works in all major browsers.

View the image gallery in action. You can also click on the screenshot below to see it.

Overview

Before starting to buid your image gallery, there is a little planning to be done, because this is in fact a small application. Let's see the elements that make up this gallery:

I. The elements of the SWF movie

1. The gallery menu. This is the interface which will enable the user to browse through the galleries. It will be made of buttons dynamically pulled out from the Library and then nested inside an empty movie clip. The menu will have two buttons, which will make possible for the user to scroll through the menu, up and down. A mask will be made inside this menu, to limit its visible area. You must do this because if you are going to have many galleries (let's say 40, 50 or even more), their respective buttons cannot be all over your movie — that would look bad.
2. The thumbnail MovieClip. This is a movieclip symbol stored inside the Library, into which a single thumbnail (small image) will be loaded. It contains:
   • a white background, just to make it nicer, and to be able to add a drop shadow effect to it later,
   • an empty MovieClip inside which the external JPEG thumbnail will be loaded and
   • a dynamic text field which will serve to show the preloader (a simple percentage preloader).
3. The big image holder MovieClip. This MovieClip symbol will also be stored in the Library and will be pulled out of it dynamically, via ActionScript. It is nearly the same as the thumbnail MovieClip, except bigger in size. It contains the same three elements as the one above:
   • a white background,
   • an empty MovieClip inside which the big external JPEG image will be loaded and
   • a dynamic text field for the preloader.
4. A placeholder for thumbnails and big images. This is an empty MovieClip, placed directly on the stage, which will have two empty MovieClips created inside it at runtime (meaning while your SWF is running), like this:
   • When the user clicks on a gallery in the menu, an empty MovieClip will be created inside the placeholder. This MovieClip is going to receive several copies of the thumbnail MovieClip attached to it, depending on the number of images in the gallery that the user has selected.
   • When the user clicks on a thumbnail, a new empty MovieClip will be created inside the placeholder, which will have the big image holder MovieClip attached to it. The preloading of the big JPEG image will start, and when it reaches 100%, the image will fade in nicely and hide the thumbnails. When the user click on the image, it will disappear and the thumbnails will appear again.
5. A dynamic text field. This is where the descriptions for all the galleries and images will appear.
6. Your website logo. This is just a graphic element, which will appear above the gallery.

II. The XML file

The XML file will store all the data related to the images:

• The name of each gallery. This name will appear as the label on each gallery button in the menu. Also, this same name is the name of the folder (directory, file folder, as it is also called) inside which that particular gallery will be stored on your web server.
• The description of each gallery. This is the text that will appear in the dynamic text field when the user clicks on a gallery button and the thumbnails for it are shown.
• The description of each image. This is the text that will show up in the same dynamic field mentioned above when a big image has been loaded.

III. The images and the thumbnails

All the images will have to be stored according to an exact hierarchy and precise naming rules. Each gallery will be placed in a folder which will have the same name as the title of the gallery as it appears in the XML file. Inside each folder, the images will have to be named as 1.jpg, 2.jpg, 3.jpg and so on. Furthermore, each gallery folder will have a subfolder inside it, called thumbs, where the thumbnails for the gallery will be stored. The thumbnails will have the same file names as their bigger counterparts (1.jpg, 2.jpg, etc). All the galleries will be placed in a single folder, named gallery.

You have to abide by this naming/folder hierarchy system if you want your dynamic image gallery to function properly. Once you want to insert new images inside the gallery, the only thing you will have to do is to update the XML file, create new folders according to the gallery names inside this XML file, and place the images and their respective thumbs inside them. You will then upload the new images and the XML file to your web server and they will automatically appear inside the menu.

Sounds great — a fully automated image gallery system. I will start by showing you how to create the SWF movie, after that you will download the XML file and modify it according to your needs, make all the necessary folders and place the images and thumbnails inside them, and last but not least (in fact, the most important) you will create the ActionScript code that runs the whole thing. Let's get started!

Top of page

1. Setting up your document

1.1. Open a new Flash document (File > New > Flash Document).

1.2. Select Modify > Document. Set the dimensions of your Flash movie to 760 by 540 pixels and set the speed (frame rate) to 30 fps. Click OK.

1.3. Save your document in a separate folder — make a new folder just for this lesson. A lot of files are going to be needed for the creation of the image gallery, so it is a wise thing to keep them all in one place, instead of putting them together with any other Flash files that you may be working on.

NOTE Just a little bit about the dimensions of your document here: The document's size (width and height) is just a suggestion, like all of the dimensions and element positioning (menu, main images, thumbnails, etc) involved in this lesson. I recommend that you use my dimensions until the end of the tutorial, so that you can more easily follow my instructions. Later, once that you grasp the way the gallery works, you can change the dimensions and the general layout of the gallery to suit your needs.

Top of page

2. Creating the gallery menu

2.1. Call the first layer in your document gallery menu.

2.2. Select Insert > New Symbol. In the window that appears, do the following:

• Select Movie clip as type,
• enter empty movie clip as the name of the new symbol
• click OK.

2.3. You will now find yourself working inside the new MovieClip symbol. Since you need an empty MovieClip, don't draw anything here, just click the Scene 1 link above the timeline.

Your newly made empty movie clip symbol is now stored inside the Library. You can access the Library by selecting Window > Library. Keep the Library window open, because you are going to need it frequently, especially to place instances of the empty movie clip symbol on the stage at various points during this lesson.

Now you are going to create the main MovieClip for the image gallery menu. The first thing that you're going to make is a mask for the menu buttons.

2.4. Select the Rectangle tool (R). In the Colors section of the Tools panel, block the stroke color, because you won't need it. Do this by selecting the stroke color first — click on the little pencil icon to do it (see 1 in the image below). Next, click on the No color button (see 2 in the image below). You can choose any fill color that you like.

Also, turn off the Object Drawing and Snap to Objects options (both icons are shown below — you can find them at the bottom of the Tools panel while the Rectangle tool is still selected).

2.5. Click and start dragging your mouse to draw a rectangle. Make it any size you want.

2.6. Select the rectangle by clicking on it with the Selection tool (V). Go to the left side of the Property inspector and find the width and height options (W and H, respectively) for the shape. Enter 200 pixels for the width and 390 pixels for height.

2.7. While the rectangle is still selected, select Modify > Convert to Symbol. Make the following choices:

• Select Movie clip as type of symbol.
• Name the symbol menu holder.
• Select the upper left registration point for the new symbol (see image below).
• Click OK.

This last point is very important. You will do the same thing for every single symbol that you are going to create in this lesson. This is done in order to facilitate the positioning and resizing of elements on the stage via ActionScript (dynamically) later.

If you had made some other choice for the registration point, you would have had to know and use the width and height for each symbol to be able to position them properly. By selecting the upper left corner for the registration point, the positioning is pretty straightforward and there is no fuss at all.

2.8. Double-click on the newly made menu holder MovieClip on the stage (using the Selection tool) to enter inside it. If you take a look above the stage, you'll see that Flash nicely informs you that you are working inside the menu holder MovieClip now.

2.9. The rectangle vector shape inside the movie clip should be selected by default. If this isn't the case, click on it with the Selection tool (V) to select it.

2.10. Select Modify > Convert to Symbol. Once again, select Movie clip as type, choose the upper left corner for the registration point, call it menu mask and click OK.

2.11. The new MovieClip will be selected by default immediately after you have clicked the OK button in the previous step. Now go to the Property inspector and give an Instance name to this MovieClip: call it galleryMask_mc.

2.12. Lock the current layer and call it mask. Create a new layer and call it placeholder. Remember that all of this is done inside the menu holder movie clip — you are still inside it.

2.13. Go to the Library (Window > Library), click and drag an instance of the empty movie clip symbol onto the stage, inside the placeholder layer that you created a moment ago.

This movie clip has no graphical content, and so it is represented by its registration point only. This is the small circle with the cross inside it that showed up once you dragged the movie clip from the Library onto the stage. If ever in doubt which movie clip you are tinkering with, just look at the Property inspector while it is selected. You can see this in the screenshot below.

2.14. With the instance of the empty movie clip on the stage still selected, open the Align panel by selecting Window > Align. Do this:

• Turn on the Align/Distribute to Stage button (see 1 below).
• Click the Align left edge button (see 2 below).
• Click the Align upper edge button (see 3 below).

The empty movie clip will now be perfectly aligned with the menu holder movie clip's registration point, as you can see.

This is just what you need, since this empty movie clip which you have just positioned will be the placeholder for all the menu buttons. That being said, you must prepare it properly to be able to load the buttons inside it later. Follow the next step to see how :-).

2.15. The empty movie clip must still be selected. Go to the Property inspector and enter the Instance name for this movie clip: call it buttonsHolder_mc.

2.16. Lock the placeholder layer and drag it under the mask layer.

2.17. Right-click on the mask layer and select the Mask option from the menu that pops up (also called the contextual menu). The mask layer will instantly turn into a mask, masking the placeholder layer beneath it.

2.18. Click on the Scene 1 link above the layers to go back to the main timeline.

2.19. The menu holder movie clip will be selected by default, which you can see in the Property inspector. Go right there and give at an Instance name: call it galleryMenu_mc.

You have probably noticed that this movie clip is almost invisible — it is represented by its registration point (see1 in the screenshot below) and central point (see 2) only. This is because the mask inside it isn't visible, which is normal.

Fine — the menu is pretty much ready now, it can receive the buttons. But you have to actually make a button that is going to be pulled out of the Library at runtime (while the Flash SWF movie is running, that is) and placed inside the menu, as many times as there will be sections inside your gallery.

Go over to the next page to see how to make the menu button.