1. How To Create A Simple Image
Gallery In Flash CS5
Prepared by: Lyndon Jeorge A. Mendoza

2. Overview
In this tutorial we will show you how to create
an simple image gallery with thumbnails in Flash
CS5. We will apply a couple of simple, yet nice
transitions to the images and thumbnails. This will
require you to get the hands a bit dirty in animation
and action scripting. However, this is going to be
easy and fun! So here we go.

3. Step 1
Create a new file with ActionScript 3.0 and modify the document like it’s shown on
the screenshot below. You can enter the document properties via the admin panel
(follow the highlights in red) or pressing Ctrl+J.

4. Step 2
Add four images from your computer to your library. To do this press File => Imort
=> Import to library. You can also import the images directly to the stage, by
pressing Ctrl+R.
Next, create three new layers and give them the
names Buttons, Images and Actions. To rename a layer, double click on it and
type the text. See the shot below.

5. Notice that the first frame of each layer has a small circle on it. This
is a blank keyframe. Once you put anything on the stage, the circle
transforms into black dot which corresponds to the filled keyframe.
Go to the Buttons layer and select the first frame on the timeline. Drag the
images from your library to the stage (in case you haven’t imported them
right to the stage already) and modify their size to 114×85 px. Be sure to drag
the images to our document area which we’ve made black earlier.

6. Now you have your thumbnails on the stage. Set image alignment
selecting Align in Window menu, or just press Ctrl+K. Align pics to the
bottom and distribute horizontal center like it’s shown below.

7. Step 3
Our thumbnails are going to be buttons, so now we need to convert the images into
the Button symbols. Using the Selection Tool, right click on the first thumbnail
image and choose “Convert to Symbol”, or simply hit F8. In the opened window
set the type Button and name the symbol btn1. Click “OK” to save the changes. Do
this for the other three images and give them the names btn2, btn3 and btn4,
respectively.

8. Now we have to give each of these the same Instance Name which is a name to refer
to your symbol or object in ActionScript. Instance Name can be set in the Properties
panel which you can enter by selecting the necessary object on the stage. Instance
Name of the btn1 button will be btn1 and so forth.
Right click on the first frame of the Buttons layer, select Copy Frames, go to the
fourth frame and Paste Frames the same way. Or you can just drag the first frame
up to the fourth cell to copy it. You timeline should have the following look by now.

9. Step 4
OK, let’s put the images that we will be exactly viewing in our gallery. Switch to
the Images layer and select the first frame on the timeline. Drag the image that
corresponds to the first thumbnail from your library to the stage. Size it down to
the 358×268 px and set its position to the 93×18. Of course, you may set your own
dimensions and place the pictures whatever you like; this is just what we use for this
tutorial.
Insert three more blank keyframes (F6) and do the same operation with the rest of the
images.

10. Now go back to the timeline, select the first frame and go to the Properties panel.
Here we will set the Frame Label. It’s important to remember about this because
we’re going to reference frame labels in the ActionScript later. We’ve got four frame
labels: model, dreamy, dancing and teacher, respectively.

11. Step 5
So far we’ve got a thumbnail gallery where each of the thumbs is a button. Our next
step is to add some action script so we could click on the button to play the right
frame. Go to the Actions layer and drag the first frame up to the fourth cell. Your
timeline should have the following look by this moment:

12. Go back to the first frame in the Actions layer and hit F9 to open the Actions window.
Copy and paste the following code into your Actions window. Don’t worry, we will explain in
great detail what happens shortly.
stop();
btn1.addEventListener(MouseEvent.CLICK,play1);
function play1(event:MouseEvent):void{
gotoAndStop ("young")
}
btn2.addEventListener(MouseEvent.CLICK,play2);
function play2(event:MouseEvent):void{
gotoAndStop ("thoughtful")
}
btn3.addEventListener(MouseEvent.CLICK,play3);
function play3(event:MouseEvent):void{
gotoAndStop ("dancing")
}
btn4.addEventListener(MouseEvent.CLICK,play4);
function play4(event:MouseEvent):void{
gotoAndStop ("old")
}

13. After you have copied and pasted the above code, go to Control => Test Movie or
press Ctrl + Enter to see the result gallery. Here is what you should get:

14. Let’s look closer at what you’ve just done and learn more about AS functions. The
first thing you see in your code window is Stop action.
Stop();
Any effect you create in Flash repeats continuously when you test or publish your
movie. Stop action is used to actually stop it from looping. You can apply the Stop
action to any keyframe and the movie will stop playing at that exact point.
The next code line is
btn1. addEventListener(MouseEvent.CLICK,play1);
This script means that btn1, our instance name, referring to the first button in
our thumbnail gallery, is responding to a mouse click and calls for the
functionplay1.

15. And here goes the definition of that function
function play1(event:MouseEvent):void{ gotoAndStop("model") }
In this line:
•function play1 tells us the name of the function;
•(event:MouseEvent) defines the type of the event , which is interaction with the
mouse here,
•void is a special type used to specify that the function doesn’t return any data;
•gotoAndStop (“model”) causes the playhead to jump to the frame model and
stops from progressing further.
All right, this is the initial script that allows our image gallery to work properly. As you
see, this piece of code repeats for the rest of the buttons, we change only instance
names and frame labels.

16. Step 6
To add some spice to our images when they come in, let’s learn how to animate them in
Flash CS5.
So, go up to your Images layer and select the first frame. To be able to add some
animation to our images, we need to convert them to movie clip symbols. To do this
hit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the four
images. Let the names be movie1, movie2, movie3 and movie4.

17. Choose the Selection tool from your toolbar and double click on the first movie
clip we’ve just created. Now we can animate it.
Right click on the movie clip on the stage and select Create Motion Tween.

18. Step 6
To add some spice to our images when they come in, let’s learn how to animate them in
Flash CS5.
So, go up to your Images layer and select the first frame. To be able to add some
animation to our images, we need to convert them to movie clip symbols. To do this
hit F8 and select Movie Clip in the Type menu. Repeat this operation for each of the four
images. Let the names be movie1, movie2, movie3 and movie4.

19. You can see that it automatically inserts some frames; the number of frames inserted
depends on your frame rate. By default Flash CS4 has a frame rate of 24 frames per
second. So basically you have the number of frames that would equal one second.
Let’s cut it down to 15 frames per second – just drag the border of the 24th frame down
to the one we need.
Now let’s create a sleek fade-in effect by means of some color effects and motion
tween. Select the image on the stage while the playhead is on the last frame. Go to the
object properties, choose Alpha in the Style menu and put it 0%.

20. Move the playhead back and forth and you will see that we’ve created a fade-out
effect for our image – it’s completely transparent on the last keyframe. Right click
anywhere on the motion tween area and select Reverse Keyframes. Now we have the
fade-in effect applied to the picture.
Click Ctrl+Enter to test your movie. You will see that the Movie plays over and over again
and we don’t want this loop happen. Stop action comes in handy here. Return to your
movie clip window, right click on the motion tween area and select Convert to Frame by
Frame Animation. Then go to the last frame and hit F9. Type stop() in the Actions
window and that should fix the problem.

21. Step 7
Another cute effect we’re going to apply is rollover. Wouldn’t it be nice to have the
thumbnails change a bit when the mouse hovers over? And that’s pretty easy to do, here
we go!
Double click on the first button in the
thumbnail line, which is btn1. You can
see four frames on your timeline –
Up, Over, Down and Hit. These are the
states of our button.
•The Up frame is the inactive stage when
nothing is happening, the button is
displayed as it is.
•The Over is the stage when the mouse
hovers over the button.
•The Down frame is the stage when the
button is clicked on.
•The purpose of the Hit frame is to define
the clickable area or the coordinates of
the button.
So, insert blank keyframes (F6) into each
of the frames.

22. Go to the Over and select the button on the stage. In order to modify the way it is
rendered, we need to convert it into a graphic symbol. Press F8 and selectGraphic in the
Type menu. Now go to the object properties and do some changes to the color effect. You
may do whatever you want, we changed the RGB parameters, for example (see the
screenshot below).
Switch to the Down frame and apply some effects if you want the button to change its
state when you click on it. In this case, we’ve added more red to it.
Move on to the Hit area and using the Rectangular Tool draw an area you want to be
clickable on your button. Repeat this step for the other three buttons and
press Ctrl+Enter to see the result and that’s it. Now you know how to create a simple
image gallery with thumbnails and spice it with some nice effects.