Adobe Flash Professional CS5.

Creating Image thumbnail

Niranjan Khadka
Center for Teaching and Learning

Adobe Flash Professional CS5.5

The Interface

TOOL PANEL
It appears on either side of screen and contains tools used to create or modify graphics and text.
Tools Options are listed underneath the palette and become active depending on the tools
selected at the current moment (if tools panel is not showing, click Windows menu or Ctrl+F2).

STAGE
The large white rectangle which represents the displayed area of your movie/animation is called
the stage.
STAGE SIZE
Clicking on the Size button, you will get the document properties panel. The Properties Panel
allows you to change the dimension of your file. This is very important because you want to set
your dimensions first. The dimensions are the size of your image. You do not want them to be
too large or too small to be visible.

FRAME
The still images that make up your overall moving image are called frames.

Frames
FRAME RATE
The default frame rate is 12fps (frames per second). That means 1 second of animation would
require 12 frames. The greater the frame rate is, the smoother the animation will be (high
quality movie is 30fps). Accordingly, increasing the number of frames on the timeline will
increase the time. (For example, when the frame rate is 3fps, compared to when it is 10 fps, the
transition from frame to frame will be much quicker for the 10fps thumbnail and therefore will
seem more like a movie, rather than a quick slideshow.)
TIMELINE
The timeline appears at the bottom of the screen. The use of timeline is to lay-out the sequence of
the frames.
KEYFRAME
The keyframe is the frame from where transitions start and end. Any change (animation) has to
be in a keyframe.

Keyframe

III. Creating the Image thumbnail

A. Setting up Stage for the Pictures

1. Open Adobe Flash Professional CS5.
2. Select the required flash file
You will see four long vertical lists with the headings:
Create from template
Create New
Learn
Open a Recent Item

Under the Create New list, Click on Action script 3.0.

3. At the top right side of the screen, you will see a drop-down menu as labeled in
the figure below. Click on the arrow beside it and from the list of items which
appears, select DESIGNER.

Drop-down Menu

4. Then, click on the drop-down menu at the top right of the white screen called
Stage (as shown in the figure below) you see at the center of the screen. Select
the option Fit in window from the list that appears, to set the size of stage.
5. Create new layers
Locate the Timeline panel on the screen.
Click on the new layer button on the lower left of the timeline, three
times to insert three new layers.
Double-click on each of the inserted layers named layer1, layer2,
layer3 (on the left-hand side of the panel) and rename them as:
Pictures
Thumbnails
Actions
[Refer to the figure on the next page]

Inserted Layers
Timeline Panel
New Layer
Button

B. Getting Pictures
1. Choose any four pictures from your computer, but make sure they are larger
than 500 pixels in size. Also, the pictures should be of the type: .jpeg, .png
or .gif. The type is written next to the name the image was saved as.
2. Create a folder named animations on your desktop and save the chosen
pictures inside the folder.
Importing pictures to Flash CS5 Stage
1. Firstly, Click on File at the top-left corner of the screen. Select the option
Import, and then choose Import to library from the list.
2. Browse for the animations folder in the box that appears on screen. Select all
the pictures in the folder, and click open.
3. You will now have the names of the four pictures inside the Library Panel in
a list under the Name section (similar to the example below).
Library Panel

Name
Section

4. Click on the Thumbnail layer to select it, and then go back to the Library and
drag the first pictures from the name section to the stage.
5. Now go to the properties panel, and set the size and position of the picture by
the following steps:

Click on the picture, and you will see the Position and Size section in
the properties panel with options:
X:
Y:
W:
H:
Click on each of these options one by one and enter the following
values (in pixels) in the text box beside them. These values will be
template values.
X: 0.00
Y: 0.00
W: 80.00
H: 80.00
[Refer to the figure on the next page]

6. Once you change the dimension of the picture, the picture will move out of
your stage. So use your mouse to find the constrained picture out of your stage.
7. Drag the picture to the bottom left corner of the stage.
8. Repeat steps 4,5 and 6 for the remaining images and drag them to the bottom
of the stage such that they are in a row, and are approximately equally spaced
as shown below.

Four Images

C. Converting pictures to Buttons

Buttons are symbols that contain four frames. Each frame of a button symbol
represents a different state for the button: Up, Over, Down, and Hit. These states
determine how a button visually behaves when the mouse is rolled over it or when
the user clicks the button. This document explains how to create basic and
advanced buttons.
1. Click on the first image on the left, and press F8 or right click and select
Convert to Symbol.
2. A box Covert to Symbol shows up. In the name section, type btn1 and select
the Type as button. Then click OK.
3. Then go to the Properties panel, and enter the Instance name as button1 by
clicking in the text box <Instance Name>.
4. Repeat the above three steps for all the pictures at the bottom of the stage, one
by one. But, keep in mind to change the btn1, button 1 to btn2, button 2 and so
on for the remaining pictures.

Convert to
symbol

Instance name

D. Setting corresponding pictures for the buttons

1. Select the second, third and fourth Timeline sections of the thumbnail layer.
You can select them all at a time by holding the Ctrl key from the keyboard
and selecting them.
2. Right click on the selected Timeline sections and select Insert Frame. You
will notice frames inserted in the thumbnail layers.
3. From the Timeline select the first frame of Picture layer.
4. After you select the first layer, go to properties panel change the name to pic1.
Once you change the name, you will see small red flag in the first frame of the
Picture layer.

5. Now drag the first picture from the Library panel. Make sure that the picture
must correspond to the small pictures that are on the bottom of the stage.
6. Go to properties panel and change the dimensions of the picture. (W: 400px,
H: 300px, X: 82 and Y: 0). You will notice that the picture will be aligned at
the middle of the stage right above the small pictures.
7. After you change the dimension of the first picture, right click on the second
frame of the Picture layer select Insert Blank Keyframe.
8. Repeat steps 4, 5 and 6 for the remaining pictures. Make sure you Insert
Blank keyframe in each section and name pic2, pic3 and pic4 for the
remaining pictures. Dimensions will be same for all pictures.

Picture layer with

new key frame
Picture aligned at the
center of the stage

9. After you are done with step 8, select Action layer from the Timeline.
10. Click on the first section of Action layer and press F9 or right click and select
Action to go to the Action Script panel.
Application of Action Script
1. Type this exact code below on the Action panel screen.
stop( )
button1.addEventListener(MouseEvent.CLICK,play1);
function play1(event :MouseEvent):void
{
gotoAndStop("pic1");
}
button2.addEventListener(MouseEvent.CLICK,play2);
function play2(event :MouseEvent):void
{
gotoAndStop("pic2");
}
button3.addEventListener(MouseEvent.CLICK,play3);
function play3(event :MouseEvent):void
{

gotoAndStop("pic3");
}
button4.addEventListener(MouseEvent.CLICK,play4);
function play4(event :MouseEvent):void
{
gotoAndStop("pic4");
}
(The purpose of this action script is to give command to the buttons to show
thumbnail view of the picture when clicked.)

Action Script

2. Close the Action script window after you are done with typing the scripts.

E. Previewing the Thumbnail

1. Press F12 or go to Control > Test Movie > Test to view the animated
image thumbnail in preview window.

F. Saving/exporting animated image thumbnail to a video file

1. Go to File and to Save. Save this file inside the animation folder. The
saved file will have *.fla extension. This file can be edited later.
2. To export the animated thumbnail as a video file, go to File > Export >
Export Movie. Export this file inside the same folder. This file will
have *.swf extension (shockwave file). This file can be uploaded to any
webpage and video hosting site