Flash Explained

Learn Flash easily.

Making the ultimate dynamic image gallery in Flash 8 – part 1 of 2

November 20th, 2008 | Author: Luka | Category: ActionScript

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.

An example of the image gallery. Click it to see it in action!


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.

Modifying the document's dimensions and speed.

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.

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.

Changing the label of the first layer.

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.

Creating a new movie clip symbol.

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.

Returning to the main scene.

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.

The Library with the first movie clip symbol that was made, stored inside it.

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.

Blocking the Outline color.

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).

Turning off the additional options for the Rectangle tool.

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

A simple rectangle.

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.

Resizing the rectangle numerically.

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.

The convert to symbol window.

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.

Inside the new movie clip.

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.

An instance name was assigned to the rectangular mask movie clip.

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.

Making a new layer inside the menu holder movie clip.

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.

The empty movie clip on the stage.

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).

Using the Align panel for exact positioning of the placeholder movie clip.

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

The empty movie clip is aligned with the host movie clip's registration point.

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.

The Instance name of the gallery buttons placeholder movie clip.

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

Switching the placement of the layers.

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.

The mask layer masking the layer below it.

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

Exiting the movie clip symbol 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.

The Instance name of the movie clip which will hold the galleries menu.

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.

The registration and central point of a movie clip.

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.

Top of page

3. Creating the menu button and setting it up for use at runtime

3.1 You should be on the main timeline now. Lock the gallery menu layer and create a new layer. You don’t have to gave any specific name to this new layer at all, because it will serve as a temporary layer only, to create the menu button specimen, after which you will remove it.

A temporary layer was just created.

3.2 Select the Rectangle tool (R). The settings for this tool should have remained unchanged from the previous use of it: the stroke color (outline) should be blocked, the Object Drawing and Snap to Object options turned off.

You can select any color you like for the fill. I chose a nice hue of blue, #00789F. Now draw a 200 by 20 pixel rectangle anywhere on the stage. You can draw any rectangle at first and then set these exact dimensions in the Property inspector after.

A precisely drawn elongated rectangle on the stage.

These exact dimensions are important, especially the width, because the mask that you made in the previous section is also 200 pixels wide. They have to match (or the mask can eventually be a little wider than the button) if you want your menu to look professionally designed — clean and sharp.

3.3 Select the rectangle and choose Modify > Convert to Symbol. Select Movie clip as type, call it gallery section button and click OK.

A small note here: the movie clip that you just made is called gallery section button, although it is a movie clip. Don’t let that confuse you. I chose to give it such a name because it will in fact serve as a button. Why a movie clip then? Because a movie clip symbol is far more versatile and usable than a button — its possibilities of creation and manipulation are far greater than those of a button symbol. And even if in this particular project a button symbol would maybe serve as well as a movie clip for all purposes, I have just acquired a habit of making movie clips instead of buttons :-).

3.4 Choose the Selection tool (V) and double-click on the gallery section button movie clip on the stage, to enter inside it.

3.5 Call the movie clip’s first layer bkg (because this will be the button’s background).

The first layer inside the button movie clip.

3.6 Right-click on frame 2 in this layer and select Insert Keyframe from the contextual menu.

Inserting a new keyframe into a layer.

3.7 In the newly made keyframe, the rectangle will automatically be selected. Just change its color to some other of your choice — I used #7C3F52. Do this by clicking on the fill color square in the Colors section of the Tools panel, all the while the rectangle is selected.

Changing the fill color for a shape.

Why was this done? Because you need to have a rollover effect for your menu to make it more user-friendly and easier to navigate. So that’s why you have to have two keyframes, with the same rectangle inside, but differently colored. You will enable this rollover visual change via ActionScript later.

3.8 Lock the bkg layer and make a new layer above it and call it label.

A second layer, for the button's label, has just been made.

This new layer will automatically have the same timeline duration as the one below it (2 frames long), which is fine, because the label (the text that will appear on the button) must be visible in both states — the initial one as well as the rollover.

3.9 Select the Text tool (T). In the Property inspector, do the following choices and tweaks:

  1. Select Dynamic Text.
  2. Select a font that you like.
  3. Select 14 as font size, or bigger if necessary. The important thing is that the text field’s height should approximately match the height of the rectangular background. You’ll see that once you make the actual text field, so you may need to re-adjust this value as necessary.
  4. Select white for the text color — this choice will make the button labels visible in both states — initial and rollover.
  5. Select the left alignment for the text field. It looks well, unlike the central alignment which would look awkward on this kind of menu and would also make things more difficult to read.
  6. Select Anti-alias for readability in the rendering menu.
  7. Make sure that the Selectable option stays turned off. If you turn it on, your menu buttons will suck royally and possibly won’t be clickable at all.
  8. Make sure that Single line is selected. Multiline doesn’t make any sense for a text field inside a menu button, right?

Selecting the options for the Text tool before using it.

3.10 Click and drag on the stage with the Text tool to create a dynamic text field. Create it over the button’s backround rectangle, so that the dimensions of the two approximately match. Hit Esc when finished and you’ll exit the text field and see a blue border appear around it.

Creating a dynamic text field in Flash.

3.11 Now go over to the Property inspector and type in the Instance name for your dynamic text field: call it sectionTitle_txt.

The Instance name of the dynamic text field.

3.12 On the right side of the same panel, click the Embed button.

The emebed option for dynamic text fields.

The Character Embedding window will open up. Select multiple character groups by Shift-clicking them: choose the Uppercase, Lowercase, Numerals and Punctuation options. Click OK.

Embedding characters in a dynamic textfield.

Embedding the characters in the dynamic text field will ensure the continuity of design accross different platforms and operating systems. No matter if a user has your menu font of choice installed or not, he/she will see the exact same font, thanks to the embed option.

The four groups of characters that you have embedded in your dynamic text field will cover 99% percent of possible gallery names. Of course, you may choose to add any additional special and exotic characters if you wish so. Bear in mind that the embedding of these characters will add about 20-30 KB to your final SWF file.

3.13 Lock the label layer. Make a new layer and call it actions. You can lock this layer also, since ActionScript code can be placed inside it while it is locked too.

Click on the actions layer’s first frame to select it.

Adding the layer for ActionScript inside the gallery section button movie clip.

3.14 Open up the Actions panel by selecting Window > Actions. Enter the following code inside it:


This simple action prevents the playhead from going forward, as any animation in Flash naturally does. You will create programming code later that will move the playhead to the next frame while the user is over a particular button with his/her mouse, to create the rollover effect I told you about just a few steps before.

3.15 Fine! The button is finished now! Click on the Scene 1 link to go back to the main scene.

Going back to the root timeline.

3.16 Delete the temporary layer inside which the button was created (Layer 2). This will delete the button from the stage too. You should have only the gallery menu layer on the main scene now. However, the gallery section button is stored inside the Library.

The temporary layer was removed.

3.17 Go to the Library (Window > Library). Right-click on the gallery section button movie clip inside the Library and select the Linkage option from the contextual menu.

Selecting the Linkage option for a movie clip symbol inside the Library.

3.18 In the Linkage Properties window that appears, check the Export for ActionScript option. The Export in first frame option will automatically become checked too. You can leave it like that, it’s fine.

As for the Identifier option, you can also leave it at the default value, which is the name of the movie clip symbol itself — gallery section button in this case. Click OK.


The Identifier name will serve to pull the button dynamically from the Library and place it inside the menu that you have created on the previous page. This is very, very practical, because you will change just the images and the XML file once the SWF is finished.

This makes possible for dynamic menu creation, also thanks to the dynamic text field inside the button — each button will have its label match the section of the gallery it represents. Why create every single button manually, re-open the FLA, re-export it as a SWF when you can solve this with ActionScript and have the menu created in a split second!

You will now make the remaining elements, so that your photo galleries menu is complete. Namely, you will make two buttons for scrolling through the menu and a title that tells the users what’s the menu about. Before that, you’ll just position the galleryMenu_mc movie clip.

Save your document before proceeding to the next section of this lesson, where the creation of menu navigation buttons is explained.

Top of page

4. Making the menu navigation buttons

4.1 You have to select the galleryMenu_mc movie clip to be able to position it. Since this movie clip is almost invisible, it isn’t as easily selectable as any othe movie clip might be. Here’s how you do it (follow the pictures below the list):

  1. Unlock the gallery menu layer.
  2. Click on the layer’s first frame to select it.
  3. The Property inspector tells you that a frame has been selected.
  4. Once you select a frame, all the content inside it is selected too. Because of this, the movie clip you are looking for will appear. Click on the movie clip once with the Selection tool (V) to select it (you must click on its registration point since no other content of this symbol is visible).
  5. The movie clip is selected, which is indicated in the Property inspector.

The procedure of selecting a movie clip symbol with low visibility.

4.2 Enter the following values for the movie clip’s coordinates (inside the Property inspector): 10 for X and 99 for Y.

The movie clip's position as seen in the Property inspector.

Fine. Let me show you now how to create a couple of sleek navigational buttons.

4.3 First, make a line that will separate the menu buttons from the menu navigation. Select the Line tool (N). In the Property inspector, select black for the line color and hairline for the line thickness.

Defining the type of line for drawing in Flash.

4.4 Hold down Shift on your keyboard, click with your mouse somewhere above the galleryMenu_mc movie clip and draw a horizontal line. Holding Shift will enable you to make a perfect horizontal line. You can select the line later and position it via the Property inspector. Also, make it as wide as the menu, to have a more coherent and professional design.

Drawing a very thin line and adjusting its dimensions.

4.5 Select the Rectangle tool (R). Go to the Options part of the Tools panel and make sure that both the Object Drawing and Snap to Objects options are turned off (see 1 and 2 on the screenshot below).

Tweaking the options for the Rectangle tool in Flash.

Next, click on the Set Corner Radius button (see 3 above). In the Rectangle settings window that will show up, enter 7 as the corner radius value, then click OK. This will enable you to draw rectangles with smooth, rounded corners.

4.6 Go over to the Color Mixer panel (to access it, select Window > Color Mixer, although it is probably open already, by default). Block the stroke color and make a nice bluish-turquoise linear gradient for the fill color, like this:

  1. Click the small pencil icon.
  2. Click the little square next to it and select the No Color option (the white square with the red diagonal line).
  3. Click the paint bucket icon to select the fill color.
  4. Select the Linear option in the Type menu.
  5. Click on the left color (the small square) in the gradient stripe to select it.
  6. Enter the hexadecimal code for this color: I chose #00789F.
  7. Repeat the two previous steps for the right-side color: select it and enter #81E6FE as its code.

Creating a linear gradient for the fill color in the Color Mixer panel in Flash.

4.7 Hold Shift (to draw a square and not a rectangle), click on the stage and draw a 29 by 29 pixel square.

A gradient-filled square with rounded corners.

This square looks nice, but since it is a navigational element, I think that it would look much better if the gradient spreads from top to bottom instead from left to right. Follow the next step to see how to do this simple modification.

4.8 Select the Gradient Transform Tool (F). Turn on the Snap to Objects option in the Tools panel. Now, rotate the graident like this:

  1. Click on the square that you drew in the previous step to select it. The controls for gradient modification will appear.
  2. Click the circle with the small black arrow in it and start dragging your mouse counter-clockwise.
  3. Once you reach a 90-degree turn, release your mouse button. There!

Rotating a linear gradient fill in Flash.

4.9 Select the Selection tool (V) and turn off the Snap to Objects option. Click on the gradient-filled square to select it.

4.10 Select Modify > Convert to Symbol to make a symbol out of this square. This time, select Button as type (not Movie clip), call it scroll menu down and click OK.

Creating a button symbol.

4.11 Double-click on the newly made scroll menu down button on the stage to enter inside it. Once inside the button’s timeline, lock the first layer and call it bkg. Make a new layer above it and call it arrow.

Adding a layer inside the button symbol.

4.12 Draw a white arrow that is pointing downwards, inside the arrow layer.

The button with the arrow added to it.

You can do it easily like this (see the sequence of images below):

  1. Using the Rectangle tool (R), draw a square (I made a 19 by 19 pixel square).
  2. Choose the Selection tool (V) and bring your cursor near the square’s upper right corner. A small right angle will appear near your cursor.
  3. Click and drag your mouse toward the square’s center. Once your cursor is near the center, a circle will appear, indicating that it is ready to snap into place.
  4. Release your mouse button and you’ve got yourself a nice triangle.
  5. Select the Free Transform Tool (Q) and rotate the triangle by 45 degrees counter-clockwise. There! You have the arrow for your button now.

Creating a triangle in Flash.

Note that I have used the blue color just to show you how it’s done. You can use any color you want while making the triangle — once you move it over the button’s background, change its color to white.

4.13 Add a third layer inside the button and call it label.

The layer for the label was just added.

4.14 Select the Text tool (T) and change the type of text field to Static Text in the Property inspector. Click somewhere over the button’s background area and type DOWN.

A text label was added to the menu button.

As you can see above, I chose a pixel font for the label (it looks cool). If you do the same, be sure to set the rendering option to Bitmap text, which is the best for pixel and bitmap fonts. Also, most pixel fonts have to be typed with a font size of 8, to render properly and sharply.

4.15 Click the Scene 1 link to go back to the main scene, because the button is complete now.

Exiting a button symbol.

4.16 Assign an Instance name to this button because you’ll need to manipulate it via Actioncript later. Name it menuDown_btn.

The Instance name of a menu button.

Place this button above the thin line, on the right.

The first menu navigation button in its final position.

Now you need to make the second button, for scrolling the menu upwards. This one is going to be easy to do, because you’ll just clone the existing button and make a few modifications.

4.17 Go to the Library. Find the scroll menu down button symbol, right-click on it and select Duplicate from the contextual menu.

Duplicating a symbol in the Library.

In the Duplicate Symbol dialog that appears, enter scroll menu up as the new symbol’s name, leave the other options as they are and click OK.

4.18 Double-click on the newly made scroll menu up button symbol inside the Library to acces its timeline. Once inside, unlock the arrow layer.

Unlocking the layer with the arrow icon.

4.19 Select the triangular arrow shape in this layer. Now select Modify > Transform > Flip Vertical. The arrow will now point upwards, thanks to the flipping you did. Also, Change the static text from DOWN to UP. Remember, these changes will not affect the first button you made, because the duplicated scroll menu up button is an independent symbol, not linked to any other one in any way.

The newly made button for scrolling up the menu.

4.20 Click on the Scene 1 link above the timeline to exit the button’s timeline and to return to the main one.

4.21 Click on the scroll menu up button inside the Library once, hold your mouse button and drag out an instance of it out onto the scene. Place it next to the scroll menu down button, like shown below.

The two menu buttons side by side.

4.22 Select the “UP” button and assign it an Instance name: call it menuUp_btn.

The Instance name of the button that serves to scroll the menu up.

4.23 Add some text near the buttons, so that the users actually know what’s the menu about — don’t leave anyone guessing. Do this with the Text tool (T) set to Static text.

The menu title was just added.

Always think about the user who is the least web-savvy. Creating a user-friendly site with the lowest common denominator in mind will enable you to have a much bigger public and also, the users will want to return to your site because they found it easy to use.

4.24 Lock the gallery menu layer.

Locking the first layer in your document.

That’s it for the menu! You have completed it.

Top of page

5. Creating the image placeholders

5.1 Create a new layer and call it images holder.

A layer that will be host to a placeholder movie clip has been added.

5.2 Drag out an instance of the empty movie clip symbol from the Library into this new layer. As this movie clip is completely devoid of any graphical content, it is shown as a registration point only.

Assign an Instance name for this important movie clip into which all images will be loaded: name it imagesHolder_mc. Position it like this: set its X to 260 and Y to 100.

Positioning and naming the new empty movie clip.

This will place the imagesHolder_mc movie clip close to the menu, on its right, like shown below.

The movie clip which will hold the loaded external images is next to the menu.

When the overal dimensions of the movie are taken, this is a good position. I had a general idea about the gallery’s layout, but I arrived at this final dimensions and positions through the creation process itself. As I said, you can change these dimensions to suit you as you please later, just stick with them now, until you complete this lesson. The same goes for the placement of the elements: the menu doesn’t necessarily have to be on the left, vertically positioned, etc. I just made these choices for this tutorial.

5.3 Make a third layer. You will create two movie clips here that will be present inside the Library only (for dynamic use, like the menu section button that you have made earlier). After they are complete, you will erase them from the stage and assign them identifiers in the Library to be able to use them via ActionScript later.

A third layer has been created.

5.4 Select the Rectangle tool (R), use white for the fill color and black for the stroke color. Select hairline for the line type. Make sure that Stroke hinting is turned on.

The main options of the Rectangle tool.

5.5 Draw a 88×61 pixel rectangle on the stage. This will be the background for gallery thumbnails that will be loaded later.

A small, white-filled rectangle has been drawn.

Again, I chose these dimensions because they suit me for this tutorial. You may chose other dimensions. What is important is that you should create thumbnails with appropriate dimensions in Photoshop (or Fireworks) later. To obtain a nice appearance for your thumbnails, I suggest that you make them a little bit smaller than the rectangular backgound that you have just created. The white background being 88×61 pixels, I decided to make my thumbnails 81×54 pixels.

5.6 Select the rectangle that you just drew (both the outline and the fill). Then select Modify > Convert to Symbol (shortcut key: F8). Select Movie clip as type (be careful not to choose the Button type, as it may have stayed from before), call it thumbnail holder and click OK.

5.7 Double-click on the newly made movie clip to enter it. Lock the first layer and call it bkg. Make a new layer and call it image holder.

Adding a layer for the image holder inside the thumbnail holder movie clip.

5.8 Click and drag out and instance of the empty movie clip from the Library and into the image holder layer. In the Property inspector, give it the Instance name thumbImage_mc and position it so that both its X and Y coordinates are 4. You can see the movie clip below (its registration point), over the rectangle’s upper left corner.

Adding an instance of the empty movie clip symbol inside the thumbnail holder.

5.9 Lock the image holder layer and make a new layer above it and name it text.

A layer for the numerical preloader has been added inside the thumbnail holder movie clip symbol.

This is the layer where you’ll be placing a dynamic text field, so that a numerical (percentage) preloader can be displayed while the thumbnail is loading. Making a preloader for thumbnails is a nice thing: you give your users all the information about loading, even for such small images. This also covers the slow-speed modem users, by telling them how much they must wait before everything is loaded.

5.10 Select the Text tool (T). Set its properties like this:

  1. Use Dynamic Text, which is understandable, since this text field will show the preloading process via some ActionScript code.
  2. Select the same font type that you did before, to have a coherent design for your gallery.
  3. Select an appropriate font size — I chose 14 for the button labels before so I did the same here.
  4. Select black as the color, to be highly visible against the thumbnail holder’s white background.
  5. Select left text alignment.
  6. Choose Anti-alias for readability.
  7. Like in most cases in this tutorial, make sure that the Selectable option stays turned off.
  8. The Single line option should be used for this text field.

Selecting the options for the dynamic text field.

5.11 Click and drag your mouse to make a text field. Press Esc on your keyboard to exit the text field edit mode. Go to the Property inspector and give your text field an Instance name: call it percent_txt. Position it in the middle of your thumbnail holder movie clip.


Now, click the Embed button (it’s on the right side of the Property inspector when the text field is selected). Do the following:

  1. Select the Numeral option (you need all the numbers, since this is a percentage preloader). See 1 in the scrrenshot below.
  2. Click inside the input field below the Include these characters text and type the percentage sign (%) inside it (see 2 in the screenshot below).
  3. Click OK.

Embedding characters in a dynamic text field in Flash.

Having the characters of the specific font you selected embedded inside your text field assures the coherence of your design and makes sure that all users will see the same thing.

5.12 Lock the text layer and click on the Scene 1 link to return to the main scene.

Exiting the thumbnail holder movie clip after all the work inside it has been done.

5.13 Erase the thumbnail holder movie clip from the scene.

5.14 Go over to the Library and find the thumbnail holder movie clip inside it. Right-click on it and select the Linkage option. Check the Export for ActionScript option (this is what enables you to pull out the movie clip from the Library dynamically). The Export in first frame option will automatically become checked. Leave the Identifier as it is: thumbnail holder. Click OK.

Assigning a linkage identifier to a movie clip symbol.

There! Your thumbnail holder movie clip symbol is now ready to be used by ActionScript. Specifically, you will use the attachMovie() method in your code later to pull this symbol from the Library and place it on the stage.

Now that the thumbnail holder is complete, you will create a similar but slightly different holder for the images — the big ones that will be loaded as a user clicks on a thumbnail. You will follow the same procedure as you did for the thumbnail holder movie clip.

5.15 Select the Rectangle tool (R). Draw a 475×317 pixel rectangle using the same options that you did in step 5.4.

A big white rectangle with a black border.

5.16 Select the rectangle (both its fill and outline) and press F8 (or select Modify > Convert to Symbol) to convert it into a symbol. Select Movie clip as type, call it big image holder and click OK.

5.17 Double-click on the big image holder movie clip on the stage to enter inside it. Call the first layer bkg and lock it. Make a new layer above it and call it image holder.

Stacking layers inside the big image holder movie clip symbol.

5.18 Click and drag out an instance of the empty movie clip symbol out of the Library and into the new layer (image holder) that you made in the previous step. Make the following adjustements:

  1. Give the movie clip an Instance name: call it imageHolder_mc.
  2. Make both the X and Y coordinates of the movie clip equal 4.

The empty movie clip is represented by its registration point, since it contains no graphics at all (which is normal, because it will be used to load external JPEG images). I have marked it with a red arrow in the screenshot below so that you can more easily see it.

The holder movie clip for the JPG images that will be loaded later.

This movie clip is placed near the background rectangle’s upper left corner. This is a fine position for the JPEG image that will be loaded — its upper left corner will cooincide with the registration point of empty movie clip. You could reposition it later with ActionScript if you want, but I think there is no need to do that. This position is just fine.

5.19 Lock the image holder layer and make a new one and call it text. You will place a dynamic text field for the preloader here, just like you did for the thumbnail holder.

Adding a layer for the preloader for the big JPEG image.

5.20 Select the Text tool (T) and choose the same options as you did with it in step 5.10., change only the font size — increase it more than twice. I chose 30.

Text tool options in the Property inspector in Flash.

5.21 Click and drag to create a text field. Place it over the middle of the big rectangle. It should be large enough for three numbers and the percentage sign to show inside it. Press Esc to exit the text field. The Instance name for this text field can be the same as it was for the thumbnail holder (percent_txt), since these are two different movie clips and there will be no conflicts.

A dynamic text field with its Instance name.

You need to embed the appropriate characters in this text field too:

  1. Click the Embed button in Property inspector.
  2. Select the Numerals option and insert the % character where appropriate, just like you did in step 5.11.
  3. Click OK.

5.22 Lock the text layer and click on the Scene 1 link inside this movie clip to exit it. Once on the main stage, erase this movie clip from it.

5.23 Find the big image holder movie clip inside the Library and right-click on it, then select Linkage from the context menu. Click the Export for ActionScript option to check it, leave the Identifier as big image holder and click OK.

Save your work now if you haven’t already done so! Make this a habit, but especially in long projects like this one. Proceed to the next section to see how to create a text field where gallery and image descriptions will appear.

Top of page

6. Creating a text field for gallery and image descriptions

6.1 You should be on the main scene (timeline) now. Call the current layer (the one which you used to create the image placeholders) description text.

Adding a third layer to the main scene.

6.2 Select the Text tool (T). This time, you will select different options than you did for the percentage preloaders inside the image placeholders. Select:

  1. Dynamic text, of course.
  2. Choose a font that is readable. Avoid exotic fonts.
  3. Choose a size that is suitable for reading. Font sizes 11 or 12 work just fine.
  4. I suggest that you select black for the color of your text, to have a good contrast with the white background and make the text easy to read.
  5. Select left alignment. You may also select the Justify option. Avoid right or central alignment – this is never used in a “normal” text — that is, text that isn’t a title or a link, but a standard paragraph.
  6. Select Anti-alias for readability (you will have to embed the characters because of this later).
  7. You can either turn on or off the Selectable option — this is entirely up to you, whether you’ll enable your users to select the description text or not.
  8. Make sure to choose the Multiline option, as your descriptions may be several lines long, you never know, right? Better to make sure :-).

Property inspector set for the Text tool.

6.3 Click on the stage and drag your mouse to create a text field. Hit Esc to exit the text field editing mode. Your text field’s dimensions should be about 475×100 pixels. Also, pay attention to its position: try to align it with the image placeholder and think about how much space will take an image once it’s loaded. In the screenshot below you can see the position and dimensions of the text field.

The big dynamic text field on the stage.

6.4 Assign an Instance name to the text field to be able to manipulate it later via ActionScript: call it desc_txt.

The Instance name for the description text field.

6.5 Click the Embed button while the text field is selected to include the necessary characters in it and have nice, readable descriptions which are going to be nicely rendered: select the Basic Latin category and click OK.

Embedding the basic set of common characters in a text field.

The last (yes, the last one, indeed 🙂 thing that you need to create in this document is your logo. After that, the things that remain to be done are the external XML file, the folders with their respective photos and thumbnails and lastly, the magnificent ActionScript code that will make possible for the whole thing to work.

Top of page

7. Making the logo

7.1 Lock the description text layer and make a new layer and call it logo.

The fourth layer has been added to the main scene.

7.2 Now, this is just a suggestion fo the logo. You can make any kind of logo/header that you like, but I recommend that you follow my proposals here, just to be able to follow this tutorial more easily.

Select the Rectangle tool (R) and draw a 700 by 40 pixels rectangle. Place it above the gallery menu. I have also drawn a thin white line through the lower part of the rectangle and changed the fill color of the lower part.

The background for the logo.

7.3 Select the Text tool (T) and switch the type of the text field to Static text. Click and type anything you want over the rectangle.

The logo with text.

7.4 Select the whole logo — both the rectangle and the text — and then choose Modify > Convert to Symbol (shortcut key: F8). Select Movie clip as type, call it logo and click OK.

I didn’t make separate layers for the background rectangle and the text inside the logo movie clip, but just selected the whole thing and made a movie clip symbol out of it. It is usually recommended to make separate layers for different elements inside a symbol, but logos aren’t supposed to change much, so I guess a single layer should pose no problems at all. Of course, if you are going to animate an element inside your logo or are planning to make changes later, you should place each element on its own layer.

7.5 While the newly made logo movie clip symbol is selected on the stage, go over to the Property inspector and assign it an Instance name: call it logo_mc. Also, you can set both of its coordinates to 10.

The logo movie clip's Instance name, dimensions and coordinates.

You could have left the logo as it is without having to convert it into a movie clip symbol. But having a movie clip enables you to position it via ActionScript later if needed — you won’t need to do that manually, which is much more practical.

7.6 Lock the logo layer and make a new layer and call it actions.

Adding a layer for ActionScrpt code.

You won’t be entering any ActionScript code here right now. First you have to have an XML file where all the gallery data will be stored, some images and an exact folder hierarchy. So let me show you how to do all that before the coding part comes up. Before that, save your document!

Top of page

8. Creating the XML file with image galleries data

8.1 First, download the XML file that I created for this tutorial.

Before I tell you how this XML file will relate to your image galleries, the folders they are in, etc, I just want to say that I won’t explain the principles of XML and its interaction with Flash here, because I already made a detailed explanation of XML in my Hangman game tutorial, and there is no sense repeating it if it’s already written, right? 🙂

If you’re not familiar with XML, I heartily recommend that you go and read the rules of XML and how Flash loads and parses XML data, before proceeding.

So, the XML file that you have just downloaded looks something like this (I haven’t displayed the whole file here for the sake of brevity and screen real estate):

Tresnjevka. I love the atmosphere on this one.
New York.

Color mayhem!
The sleeping monster.
Let me out!
A barrel on the side of the trail.
Subterranean passage.
A train in snow.

After the XML declaration comes the root node, of course. I chose to call it galleries. Within this, root node, every other bit of data is contained.

Every child node of the root node is called gallery. I chose to give each of these child nodes the same name (gallery) on purpose. You will see later why (when I’ll explain the ActionScript code) — this is related to parsing the XML data.

Each gallery node has two attributes inside it: title and intro. I chose these names because I think they are logical: the first one refers to the title of each gallery and the second one tells the user what’s the gallery about. Remember, you may call your attributes any way you like, as long as you stick to the rules of XML.

The title attribute is very important: its value (between the quotation marks: title="architecture") has a special functionality:

  • It will appear on this particular gallery’s button in the gallery menu — it will become a button label.
  • This value is also the name of the folder inside which the images belonging to this particular gallery will be stored.

So, as you’ll see a little bit later, the values of these attributes will have to be followed strictly, because the application will be made as a case-sensitive one. This means that the name of a folder must be exactly the same as the value of the title attribute for a particular gallery. If, as in the above example, the value of the title attribute for a gallery is essays, the name of the folder must be essays too. It cannot be Essays or ESSAYS.

The value of the attribute intro will be displayed inside the big dynamic text field below the thumbnails when the user clicks on any of the gallery buttons inside the menu. Once he chooses a gallery, the thumbnails will be loaded and displayed and the description text will be shown beneath them.


So, the intro text can be anything you want. And it has no relation with the naming of the folders and galleries. It just describes a particular gallery.

Now, each gallery node has many child nodes, each of which is called image. Again, I chose to give them all the same name on purpose, because this will enable Flash to parse the XML data much more efficiently, and will save you a lot of trouble.

A barrel on the side of the trail.

Between the opening and closing tags of each image node, there is a child node, which is in fact the description of the image. This description will appear in the big text field when the user clicks on a thumbnail and the big image starts to load.

You may have as many galleries as you like, as long as each one is referenced in the XML file, and the corresponding folder exists. This is possible because in this tutorial you will see how to create a menu that can contain a basically limitless number of buttons (each button corresponds to a gallery).

And that would be it concerning the XML file.

Top of page

9. Creating the folder structure for the image gallery

9.1 As the first thing, you should have a separate folder (directory) inside which all the files that make up your gallery will be stored (SWF, HTML, XML, images). For the sake of simplicity, I chose to call this folder root.

As you can see in the screenshot below, both the SWF file (the one you are learning to create in this lesson) and the HTML page inside which it will be embedded should be placed inside this main (root) folder.

9.2 Also, create a new folder inside the root folder and call it gallery.

The root directory of the ultimate image gallery.

I chose to call the page mypage.html and the SWF file imagegallery.swf. You can call them as you like. It is the gallery folder that must have that exact name, because you will be using it in ActionScript later.

Of course, you can choose other file/folder placements, but I strongly recommend that you follow the one explained here, not only because you need it to complete this lesson, but also because I think that this folder hierarchy and structure is really one of the simplest and most easiest to use. Thanks to it, you will be able to modify or update your image gallery in a snap!

9.3 The XML file that you have downloaded earlier must be placed inside the gallery folder. This file should be named gallery.xml.

Also, the gallery folder will contain all the sub-galleries: different sections of your image gallery, which will correspond to the menu buttons.

The gallery folder expanded.

What’s very important, I repeat it again, is that these subfolders must have the same names as they are defined inside the XML file. Otherwise, Flash won’t be able to find the folders if there are differences between them. They must match perfectly, including uppercase and lowercase letters.

Using only lowercase letters for folder names will prevent a lot of possible mistakes. I recommend that you use them only, because you can change them into uppercase letters once these names are loaded in Flash, which you will do later in this lesson.

9.4 Each gallery subfolder (like architecture, essays, etc in the above example) will contain the big images, the ones that are loaded and show up once a user clicks on a thumbnail.

These images should be named 1.jpg, 2.jpg, 3.jpg… In short, each image name is a number.

The big images folder expanded.

The numbers must follow the natural order, i.e. if you happen to dislike an image and want to remove it from the gallery, you should rename the other ones so that the order remains unbroken. For example, look at the screenshot above. If you want to remove the image 3.jpg, you should rename 4.jpg to 3.jpg and 5.jpg to 4.jpg. This is important because of two things:

  1. Flash will load the exact number of images as there are inside the XML file.
  2. The images will be looked for and once found, loaded in a sequential order — the thumbnails, and after that, the corresponding big image, for each thumbnail.

9.5 Here is what you should do to have the thumbnails load and display properly for each gallery:

  1. The thumbnails for each image gallery section must be placed in a folder called thumbs. Each gallery section must have such a folder inside itself.
  2. The number of thumbnail images must match the number of big images.
  3. The thumbnails must have the same file names as their bigger counterparts. So, for example, the thumbnail, for say, image 14.jpg should also be called 14.jpg.

The thumbs folder is expanded.

In this project, the number of thumbnails for each section is limited to 20. It was my choice to make it this way, based on the gallery’s overall layout and concept. You can increase this number if you want, but then you’ll need to rearrange your gallery elements’ position and dimensions to accomodate a higher number of thumbnails. I recommend that you stick with my concept until the end of this tutorial and then experiment later. Of you do need more thumbnails for a particular gallery section, I suggest that you split it into two or more sections. For example, if you have tons of photos from a summer vacation, split them into different sections, like summer vacation 1, summer vacation 2, etc.

The screenshot below shows the maximum number of thumbnails for a single gallery section.

An image gallery section with twenty thumbnails.

A small reminder: for this project, the big images should be resized/cropped to 469×311 pixels. The thumbnails should be made to be 81×54 pixels. Again, I repeat, this suits this particular project you are learning to create right now. Once you get hold of how things function, make any other Flash image gallery system. And post a comment with a link to it, I’d love to see it! 🙂

And this wraps it up for the file/folder hierarchy. The last, and probably one of the most important things, is the ActionScript programming code that powers up the gallery.

Top of page

10. Inserting the ActionScript code

10.1 Go back to your document. Lock the actions layer and click on its first keyframe to select it. As you may already know, a layer does not have to be unlocked for you to be able to insert ActionScript code inside it. In fact, I always lock the layer where my code is contained, to minimize errors — not to insert any graphics in it by mistake.

Selecting the first keyframe in the actions layer.

If possible, always place all of your ActionScript code into one layer, and also, into as few keyframes as you can. The layer which contains your ActionScript code should be made exclusively for that purpose. There is just no sense in placing any graphics or symbols inside it. Also, place the layer with ActionScript either on top of all layers or below all the other layers so that you can find it very quick when you need it. This is a time-tested and a very convenient practice!

10.2 Select Window > Actions to open the Actions panel.

10.3 Insert the following ActionScript code inside the panel:

var menuSpeed:Number = 6;
var menuDown:Button = menuDown_btn;
var menuUp:Button = menuUp_btn;
menuUp._alpha = 0;
menuUp.enabled = false;
var firstLook:Boolean = true;
var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc;
var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc;
galleryMask._height = 391;
var imagesHolder:MovieClip = imagesHolder_mc;
var descText:TextField = desc_txt;
var imagesInGallery:Array = new Array();
var galleryNames:Array = new Array();
var galleryIntros:Array = new Array();
var descriptions:Array = new Array();
var tracker:Number = new Number();
var whatIsLoading:String = new String();
var galleryBtnLeftMargin:Number = 10;
var galleryBtnUpperMargin:Number = 60;
var galleryBtnVSpace:Number = 23;
var thumbMarginX:Number = 96;
var thumbMarginY:Number = 68;
imagesHolder._x = 243;
imagesHolder._y = galleryBtnUpperMargin;
logo_mc._x = logo_mc._y=galleryBtnLeftMargin;
desc_txt._x = 243;
desc_txt._y = 400;
descText.text = "Click on a gallery name on the left to load its thumbnails. Remember, you can click on a thumbnail only when all the thumbnails in a gallery have been loaded. When you click on a thumbnail to see the big image, clicking on the big image will close it and you will return to the gallery. Use the button(s) above the galleries to scroll through them.";
import flash.filters.DropShadowFilter;
var shadowEffect:DropShadowFilter = new DropShadowFilter(3, 45, 0x000000, 100, 3, 3, 1, 3);
var thumbsFilter:Array = [shadowEffect];
var loader:MovieClipLoader = new MovieClipLoader();
var myListener:Object = new Object();
myListener.onLoadInit = function(target:MovieClip) {
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
if (tracker
} else {
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
myListener.onLoadProgress = function(target:MovieClip, loaded:Number, total:Number) {
percent = Math.floor(loaded/total*100);
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";
} else if (whatIsLoading == "big") {
displayBigImage.percent_txt._visible = true;
displayBigImage.percent_txt.text = percent+"%";
var imageGallery:XML = new XML();
imageGallery.ignoreWhite = true;
imageGallery.onLoad = function(success) {
if (success) {
} else {
descText.text = "Sorry the image data just didn’t load.";
function parseGalleries():Void {
if (imageGallery.firstChild.nodeName == "galleries") {
var rootNode:XMLNode = imageGallery.firstChild;
for (i=0; i
if (rootNode.childNodes[i].nodeName == "gallery") {
currentGallery = rootNode.childNodes[i];
currentGalleryTitle = rootNode.childNodes[i].attributes.title;
currentGalleryButton = galleryMenu_mc.buttonsHolder_mc.attachMovie("gallery section button", "galleryButton"+i, galleryMenu_mc.buttonsHolder_mc.getNextHighestDepth());
currentGalleryButton._x = 0;
currentGalleryButton._y = galleryBtnVSpace*i;
currentGalleryButton.sectionTitle_txt.text = "0"+(i+1)+" "+currentGalleryTitle.toUpperCase();
for (j=0; j
if (currentGallery.childNodes[j].nodeName == "image") {
currentDescription = currentGallery.childNodes[j].firstChild.toString();
numberOfGalleries = i;
function enableButtons(numberOfGalleries:Number):Void {
for (i=0; i
pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i];
pressedButton.onRollOver = function():Void {
pressedButton.onRollOut = function():Void {
pressedButton.onPress = function():Void {
tracker = 0;
thumbsDisplayer = imagesHolder.createEmptyMovieClip("thumbsDisplayer_mc", imagesHolder.getNextHighestDepth());
clickedGallery = Number(this._name.substr(13));
howManyImages = imagesInGallery[clickedGallery];
whichGallery = galleryNames[clickedGallery];
descText.text = galleryIntros[clickedGallery];
currentRow = 0;
currentColumn = 0;
function loadThumbnail() {
currentThumbnail = thumbsDisplayer.attachMovie("thumbnail holder", "thumbnail"+(tracker+1), thumbsDisplayer.getNextHighestDepth());
target = currentThumbnail.thumbImage_mc;
if ((tracker%5) == 0 && tracker != 0) {
currentRow += 1;
if (currentColumn>3) {
currentColumn = 0;
} else if (tracker == 0) {
currentColumn = 0;
} else {
currentColumn += 1;
currentThumbnail._x = currentColumn*thumbMarginX;
currentThumbnail._y = currentRow*thumbMarginY;
currentThumbnail.percent_txt._visible = true;
thumbNumber = currentThumbnail._name.substr(9);
thumbPath = "gallery/"+whichGallery+"/thumbs/"+thumbNumber+".jpg";
whatIsLoading = "thumb";
loader.loadClip(thumbPath, target);
function thumbClickable():Void {
currentThumbnail.onPress = function() {
bigNumber = this._name.substr(9);
displayBigImage = imagesHolder.attachMovie("big image holder", "bigImage_mc", imagesHolder.getNextHighestDepth());
target = displayBigImage.imageHolder_mc;
bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
whatIsLoading = "big";
loader.loadClip(bigImagePath, target);
if (clickedGallery>0) {
var descPosition:Number = 0;
for (i=0; i
descPosition += imagesInGallery[i];
descPosition = descPosition+Number(bigNumber)-1;
imageDesc = descriptions[descPosition];
} else {
imageDesc = descriptions[Number(bigNumber)-1];
descText.text = imageDesc;
currentThumbnail.enabled = false;
function disableThumbs():Void {
for (i=0; i
thumbsDisplayer["thumbnail"+(i+1)].enabled = false;
function enableThumbs():Void {
for (i=0; i
thumbsDisplayer["thumbnail"+(i+1)].enabled = true;
function bigClickable():Void {
displayBigImage.onPress = function() {
descText.text = galleryIntros[clickedGallery];
function fadeIn():Void {
target.onEnterFrame = function():Void {
this._alpha += 10;
if (this._alpha>=100) {
delete this.onEnterFrame;
this._alpha = 100;
function enableGalleryNavigation():Void {
menuDown.onPress = function() {
if (firstLook) {
menuUp._alpha = 100;
menuUp.enabled = true;
firstLook = false;
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<=0 && menuTop>=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;
menuUp.onPress = function() {
var menuTop:Number = menuButtons._height-Math.abs(menuButtons._y);
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuDown.enabled = false;
menuUp.enabled = false;
menuButtons.onEnterFrame = function():Void {
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
menuButtons._y = Math.round(targetPos);
delete menuButtons.onEnterFrame;
menuDown.enabled = true;
menuUp.enabled = true;

Yep, this a really big piece of ActionScript code! More than 230 lines of it! Now save your work and go onto the next section to see how to test your SWF movie and to understand all this programming code.

Top of page

11. Testing the image gallery

11.1 Before testing your gallery, check if all the elements are in place:

  • The images, along with their thumbnails, placed in appropriate folders.
  • The XML file, with all the elements, some of which must match gallery folders’ names.
  • The Flash document (.fla file) your currently working on, must be saved in the appropriate place.

11.2 Select Control > Test Movie. The gallery menu should appear, with each of the sections buttons having its label. Click on them and see if everything loads properly: the thumbnails, and then the big images as you click on each thumbnail.

11.3 You should check now if the preloader works: still in the SWF preview window, select View > Download Settings > 56K and after that View > Simulate Download.

Simulating a slower Internet connection in Flash.

You will see a blank screen for a short period of time, because you have just made Flash simulate downloading from the Web, to see the preloader in action. When I say preloader, I mean the one for the images, because this gallery hasn’t got its own, main preloader — it’s easy to create one, if you want to know how, just check out my preloader tutorials. I won’t delve into that here, because I want to concentrate on the image gallery.

So, once the gallery has appeared, try clicking on a section button — you should see the preloader for each thumbnail appear, and if you click on a thumbnail, the big image should begin preloading. Each image may take a bit to load, because you have chosen the simulated download setting for one of the slowest connections — a plain 56K modem.

Fine. Let me explain you now the almighty ActionScript routines that are responsible for this image gallery working so nicely. Please proceed to the explanation of the ActionScript code behind the dynamic XML image gallery.

Top of page

Be Sociable, Share!


Submit a comment

  • steveksi Dec 3, 2012 at 8:34 pm

    I don’t know if anyone else got this problem but when you click a thumbnail and the big image loads, it does not display the actual image just the white mask box. The preloader shows it loading by counting up, but no image. It is clickable and will return to thumbs. I have used this AS for about 3 years without issue on XP and my Android phone. But Not in Win7. on either 64bit Professional or Win7 starter across IE and IE 64 Chrome and Firefox. I don’t get it, It works in flash program, just not live. Anyone got any ideas.

  • Stephane Dec 7, 2012 at 1:45 pm


    I have a problem with this flash gallery … So far functioned normally, but a few months ago does not work perfectly in google chrom … thumbnails reads the xml, but when I click on the thumbnails, the big picture does not appear, or invisible … Anybody knows any solution for this? Thanks in advance for your help.

  • Steve Ksi Dec 7, 2012 at 6:35 pm

    I posted on here last week but it was taken down for some strange reason by the moderator I guess.
    But the big image does not open on Win7 64 bit or win7 starter. In IE IE 64 Chrome or Firefox. It shows it loading but does not display the image. but it is clickable. Any ideas would be nice. probably something easy. Check out the start of this tut. It does not work in win7 either. XP works great.

  • Steve Ksi Dec 7, 2012 at 6:35 pm

    I posted on here last week but it was taken down for some strange reason by the moderator I guess.
    But the big image does not open on Win7 64 bit or win7 starter. In IE IE 64 Chrome or Firefox. It shows it loading but does not display the image. but it is clickable. Any ideas would be nice. probably something easy. Check out the start of this tut. It does not work in win7 either. XP works great.

  • Steve Ksi Dec 7, 2012 at 6:38 pm

    @W you have to be more specific on what does not work. The whole thing or parts. Chrome sometimes has issues with Flash a and Norton toolbar. The toolbar has to be turned off. For flash images to work.

  • Luka Dec 9, 2012 at 6:22 pm

    @Steve Ksi I’ve checked it out on Win 7. It works in Internet Explorer, but not on FF, Chrome or Opera. I have noticed that I have Flash player 11.4 installed for IE and 11.5 for all other browsers. I suppose it has something to do with that. Flash Player 10.x way fine, but nearly all iterations of v.11 had some problems, my browsers crashed often.

  • Steve Ksi Jan 3, 2013 at 7:47 pm

    @Luka Hey thanks for getting back Luka. Well I just tried it again and it now works on FF IE Chrome. on Win 7 Pro 64 bit. Flash 11 5 502 135. So Like you said must have been a Flashy glitch. Thanks also for a great Application. Very cool. Have a great 2013

  • […] 49. Original Photo Gallery 50. Making the ultimate dynamic image gallery in Flash 8 […]

  • […] 50. Making the ultimate dynamic image gallery in Flash 8 […]

  • Lee Jul 26, 2014 at 7:23 pm

    Any chance of the .fla file?


  • […] 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 …… […]

You must log in to post a comment.