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!

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.

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:

stop();

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.

asd

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.

asdadsasd

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

<?xml version="1.0"?>
<galleries>
<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">
<image>Dallas.</image>
<image>Tresnjevka. I love the atmosphere on this one.</image>
<image>Motovun.</image>
<image>New York.</image>
<image>Paris.</image>
</gallery>
<gallery title="essays" intro="A collection of various photos which either do not fit any other category – experiments and such.">
<image>Color mayhem!</image>
<image>The sleeping monster.</image>
<image>Let me out!</image>
<image>A barrel on the side of the trail.</image>
<image>Subterranean passage.</image>
<image>A train in snow.</image>
</gallery>
</galleries>

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.

<galleries>

</galleries>

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.

<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">

</gallery>

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.

<gallery title="architecture" intro="These are the photos of various buildings in the cities, towns and villages I visited during my voyages.">

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.

<image>A barrel on the side of the trail.</image>

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();
loader.addListener(myListener);
myListener.onLoadInit = function(target:MovieClip) {
if (whatIsLoading == "thumb") {
currentThumbnail.percent_txt._visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
if (tracker<howManyImages) {
loadThumbnail();
} else {
enableThumbs();
}
} else if (whatIsLoading == "big") {
target._alpha = 0;
displayBigImage.percent_txt._visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}
};
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) {
parseGalleries();
} else {
descText.text = "Sorry the image data just didn’t load.";
}
};
imageGallery.load("gallery/gallery.xml");
function parseGalleries():Void {
if (imageGallery.firstChild.nodeName == "galleries") {
var rootNode:XMLNode = imageGallery.firstChild;
for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == "gallery") {
currentGallery = rootNode.childNodes[i];
imagesInGallery.push(currentGallery.childNodes.length);
galleryNames.push(currentGallery.attributes.title);
galleryIntros.push(currentGallery.attributes.intro);
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<currentGallery.childNodes.length; j++) {
if (currentGallery.childNodes[j].nodeName == "image") {
currentDescription = currentGallery.childNodes[j].firstChild.toString();
descriptions.push(currentDescription);
}
}
}
}
}
numberOfGalleries = i;
enableButtons(numberOfGalleries);
}
function enableButtons(numberOfGalleries:Number):Void {
for (i=0; i<numberOfGalleries; i++) {
pressedButton = galleryMenu_mc.buttonsHolder_mc["galleryButton"+i];
pressedButton.onRollOver = function():Void {
this.gotoAndStop(2);
};
pressedButton.onRollOut = function():Void {
this.gotoAndStop(1);
};
pressedButton.onPress = function():Void {
removeMovieClip(thumbsDisplayer);
removeMovieClip(displayBigImage);
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;
loadThumbnail();
};
}
enableGalleryNavigation();
}
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";
disableThumbs();
loader.loadClip(bigImagePath, target);
if (clickedGallery>0) {
var descPosition:Number = 0;
for (i=0; i<clickedGallery; 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<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = false;
}
}
function enableThumbs():Void {
for (i=0; i<howManyImages; i++) {
thumbsDisplayer["thumbnail"+(i+1)].enabled = true;
}
}
function bigClickable():Void {
displayBigImage.onPress = function() {
removeMovieClip(this);
enableThumbs();
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!

Comments

Submit a comment

  • Jeff Salter Nov 21, 2008 at 3:44 pm

    Have you tried to put a scroll bar on the movieclip that displays the thumbnails as a way to handle more than 20 images?

  • Luka Nov 23, 2008 at 5:34 pm

    Jeff Salter: A lot of people asked me how to do that. Frankly, after so much work and options explained I simply moved onto other lessons. Basically, if one wishes to have more photos, one should make more section, like, for example, “vacation photos 1″, “vacation photos 2″ etc.

  • Mick Nov 24, 2008 at 9:05 am

    This tutorial rocks! Thanks a lot.

    I’ve just a question: i need a dynamic button to download a pdf for each gallery. I tried but wasn’t able to achieve it?

    Maybe you can help me? Even if it’s not via xml would be great…

    Thanks again.

  • Rama Nov 25, 2008 at 10:52 am

    can u plz help me to separate the thumbnails with the big image? i want to show them side by side not overlapping.

  • jamie Nov 27, 2008 at 6:03 am

    Love the tutorial, thanks!

    I want to create a gallery that when I click on the thumbnails it brings up chapters of the video in dynamic text boxes, as well as the description and onRelease load a video instead of the big image.

    I’ve just can’t get it to work, it’s driving me crazy!

    I’d love your help!

    Pleease see below for an example of my XML

    Electric power control room.
    Rusted tanks.
    A room with a view.
    Stalactites.
    Enormous conductive pipes.
    The big axle.
    The factory seen from the top of an empty tank.
    Flights of stairs.
    Barren roof construction.
    Made in Germany.
    A stalagmite.

    thanks!

  • dan Nov 30, 2008 at 4:28 am

    This is great! I only have one question that maybe someone can answer, “How can you also include random portrait images in addition to the landscape images in the same gallery?”

    Thanks!

  • Jeroen Dec 1, 2008 at 1:47 pm

    Very good tutorial, but i will be much better if the picturelocations are located in the xml file like this:
    <image name=’Tresnjevka. I love the atmosphere on this one.’ location=1.jpg’

    You think it will be possible in that way?
    It will make it much more dynamic, because it will increase the possibiliy of using a database.
    Let me know

  • Mick Dec 1, 2008 at 5:16 pm

    i’ve been able to associate a pdf every time i clicked a gallery button adding this line

    geturl(“http://mysite.com/gallery” + (1+Number(this._name.substr(13))) + “.pdf”);

    into “function enableButtons(numberOfGalleries:Number):Void {”

    but if i create a custom button to click for download the result is “NaN”.
    So i need to pass the data to this button (or mc)…

    Who can help me? Please… :(

  • Mick Dec 4, 2008 at 8:47 am

    I did it! :D
    Created a custom function for the button from the root framecode.

  • graphichandra Dec 4, 2008 at 11:11 am

    pls urgent put a scroll bar on the movieclip that displays the thumbnails as a way to handle more than 20 images.
    thanking u

  • graphichandra Dec 4, 2008 at 11:14 am

    and also wish to link with images with title

  • Brian Dec 9, 2008 at 8:02 am

    Great tutorial. thanks very much. Everything works great except none of the dynamic text shows up. I’m guessing it’s something simple I just am not doing right. I did check text color to make sure I didn’t have white text on white background :) Any ideas what it might be?

    Thanks,
    Brian

  • mirkokosmos Dec 9, 2008 at 5:28 pm

    definetly great. I’m very(sic!) impressed. A beautiful and easy to use image gallery. Still working on the customizing….
    thanx
    mirkokosmos

  • Duane Dec 13, 2008 at 7:24 am

    Awesome tutorial. I just have one problem. My gallery works fine when testing it through Flash, but when I place it into the web page, the images never load and I get the error message (images did not load). Am I missing something? I’m using CS4 – could that be causing problems?

  • Luka Dec 13, 2008 at 10:02 am

    Check that with your hosting provider – I had the same problem because on my hosting account loading resources was blocked by default. Images, SWFs and such. Also, check the path if it is correct.

  • Robert Dec 14, 2008 at 4:14 pm

    Thanx for your great tutorials :-)
    Gallery is customized an works well …. a scrollbar for the thumb area would be nice ;-)
    Regards from a desperate flash noob

  • Jennifer Dec 15, 2008 at 8:46 am

    Great Tutorial! Is there anyway you can add a next / back button to the large images to scroll through them?
    Regards
    Jen

  • AntuJay Dec 17, 2008 at 3:14 pm

    Awesome! Thanks a lot dude

  • IO_Digital Dec 17, 2008 at 4:21 pm

    Hey guys I am not able to download the xml file in section 8.1? I am working on everything else pretty well. This is the hottest ‘tut’ that I have hopped on in a while. Too bad I am the only person I know that does this stuff in my area. (no one to brag to when I am complete. lol)

  • Ike Dec 17, 2008 at 7:25 pm

    This tutorial is excellent! I’m working on customizing it now, but I have one question. Is there a way to remove the menu completely and just have it load the thumbnails instead for instances where I only have one menu item?

  • IO_Digital Dec 18, 2008 at 5:47 am

    I have all the code in and can get the thumbs to show but for some reason Big pictures are not displaying or showing. Not even the thumbs seem clickable? help please.

  • Susheel Dec 20, 2008 at 8:50 am

    Great tutorial !!! It helped me a lot in creating the kind of gallery that I wanted to. But I have stuck at place. I want an additional feature of having next & previous button so that I can easily navigate through the images those load in bigImage.. movieclip. Please reply earliest.

    I would also like to request other people in the forum to please let me know the solution to my problem as quickly as possible.

    Thanks.

  • Gradly Dec 21, 2008 at 5:58 am

    Thanks for great tutorials. but i have a problem it looks very simple yet ive not found a solution to it :

    what if I need to load external images into already made empty movie clips and be sure that all images loaded with the preloader on the 1st frame??

    And thank you in a dvance

  • max Dec 22, 2008 at 12:08 pm

    Hey i really liked u tutorials … it’s pretty powerfull dynamic image gallery…. Thanks a lot… hope i will come with some cool gallery with the help of this one.. for my site….

  • IO_Digital Dec 22, 2008 at 9:40 pm

    Anyone with a clue on this?

    Dec 18, 2008 at 5:47 am

    I have all the code in and can get the thumbs to show but for some reason Big pictures are not displaying or showing. Not even the thumbs seem clickable? help please.

    I have no code errors to help me cause the code is validating. Hmm..?

  • kh junaid kamal Dec 29, 2008 at 5:10 pm

    Well gentle man it was nice and fabullous tutorial with full of explanation i’ve never seen in my life ever very nice and creative would you plz do the favor for the designers of new world that plz tell me the best and power full, flash learning or tutorials website through which i am going to learn the stuf which is very important for flash designer.
    plz tell me i am redular watcher of the website.

    thanks and best regards.

    kh junaid.

  • Edyta Jordan Jan 7, 2009 at 5:53 pm

    Hi,
    Thanks for this great tutorial!
    You can check my version of this gallery here:
    http://www.edytajordan.com/galleries/ltcomfort

    I would like to know what you think about it.

    I use 2 XML files, each main button loads seperate XML ( gallery). And then at the top you can see buttons for sub galleries. I have also added custom functions that let user to print or download single image. And I have also added function that lets me put more than 20 thumbnails. I’m not going to post my code here for those functions, because I have changed the code from tutorial a lot to suit my needs and I also used my own name for MovieClips, so I don’t want to cause a lot of confusion.

    I would appreciate feedback very much!
    Thank You!

  • Monica Pascual Jan 7, 2009 at 8:05 pm

    Your tutorial was outstanding and very clear to understand. Just have one question….

    I need to include a text link in the description of each image. How can i do that? In the xml file?

    Please please please get back to me. Thanks.

  • Monica Pascual Jan 7, 2009 at 10:55 pm

    also how do i make it so that it is 4 columns and 5 rows instead???

  • Cono Jan 8, 2009 at 5:31 pm

    Yes i would like to know how to change the columns and rows. That is, i would like only 2 columns and multiple rows. Also, How do I change it so that i can put more than 20 pictures?

  • Edyta Jordan Jan 10, 2009 at 6:44 pm

    Hi,

    My way of handling more than 20 thumbnails was to create a container MovieClip with 3 layers. Bottom layer is the loader for thumbnails. Another layer is where I put my buttons for scrolling the thumbnails (in this case arrows). And the top most layer is the mask which is showing only the first 20 thumbnails.

    Then I had to set “arrows” to be invisible and make them visible when there are more than 20 thumbs.
    // function enable buttons
    function enableButtons(numberOfGalleries):Void{
    // code for enableButtons() function here…
    //
    // added functions for displaying buttons if more than 20 thumbnails here
    hideArrows();
    if(imagesInGallery[clickedGallery]> 20){
    showArrows();
    };
    };
    };
    enableGalleryNavigation();
    };

    This is an example of the code for showArrows() that I used:
    function showArrows(){
    imagesHolder_mc.arrowUp_mc._visible = false;
    imagesHolder_mc.arrowDown_mc._visible = true;
    imagesHolder_mc.arrowDown_mc.onPress = function(){
    current = imagesHolder_mc.thumbs_mc._y;
    target = current – 315;
    var arrowTween:Tween = newTween(imagesHolder_mc.thumbs_mc, “_y”, Strong.easeOut, current, target, 3, true);
    arrowTween.onMotionChanged = function(){
    imagesHolder_mc.arrowDown_mc.enabled = false;
    imagesHolder_mc.arrowUp_mc.enabled = false;
    };
    arrowTween.onMotionFinished = function(){
    imagesHolder_mc.arrowDown_mc.enabled = true;
    imagesHolder_mc.arrowUp_mc.enabled = true;
    };
    imagesHolder_mc.arrowUp_mc._visible = true;
    };
    imagesHolder_mc.arrowUp_mc.onPress = function(){
    current = imagesHolder_mc.thumbs_mc._y;
    target = current + 315;
    var arrowTween:Tween = new Tween(imagesHolder_mc.thumbs_mc, “_y”,

    Strong.easeOut, current, target, 3, true);
    //imagesHolder_mc.thumbs_mc._y += 10;
    arrowTween.onMotionChanged = function(){
    imagesHolder_mc.arrowDown_mc.enabled = false;
    imagesHolder_mc.arrowUp_mc.enabled = false;
    };
    arrowTween.onMotionFinished = function(){
    imagesHolder_mc.arrowDown_mc.enabled = true;
    imagesHolder_mc.arrowUp_mc.enabled = true;
    };
    };
    };

    // code for hideArrows()

    Code for function hideArrows(){
    imagesHolder_mc.arrowUp_mc._visible = false;
    imagesHolder_mc.arrowDown_mc._visible = false;
    };

    I hope this will help :)
    ps. imagesHolder_mc is the name of my container and thumbs_mc is the MovieClip that loads thumbnails

  • Ancho Jan 13, 2009 at 5:09 pm

    I need to put a clickable link in a description.. Any idea’s how to do that?

  • Ancho Jan 13, 2009 at 5:10 pm

    I see that Monica Pascual already asked that.. so Monica if you figured it out contact me: mcancho@gmail.com
    thx

  • Daylan Jan 13, 2009 at 11:20 pm

    Hey Luka (or anyone!), I was wondering if you would be able to help me with how to change the movie clip thumbnails a bit. I need the gallery to be able to accommodate both vertical AND horizontal pictures, which would change the amount of pictures on each row in each gallery, but I’m not sure how to change the code for it to be able to do this.

  • LadyN Jan 16, 2009 at 4:00 am

    How can we make it so when we’re on the loaded image we can click on a ‘next’ button instead of having it go back to the thumbnails? That way, the user won’t have to keep clicking on the next thumbnails and back and fourth?

    Is there a way? Thanks! Great tutorial.

  • Chris Jan 17, 2009 at 11:27 am

    I’ve followed the tutorial and now have a working gallery… However, I want to be able to resize the “big image holder” movie clip in the library dynamically according to the size of the photos (as my gallery contains both landscape and portrait photos) How do I do this?

    I figured that I can put each image’s height and width in the xml file, create a new array for these values and tell flash to push these values from the xml files into the corresponding arrays, but HOW do I then use these values to resize the movie clip??

    Any help would be appreciated.

  • Deepak Jan 17, 2009 at 7:37 pm

    i did the whole thing step by step but i keep geting this error msgs.. pls help…

    Scene=Scene 1, Layer=actions, Frame=1: Line 29: ‘;’ expected
    import flash.filters.DropShadowFilter;

    Scene=Scene 1, Layer=actions, Frame=1: Line 74: ‘{‘ expected
    function parseGalleries():Void {

    Scene=Scene 1, Layer=actions, Frame=1: Line 99: Unexpected ‘}’ encountered
    }

  • Adam Jan 21, 2009 at 8:13 pm

    thanks for the amazing tutorial Luka, your descriptions of the actionscript were far better than any other tutorial I have found in weeks of searching for ‘how tos’:) am working on trying to make my own gallery now and was wondering is there a way we can make the entire background go slightly darker when the larger image is open? just been browsing some other xml galleries and I noticed that effect on them, and thought it was a nice touch to make the photo look even more like they are floating over the main page. http://www.aaronbirchphotography.com/index.htm (that was one of my favs in terms of flash/xml functionality).

  • Monica Pascual Jan 22, 2009 at 6:37 pm

    ANCHO….i am still trying to figure it out myself (how to get Url links inside the image diescription area). I have been racking my brain trying to figure it out….if you have the answer please fill me in….

    IF ANYONE ELSE knows how to do this please HELP ME, IM DESPERATE…LOL

    thanks.

    lillmsqt4u81@aol.com

  • jiro Jan 29, 2009 at 6:51 am

    hello edyta,

    good day!
    i tried this tutorial and it working fine, i put your code in this tutorial because my pictures are more than 20. But i encounter problems in Tween class. Can you help me with my problem.

    or anyone who knows how to add more thumbnails? it is limited to 20 pics per button. i appreciate your help.
    thanks!

    have a nice day!

  • jiro Jan 29, 2009 at 6:59 am

    thanks Luka,

    it’s nice to have this tutorial… I have a problem also in menu, number 01-10 buttons are ok, but the remaining buttons when I clicked example number 11, it displays the thumbnails of number 1, number 12 displays number2, and so forth…

    can you help me?

    thanks!

  • Sara Jan 29, 2009 at 10:08 pm

    I have treid out your tutorial! It’s great and very detailed. But I think I did something wrong because when I test the image gallery the only thing that appears is the banner, scroll down button and text ‘Click the gallery’. Please help!!!! I have done everything okay until the stage with the folders I think. I don’t really know how to create the mypage.html file. Please help!!!
    Thanks in advance

  • jiro Jan 30, 2009 at 12:16 am

    hello sarah,
    just give me your email…i’ll give you the source file of my work i did in this tutorial… there are many possible cause of the problem for not displaying the content (and/or) the menu itself.

    Have a nice day! :)

  • Edyta Jan 30, 2009 at 2:38 pm

    Jiro – what problem do you encounter with the Tween class?

  • Sara Jan 30, 2009 at 6:52 pm

    my emial is : sara-bik@hotmail.com
    Thanks a lot Jiro

  • Cloud Jan 31, 2009 at 1:10 am

    Thanks for the great tutorial Jiro. I’m having the same problem as Sarah however. I’m not sure how to make the mypage.html file and that seems to be the only thing missing. My email is ilancloud@gmail.com. Thanks again! and keep up the good work.

  • Jeff Feb 2, 2009 at 1:43 am

    Having the same results as Sara, was wondering if you figured it out.
    Thanks

  • jiro Feb 2, 2009 at 2:57 am

    hello edyta!
    Tween class is not recognized, that’s the only problem. :)

  • Edyta Feb 3, 2009 at 2:21 pm

    Hello Jiro!
    I think you need to import the Tween class. Just put the following statement at the VERY top of your code (import statements always go before any other code-I think)

    import mx.transitions.Tween;

    this should help! let me know :)

  • Kim Feb 4, 2009 at 8:43 am

    I have followed this step by step twice and have quadruple checked my work and file structure and everything else. I can get the down button to react but I cannot see any of my images, thumbs or large images and I cannot see my list gallery list. Any suggestions?

    Thanks:)

  • Lee Feb 6, 2009 at 1:20 am

    Hi, superb tutorial, I enjoyed working through it, however I seem to be having a similar problem to Sara. When I test the movie, the structure comes up mostly fine, however there is just one blank box in the menu on the left, with no text inside it, instead of the list of gallery items that should be there. I also only get the down button displaying, however the up button appears upon clicking on the down button.

    Also, I can click on the blank box on the left and my first gallery does come up and I have found that the tumbnails and big images seem to work fine. However I can only get this part of the gallery to appear, and can’t select any other area, plus as mentioned the text isn’t in the box so I wouldn’t know which gallery I was selecting. The actual text for each image appears correctly too

    Any suggestions would be greatly appreciated, as I am stumped. My file structure and xml file all seem to match up namewise so I have no idea what the problem is. Any help would be very much appreciated.

    Thanks.

  • Chris Feb 8, 2009 at 12:02 am

    Great tutorial, very in depth. Just a question about putting the gallery into an existing flash site. Is it best to import the SWF into the FLA? Or better to reconstruct it inside my existing site. My problem is that it loads the gallery, but not the images and menu…

  • Fadia Feb 8, 2009 at 4:47 pm

    Thanks great efforts. II do enjoy following all your tutorials.

    I also have the same comment as Chris “it loads the gallery, but not the images and menu…”

  • Pavel Feb 8, 2009 at 5:41 pm

    Hi Luka, thanks for the great tutorial!
    You have not been answering these posts for a while, so my question is to all who might know the solution:
    I want to highlight the active gallery button, i.e. when I click on a gallery name the button has to keep its “over” state while I’m browsing through that gallery. Any ideas how to do that?
    Also it would be great if someone posted how to add previous/next buttons on the big image.
    Thanks!

  • Harry Feb 11, 2009 at 11:21 pm

    Hi Luka,

    I just want to say thank you very much for such a superb tutorial job well done. I can tell that you have devoted a tremendous amount of time writing the explanation in such a clear and eloquent manner. You deserve a star.

    Question: I realize that you have set the tracker at %5 so that the number of rows contains a total of 5 thumnails. I would like to know if I want to have all the thumbnails to load in a single horizontal row, how do I manipulate the actionsript? I want to put a mask so that only seven thumbnails show up at once on the screen and place a “previous” button before thumbnail #1 and another button ( “next”) after thumnail 7 to act as a scroller. That way, the thumbnails can move from left to right once someone clicks one either button. Please help….

  • Corey Feb 12, 2009 at 1:02 am

    Thanks for the easy to follow, every detail included approach. Being new at this, I really have trouble following along some of the tutorials that make a lot of assumptions.

    I am afraid I am having the same problem as Chris and Fadia. For some reason none of the images, the text, or the buttons show up. I am only able to preview the logo header, and the “browse galleries” line with up and down arrows.

    Thanks again…

  • Yuri Inori Feb 13, 2009 at 3:53 am

    Thank you so much for this tutorial!!! :D You were so much help and the directions were clearly and easily explained in great detail. I’ve learned so much. Thanks again!!!! :)

  • Lauren Young Feb 16, 2009 at 12:47 pm

    Hi, absolutely brilliant tutorial!
    Although, I’m having the same problem as Sara, when i test the movie, the up/down buttons work, and the logo banner is there but no thumbnails or gallery button menu on the left… I don’t have a clue what i’ve done wrong!! If anyone can help me I would REALLY appreciate it!! my mail is loloalfonz@hotmail.co.uk

    thank you!!! Lauren

  • Lee Feb 16, 2009 at 3:03 pm

    OK I have figured out my problems, for the menu buttons, make sure the text inside them isn’t Bold. Mine was and for some reason this prevented the text from appearing.

  • Daniel Feb 20, 2009 at 4:53 am

    Hello, the tutorial is excellent and the gallery is very robust. I have the same comment/question as Pavel (Feb 8, 2009 at 5:41 pm). Hopefully someone can help out with that. Thanks a bunch!

  • maryam Feb 20, 2009 at 8:36 pm

    hi
    thank you very much for this garte website , i have a question , can i use this ultimate dynamic image gallery for swf file , i mean i have some swf file that i want to use it instead of JPEG file , i’m beginer in flash , could you please help me, i have a main swf file and some external swf file that i want to load them by preloader , what should i do??? please do me afavor and help me

  • soueu Feb 22, 2009 at 2:29 am

    this is a brilhant piece of work, i’m trying to make an Next/Prev Button in Big img without luck, can u help us Luka?

  • Pudrick Feb 22, 2009 at 6:21 pm

    im also working on a Next/prev setup for slideshow style viewing of these galleries… so far no luck

  • Aan Feb 28, 2009 at 2:55 am

    thanks very much for it, i m really helped about my project to find any works….thanks

  • Arham Aan Feb 28, 2009 at 1:28 pm

    thanks for the tutorial, its realy helped. i was download and success for you

  • Ramkumarbalaji Mar 1, 2009 at 2:16 am

    hi…
    this gallery is reallly interesting..

  • simon Mar 2, 2009 at 5:30 pm

    Hi, this gallery is ideal for me and I’ve found the tutorial very clear and easy to follow. However I’m having an issue with the xml and image loading…
    I’m getting this error:

    Error opening URL “file:///C|/Documents%20and%20Settings/Simon/My%20Documents/testFlash/gallery/architecture/thumbs/1.jpg”

    However there is a 1.jpg image in the thumbs folder…?

    Any help v. much appreciated

  • cryo Mar 3, 2009 at 4:32 pm

    duude this tutorial was no less than great! thank you!

  • stef serafin Mar 4, 2009 at 4:54 am

    Loved the tutorial man. I have to say it was the best I’ve found thus far online. Well written, excellent screen shots and no non-sense. Perfect.

    Keep it up and if you have other tutorials on flash I would love to know where to find them. Video too even.

    Thanks again.

    Stef

  • stef serafin Mar 4, 2009 at 11:55 pm

    Has anyone found out how to add this to another project? I’m trying to figure out what part do I just drag into my Gallery section of my site I’m creating. Does that make sense?

    I’m not looking to load.swf or anything. I’m looking to just drag and drop this file into the gallery part of my content layer on Frame 6. I can send a screen shot if need be. Someone let me know.

    Thanks

    stefserafin@gmail.com

    Stef

  • Torben Mar 10, 2009 at 12:48 am

    Hi Luka,
    just wanted to thank you for this great tutorial! Awesome work!

    Since I needed a slightly different layout, I managed to show thumbs and big images in two different placeholders. But when I had one big image open I couldn’t click another one. Needed about 2 hrs to find out what I had to change.

    I tried
    -
    function thumbClickable():Void {
    currentThumbnail.onPress = function() {
    removeMovieClip(displayBigImage);

    -

    Hopefully I can manage to make a one-row vertical scrolling thumb-menu, showing only 4 thumbs at once. That’d be perfect for my layout. If anyone has an idea how to achieve this: supertt@gmx.de
    But I think I can get this working in a few hours.

    Greetings from Germany, and thanks a lot!
    :)

  • Dmitry Mar 10, 2009 at 2:40 pm

    Hi!
    I’m working with my gallery, every link is working perfect, but the first one is not good. The pictures from the first link I cann’t open in full size. What is the problem?
    Thanks

  • Gaxton Mar 10, 2009 at 3:15 pm

    Wow Wow!!!

    This is the coolest tutorial ever, I like it….

    Ok Please I have a request to make; I want a walk thru’ or tutorial on http://www.gensler.com …. My clients insists they want something like that.

    I cant wait for it please! Thanks for everything, you are very good at what you do

  • sady Mar 29, 2009 at 7:08 pm

    o wwwwwwwwwwwwwwoooooooooooooooooooowwwwwwwwwwww thats Super Duper grate
    i learn alot

  • Bobby Apr 5, 2009 at 5:20 am

    I’m having the same problem as Simon. Can anyone help?

    Error opening URL “file:///C|/Documents%20and%20Settings/Simon/My%20Documents/testFlash/gallery/architecture/thumbs/1.jpg”

    However there is a 1.jpg image in the thumbs folder…?

    Any help v. much appreciated

    Robertlu326@gmail.com

  • Kris Apr 10, 2009 at 6:57 pm

    Thank you so much. Wonderful Tutorial! Everything clearly laid out and explained! Perfect 10/10

  • Alia Apr 14, 2009 at 3:00 am

    Did anyone figure out an answer to Pavel’s question above: how to make the gallery menu buttons stay in the over(frame 2) state when the user is browsing the thumbnails? I’ve been fiddling with it for several hours with little luck.

    Some people asked how edit the grid of the thumbnails. The part of code to change is here:

    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;
    }

    Let’s call “5″ value A and “3″ value B.
    change the A value to the number of columns you want and then change the B value by the same amount that you increase or decrease value A.

  • Luke1988 Apr 26, 2009 at 5:41 pm

    Very Well explained tutorial. Nicely done.

    However after i completed the tutorial i got a list of 1046:Type was not found or not a compile-time constant: Void

    i changed ‘Void’ to ‘void’ which cleared all the errors but gave me another list of 100 different errors.

    most of these are 1120:Access of undefined property
    e.g. 1120:Access of undefined property:j
    on the line… for (j=0; j<currentGallery.childNodes.length; j++) {

    with a few more 1046 errors on the Buttons.

    any help would be much appreciated.

    Thanks, Luke

  • Stephanie May 6, 2009 at 3:52 am

    Any way to do this without the menu and simply have thumbnails loaded?

  • mike May 6, 2009 at 1:18 pm

    This does not work I am getting errors even when I load it straight from your source files without editing anything.

    These are them.

    Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/monochrome/thumbs/1.jpg’
    Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/architecture/thumbs/1.jpg’

  • Erick May 7, 2009 at 7:12 pm

    Put a PayPal Donate button on your site. I’d like to contribute to this valuable resource.

    Please also update this for Flash CS4. Thanks.

  • Andrea May 10, 2009 at 1:31 am

    I’m at step 2.19

    You wrote “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.”

    But the move clip is not selected by default. Instead of being able to type gallerMenu_mc in the properties box, the properties box is saying “Frame” and asking for a “Frame Label”

    Can you please help me through this?

    Thank you,
    Andrea

  • Claire May 10, 2009 at 9:21 pm

    I just wanted to know i am trying to create a flash photo album which has a few categories and then about 20 images per section, i am thinking i might not need to use the buttons, or am not sure, any advice on the best way to go about it. I am new to flash and do not know much about implementing actions and just want the images to be viewed on by one and maybe controlled by either left/right buttons or a scroll bar. any suggestions ro advice pls?
    very much appreciated
    thanxs

  • Jason May 11, 2009 at 3:14 pm

    Why when i trace the width and height of the big images i get completely wrong values?

    I’m trying to remake the gallery for the thumbs to be loaded elsewhere and i want to center the dynamically loaded images?…

    Where would i need to target for me to target the big image?

  • Claire May 13, 2009 at 12:10 pm

    where is the flash file supposed to be saved in the whole folder directory?
    hlp pls
    thanxs

  • Claire May 13, 2009 at 12:11 pm

    wot does this error mean?
    “…
    Error opening URL “file:///C|/Documents%20and%20Settings/Desktop/root/gallery/gallery/gallery.xml”
    …”

  • Dennis May 13, 2009 at 5:46 pm

    Thank You, very cool tutorial… don’t get it yet but am sure it will come together because of your efforts…

  • David May 23, 2009 at 2:26 pm

    Hey, Great tutorial, I just havea few questions i need answered, I followed the tutorial down to the note and quite to my surprise when it came time for me to test the swf out i encountered script errors.

    String literal was not properly terminated
    currentGalleryButton.sectionTitle_txt.text = “0″+(i+1)+”

    String literal was not properly terminated
    “+currentGalleryTitle.toUpperCase();

    Syntax error.
    for (j=0; j<currentGallery.childNodes.length; j++) {

    would very much appreciate it if anyone could help me.

    Cheers

  • David May 24, 2009 at 2:25 am

    Thanks for the tutorial its excellent, i have been searching for such a tutorial for years. Now i am having a few problems not with the actionscript because i’m getting no script errors it merely with the galleries; they dont show up even though folder locations and image locations are sound…

    Any help would be great thasnks

  • nes May 27, 2009 at 5:22 pm

    Amazing….what a tutorial!!!!!!!

  • Sat May 28, 2009 at 1:41 pm

    Great tutorial.

    I wanted to know Instead of text in the menu, How do get an image button to call the thumnails

  • Johnny B May 28, 2009 at 1:52 pm

    hi luka thx again for this royaly great tutorial.

    question; ive been trying to create a next/prev button for the “BIG IMAGE”. im having big difficulties. ive tried a couple of tutorials , among many othersi tried kirupas wich seems to bee the one mos down to earth. but with no success.

    i must admit im a newbie to actionscript, and ive been banging my head against the wall with this, so any help would be very much appriciated.
    the code below is mostly lukas original code , with some modifications made to fit my design purposes.

    i.e / instead of showing 20 smaller pics i choose to vies 9 larger ones , and i added a rollover to the thums the same way luka did with the mau buttons. the only thing missing now is the user friendly prev/buttons and if someone could , i would also like to be able to have more thumbnail sections for the same kategory . anyone know how to do that in as 2.0?

    well thats all folks .

    ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
    stop();

    // Buttons
    var menuSpeed:Number = 6;
    var menuDown:Button = menuDown_btn;
    var menuUp:Button = menuUp_btn;
    menuUp._alpha = 0;
    menuUp.enabled = false;

    prevBigImg._alpha = 0;
    nextBigImg._alpha = 0;
    prevBigImg.enabled = false;
    nextBigImg.enabled = false;
    // Buttons end

    p = 0;
    var firstLook:Boolean = true;
    var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc;
    var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc;
    galleryMask._height = 96;
    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 = 5;
    var galleryBtnUpperMargin:Number = 60;
    var galleryBtnVSpace:Number = 19;
    var thumbMarginX:Number = 222;
    var thumbMarginY:Number = 178
    imagesHolder._x = 267.8;
    imagesHolder._y = 98;
    desc_txt._x = 10;
    desc_txt._y = 353;

    var loader:MovieClipLoader = new MovieClipLoader();
    var myListener:Object = new Object();
    loader.addListener(myListener);
    myListener.onLoadInit = function(target:MovieClip) {
    if (whatIsLoading == “thumb”) {
    currentThumbnail.percent_txt._visible = false;
    thumbClickable();
    tracker++;
    if (tracker<howManyImages) {
    loadThumbnail();
    } else {
    enableThumbs();
    }
    } else if (whatIsLoading == “big”) {

    target._alpha = 0;
    displayBigImage.percent_txt._visible = false;
    bigClickable();
    fadeIn();
    }
    };

    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) {
    parseGalleries();
    } else {
    descText.text = “Sorry the image data just didn’t load.”;
    }
    };
    imageGallery.load(“gallery/gallery.xml”);
    function parseGalleries():Void {
    if (imageGallery.firstChild.nodeName == “galleries”) {
    var rootNode:XMLNode = imageGallery.firstChild;
    for (i=0; i<rootNode.childNodes.length; i++) {
    if (rootNode.childNodes[i].nodeName == “gallery”) {
    currentGallery = rootNode.childNodes[i];
    imagesInGallery.push(currentGallery.childNodes.length);
    galleryNames.push(currentGallery.attributes.title);
    galleryIntros.push(currentGallery.attributes.intro);
    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 = currentGalleryTitle.toUpperCase();
    for (j=0; j<currentGallery.childNodes.length; j++) {
    if (currentGallery.childNodes[j].nodeName == “image”) {
    currentDescription = currentGallery.childNodes[j].firstChild.toString();
    descriptions.push(currentDescription);

    }
    }
    }
    }
    }
    numberOfGalleries = i;
    enableButtons(numberOfGalleries);
    }
    function enableButtons(numberOfGalleries:Number):Void {
    for (i=0; i1) {
    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.onRollOver = function():Void { // thumb rollover
    this.gotoAndStop(2);
    };
    currentThumbnail.onRollOut = function():Void { // thumb rollout
    this.gotoAndStop(1);
    };

    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”;
    disableThumbs();
    prevBigImg.enabled = true;
    prevBigImg._alpha = 100;
    nextBigImg.enabled = true;
    nextBigImg._alpha = 100;
    loader.loadClip(bigImagePath, target);
    if (clickedGallery>0) {
    var descPosition:Number = 0;
    for (i=0; i<clickedGallery; 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<howManyImages; i++) {
    thumbsDisplayer["thumbnail"+(i+1)].enabled = false;
    }
    }
    function enableThumbs():Void {
    for (i=0; i=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=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._y0) {
    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;
    }
    };
    }
    };
    }

    bioText = new XML();
    bioText.ignoreWhite = true;
    bioText.onLoad = function(success) {
    bioMc.bio_txt.htmlText = this.firstChild.childNodes[0].attributes.bio;
    };
    bioText.load(“gallery/info.xml”);

  • Carl May 28, 2009 at 5:46 pm

    what does this error mean?

    Error opening URL “file:///D|/AS%5FXML%5Fimage%5Fgallery/gallery/Studio/thumbs/2.jpg”

  • Aaron Jun 3, 2009 at 1:50 am

    I’d like to make the whole thing dynamic. Is there a way to load a php script that creates the XML file based on MySQL values?

  • yomi Jun 12, 2009 at 8:42 am

    thanks mate u made my day

  • DanZ Jun 18, 2009 at 8:07 pm

    The most comprehensive tutorial I’d ever seen.
    It has a lack, no button “PAYPAL DONATE”!!!
    Really, I’d donate for support your work.
    Kind Regards.
    DanZ.

  • blah Jun 30, 2009 at 3:43 pm

    the best tutorial ever!!!!! honestly! Great work.

  • Dave Jul 1, 2009 at 2:59 pm

    I got a previous and next button working. The only problem I’m having right now is that you have to click the previous button twice to start up the photo cycle.

    If you click once, it reloads the same image. If you click one more time, it starts moving backwards. Once I figure it out, I’ll post again because a bunch of people were asking about it.

  • Dave Jul 1, 2009 at 3:51 pm

    Okay figured most of it out. The following code will let you go forward and backward through the gallery. All you have to do is make a previous and next button and give them instance names of prev_btn and next_btn.

    _root.prev_btn.onRelease = function() {
    if (bigNumber>1) {
    bigNumber–;
    bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
    disableThumbs();
    loader.loadClip(bigImagePath,target);

    _root.next_btn.onRelease = function() {
    if (bigNumber1)” prevents you from going before 1.jpg.
    “bigNumber–;” subtracts 1 from the .jpg hence making the user go backwards through the gallery.

    “bigNumber++;” moves you forward through the gallery.

    Now, I’m having a problem with the “if (bigNumber<bigImagePath.length-1) ”

    Technically, that should make the user unable to move past your last .jpg in your gallery, however, this is not the case. In 3 of my galleries, it will stop right at the last photo but in all the others, I can move past by up to 5 .jpgs. I’m currently trying to figure out how to fix that.

    Also, I’m working on making the previous and next buttons load up much like the Big movie clip does. That way, the previous and next buttons will only appear when they are usable.

  • polymathew Jul 2, 2009 at 6:52 am

    same method video gallery

  • Reiki Jul 2, 2009 at 7:21 am

    Excellent information. Finding a few such solutions has taken hours in the past.

    Thank u.

  • Paul Jul 9, 2009 at 5:04 am

    i did the whole thing step by step but i keep geting this error. I noteced Depak up above was having the same problem. Please help!!! :)

    Scene=Scene 1, Layer=actions, Frame=1: Line 29: ‘;’ expected
    import flash.filters.DropShadowFilter;

    Scene=Scene 1, Layer=actions, Frame=1: Line 74: ‘{’ expected
    function parseGalleries():Void {

    Scene=Scene 1, Layer=actions, Frame=1: Line 99: Unexpected ‘}’ encountered
    }

  • frazer Jul 13, 2009 at 10:34 am

    my gallery doesent list any errors, it just doesent load the big images when clicked on, what is the problem likely to be?

  • andrei Jul 15, 2009 at 11:37 am

    you are the best. everything works smooth even though i started with different dimensions of the document. superbly explained. i will post this tutorial on my website as soon as i renew it in flash. thank you

  • Rulex Jul 15, 2009 at 11:49 pm

    Chango no se si sabes español.. no importaa la buena onda igual llega SOS UN GROSO!!!! GRACIASS

  • pesso Jul 23, 2009 at 8:38 pm

    Does anyone know how I could go about having the thumbnails in a different area than were the bigger image loads? i.e. I would like to have all the thumbnails smaller and down under the menu and then have the larger images show up in the white space to the right. Any assistance would be fab.

    By the way, this is an awesome tutorial!!

    Thanks

  • michelle Jul 28, 2009 at 12:33 am

    Thank you so much for such an awesome tutorial!! i have learned so much.. finally i can build my own gallery!!! once it’s done and up, i’ll post a link! =]

    thank you!

  • Steven Aug 11, 2009 at 12:57 am

    Great tutorial. One question, how would I make it so the first group of thumbnails load instead of waiting for the button to be clicked? Thanks!

  • Bali car rental Aug 12, 2009 at 8:56 am

    Thank you very much. It is working great.
    Do you have any explanation about flash website with admin page?
    How to connect xml with php? Is it possible?

  • iTropics Aug 18, 2009 at 6:31 am

    To Posso…
    I wanted to change the position of the Big Image instead of having the same starting point as the thumbnail, I added these codes somewhere on line 153 & 154.

    displayBigImage._x = -20;
    displayBigImage._y = -200;

    That will do for the meantime, because I am new with AS as well.
    Hope that idea helps.
    Good luck.

  • iTropics Aug 19, 2009 at 2:10 am

    Also, I added this gallery to an existing flash but I didn’t used the loadMovie command which I guess is best & easy way to do it so I am not having an issue with “DEPTH”.

    But this work, where my “thumbnails” & “big image” loads up on top of the other instances. I added this code somewhere on line 150ish for thumbnail holder & line 160ish on big image holder:

    imagesHolder.swapDepths(0);

  • Steff Aug 20, 2009 at 1:19 pm

    Absolutely fantastic! Thanks for the work that went into this!

  • Iggy@DiggySoft Aug 29, 2009 at 3:13 pm

    God Bless You! Just studying this tutorial was enough to teach me more than half of what I need to know in Actionscript. Thank you for such a wonderful tutorial.

  • wimal Aug 30, 2009 at 12:11 pm

    Does anyone know How to get the sections (architecture , nature etc…) to put Horizontally because I have only 3 categories.

  • Shalini Aug 30, 2009 at 3:30 pm

    Luka – this tutorial was absolutely delightful to do. However I am getting the following error – (Yes i did follow the tutorial to the T)

    “file:///C|/Users/default.Home%2DPC/Desktop/Shalu%20Files/HCC%2DFlash8/FlashGallery/root/gallery/monochrome/thumbs/6.jpg”

    The folder and the thumbs have only 5 images – why is it giving error for the 6th?

    Can you please let me know what I am doing wrong? All folders names are the same, in the correct destinations etc.

    Thanks
    Shalini

  • wimal Sep 1, 2009 at 2:21 am

    code for the next and previous buttons PLEASE….Anyone.!!!

  • wimal Sep 1, 2009 at 3:05 am

    DAVE….can u please post that code for the next and previous buttons again. Its not complete in ur last post. Thanks.

  • K-No Sep 5, 2009 at 12:34 am

    well done for explaining everything so well.
    It was so helpful.

    I think your next project should be showing how to have 4 gallery instances on the one flash file frame with all 4 galleries on automatic slideshow.

    : )

  • scorched Sep 7, 2009 at 4:56 pm

    wow. another of your tutorial that rocks! thanks man

  • tim Sep 25, 2009 at 4:55 am

    i just started this tutorial and i got to the portion where you set the linkage (step 3.18) and it labels the class and not the identifier…i clicked on the identifier portion to type in the name and it said that it isn’t supported my actionscript 3.0 and that i would have to target actionscript 1.0-2.0 ….so my question is can i do this in actionscript 3.0?? i don’t want to get all the way done and find out i couldn’t…please let me know!!

  • tim Sep 25, 2009 at 7:55 pm

    i went ahead and finished the tutorial and tested the swf and it didn’t work….giving me 14 errors. i dont know what to do…can i send you a picture of the errors and get some help??

  • tim Sep 25, 2009 at 8:09 pm

    the errors all have to do with the lines that have the script “Void”

  • GX Tan Sep 28, 2009 at 4:22 am

    Can I know how to make a sub menu at the gallery menu ? example; architecture -> (sub menu from architecture)

  • tim Sep 29, 2009 at 12:42 am

    I got the menu to work without giving me any errors, but the pics and menu buttons don’t appear…please help me if you can. my email is timkirchoff@oru.edu. thanks!!

  • Paul O Sep 30, 2009 at 2:09 pm

    Nicely explained tutorial but I am getting the drop shadow filter error as others were. Also get this in the downloaded source file. Can anyone help please?

  • Vico Oct 1, 2009 at 7:09 pm

    need help!! i want to display 10 rows and 2 columns, how i do it?

    thanx

  • Del1 Oct 18, 2009 at 5:46 pm

    I followed this tut and my .swf file works flawlessly on my computer, but when I add it to Dreamweaver it messes up. I preview my work in a browser and the .swf loads and all the thumbnails come up, but only the first couple will actually bring up their big picture when clicked. I haven’t even published it to the web yet this is happening on my computer. I’m pretty sure all my folders are in the correct places because all thumbnails are viewable and some big images are viewable. If anyone has any ideas please let me know. Thanks.

  • Del1 Oct 18, 2009 at 6:07 pm

    Also when I put the .swf file all by itself on its own .html page it works fine when I preview it.

  • Del1 Oct 18, 2009 at 6:12 pm

    I figured it out. I had an empty div tag overlapping the portion of the .swf file that didn’t work.

  • Sai Oct 19, 2009 at 8:33 am

    Hi Luka, i am appreciated your tutorial, very insight explanation i love it!, but i just have the same question with the pre and next button, if you can help
    cheers

  • Kristoffer Oct 19, 2009 at 5:24 pm

    Has anyone made an AS3 Version out of this one? I’m still working on it.

  • Margaret Oct 29, 2009 at 3:17 pm

    Great example. I am having the same problem Brian had where my text doesn’t show up. I also checked the colors and they are not the same as the background. Any help would be appreciated. Thanks.

  • MK_Ultra Nov 2, 2009 at 3:06 pm

    Amazing tutorial, got it working first time thanks to your brilliant step by step guide.

    I’ve customized it a treat as well, now I’m trying to get it to not only display jpgs but swf files as well. The thumbnails will still be jpegs but I want the big images to be jpg OR swf.

    I’m going to keep trying to crack it but I don’t suppose you’ve got any tips for a bit of code that would kind of do the following:

    bigImagePath = “gallery/digital/”+whichGallery+”/”+bigNumber+”.jpg” OR “swf”;

    I realise that the above won’t work, it’s just to help me communicate what I’m trying to do! I’ll let you know if I get it to work, but in the meantime please let me know if you have any ideas.

    Massive thanks,

    Matt.

  • Andrew Nov 5, 2009 at 1:26 am

    I have the same problem as Claire

    it has an error messege
    Error opening URL “file:///H|/IT7A%20%28I.T%29/Dreamweaver/Image%20Gallery/gallery/gallery.xml”

    please help

  • JoeBorgesIII Nov 5, 2009 at 11:03 pm

    PERFECT TUTORIAL!!!!

    ive made some changes and heres the result
    http://www.smokinjoespits.com

    thanks Luka!

  • JoeBorgesIII Nov 5, 2009 at 11:05 pm

    http://www.smokinjoespits.com/Gallery.html
    to the gallery

  • Indigo Fremont Nov 6, 2009 at 2:27 am

    Great tutorial. Really wonderful… One thing I’m wondering is if anyone can help me – I’d like to have maybe some text or a picture displaying by default where the thumbnails load when the gallery is initially accessed. As it is, there’s the menu buttons at the left, a big white space where thumbs load and the description text at the bottom, and I think it looks a bit…. Void.

    So, how can I put a picture or something there to fill the space that’s empty by default until someone clicks on a section button?

  • pafo Nov 10, 2009 at 5:41 pm

    Hey Luka.. Thanks for the tutorial! You rock!

    That’s my version: http://www.pafo.gr

    Cheers!

  • mixon Nov 19, 2009 at 10:57 am

    can anybody send me a flash .fla of this tutorial into my email id please.
    Thnx

  • kevin Dec 2, 2009 at 2:15 pm

    If anyone could help with two questions, it would be awesome.
    First, how do I get rid of the numbers that appear on the buttons?
    Second, I would like ot increase the number of items that I have in the image holder. I would like to be able to have 10 rows of 10.
    Can anyone explain how I can change the perameters so that this can be accomplished?

  • Niraj Dec 5, 2009 at 6:48 am

    i have call this action script and load a thumbul image

    but i have to scroll this thumbul image
    is this possible ?

    this is my Action script to load the thumbul and on click load image

    mydata=new XML;
    mydata.ignoreWhite=true;
    mydata.load(“data1.xml”);
    mydata.onLoad=dosomething;

    function dosomething (success) {
    if (success) {
    showinfo(0);
    //setup thumbnails
    originalx=290;
    originaly=475;
    currentx=originalx;
    currenty=originaly;

    howmany=mydata.firstChild.childNodes.length;
    for (i=0; i0))
    {
    currentx=originalx;
    currenty+=79;
    }
    _root.attachMovie(“thumbnailmovie”,”thumbnail”+i,1000+i);
    _root["thumbnail"+i].thumbnailname=mydata.firstChild.childNodes[i].childNodes[1].firstChild.nodeValue;
    _root["thumbnail"+i]._x=currentx;
    _root["thumbnail"+i]._y=currenty;
    _root["thumbnail"+i].whichitem=i;
    currentx+=79;

    }
    }
    }

    function showinfo (whichone) {
    _root.title=mydata.firstChild.childNodes[whichone].childNodes[0].firstChild.nodeValue;
    _root.description=mydata.firstChild.childNodes[whichone].childNodes[3].firstChild.nodeValue;
    _root.myphoto.loadMovie(mydata.firstChild.childNodes[whichone].childNodes[2].firstChild.nodeValue);
    }

    and this is my xml data.xml

    Concerts Full Page
    thumbnails1/concertstn.jpg
    aqua2.swf
    A full page ad promoting two upcoming concerts

    Juan Luis Guerra Poster
    thumbnails1/juanluisguerratn.jpg
    aqua1.swf
    Poster for the dominican artist.

    La Buya Full Page
    thumbnails1/buyatn.jpg
    aqua.swf
    Full page advertisement for our morning show

    Concerts Full Page
    thumbnails1/concertstn.jpg
    aqua2.swf
    A full page ad promoting two upcoming concerts

    Juan Luis Guerra Poster
    thumbnails1/juanluisguerratn.jpg
    aqua1.swf
    Poster for the dominican artist.

    La Buya Full Page
    thumbnails1/buyatn.jpg
    aqua.swf
    Full page advertisement for our morning show

    Is this possible to scroll image on mouse drag over left or right

    Thanks for this tutorial………

  • Nenad Dec 19, 2009 at 1:33 am

    Postoji li slican tutorijal na Hrvatskom jeziku?

  • Nenad Dec 19, 2009 at 1:35 am

    E da…. HVALA PUNO! Super si ovo odradio, slikovito :) !

  • MIchael Jan 8, 2010 at 7:48 am

    First of all – this is a great tutorial!!!
    I am new to this and had no problem following it in AS2. My question is if there is a way to re-write the action script for AS3? I am trying to implement this gallery into an existing flash file that I have already started in AS3. Also, how exactly are the dimensions for the positioning – I’ve noticed how the coordinates in the AS are not the same used in the placement of the image holders.
    Is it possible to include a link to a different URL at the end of a gallery?

    Any help would be greatly appreciated – and of course credited on my portfolio page.

  • Moza Jan 15, 2010 at 9:17 pm

    Hey, this is a fantastic tutorial, excellent depth, yet unfortunately still having problems due to inexperience sadly, i was wondering if anyone might be able to enlighten me on a problem, basically iv gone through the tutorial twice, and had the same problem each time, when running the program it doesnt show the folder names or any of the pictures, im sure i havent missed anything (although that seems unlikely since its not working correctly) i was wondering if anyone could help or send me a source file, i would be incredibly grateful.

    Thanks

    Moza

  • KRASTA Jan 17, 2010 at 8:44 pm

    Great tute Luka ! Very well written, and easy for all to understand. you did a good job with all the screenshots which I’m sure would have helped some of the newer ‘flashers’. :)

    I had a little trouble with my dynamic text being displayed.
    But as ‘Lee’ mentioned Bold dynamic text fields weren’t displaying at all. So thanks for the heads up Lee, saved me a lot of headache troubleshooting ! ; )

    Keep up the good work Luka, you have a talent for writing easy to follow tutorials, I will keep a look out for more of your work.

    Regards.

  • KRG-23 Jan 18, 2010 at 12:23 am

    This is a great tutorial, thank you so much.
    I also had a few 1046 errors and could see what was happening. In fact, that was a matter of ActionScript version, this script should be compiled with ActionScript 2 and not 3.
    After modifying my publish settings, all these errors disappeared. But some popped up. Since I am using Flash 9, there is a concern with the ‘linkage’ options (see step 5.14). The field ‘Class’ should be emptied (since it is automatically filled) and everything will run nice and smooth.
    Once again, thank you very much and keep up the good work !

  • sebastian Jan 18, 2010 at 6:56 pm

    for this error:
    Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/monochrome/thumbs/1.jpg’
    Error opening URL ‘file:///C|/Documents%20and%20Settings/Administrator/Desktop/1/gallery/architecture/thumbs/1.jpg’

    Edit your .XML file and check you don’t have empti images comments like this

    those delete them.

  • sebastian Jan 18, 2010 at 6:57 pm

    I have a problem displaying my Thumbs, the mount one over each other…
    where is the option to get them loaded as in the example picture?

  • Ben Jan 19, 2010 at 1:17 am

    I’m having some trouble with this tut, in that I’ve completed it three times, starting from scratch each time, following the exact instructions the first time, modifying the photos and the XML file to reflect new folder titles, and finally, trying to download the source file, swap in my own photos with all the original XML info. With my own project, I am able to get the logo, menu navigation buttons (up and down arrow) and the instructions to click on a thumbnail to see the bigger picture; however, the thumbnails don’t appear, nor do the larger pictures. I am having a problem with the folder menu to the left of the page. It won’t display any of the buttons (movie clips). I don’t know what to do now, since I’ve gone through and looked for any obvious mistakes in the linkage, XML file, or the AS. Has anyone else had this problem and if so, how did you fix it?

    Any response would be greatly appreciated.

    Ben

  • Nate Jan 19, 2010 at 7:11 pm

    Why isn’t my description text or my button labels showing.

  • silvermario Jan 21, 2010 at 5:44 pm

    Thank you for this script, i modified it and you can see it here http://www.cukiernia-sowa-wroclaw.pl/ just click any of the link on the home page. If you woud like to see the modified code just write to me. Ciao!

  • Sensa Jan 30, 2010 at 6:30 pm

    Hi! Can someone send me the sourcefiles? Unfortunately I got some errors… Thx! szilajmaggot@gmail.com

  • talavang Feb 1, 2010 at 8:47 pm

    am still using this app

    3 years and counting

  • Xa Xa Xa Feb 7, 2010 at 11:59 pm

    Here’s the rest of the code Dave was talking about, in full. I had just appended this onto what was already there in the Gallery Actions’ Actions – Frame window. I do admit that my Actionscript is rusty, but this should work.

    _root.prev_btn.onRelease = function() {
    if (bigNumber>1) {
    bigNumber–;
    bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
    disableThumbs();
    loader.loadClip(bigImagePath,target);
    };
    }

    _root.nxt_btn.onRelease = function() {
    if (bigNumber>1) {
    bigNumber++;
    bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
    disableThumbs();
    loader.loadClip(bigImagePath,target);
    };
    }

  • Xa Xa Xa Feb 12, 2010 at 3:40 pm

    It appears that I’ve run into a snag. Gallery works fine until I call in the gallery SWF into another parent SWF- buttons are broken. Any suggestions? You can also shoot me an email.

  • Pikeman Feb 12, 2010 at 3:45 pm

    Xa Xa Xa that ain’t correct, here it is

    /////////////////////////////////////////////////////////////////
    _root.prev_btn.onRelease = function() {
    if (Number(bigNumber)> 0) {
    if (Number(bigNumber) == 1){
    bigNumber = picsNO;
    }else{
    bigNumber–;
    };
    bigImagePath = “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
    disableThumbs();
    loader.loadClip(bigImagePath,target);
    if (clickedGallery>0) {
    var descPosition:Number = 0;
    for (i=0; i=1) {
    if (Number(bigNumber) == picsNO){
    bigNumber = 1;
    }else{
    bigNumber++;
    };
    bigImagePath = “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
    disableThumbs();
    loader.loadClip(bigImagePath,target);
    if (clickedGallery>0) {
    var descPosition:Number = 0;
    for (i=0; i<clickedGallery; i++) {
    descPosition += imagesInGallery[i];
    }
    descPosition = descPosition+Number(bigNumber)-1;
    imageDesc = descriptions[descPosition];
    } else {
    imageDesc = descriptions[Number(bigNumber)-1];
    }
    descText.text = imageDesc;
    }else{
    bigNumber = 1;
    }
    currentThumbnail.enabled = false;
    }
    //////////////////////////////////////////////////////////////////////

    why?
    first of all you must give each Pic it's proper text. As you cycle through the gallery with the Next and Prev button each picture must have it's own text displayed.
    I included a variable at the begining of the code

    var picsNO:Number = 0;

    this is the equivalent for number of pics in the gallery
    In function parseGalleries()
    place
    picsNO = currentGallery.childNodes.length;

    ATENTION this will not work as I created only one gallery and eliminated the menu as I want to place this gallery inside a web page. For this to work you will have to create an array to store the number of images for each gallery somehow like this:

    picsNO[i] = currentGallery.childNodes.length;

    after that in Next and Prev button you will have to ask about picsNO[currentGallery]

    In this case as you reach the end of the Gallery with the Next button it will jump to the first image and so on

    THX for this tutorial!

  • Xa Xa Xa Feb 12, 2010 at 3:56 pm

    Last comment, I swear.

    I was having trouble with the previous and next buttons working when I pull in the gallery SWF into another. Because I had just tacked the prev and next button code to the END of Gallery Actions, I guess it just didn’t “get around to it.” Moving that snippet code to the top of Gallery Actions AND removing “_root.” fixed it.

  • Myke Feb 22, 2010 at 7:48 pm

    can someone make this in Flash CS4 please?

  • Nithin k Mar 10, 2010 at 5:43 am

    thanks for this tutorial, i want to do more with images, can you please send me the latest styles of image galley with explained.

  • anuj chitrakar Mar 10, 2010 at 11:18 am

    as i expected, something went wrong. i thought i was doing fine until i reached step 9. Is the file structure compiled in dreamweaver ? probably not. actually i was thinking on step 8. that i didn’t something funny, ofcourse i have read how xml works….any idea ?

  • anuj chitrakar Mar 10, 2010 at 11:23 am

    i am definately confused on folder structure. where did this mypage.html came from ?

    mean while i will read xml tutorial

  • Dmitry Mar 30, 2010 at 12:15 am

    Nice! I’ve done it, but for an another perpose

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

  • Aaron Johnson Apr 1, 2010 at 6:11 pm

    Hi,

    I just want to say, “LOVE THE TUTE!” Okay, now that that’s out of my system, I have a simple question. I really love the format and everything, but I was wondering how to alter it so that the flash calls in image names instead of image numbers? I’m trying to make this for clients and I’m not sure they’ll want to go through the tedious process of renaming all their files to numbers.

    Thanks in Advance!!

    Aaron -

  • Asif Apr 2, 2010 at 10:52 pm

    hi ! this tutorial is so cool and very helpful thanks.
    but the one thing i m fully understand the var “whatisloading thumb or big”
    what is thumb or big where they come from please tell me?

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

  • TC Apr 6, 2010 at 9:35 pm

    Went through the tutorial …great stuff. Nothing works though as im using cs4 and actionscript 3.0. I fixed what I could but im still getting over 100 errors. Any chance someone has ported this to cs4 or could?

  • satsubatsu347 Apr 11, 2010 at 2:34 pm

    This tutorial is amazing! I have begun to hack the code into nasty bits to bend it to my will but certain goals allude me… Has anyone figured out how to get various adornments in with the description? I am looking to add specific buttons to the description but I just can not seem to get it.

  • satsubatsu347 Apr 15, 2010 at 4:25 am

    okay, well I have some of it working… Can anyone tell me how to generate buttons when the big image is displayed and make them point to URLs that are generated from the XML?

  • Neil K Apr 21, 2010 at 2:49 pm

    Hey, just wanted to say thank you SO much for this, it’s rare to find a tutorial of such quality espcially for such an awesome gallery. you’ve really helped me out and saved me a lot of time and effort!!! and to everyone who can’t get there’s working, doublr check the instance names, make sure you’re typed everything EXACTLY as it appears in the tutorial, and remember, the big pictures won’t load until all the thumbs are accounted for, i had the same problems as some of the people above, but just went over my project to correct them and now it works perfectly!!!

    thanks again whoever wrote this tutorial, good effort!!!

  • paulocésar Apr 27, 2010 at 2:43 pm

    diferent image sizes. 2 images sizes to display. i want to be able to display these 2 different sizes in the gallery. define a “default” pixel space in the flash movie and have the actionscript detect the size.

    or maybe not even detect the size, just display the image in it’s own size inside the room given for it to display.

    can we do this? can anyone help please?

  • Denise May 4, 2010 at 2:32 pm

    Like many people I have also gotten the following error message:
    Error opening URL ‘file:///Macintosh%20HD/Users/deniserotman/Flash%5FProjects/deniserotman/gallery/Print Work/thumbs/1.jpg’

    This happens after I click on the gallery section button
    Can anyone help me out?
    My email is denise.rotman@gmail.com

    Thank you.

  • [...] 50. ? ?Flash8?????? [...]

  • Farid May 13, 2010 at 9:42 pm

    Hi!!

    Well first of all everything is explained and works great in as2, but I wanted to change it to as3 and well I’ve encountered with lot of walls, considering I’m really really new at this. But just found a big one and seems I don’t know if you would be so kind to help me.

    The code is:

    [code]

    import flash.display.SimpleButton;
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.Event;
    import flash.filters.DropShadowFilter;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import flash.utils.getDefinitionByName;
    import flash.xml.XMLDocument;
    import flash.xml.XMLNode;
    import flash.xml.XMLNodeType;

    var menuSpeed:Number = 6;
    var menuDown:SimpleButton = new SimpleButton;
    menuDown = menuDown_btn;
    var menuUp:SimpleButton = new SimpleButton;
    menuUp = menuUp_btn;
    menuUp.alpha = 0;
    menuUp.enabled = false;
    var pressedButton:SimpleButton = new SimpleButton;

    var firstLook:Boolean = true;
    var menuButtons:MovieClip = new MovieClip();
    menuButtons = galleryMenu_mc.buttonsHolder_mc;

    var galleryMask:MovieClip = new MovieClip();
    galleryMask = 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;
    var numberOfGalleries:Number;
    var thumbsDisplayer:MovieClip = new MovieClip();

    imagesHolder.x = 243;
    imagesHolder.y = galleryBtnUpperMargin;
    logo_mc.x = galleryBtnLeftMargin;
    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.";

    var shadowEffect:DropShadowFilter = new DropShadowFilter(3, 45, 0x000000, 100, 3, 3, 1, 3);
    var thumbsFilter:Array = [shadowEffect];
    var loader:Loader = new Loader();
    // mylistener for AS3 unoperable
    var myListener:Object = new Object();
    var clickedGallery:Number;
    var howManyImages:int;
    var whichGallery:String;
    var currentRow:int;
    var currentColumn:int;
    var target: MovieClip = new MovieClip ();
    var thumbNumber: String;
    var thumbPath: String;
    var bigNumber: String;
    var bigImagePath: String;
    var currentThumbnail: MovieClip = new MovieClip ();
    var displayBigImage:MovieClip = new MovieClip();
    var percent:Number;

    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoad_Init);
    loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);

    function onLoad_Init(target:MovieClip) {
    if (whatIsLoading == "thumb") {
    currentThumbnail.percent_txt.visible = false;
    currentThumbnail.filters = thumbsFilter;
    thumbClickable();
    tracker++;
    if (tracker<howManyImages) {
    loadThumbnail();
    } else {
    enableThumbs();
    }
    } else if (whatIsLoading == "big") {
    target.alpha = 0;
    displayBigImage.percent_txt.visible = false;
    displayBigImage.filters = thumbsFilter;
    bigClickable();
    fadeIn();
    }
    };

    function onProgress(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:URLLoader = new URLLoader();
    imageGallery.addEventListener(Event.COMPLETE, parseGalleries);
    imageGallery.load(new URLRequest("gallery/gallery.xml"));

    function parseGalleries(e:Event):void {
    var xDoc:XMLDocument = new XMLDocument();
    xDoc.ignoreWhite = true;
    xDoc.parseXML(imageGallery.data);

    if (xDoc.firstChild.nodeName == "galleries") {
    var rootNode:XMLNode = xDoc.firstChild;
    var currentGallery:XMLNode;
    for (var i:Number =0; i<rootNode.childNodes.length; i++) {
    if (rootNode.childNodes[i].nodeName == "gallery") {

    var currentGalleryTitle:String; //:Array = new Array();
    var currentDescription:String;
    var currentGalleryButton:MovieClip = new MovieClip;
    currentGalleryButton.buttonMode = true;
    currentGalleryButton.useHandCursor = true;
    currentGalleryButton.mouseChildren = false;

    currentGallery = rootNode.childNodes[i];
    imagesInGallery.push(currentGallery.childNodes.length);
    galleryNames.push(currentGallery.attributes.title);
    galleryIntros.push(currentGallery.attributes.intro);
    currentGalleryTitle = rootNode.childNodes[i].attributes.title;

    /* var ClassReference:Class = getDefinitionByName("gallery section button") as Class;
    var galleryButton:Object = new ClassReference();
    currentGalleryButton = galleryMenu_mc.buttonsHolder_mc.addChild(DisplayObject(galleryButton+i));
    */
    var galleryButton:Gallery_SB = new Gallery_SB();
    currentGalleryButton = galleryMenu_mc.buttonsHolder_mc.addChild(galleryButton+i);

    currentGalleryButton.x = 0;
    currentGalleryButton.y = galleryBtnVSpace*i;

    var sectionTitle_txt:TextField = new TextField();
    sectionTitle_txt.text = "0"+(i+1)+" "+currentGalleryTitle.toUpperCase();
    currentGalleryButton.addChild(sectionTitle_txt);

    for (var j:Number =0; j<currentGallery.childNodes.length; j++) {
    if (currentGallery.childNodes[j].nodeName == "image") {
    currentDescription = currentGallery.childNodes[j].firstChild.toString();
    descriptions.push(currentDescription);
    }
    }
    }
    }
    }
    numberOfGalleries = i;
    enableButtons(numberOfGalleries);
    }

    function enableButtons(numberOfGalleries:Number):void {
    for (var i:Number =0; i3) {
    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.load(new URLRequest("gallery/"+whichGallery+"/thumbs/"+thumbNumber+".jpg"));
    currentThumbnail.thumbImage_mc.addChild(loader)
    }

    function thumbClickable():void {
    if (currentThumbnail.addEventListener(MouseEvent.MOUSE_DOWN,clickB_Down_1)){
    function clickB_Down_1(e:MouseEvent):void {
    var imageDesc: String;
    displayBigImage.buttonMode = true;
    displayBigImage.useHandCursor = true;
    displayBigImage.mouseChildren = false;

    /* var ClassRef:Class = getDefinitionByName("big image holder") as Class;
    var bigImage_mc:Object = new ClassRef();
    displayBigImage = imagesHolder.addChild(DisplayObject(bigImage_mc)) as MovieClip;*/

    var bigImage_mc:bigimageholder = new bigimageholder();
    displayBigImage = imagesHolder.addChild(bigImage_mc) as MovieClip;

    bigNumber = this.name.substr(9);
    target = displayBigImage.imageHolder_mc;
    bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
    whatIsLoading = "big";
    disableThumbs();
    loader.load(new URLRequest("gallery/"+whichGallery+"/"+bigNumber+".jpg"));
    displayBigImage.imageHolder_mc.addChild(loader)

    if (clickedGallery>0) {
    var descPosition:Number = 0;
    for (var i:Number =0; i<clickedGallery; 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 (var i:Number =0; i<howManyImages; i++) {
    thumbsDisplayer["thumbnail"+(i+1)].enabled = false;
    }
    }

    function enableThumbs():void {
    for (var i:Number =0; i=1) {
    delete this.ENTER_FRAME;
    this.alpha = 1;
    }
    };
    }

    function enableGalleryNavigation():void {
    if (menuDown.addEventListener(MouseEvent.MOUSE_DOWN,clickButtonDown)){
    function clickButtonDown(e:MouseEvent){
    if (firstLook) {
    menuUp.alpha = 1;
    menuUp.enabled = true;
    firstLook = false;
    }
    var menuTop:Number = menuButtons.height-Math.abs(menuButtons.y);
    if (menuButtons.y=galleryMask.height) {
    var targetPos:Number = menuButtons.y-galleryMask.height;
    menuDown.enabled = false;
    menuUp.enabled = false;
    addEventListener (menuButtons.ENTER_FRAME, menuButtons_f);
    function menuButtons_f (event:Event):void {
    // 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;
    }
    };
    }
    };
    }

    if (menuUp.addEventListener(MouseEvent.MOUSE_DOWN,clickButtonUp)){
    function clickButtonUp(e:MouseEvent){
    var menuTop:Number = menuButtons.height-Math.abs(menuButtons.y);
    if (menuButtons.y0) {
    var targetPos:Number = menuButtons.y+galleryMask.height;
    menuDown.enabled = false;
    menuUp.enabled = false;
    addEventListener (menuButtons.ENTER_FRAME, menuButtons_f1);
    function menuButtons_f1 (event:Event):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;
    }
    };
    }
    };
    }
    }

    [/code]

    But after some changes here and there, I don’t know if I made some terrible mistakes in using methods or bjects and in the end it doesn’t works after 2 weeks work and the error that appears is the next one:

    TypeError: Error #1034: Type Coercion failed: cannot convert “[object Gallery_SB]0″ in flash.display.DisplayObject.
    at imagegallery_fla::MainTimeline/parseGalleries()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

    I would really appreciate any help regarding this!! =’(

  • himansu May 18, 2010 at 5:54 am

    nice picture gallery

  • Aaron Jun 9, 2010 at 1:20 pm

    Hi, Luka,

    Thanks for the wonderful tut! I was just wondering if there was any way to change the menu scroll buttons to a scrollbar. Not using scrollpane or anything like that. Just a simple scrollbar?

    Please help if possible.

  • Anna Jun 18, 2010 at 1:30 am

    Amazing tutorial Luka. The most in-depth tutorial i’ve ever encountered. Unfortunately I could not get it to work with AS3 – though I tried my darnest!

    All the best,
    Anna.

  • alex Jun 23, 2010 at 10:36 am

    Hi! Thank you very much for this tutorial. However, as previous commenters have been requesting, a “previous” and “next” button would be nice to “circle” around the images.

    below is what I came up with to have this feature.

    I hope this helps.

    First:
    Add a new layer on the main timeline, and on that layer, create two buttons and give each their instance name: “prev_btn” and “next_btn”.

    Step 1:
    On line 4, below “menuUp._alpha = 0;”, add these lines:

    prev_btn._visible = false;
    next_btn._visible = false;

    Step 2:
    Look for “function thumbClickable():Void”, inside this function, below “loader.loadClip(bigImagePath, target);” insert:

    // displays the buttons when a thumbnail is clicked.
    prev_btn._visible = true;
    next_btn._visible = true;

    Step 3:
    look for “function bigClickable():Void” and under “enableThumbs();” insert:

    // hide buttons when big image is clicked.
    prev_btn._visible = false;
    next_btn._visible = false;

    Step 4:
    Finally, go to the very last line of the action script and add the following:

    // added for prev button
    prev_btn.onRelease = function() {
    if (bigNumber == 1) {
    bigNumber = howManyImages;
    removeMovieClip(displayBigImage);
    displayBigImage = imagesHolder.attachMovie(“big image holder”, “bigImage_mc”, imagesHolder.getNextHighestDepth());
    target = displayBigImage.imageHolder_mc;
    bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
    whatIsLoading = “big”;
    disableThumbs();
    loader.loadClip(bigImagePath,target);

    if (clickedGallery>0) {
    var descPosition:Number = 0;
    for (i=0; i0) {
    var descPosition:Number = 0;
    for (i=0; i0) {
    var descPosition:Number = 0;
    for (i=0; i0) {
    var descPosition:Number = 0;
    for (i=0; i<clickedGallery; i++) {
    descPosition += imagesInGallery[i];
    }
    descPosition = descPosition+Number(bigNumber)-1;
    imageDesc = descriptions[descPosition];
    } else {
    imageDesc = descriptions[Number(bigNumber)-1];
    }
    descText.text = imageDesc;

    }
    } // end next button

  • alex Jun 23, 2010 at 10:43 am

    must have been cut off, here’s step for again:

    Step 4:
    Finally, go to the very last line of the action script and add the following:

    // added for prev button
    prev_btn.onRelease = function() {
    if (bigNumber == 1) {
    bigNumber = howManyImages;
    removeMovieClip(displayBigImage);
    displayBigImage = imagesHolder.attachMovie(“big image holder”, “bigImage_mc”, imagesHolder.getNextHighestDepth());
    target = displayBigImage.imageHolder_mc;
    bigImagePath= “gallery/”+whichGallery+”/”+bigNumber+”.jpg”;
    whatIsLoading = “big”;
    disableThumbs();
    loader.loadClip(bigImagePath,target);

    if (clickedGallery>0) {
    var descPosition:Number = 0;
    for (i=0; i0) {
    var descPosition:Number = 0;
    for (i=0; i0) {
    var descPosition:Number = 0;
    for (i=0; i0) {
    var descPosition:Number = 0;
    for (i=0; i<clickedGallery; i++) {
    descPosition += imagesInGallery[i];
    }
    descPosition = descPosition+Number(bigNumber)-1;
    imageDesc = descriptions[descPosition];
    } else {
    imageDesc = descriptions[Number(bigNumber)-1];
    }
    descText.text = imageDesc;

    }
    } // end next button

  • alex Jun 27, 2010 at 6:05 am

    Hi,

    I’m really sorry to post multiple comments but the codes are cut off still.

    here’s a link to the complete guide.

    I hope this helps.

    https://docs.google.com/leaf?id=0Bz8YjrTCFhr1NjljODVmYTYtNmYyNy00Y2M3LTg2YWEtMDcyZGYwNTcxZTA5&hl=en

    thanks!

  • ivica Jul 14, 2010 at 2:08 pm

    luka great tut

    is it possible to have more attributes in images node. And how to displey them in bigimages

    tks ivica

  • ivica Jul 15, 2010 at 9:35 pm

    atribute in image node working

  • hamkane Jul 16, 2010 at 5:24 pm

    This tutorial would have been great it was in AS3
    but good job!!

  • kumar Jul 17, 2010 at 11:56 am

    hiiiiiiiiiiii
    great !!!!!!!!!!!!!!!!!!!!!!!!!

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

  • ai Aug 2, 2010 at 9:35 am

    I’m trying to make a gallery wherein the big image does not appear in front of the thumbnails. so I have 2 movieclip for the thumbnails and big image but when i try to pressed the button for the other gallery the big image does not load…But on the first selection of a gallery the big image holder works but when i pressed the other gallery it doesn’t work… any idea about this??

  • Holly Aug 11, 2010 at 4:04 am

    This is a question about the code for scrolling thumbnails left by Edyta Jordan in a comment. I made the movie clip described and pasted in the code. is there anything else I need to do to the original code to get this to work?

    I get two error saying:
    The class or interface ‘Tween’ could not be loaded.
    var arrowTween:Tween = newTween(imagesHolder_mc.thumbs_mc, “_y”, Strong.easeOut, current, target, 3, true);

    The class or interface ‘Tween’ could not be loaded. var arrowTween:Tween = new Tween(imagesHolder_mc.thumbs_mc, “_y”,

    I read somewhere else that I need to add this to the code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*
    But all this does is freeze the menu so I can’t select anything. If anyone can tell me what I am doing wrong I’d appreciate it.

  • Christy Rasp Aug 18, 2010 at 3:00 am

    Thank you very much! Lot’s of steps but very detailed. You might want to check out Dreamlinestudio here:
    http://www.dreamlinestudio.com/Flash_Image_Gallery.php

    Pretty much the best collection of flash image galleries I have found

    xoxox

    - Christy

  • Roy Aug 31, 2010 at 12:00 pm

    I may have missed it here, but is it posible to get 6 or 7 thumbs next to each other instead of just 5? I tried to change some things in de as but that didn’t help.

    Thanks

  • DB Sep 27, 2010 at 5:36 pm

    I cannot get the big images to display. I’ve checked over & over & I’ve set up the flash w/o typos. I’ve checked my folder setup and the images are all there. Its like its displaying somewhere I just cannot see it – the description changes but the larger image is no where to be found.

    I love this tutorial and the gallery so far but I’m totally baffled that I cannot seem to find what I’m missing.

    Thank you for any help!!

  • DB Sep 28, 2010 at 8:57 pm

    I’ve been playing with this – moved the image all around but still not seeing it. Added a border but still not seeing it. Its in the folder w/ the correct numbers. The trace comes out Ok.

    /* trying to do this… */
    if (bigImage_mc == displayBigImage) {
    trace(“OK.”);
    }

    displayBigImage._x = -20;
    displayBigImage._y = -200;
    displayBigImage.border = 100;
    /* end try */

  • [...] 50. ??Flash8?????? [...]

  • Wilmie Oct 18, 2010 at 12:05 pm

    Hi thanks!! Really a great tutorial, very easy to understand! Enjoyed every moment!

    I also want to know how do i make it so that it is 4 columns and 5 rows instead?

  • oxido Oct 28, 2010 at 1:50 am

    ALEX, thank you for prev and next buttons implemented.
    I’ll put myself already implemented the code below. All you have to do is copy the code, you delete the old one and replace it with this new code:

    https://docs.google.com/document/edit?id=1NxdqojVxU9Ji2tvBb23t5KS_d3Sv_6fy0OZN7_IrpT4&hl=en

  • oxido Oct 28, 2010 at 1:56 am

    oh, sory cuz i post again. And also you have to do 2 buttons, and give them intance name “prev_btn” and “next_btn”.

    so,you select curent action script from frame (all action script),and paste the new one frome the up link (i wil paste-it again) :P :
    https://docs.google.com/document/edit?id=1NxdqojVxU9Ji2tvBb23t5KS_d3Sv_6fy0OZN7_IrpT4&hl=en

    Tnx, and have a nice day.
    I say bye from Romania. sooo… bye :D

  • christsealed Nov 14, 2010 at 2:24 pm

    Hey, great tute! I’ve been using elements of it to create a killer website. But one question. Is there any way to get the first gallery images to show up when it loads?

  • christsealed Nov 14, 2010 at 4:39 pm

    nvm…i got it!

  • Riaan Dec 4, 2010 at 4:13 pm

    This tutorial is way too long. There has to be a shorter and less complicated flash photo gallery tutorial….

  • [...] 50. ??Flash8?????? [...]

  • Peter Dec 19, 2010 at 3:32 pm

    Could someone please send me a fla file to my email. I would gladly appreciate it very much.

    My email is tkwsn_1694@hotmail.com

    Thank you

  • Bertman Eddie Dec 23, 2010 at 2:35 am

    Hi, this was an awesome tutorial… Everything works fine but I didnt get what are those up and down buttons standing for?
    They do nothing when I click them at your live demo page…

  • frolic Dec 27, 2010 at 11:19 pm

    This is good. Thanks! I’m currently using it to display my amateur photography work. I’ve made some modifications to suit my site, wich will be up and running soon. Just one question: How can I replace a character in the gallery section button? I ask this because I’d like the section button title to be a full sentence, not just one word. So the folder would be something like “last%holidays”, and then using actionscript transform the % into a space, for displaying in the button.
    I’d also like to have a button to display the current picture fullscreen. I’ll try to figure out that, but any comments will be appreciated.

    Thanks!!

  • frolic Jan 5, 2011 at 10:27 am

    Hi. I’ve benn fiddling with the next/prev buttons, wich i think are necessary.
    They work fine, but i’d like to make them appear every time the user rolls over the big image, and disappear when they roll out of that big picture.
    Where should I put the _visible = false property?

  • frolic Jan 7, 2011 at 1:57 am

    All right, I’ve been working on some other guy script to replace strings and managed to get full titles for the buttons.

    First, rename the folder using _ (underscores) wherever you need to a space character to be. Modify the node in the xml accordingly.

    Then, in the acitions frame, search for

    currentGalleryButton._y = galleryBtnVSpace*i;

    and right after copy and paste this:

    /// Removing “_” from folder names ///////////

    String.prototype.reemplazar = function(termino1, termino2) {
    var temp_array = this.split(termino1);
    var new_cadena = “”;
    for (var k = 0; k<temp_array.length; k++) {
    new_cadena += temp_array[k]+""+termino2;
    }
    new_cadena = new_cadena.substring(0, new_cadena.length-termino2.length);
    return new_cadena;
    };
    // replacing characters and asigning the results to variable termino2

    termino1 = currentGalleryTitle;
    termino2 = termino1.reemplazar("_", " ");

    /////// adding the new name without _ but with spaces to the button ////////////////
    currentGalleryButton.sectionTitle_txt.text = "0"+(i+1)+" "+termino2;

    That's it. Next line in the code should be:

    for (j=0; j<currentGallery.childNodes.length; j++) {

    ————————————————————————
    Well, I'm still trying to get the next/prev buttons to appear and dissappear on mouse over/out of the big picture.
    And I'd really like a fullscreen button, to display a larger version of the picture. There's a way to dinamicaly scale the pictures from that larger version to the size of the bigpcture holder. That way we only need one jpg for each photo (of course it takes more time to load, but what the heck). Anyway, i still can't figure out how to display the picture fullscreen.
    Thanks

  • LW Jan 15, 2011 at 9:35 pm

    I can’t seem to download the XML file in 8.1 could someone possible send it to me.
    Could someone also tell me what the up and down buttons do as nothing appears to happen in the sample file.
    Many thanks.

  • Neli Jan 17, 2011 at 1:58 am

    Hi, This tutorial is great! I’m a newbie at flash and was able to get the logo and left menu working ok, but the thumbnails (nor large images) display. Does anyone have the source .fla for this tutorial they could email me please? Thanks!

  • Neli Jan 17, 2011 at 3:12 am

    Please disregard my previous comment as I found the source files in “part 2″ of your lesson. Thanks! :)

    Another question.. I, too, am interested in adding previous and next buttons to the gallery. Can you confirm that Alex’s code above is correct? Thanks!

  • Francis Feb 10, 2011 at 1:51 pm

    I am so grateful for this amazing tutorial. it is well outlined. I just had a little problem. My preloader is not working when I click on the thumbnail to display the bigger picture. please what am I to do to make the preloader work. Tanks.

  • Heidi Mar 3, 2011 at 6:49 am

    Love your tutorial… very well laid out and extremely easy to follow. I did all the steps and everything showed up just fine on my test run. I am pretty new to action script and have been trying to find a flash/xml tutorial very much like yours but simplified… I don’t want the gallery options or up/down buttons but would like all the thumbs to load and be visible without having to click on something first and of course everything else you have in this tutorial.

    I have been able to change the xml file to get rid of added gallery links and just keep it to one but I don’t really need it at all.

    How would the code be to have the thumbs automatically display and not have the gallery menu/choices show?

    Thanks for any help on this!

  • rachel Mar 8, 2011 at 2:15 am

    Thank you for a great detailed explaination of this tutorial. But for some reason I am not able to load the thumnail images. The problem is in the loadThumbnail() function. I added a trace() method after the currentThumbnail = thumbsDisplayer.attachMovie(“thumbnail holder”, “thumnail”+(tracker+1), thumbsDisplayer.getNextHighestDepth()); to figure out the problem. The output is as follows:

    var tracker = 0
    instance currentThumbnail = undefined
    var tracker:0
    the current instance of thumbnail holder = thumbnail0
    target:undefined
    thumbNumber: undefined
    the path is:gallery/family/thumbs/undefined.jpg

    I’m getting undefined for my thumbnail instances. It appears that the (tracker+1) is not incrementing to give me thumbnail1, it appears to start at thumbnail0. I have not changed any code for the loadThumbnail().
    thanks for any help

  • rachel Mar 9, 2011 at 6:30 pm

    I was able to figure out my undefined problem – i mispelled a variable;
    i did encounter the Error opening URL and i found out that in windows xp – folder properties hide known file extension will cause your jpg file to be 1.jpg.jpg; so I renamed my pics to just the number instead of 1.jpg
    as shown in the tutorial and it loaded properly. Hope this helps someone.

  • CiKa Mar 15, 2011 at 7:23 am

    How can I create a photo gallery for the swf which is already made before? ( I mean that How can i change the picture in the swf)

  • Rocio Mar 23, 2011 at 5:32 pm

    Hi
    How I can change photo to photo in this gallery? (transitions)

  • Gigio Mar 26, 2011 at 12:26 am

    Wow, it is an amazing tutorial. Everythin works very well. Thanks for share it. I learned too much,

    Thanks again!

    HND

  • Curious Onlooker Mar 28, 2011 at 11:01 am

    What a fantastic tutorial.

    It is a pity that those who have used this, and customized it further, do not share their code, rather than simply showing off for the sake of vanity.

    Please, take a lesson from the original author, and share…..

  • stoneycurtis Apr 12, 2011 at 4:44 pm

    Great Tutorial! I’m a newbie and I got it on the 3rd try, works great except when I import the swf into a parent .fla then it has issues:
    The swf loads correctly, clicking a menu button loads the thumbnails correctly, however, if you click a thumbnail to view the larger image and then close it and click a menu button the swf unloads.
    If you click a menu button with the big image still open the swf stays loaded and all is good. How can I kep the swf loaded after a big image is opened and closed?
    Thanks for any help…

  • Luna Apr 20, 2011 at 6:38 pm

    Wow, this is an amazing tutorial… I had pretty much NO Flash knowledge at all and I was able to follow the tutorial and produce a gallery for an intranet display. Thank’s so much for posting such a down-to-Earth tutorial!!

    Best regards,
    Luna K.

  • Alice Apr 25, 2011 at 3:24 pm

    Please someone help. I have worked through the tutorial and the swf is working without any error messages but the menu does not appear and so the images don’t appear either. has anyone got the same problem? If you have found a solution to this, please share!

  • Daniel May 24, 2011 at 6:40 am

    As many already said it before, amazingly simple and clear tutorial. Being a total noob in scripting and hating that process to the bone, I was impressed how easily I could adapt your model to my design. Thank you very much.

    But (because there’s always one), like some people before, I would like to center my images in a big bigimage container because I have horizontal and vertical pictures.

    I tried some advices I’ve found on the web, but nothing seems to work because I can’t really figure where the big images load and where to put a listener to be able to tell those loaded picture to get centered in the container.

    thank you in advance and thank you again for the tutorial !!

  • Daniel Möbel May 24, 2011 at 2:13 pm

    Great I just tested this and made my first dynamic image gallery ever. I will start fine tuning it a bit but this is already a big step for my. Thanks a lot.

  • flash xml pictures Jun 2, 2011 at 9:29 am

    [...] How to make an amazing dynamic image gallery in Flash 8 – learn it … Nov 20, 2008 … Learn to create a powerful, XML-driven image gallery in Flash, with JPEG images that are loaded … [...]

  • Jeremy Smith Jun 7, 2011 at 5:08 pm

    I am wanting to do this but I felt for a client of mine I would do a sort of PHP uploading script.

    By where the user is able to upload the file(s) as images and then upload them to a restricted directory on my web server.

    Then regen part of the XML file (as PHP can only append to the bottom of the file).

    I just thought this would be greatly expandable to my clients development requirements, will bash on with this tutorial.

    I don’t mind creating a mockup if you’d like an join forces perhaps?

    Just an idea really.

    All the best with your work,
    Jeremy (HS Media)

  • CRISTIAN Jun 20, 2011 at 9:48 pm

    Anybody could help me with the problem that happens at the moment of excecuting the swf? because appears the following error: Error al abrir la URL ‘file:///C|/Users/user/Desktop/AREA%2051/GALERIA%5FIMAGENES%5FOK/root/gallery/gallery/galeria.xml’ …
    I do not what to do with this …
    if anybody knows it please contact with me at: swear0006@aol.com
    thanks …

  • Ranji Jun 22, 2011 at 5:21 am

    Wow, this is an good tutorial…

  • kishore Jun 28, 2011 at 9:02 am

    its an amazing tutorial….thanks for sharing

  • Jac Jul 27, 2011 at 11:23 am

    Hello, first of all I wanted to say that I’m brand new (this week) to both Flash & ActionScript, although I do have some programming experience in other languages. I have found this tutorial to be immensely helpful in allowing me to gain a better understanding of how Flash/AS work.

    I also wanted to state that I believe that I have found an answer for Pavel/Daniel/Alia’s question concerning keeping the highlighted state of the current gallery. Unfortunately I don’t have the original line numbering for reference since I’ve been playing so much with the code, but I’ll try my best to describe the details of the process below…

    1. Save a current copy of your (working) code so that it may be used as a backup if things get totally messed up.
    2. Near the top of the script where the variables are being declared create the following three new variables:

    var current_level:Number = 0;
    var last_button:Object;
    var WhatAmI:String = “”;

    3. Now jump down to the “enableButtons” function and update the “pressedButton.onRollOut” sub-function to read as follows:

    pressedButton.onRollOut = function():Void {
    WhatAmI = string(this);
    new_level = Number(WhatAmI.charAt(WhatAmI.length – 1));
    if (clickedGallery != new_level) { this.gotoAndStop(1); }
    };

    4. Now go down to the next sub-function listed, the “pressedButton.onPress” function, and add the following two lines of code immediately after the function is opened:

    if (old_level != undefined) { old_level.gotoAndStop(1); }
    old_level = this;

    …If it was edited correctly, the function should start out reading as follows:

    pressedButton.onPress = function():Void {
    if (old_level != undefined) { old_level.gotoAndStop(1); }
    old_level = this;
    removeMovieClip(thumbsDisplayer);
    removeMovieClip(displayBigImage);

    I hope that someone finds this helpful. Good luck, and thanks again for sharing this wonderful tutorial!!

  • Rehan Merchant Jul 29, 2011 at 5:58 pm

    Dear Luka,

    I am REALLY VERY THANKFUL to you for creating such a detailed tutorial.

    Even though I am not a Action Script developer I was still able to create the flash gallery.

    My gallery is being tested at:http://www.raaiza.com/Ultimate_Image_Gallery/mypage.html

    Regards

    Rehan

  • [...] How to make an amazing dynamic image gallery in Flash 8 – learn it … Nov 20, 2008 … In this Flash 8 lesson explained in extreme detail, I will teach you how to make a powerful image … [...]

  • orchid Sep 16, 2011 at 4:51 am

    nice flash gallery thanks for sharing it

  • TK429 Sep 16, 2011 at 10:37 am

    Superb tutorial! I’m a complete noob to actionscript. Amazingly I got it to work first time.

  • Peter Sep 18, 2011 at 9:12 pm

    very good flash gallery.

    how to add a description to thumbs at the bottom of each thumb?

    Thanks

  • Chuck Jones Oct 2, 2011 at 5:31 pm

    Awesome tutorial I am going to have to check out part two.

  • Deepa Oct 8, 2011 at 10:12 am

    Thanks for this very clear and detailed tutorial……………………

  • alexamorison Oct 21, 2011 at 10:31 am

    Ooooopssss………..
    very long detail my mind is hack :p lol

  • 50?????????? | ??? Dec 1, 2011 at 1:57 pm

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

  • 50?????????? | ??? Dec 1, 2011 at 2:08 pm

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

  • reza Dec 20, 2011 at 6:18 pm

    please help me how show uft-8 at text field sectionTitle_txt

  • Kees Dec 22, 2011 at 1:30 pm

    But exactly with Flash have still started (CS4) and you found tutorial. It has succeeded me these with good result, follow although I am fluent in not well the English language, use translator software. In CS4 ” work”: void” not well, simply do remove. Will try a next and previous bud add still. I hope follow tutorials still several of your, very interresant. Thanks

  • HAMID Dec 30, 2011 at 2:35 pm

    hello good tanks yours site is useful for we

  • sarahbernard Jan 11, 2012 at 8:48 am

    Hello

    The link to download the source is no longer available.
    Can you recharge it.
    Sorry for my English

    Thank you to

  • [...] 50. ??Flash8?????? [...]

  • Rahi Feb 13, 2012 at 8:17 am

    Dear jiro,

    I have the same problem as Sara. I don’t know where I did a mistake :(
    would you please help me

  • Kris May 8, 2012 at 4:02 pm

    Thank you for this great tutorial. I have tried numerous time working on this and kept getting the same error message (see below). Can anyone please help and tell me what I missed and did wrong?

    error message:********************
    Scene 1, Layer ‘actions’, Frame 1, Line 74 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 100 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 103 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 106 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 109 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 146 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 169 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 174 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 179 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 186 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 187 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 195 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 207 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 224 1046: Type was not found or was not a compile-time constant: Void.

  • Deeps Jul 15, 2012 at 5:53 am

    Hi everyone,

    Great tutorial by the way.
    I want 2 know how to change the big image by directly clicking on the next thumbnail instead of first closing the big display by clicking on it as it currently is in the tutorial.

  • tino Aug 7, 2012 at 3:46 pm

    how to solve the problem of Croatian characters : ?, ? ,?, š , ž

  • Deepak S Sep 9, 2012 at 5:29 am

    Hi,
    First of all . Great tutorial. I created my entire website based on this tutorial. Just one thing. I have a movieclip which loads an image by clicking a button, but i want this movieclip to load by clicking on the menu buttons on the left.

    Thanks…

  • deepak shetty Sep 10, 2012 at 6:25 pm

    Please somebody tell me how i can load a specific image on the page which is stored in the root folder by clicking on the galley menu items.. for eg: How can i load an image photo1.jpg when i click on architecture along with the thumbnails it is currently loading in the tutorial.

  • tom Oct 23, 2012 at 6:07 am

    Still getting error like Kris above, i don’t know what was wrong and definitely i’m doing exacly the same as this tutorial do..

    Scene 1, Layer ‘actions’, Frame 1, Line 74 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 100 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 103 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 106 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 109 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 146 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 169 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 174 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 179 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 186 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 187 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 195 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 207 1046: Type was not found or was not a compile-time constant: Void.
    Scene 1, Layer ‘actions’, Frame 1, Line 224 1046: Type was not found or was not a compile-time constant: Void.

    Anyone got the same error? or maybe can help me? I’m not a flash coder but i can understand a little.. thank you so much for helping me.

  • w Nov 28, 2012 at 11:46 pm

    doesnt work on google chrome how can i fix that?

  • steveksi Dec 3, 2012 at 8:34 pm

    DOES NOT WORK ANYMORE IN WIN7
    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

    Hey!

    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 [...]

Leave a comment