Making The Ultimate Dynamic Image Gallery in Flash 8 - Part 1 of 2

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.
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:
o a white background, just to make it nicer, and to be able to add a drop shadow
effect to it later,
o an empty MovieClip inside which the external JPEG thumbnail will be loaded
and
o 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:
o a white background,
o an empty MovieClip inside which the big external JPEG image will be loaded
and
o 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:
o 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.
o When the user clicks on a thumbnail, a new empty MovieClip will be created
inside the placeholder, which will have the big image holder MovieClip attached
to it. The preloading of the big JPEG image will start, and when it reaches 100%,
the image will fade in nicely and hide the thumbnails. When the user click on the
image, it will disappear and the thumbnails will appear again.
5. A dynamic text field. This is where the descriptions for all the galleries and images will
appear.
6. Your website logo. This is just a graphic element, which will appear above the gallery.
II. The XML file
The XML file will store all the data related to the images:
 The name of each gallery. This name will appear as the label on each gallery button in
the menu. Also, this same name is the name of the folder (directory, file folder, as it is
also called) inside which that particular gallery will be stored on your web server.
 The description of each gallery. This is the text that will appear in the dynamic text
field when the user clicks on a gallery button and the thumbnails for it are shown.
 The description of each image. This is the text that will show up in the same dynamic
field mentioned above when a big image has been loaded.
III. The images and the thumbnails
All the images will have to be stored according to an exact hierarchy and precise naming
rules. Each gallery will be placed in a folder which will have the same name as the title of the
gallery as it appears in the XML file. Inside each folder, the images will have to be named as
1.jpg, 2.jpg, 3.jpg and so on. Furthermore, each gallery folder will have a subfolder inside it,
called thumbs, where the thumbnails for the gallery will be stored. The thumbnails will have the
same file names as their bigger counterparts (1.jpg, 2.jpg, etc). All the galleries will be placed in
a single folder, named gallery.
You have to abide by this naming/folder hierarchy system if you want your dynamic image
gallery to function properly. Once you want to insert new images inside the gallery, the only
thing you will have to do is to update the XML file, create new folders according to the gallery
names inside this XML file, and place the images and their respective thumbs inside them. You
will then upload the new images and the XML file to your web server and they will
automatically appear inside the menu.
Sounds great — a fully automated image gallery system. I will start by showing you how to
create the SWF movie, after that you will download the XML file and modify it according to
your needs, make all the necessary folders and place the images and thumbnails inside them, and
last but not least (in fact, the most important) you will create the ActionScript code that runs the
whole thing. Let’s get started!
Top of page
1. Setting up your document
1.1 Open a new Flash document (File > New > Flash Document).
1.2 Select Modify > Document. Set the dimensions of your Flash movie to 760 by 540 pixels
and set the speed (frame rate) to 30 fps. Click OK.
1.3 Save your document in a separate folder — make a new folder just for this lesson. A lot
of files are going to be needed for the creation of the image gallery, so it is a wise thing to keep
them all in one place, instead of putting them together with any other Flash files that you may be
working on.
Just a little bit about the dimensions of your document here: The document’s size (width and
height) is just a suggestion, like all of the dimensions and element positioning (menu, main
images, thumbnails, etc) involved in this lesson. I recommend that you use my dimensions until
the end of the tutorial, so that you can more easily follow my instructions. Later, once that you
grasp the way the gallery works, you can change the dimensions and the general layout of the
gallery to suit your needs.
Top of page
2. Creating the gallery menu
2.1 Call the first layer in your document gallery menu.

2.2 Select Insert > New Symbol. In the window that appears, do the following:
 Select Movie clip as type,

 enter empty movie clip as the name of the new symbol
 click OK.
2.3 You will now find yourself working inside the new MovieClip symbol. Since you need an
empty MovieClip, don’t draw anything here, just click the Scene 1 link above the timeline.
Your newly made empty movie clip symbol is now stored inside the Library. You can access the
Library by selecting Window > Library. Keep the Library window open, because you are going
to need it frequently, especially to place instances of the empty movie clip symbol on the stage at
various points during this lesson.
Now you are going to create the main MovieClip for the image gallery menu. The first thing that
you’re going to make is a mask for the menu buttons.
2.4 Select the Rectangle tool (R). In the Colors section of the Tools panel, block the stroke
color, because you won’t need it. Do this by selecting the stroke color first — click on the little
pencil icon to do it (see 1 in the image below). Next, click on the No color button (see 2 in the
image below). You can choose any fill color that you like.
Also, turn off the Object Drawing and Snap to Objects options (both icons are shown below —
you can find them at the bottom of the Tools panel while the Rectangle tool is still selected).
2.5 Click and start dragging your mouse to draw a rectangle. Make it any size you want.
2.6 Select the rectangle by clicking on it with the Selection tool (V). Go to the left side of the
Property inspector and find the width and height options (W and H, respectively) for the shape.
Enter 200 pixels for the width and 390 pixels for height.
2.7 While the rectangle is still selected, select Modify > Convert to Symbol. Make the
following choices:
 Select Movie clip as type of symbol.

 Name the symbol menu holder.
 Select the upper left registration point for the new symbol (see image below).
 Click OK.
This last point is very important. You will do the same thing for every single symbol that you are
going to create in this lesson. This is done in order to facilitate the positioning and resizing of
elements on the stage via ActionScript (dynamically) later.
If you had made some other choice for the registration point, you would have had to know and
use the width and height for each symbol to be able to position them properly. By selecting the
upper left corner for the registration point, the positioning is pretty straightforward and there is
no fuss at all.
2.8 Double-click on the newly made menu holder MovieClip on the stage (using the Selection
tool) to enter inside it. If you take a look above the stage, you’ll see that Flash nicely informs you
that you are working inside the menu holder MovieClip now.
2.9 The rectangle vector shape inside the movie clip should be selected by default. If this isn’t
the case, click on it with the Selection tool (V) to select it.
2.10 Select Modify > Convert to Symbol. Once again, select Movie clip as type, choose the
upper left corner for the registration point, call it menu mask and click OK.
2.11 The new MovieClip will be selected by default immediately after you have clicked the OK
button in the previous step. Now go to the Property inspector and give an Instance name to this
MovieClip: call it galleryMask_mc.
2.12 Lock the current layer and call it mask. Create a new layer and call it placeholder.
Remember that all of this is done inside the menu holder movie clip — you are still inside it.
2.13 Go to the Library (Window > Library), click and drag an instance of the empty movie clip
symbol onto the stage, inside the placeholder layer that you created a moment ago.
This movie clip has no graphical content, and so it is represented by its registration point only.
This is the small circle with the cross inside it that showed up once you dragged the movie clip
from the Library onto the stage. If ever in doubt which movie clip you are tinkering with, just
look at the Property inspector while it is selected. You can see this in the screenshot below.
2.14 With the instance of the empty movie clip on the stage still selected, open the Align panel
by selecting Window > Align. Do this:
 Turn on the Align/Distribute to Stage button (see 1 below).

 Click the Align left edge button (see 2 below).
 Click the Align upper edge button (see 3 below).
The empty movie clip will now be perfectly aligned with the menu holder movie clip’s
registration point, as you can see.
This is just what you need, since this empty movie clip which you have just positioned will be
the placeholder for all the menu buttons. That being said, you must prepare it properly to be able
to load the buttons inside it later. Follow the next step to see how .
2.15 The empty movie clip must still be selected. Go to the Property inspector and enter the
Instance name for this movie clip: call it buttonsHolder_mc.
2.16 Lock the placeholder layer and drag it under the mask layer.
2.17 Right-click on the mask layer and select the Mask option from the menu that pops up (also
called the contextual menu). The mask layer will instantly turn into a mask, masking the
placeholder layer beneath it.
2.18 Click on the Scene 1 link above the layers to go back to the main timeline.
2.19 The menu holder movie clip will be selected by default, which you can see in the Property
inspector. Go right there and give at an Instance name: call it galleryMenu_mc.
You have probably noticed that this movie clip is almost invisible — it is represented by its
registration point (see1 in the screenshot below) and central point (see 2) only. This is because
the mask inside it isn’t visible, which is normal.
Fine — the menu is pretty much ready now, it can receive the buttons. But you have to actually
make a button that is going to be pulled out of the Library at runtime (while the Flash SWF
movie is running, that is) and placed inside the menu, as many times as there will be sections
inside your gallery.
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.
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.
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).
3.6 Right-click on frame 2 in this layer and select Insert Keyframe from the contextual menu.
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.
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.
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?
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.
3.11 Now go over to the Property inspector and type in the Instance name for your dynamic
text field: call it sectionTitle_txt.
3.12 On the right side of the same panel, click the Embed button.
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 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.
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.
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.
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.
3.18 In the Linkage Properties window that appears, check the Export for ActionScript
option. The Export in first frame option will automatically become checked too. You can leave
it like that, it’s fine.
As for the Identifier option, you can also leave it at the default value, which is the name of the
movie clip symbol itself — gallery section button in this case. Click OK.
The Identifier name will serve to pull the button dynamically from the Library and place it inside
the menu that you have created on the previous page. This is very, very practical, because you
will change just the images and the XML file once the SWF is finished.
This makes possible for dynamic menu creation, also thanks to the dynamic text field inside the
button — each button will have its label match the section of the gallery it represents. Why
create every single button manually, re-open the FLA, re-export it as a SWF when you can solve
this with ActionScript and have the menu created in a split second!
You will now make the remaining elements, so that your photo galleries menu is complete.
Namely, you will make two buttons for scrolling through the menu and a title that tells the users
what’s the menu about. Before that, you’ll just position the galleryMenu_mc movie clip.
Save your document before proceeding to the next section of this lesson, where the creation of
menu navigation buttons is explained.
Top of page
4. Making the menu navigation buttons
4.1 You have to select the galleryMenu_mc movie clip to be able to position it. Since this movie
clip is almost invisible, it isn’t as easily selectable as any othe movie clip might be. Here’s how
you do it (follow the pictures below the list):
1. Unlock the gallery menu layer.

2. Click on the layer’s first frame to select it.
3. The Property inspector tells you that a frame has been selected.
4. Once you select a frame, all the content inside it is selected too. Because of this, the
movie clip you are looking for will appear. Click on the movie clip once with the
Selection tool (V) to select it (you must click on its registration point since no other
content of this symbol is visible).
5. The movie clip is selected, which is indicated in the Property inspector.
4.2 Enter the following values for the movie clip’s coordinates (inside the Property inspector): 10
for X and 99 for Y.
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.
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.
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).
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.
4.7 Hold Shift (to draw a square and not a rectangle), click on the stage and draw a 29 by 29
pixel square.
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!
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.
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.
4.12 Draw a white arrow that is pointing downwards, inside the arrow layer.
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.
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.
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.
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.
4.16 Assign an Instance name to this button because you’ll need to manipulate it via Actioncript
later. Name it menuDown_btn.
Place this button above the thin line, on the right.
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.
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.
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.
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.
4.22 Select the “UP” button and assign it an Instance name: call it menuUp_btn.
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.
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.

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.
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.
This will place the imagesHolder_mc movie clip close to the menu, on its right, like shown
below.
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.
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.
5.5 Draw a 88×61 pixel rectangle on the stage. This will be the background for gallery
thumbnails that will be loaded later.
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.
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.
5.9 Lock the image holder layer and make a new layer above it and name it text.
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.
5.11 Click and drag your mouse to make a text field. Press Esc on your keyboard to exit the text
field edit mode. Go to the Property inspector and give your text field an Instance name: call it
percent_txt. Position it in the middle of your thumbnail holder movie clip.
Now, click the Embed button (it’s on the right side of the Property inspector when the text field
is selected). Do the following:
1. Select the Numeral option (you need all the numbers, since this is a percentage
preloader). See 1 in the scrrenshot below.
2. Click inside the input field below the Include these characters text and type the
percentage sign (%) inside it (see 2 in the screenshot below).
3. Click OK.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 .
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.
6.4 Assign an Instance name to the text field to be able to manipulate it later via ActionScript:
call it desc_txt.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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);
currentThumbnail.percent_txt._visible = true;
currentThumbnail.percent_txt.text = percent+"%";
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 {
};
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;
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",
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 {
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;
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.onPress = function() {
if (menuButtons._y<0 && menuTop>0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
}
};
}
};
}
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.
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
Bookmark and 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!
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.
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”,

//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:
[email protected]
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

Scene=Scene 1, Layer=actions, Frame=1: Line 74: ‘{‘ expected

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).
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.
[email protected]
 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 : [email protected]
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 [email protected]. 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!!! 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 [email protected]
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
[email protected]
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
-
…
-
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: [email protected]
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
[email protected]
 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;
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’
%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.
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 menuDown:Button = menuDown_btn;
var menuUp:Button = menuUp_btn;
menuUp._alpha = 0;
prevBigImg._alpha = 0;
nextBigImg._alpha = 0;
prevBigImg.enabled = false;
nextBigImg.enabled = false;
// Buttons end
p = 0;
var menuButtons:MovieClip = galleryMenu_mc.buttonsHolder_mc;
var galleryMask:MovieClip = galleryMenu_mc.galleryMask_mc;
galleryMask._height = 96;
var thumbMarginY:Number = 178
imagesHolder._x = 267.8;
imagesHolder._y = 98;
desc_txt._x = 10;
desc_txt._y = 353;
var loader:MovieClipLoader = new MovieClipLoader();

loader.addListener(myListener);
myListener.onLoadInit = function(target:MovieClip) {
if (whatIsLoading == “thumb”) {
currentThumbnail.percent_txt._visible = false;
thumbClickable();
tracker++;
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) {
if (whatIsLoading == “thumb”) {
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”);
if (imageGallery.firstChild.nodeName == “galleries”) {
var rootNode:XMLNode = imageGallery.firstChild;
for (i=0; i<rootNode.childNodes.length; i++) {
if (rootNode.childNodes[i].nodeName == “gallery”) {
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();
if (currentGallery.childNodes[j].nodeName == “image”) {
}
}
}
}
}
}
function enableButtons(numberOfGalleries:Number):Void {
for (i=0; i1) {
currentColumn = 0;
currentColumn = 0;
} else {
currentColumn += 1;
}
currentThumbnail._x = currentColumn*thumbMarginX;
currentThumbnail._y = currentRow*thumbMarginY;
thumbNumber = currentThumbnail._name.substr(9);
thumbPath = “gallery/”+whichGallery+”/thumbs/”+thumbNumber+”.jpg”;
whatIsLoading = “thumb”;
loader.loadClip(thumbPath, target);
}
currentThumbnail.onRollOver = function():Void { // thumb rollover

};
currentThumbnail.onRollOut = function():Void { // thumb rollout
};
bigNumber = this._name.substr(9);
displayBigImage = imagesHolder.attachMovie(“big image holder”, “bigImage_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);
}
} else {
}
};
}
function disableThumbs():Void {
}
}
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;
firstLook = false;
}
if (menuButtons._y=galleryMask._height) {
var targetPos:Number = menuButtons._y-galleryMask._height;
menuButtons._y += (targetPos-menuButtons._y)/menuSpeed;
if (menuButtons._y<=(targetPos+0.8)) {
}
};
}
};
menuUp.onPress = function() {
if (menuButtons._y0) {
var targetPos:Number = menuButtons._y+galleryMask._height;
menuButtons._y += (-menuButtons._y+targetPos)/menuSpeed;
if (menuButtons._y>=(targetPos-0.8)) {
}
};
}
};
}
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

Scene=Scene 1, Layer=actions, Frame=1: Line 74: ‘{’ expected

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 [email protected]. 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].firs
tChild.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.nod
eValue;
_root.myphoto.loadMovie(mydata.firstChild.childNodes[whichone].childNodes[2].firstC
hild.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:

%20Settings/Administrator/Desktop/1/gallery/monochrome/thumbs/1.jpg’
%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!
[email protected]
 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.
if (bigNumber>1) {
bigNumber–;
disableThumbs();
};
}
_root.nxt_btn.onRelease = function() {
if (bigNumber>1) {
bigNumber++;
disableThumbs();
};
}
 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
/////////////////////////////////////////////////////////////////
if (Number(bigNumber)> 0) {
if (Number(bigNumber) == 1){
bigNumber = picsNO;
}else{
bigNumber–;
};
disableThumbs();
for (i=0; i=1) {
if (Number(bigNumber) == picsNO){
bigNumber = 1;
}else{
bigNumber++;
};
disableThumbs();
}
} else {
}
}else{
bigNumber = 1;
}
}
//////////////////////////////////////////////////////////////////////
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 Excellent Image Galleries You Can Use Today « Shafaat Awan Mar 30, 2010 at 1:43
pm
[...] 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 Excellent Image Galleries You Can Use Today | ???? Apr 5, 2010 at 6:21 am
 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 [email protected]
Thank you.
 ??50???????? | Chormer's Blog||??????80?? May 9, 2010 at 10:19 am
[...] 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.net.URLRequest;
import flash.net.URLLoader;
import flash.utils.getDefinitionByName;
import flash.xml.XMLDocument;
import flash.xml.XMLNode;
import flash.xml.XMLNodeType;
var menuDown:SimpleButton = new SimpleButton;
menuDown = menuDown_btn;
var menuUp:SimpleButton = new SimpleButton;
menuUp = menuUp_btn;
menuUp.alpha = 0;
var pressedButton:SimpleButton = new SimpleButton;

var menuButtons:MovieClip = new MovieClip();
menuButtons = galleryMenu_mc.buttonsHolder_mc;
var galleryMask:MovieClip = new MovieClip();

galleryMask = galleryMenu_mc.galleryMask_mc;
galleryMask.height = 391;

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 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) {
currentThumbnail.percent_txt.visible = false;
currentThumbnail.filters = thumbsFilter;
thumbClickable();
tracker++;
loadThumbnail();
} else {
enableThumbs();
}
target.alpha = 0;
displayBigImage.percent_txt.visible = false;
displayBigImage.filters = thumbsFilter;
bigClickable();
fadeIn();
}
};
function onProgress(target:MovieClip, loaded:Number, total:Number) {

currentThumbnail.percent_txt.visible = true;
currentThumbnail.percent_txt.text = percent + "%";
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;
/* 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") {
}
}
}
}
}
}
function enableButtons(numberOfGalleries:Number):void {
for (var i:Number =0; i3) {
currentColumn = 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);
bigImagePath = "gallery/"+whichGallery+"/"+bigNumber+".jpg";
whatIsLoading = "big";
disableThumbs();
loader.load(new URLRequest("gallery/"+whichGallery+"/"+bigNumber+".jpg"));
displayBigImage.imageHolder_mc.addChild(loader)
for (var i:Number =0; i<clickedGallery; i++) {
}
} else {
}
};
}
}
function disableThumbs():void {
for (var i:Number =0; i<howManyImages; i++) {
}
}
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;
firstLook = false;
}
var menuTop:Number = menuButtons.height-Math.abs(menuButtons.y);
if (menuButtons.y=galleryMask.height) {
var targetPos:Number = menuButtons.y-galleryMask.height;
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);
}
};
}
};
}
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;
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);
}
};
}
};
}
}
[/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;
disableThumbs();
for (i=0; i0) {
for (i=0; i0) {
for (i=0; i0) {
}
} else {
}
}
} // 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;
disableThumbs();
for (i=0; i0) {
for (i=0; i0) {
for (i=0; i0) {
}
} else {
}
}
} // 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=0Bz8YjrTCFhr1NjljODVmYTYtNmYyNy00Y2M3LTg2YWEtMDcyZGYwNTcxZT
A5&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 !!!!!!!!!!!!!!!!!!!!!!!!!
 ??ZTOO » 50 Excellent Image Galleries You Can Use Today Jul 23, 2010 at 5:43 pm
 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”,
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 */
Learn Flash CS4 animation: Classic Tween

April 13th, 2010 | Author: Luka | Category: Animation
With this easy tutorial, I will show you how to make classic tweens in Flash CS4. You are
going to learn:
 What are Movie Clip symbols and how to make them

 What is the timeline
 How to make keyframes
 How to make your Movie Clip move, change size and more
1. Making your Movie Clip symbol
1.1 Open a new Flash CS4 document by selecting File > New. The "New Document" window
will show up. Click on the Flash File (ActionScript 3.0) option and then click OK.
1.2 Select the Oval Tool (O).
1.3 Click anywhere on the stage and drag your mouse until you obtain an oval. You may use any
color you like.
1.4 Pick the Selection tool (V).
1.5 Now, if you have had the Object Drawing option turned off while you made the oval (see
screenshot below), you have to double-click with your mouse on the shape to select it. It will
appear rasterized (dotted), which shows that it has been selected.
Double-clicking on the fill of your shape will select both the fill and the stroke (line). This is
very important. If you select only the fill and leave the stroke unselected, you wouldn’t be able to
create a classic tween. Why? Remember this well: in order to create a working, proper classic
tween in Flash CS4, in the layer you are making it, you must have only a single Movie Clip
symbol present and nothing else. If you happen to have any drawings or text in the same layer
where you are making your classic tween, this will result in an error. If you have many layers in
your Flash document, lock them all except the one you are working on, to prevent any possible
errors.
On the other hand, if you have had the Object Drawing option turned on while you drew the
oval, you only have to click once on it to select it (see next screenshot).
That’s because with the Object Drawing option turned on, you are creating drawing objects
instead of simple shapes. A thin blue border around it indicates that it has been selected. On a
sidleine note, if you happen to double-click it, you will enter inside it and see the simple vector
shape. To go back to the stage, just double-click on an empty part of the stage area.
1.6 Whether you drew a simple shape or a drawing object, it is important that you have selected
it. Now, select Modify > Convert to Symbol (shortcut key: F8). This dialog box will appear:
This is where you create your Movie clip symbol.
 In the Name field, enter green oval or any name you like. Choose names that will tell you
what your movie clip is about and try to avoid using default names (Symbol 1, Symbol
2). Any name can seem good now, when you have just one movie clip. But once you
have your library full of different symbols, intuitive symbol names can help you a lot.
You will know instantly what any given symbol is about, and you’ll find them more
quickly.
 Select the Movie Clip option in the Type menu. I will discuss the other options (Button
and Graphic symbol) in further lessons.
 The Library root folder is a fine place to put your movie clip into. In complex Flash
movies, it is advisable to create folders for different symbols that belong to the same
scene, or are somehow related. Good organization leads to better workflow and less
frustration.
 The Registration point is the reference point by which your movie clip will be handled
by ActionScript in relation to its coordinate system. Also, all the modifications and
transformations such as distortion, rotation, skewing etc will be done in relation to this
point.
 For now, let’s leave the Advanced options button as it is. This is a basic tutorial and I
don’t want to complicate it with unnecessary stuff at the moment.
Click OK.
This is how your movie clip should look like on the stage:
It is surrounded by a thin blue border and its registration point (see the Convert to Symbol
screenshot above) is at its center, represented by a small cross in a circle. Take a look at the
Properties panel.
While your movie clip is selected, the Properties panel shows it clearly. It says that this is an
instance of the movie clip symbol green oval. This means that you can have many instances of
one symbol on the stage. When making a classic tween, however, you should have only one
instance of a movie clip in the layer where you are creating the tween. That’s what we’re doing
right now.
Top of page
2. Creating keyframes and the Classic Tween animation
We’ll have some fun with the timeline now. This is where you create your animations, by
making changes through different time intervals.
Right now, your timeline looks like this:

…or like this, if your movie clip on the stage is selected:
These small rectangles are simple, empty frames. The first one, with a black dot inside, is a
keyframe. Keyframes are used for making changes in your classic tween animations. This is
where you change the position, size and anything else about your movie clip.
The classic tween animation needs a minimum of two keyframes to work. The first one, with the
initial state of your movie clip, and the second one, where you will move it, resize it, or make
any change that you wish.
2.1 So go anywhere further down the timeline: For the sake of convenience, let’s choose frame
24. Right-click on it and select the Insert Keyframe option from the menu that will show up.
This is how your timeline will look now, after the second keyframe has been inserted:
2.2 You should make a change now, to make your animation. For example, move your movie
clip. Use the Selection Tool (V) — click on your movie clip once and drag it away from its
current position.
OK, you made a change. But still, there is no animation now. You have to tell Flash to calculate
the movement of the movie clip between the first and second position.
2.3 To do just that, right-click anywhere between the two keyframes in the timeline and select
the Create Classic Tween command from the menu that appears.
Your timeline should look like this now:

The space between the two keyframes is colored in purple, and an arrow shows that a classic
tween animation exist here. This is how a properly done classic tween looks like.
2.4 Let’s see now how this animation looks like: test it by selecting Control > Test Movie. Your
animation should be similar to this:
If this animation appears strange — because the movie clip moves smoothly and then suddenly
jumps from one place to another, don’t worry — this is normal. All Flash animations loop
endlessly, unless you stop that via an ActionScript command. So, this particular animation you
just made goes from start to end and then back to start again, jumping from the last position
(the second keyframe) back to the first (the first keyframe). This is the reason you see the jump
here.
If you want to have a smooth animation, you can add another keyframe to make your movie clip
go back to the starting position smoothly. So, you should add another keyframe in which your
movie clip should be in the same position as it is in the first keyframe. You can do that the long
way, by trying to adjust your movie clip’s position until the animation looks ok. But there is an
easier way to do this — by copying the first keyframe.
Top of page
3. Copying and pasting keyframes
3.1 Go to the first keyframe and right-click on it. Select the Copy Frames option.
By copying a keyframe, you are copying all the contents that are inside it. In this case, you will
copy the movie clip with all of its characteristics — its size, position, rotation and so on.
3.2 Go to, say, frame 48, right-click and select Paste Frames.
The timeline has changed its appearance again:
As you can see, there is just one classic tween in the timeline. The frames between the second
and the third keyframe are grey. This means that there is no change between them. The second
keyframe lasts until the third one, with no change whatsoever. To create a new classic tween,
you must do the smae thing you did back in step 2.3: right-click between the 2nd and the 3rd
keyframe and select the Create Classic Tween option.
…and here is your second classic tween in the timeline:

3.3 Check to see if you are animation is smooth now by selecting Control > Test Movie. The
movie clip should move now back and forth, without any sudden jumps.
Top of page
4. Troubleshooting
If the space between your keyframes looks like in the screenshot below:
…this means that you have made a bad classic tween — something went wrong and Flash lets
you know this happened by showing a dotted line instead of a continuous one. The possible
reasons for this may be:
 You haven’t got only your movie clip in this particular layer: you have some other
objects too – lines, shapes, text fields… remember, in order for Flash to be able to make a
proper classic tween animation, the layer in question should contain one movie clip only!
If you want to have multiple classic tweens, or a shape tween along with your classic one,
you should do that in a separate layer.
 You have got the movie clip in one keyframe only (maybe you accidentaly removed it
from one of the keyframes).
 You have one movie clip in your first keyframe, and some other in the second one. OK,
this has little chance of happening, but is still a possibility (because Flash lets you swap
symbols).
 You didn’t create a movie clip in the first place, and have just a drawing object.
Well, you have just learned how to create a simple classic tween in Flash CS4! Follow Flash
Explained and you’ll see how to make other kinds of animations (like motion tween) in
upcoming lessons.
Download the source file for this lesson.
Bookmark and share:


Comments
Submit a comment
 technology analysis May 5, 2010 at 5:15 am
These tutorials were so goooood. I’ve almost completed all of them. They are soo helpful
and make me just wanna do them all. oh kid okey. Time to do some more.
 Staging May 7, 2010 at 10:06 am
I am very much thankful to the owner of the site. I have almost gone through 22 tutorials
to understand the basics of flash cs 4. I really admit that one who is even new to flash can
also learn lot from these tuts. I have one suggestion – every tuts should carry its slf file-
to play and view the animation immediately.
 technology analysis May 11, 2010 at 9:39 am
Going back and forth between these 2 lesson blocks is confusing. I created a movie
symbol that is animated. When I move it to a layer it is not animated anymore. It just
shows the first frame of the movie instead of the whole thing.
Learn Flash CS4 animation: Shape Tween

March 23rd, 2010 | Author: Luka | Category: Animation
With this tutorial, I am switching to Flash CS4 and ActionScript 3.0. This lesson will be the
first of many in which you will learn how to make animations in Flash CS4. You will see what
are shape tweens, motion tweens and classic tweens, with many applications and variations of
these basic animation techniques. If you follow through with these lessons, you will learn all that
you need to start creating great animations in Flash. So, don’t miss them – subscribe to Flash
Explained now.
Let’s start with the simplest animation – the shape tween. In this lesson, you will learn:
 What are keyframes and what is their purpose

 How to use the timeline to create an animation
 How to morph shapes
 How to create smooth looping animations
 How to animate a shape’s color
1. Shape tween animation basics
1.1 Open a new Flash CS4 file selecting File > New. In the window that appears, select the top
Flash File (ActionScript 3.0) option and click OK. Save your file now (File > Save) so that you
can simply press Ctrl+S any time later on, to quickly save your work.
1.2 Select the Rectangle Tool (R) . At the bottom of the Tools panel, there are the Object
Drawing and Snap to Objects buttons. Turn them both off if they are not. You
don’t need these options now.
Also, pay attention that you have selected the Rectangle Tool and NOT the Rectangle Primitive
Tool. You can use the latter for shape tweens also, but I want to show you some options that can
be done with the raw vector drawing shapes only.
Shape tweens can be made with drawing shapes only. You can not obtain a shape tween
animation with any symbol, be it a movie clip, graphic symbol or a button. Any such attempt
would result in an error. Also, the layer in which you are creating your shape tween animation
must contain basic drawing shapes only. If there is a symbol inside it, or a text field for example,
you won’t be able to make your animation.
1.3 Click and start dragging with your mouse on the stage to draw a rectangle. Draw it
somewhere in the middle of the stage.
You can make it any color and size you want. This isn’t so important right now.
What’s important right now is one small change that can be seen in the timeline panel, right
below the stage. A keyframe has appeared as soon as you have drawn your rectangle. This is the
black dot in the first frame – you can see it marked clearly in the screenshot below.
A keyframe is a special kind of frame: it has some content inside it. And it is used when you
want to make a change in your animation. The other frames following after it are simple, empty
frames. Now let’s add another keyframe so that you can make your first shape tween animation.
1.4 Right-click with your mouse inside the timeline, on, for example, frame 20 and select the
Insert Keyframe option in the menu that shows up.
The second keyframe will appear.

At least two keyframes are needed to make a shape tween. The first keyframe is the initial state
of your drawing — the beginning of your animation. The second keyframe is where the desired
change occurs. The small white rectangle placed just before the second keyframe indicates the
end of the first keyframe. Up to that point, there is no change whatsoever — the gray frames in
between the first keyframe and the white rectangle also show that.
1.5 Let’s make a change now. Still being in keyframe 20, select the Selection Tool
(shortcut key: V).
1.6 Bring your cursor near the bottom side of your rectangle, until you see a small curved line
appear near it (see screenshot below). Click and pull downwards — you should see a green
curve appear as you stretch your rectangle. Release your mouse and voilà — you have just
changed the shape of the rectangle.c
1.7 Repeat this three more times, for each of the remaining sides of your rectangle, until you get
something akin to the shape pictured below:
1.8 Right-click on any frame between the first and second keyframes (see below) and select the
Create Shape Tween option.
If you did everything as shown up to now, you should see an arrow appear between the
keyframes, on green background — see the screenshot below.
Flash will signal you a shape tween done incorrectly, by inserting a dotted line in the timeline,
instead of the arrow. In case you have a symbol instead of a drawing in the second keyframe, it
will look like this:
…and if you haven’t got anything in the second keyframe — it is called a blank keyframe —
then the timeline will look like this:
Fine. Now that you know how different errors look like in the timeline, let me show you how to
add more features to your current animation. But first, save your file. And take a look at what
you have created so far.
1.9 Select Control > Test Movie (shortcut key: Ctrl+Enter). You should see your rectangle
change its shape, as it was being inflated with air, something similar to this:
As you can see, Flash will calculate the change between the two keyframes: it will create the
animation segments for each and every frame in between.
1.10 Close your animation’s preview window.
It is easy to see that this animation isn’t all smooth. Near its end, the rectangle transforms
abruptly from the "inflated" state back to its initial one, where it is a proper rectangle. You can
see this jump in the animation clearly. And this is normal. Why? Because Flash is made to loop
every animation. Once it reaches the last frame, it goes straight back to the first one. It does not
see the animation as we humans do. It just does what you told it to do: loop the animation
endlessly, by going back to the first frame once it has reached the end. So let me show you how
to make a smooth transition, to avoid having abrupt jumps in your shape tween.
Top of page
2. Making a smooth shape tween — adding further animation segments
To have a smooth looping animation, you would need the rectangle to morph into its initial state.
The first idea that comes to mind is to insert a new keyframe further down the timeline, and then
copy and paste the rectangle from the first keyframe here. This certainly works, but there is a
much simpler and easier way to pull this off:
2.1 Right-click in the first keyframe and select the Copy Frames menu option.
2.2 Right-click on any empty frame after the second keyframe (for example, I chose frame 40)
and select the Paste Frames menu option.
Here is how your file’s timeline should look now:
The grey frames between the 2nd and 3rd keyframe indicate that there isn’t any animation going
on here. Of course — because you have to add it, Flash can’t do it by itself.
2.3 So just right-click between the 2nd and 3rd keyframes and select the Create Shape Tween
option.
Here is the result:

2.4 Test your animation by pressing Ctrl+Enter. You should have a smooth morphing effect,
like the one shown below:
Everything looks much better now. Flash is playing the animation from the 1st keyframe to the
2nd one, where the rectangle changes shape. Then it goes to the 3rd keyframe, which is the same
as the first one. And then it jumps back to the first one, and thanks to that you have a smooth
transition.
Top of page
3. Animating a color via shape tween
3.1 Click on the playhead (pink rectangle) in the timeline and start dragging it towards the
second (middle) keyframe. Once you reach the second keyframe, release your mouse button.
This is simple positioning inside the timeline.
3.2 Using the Selection Tool (V), click on the colored fill of your shape on the stage to select it.
It will become rasterized (this indicates that it has been selected).
3.3 Go to the Fill and Stroke section of the Properties panel (on the right of the stage). Click on
the Fill color icon (the small paint bucket) and select a different fill color for your shape. Choose
a color that is in strong contrast with the previous one, so that you can see the change in
animation clearly.
The shape on the stage should have changed color.
3.4 Test your animation: select Control > Test Movie. See how the color gradually changes
together with the shape morphing, smoothly:
You can also apply a gradient color fill to your shape, it will be animated too. Check this out:
With shape tween animations, you can change the shape of a drawn object, its color, size and
position also. Just remember that pure vector shapes can be animated with this technique only,
symbols cannot.
In subsequent tutorials, I will show you how to apply the various techniques that you have
learned to real world projects.

Making The Ultimate Dynamic Image Gallery in Flash 8 - Part 1 of 2

Uploaded by

Copyright:

Available Formats

Making The Ultimate Dynamic Image Gallery in Flash 8 - Part 1 of 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Making The Ultimate Dynamic Image Gallery in Flash 8 - Part 1 of 2

Uploaded by

Copyright:

Available Formats

Making the ultimate dynamic image gallery in Flash 8 – part

I. The elements of the SWF movie

II. The XML file

III. The images and the thumbnails

1. Setting up your document

2. Creating the gallery menu

2.1 Call the first layer in your document gallery menu.

 Select Movie clip as type,

 Select Movie clip as type of symbol.

 Turn on the Align/Distribute to Stage button (see 1 below).

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

1. Select Dynamic Text.

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

4. Making the menu navigation buttons

1. Unlock the gallery menu layer.

1. Click the small pencil icon.

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

4.24 Lock the gallery menu layer.

5. Creating the image placeholders

5.1 Create a new layer and call it images holder.

1. Give the movie clip an Instance name: call it imageHolder_mc.

6. Creating a text field for gallery and image descriptions

1. Dynamic text, of course.

you never know, right? Better to make sure .

7. Making the logo

8. Creating the XML file with image galleries data

there is no sense repeating it if it’s already written, right?

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

And that would be it concerning the XML file.

9. Creating the folder structure for the image gallery

10. Inserting the ActionScript code

10.2 Select Window > Actions to open the Actions panel.

10.3 Insert the following ActionScript code inside the panel:

11. Testing the image gallery

 The images, along with their thumbnails, placed in appropriate folders.

Bookmark and share:

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

 Luka Nov 23, 2008 at 5:34 pm

 Mick Nov 24, 2008 at 9:05 am

This tutorial rocks! Thanks a lot.

 Rama Nov 25, 2008 at 10:52 am

 jamie Nov 27, 2008 at 6:03 am

Love the tutorial, thanks!

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

Pleease see below for an example of my XML

Electric power control room.

 dan Nov 30, 2008 at 4:28 am

 Jeroen Dec 1, 2008 at 1:47 pm

You think it will be possible in that way?

 Mick Dec 1, 2008 at 5:16 pm

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

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

Who can help me? Please…

 Mick Dec 4, 2008 at 8:47 am

 graphichandra Dec 4, 2008 at 11:11 am

 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

 mirkokosmos Dec 9, 2008 at 5:28 pm