SERGIO OSMEÑA NATIONAL HIGH SCHOOL

ANIMATION / ILLUSTRATION

3RD QUARTER

ADOBE FLASH – BASIC ANIMATION

UNDERSTANDING FLASH TIMELINE

▪ The Adobe Flash timeline is used for creating layers and animation.
▪ The timeline has two parts, the left side, and the right side.

a) The left side of the timeline is used for making layers.

▪ Layers are used to control and determine which elements are in front or back of the other.

b) The right side of the timeline is for working with frames.

▪ Frames are used to create animation and defined as the files set over a period of time.
▪ Frame rate is number of frames per second and the default value in Flash is 24 frames per second.
▪ The frame rate can be viewed at the bottom of the timeline or from the Properties Inspector.
▪ Frames are numbers in increments of five.

▪ Playhead is a semi-transparent red rectangle and a line all the way down the timeline.
▪ The red rectangle is located at the top of the timeline points of a certain number on the frame.
▪ The playhead determines the frame that you are currently viewing.

MANAGING THE STAGE

▪ The Flash default stage has a width of 550 pixels and a height of 400 pixels.
▪ It has also a default frame rate of 24 frames per second.
▪ On the Properties panel, click the Document Properties button to show the Document Settings window.
▪ The ruler units can be in the following measurement type, select from the drop-down menu under the Ruler units: Inches, Inches
(decimal), Points, Centimeters, Millimeters and Pixels.

▪ The stage size can be adjusted from the Document Settings window under Dimensions or from the Properties panel size category
.

▪ The frame rate can also be adjusted either from the Document Settings window under Frame rate category FPS: 24.00 by encoding
the frame rate value.

▪ The stage background can be

adjusted form the Document
Settings window or from the
Properties panel: Stage
category .

1|Page
 SERGIO OSMEÑA NATIONAL HIGH SCHOOL
ANIMATION / ILLUSTRATION

TIMELINE’S ANIMATION FEATURES

▪ The timeline is a panel used for building the contents and creating animations.
▪ The timeline contains many little boxes.
- The first box has a solid black outline which indicates a keyframe that contains graphics, sounds or video.
- A hollow bullet which indicates a blank keyframe.

WORKING WITH LAYERS

▪ Layers are organized objects or elements that can be arranged in front or behind another layer.
▪ Click and drag the layer icon up or down to place it in front or behind another layer.
▪ The select layer is indicated by a light blue background.
▪ The layer can be viewed, locked, or viewed on its outline.
▪ Uncrossed pencil icon beside the layer name will indicate that you can edit or draw on that layer.

ICON NAME FUNCTION

Determines the visibility of the layer. If you click on the small circle of a visible layer, a
View red cross will appear indicating that the layer is not visible, and the pencil icon is crossed
which means layer is not editable. Click the red x to be able to edit the layer.

Locks or unlocks a layer. The layer will not be edited if locked and the pencil icon is
Lock
crossed. The layer will be edited if unlocked and the pencil icon is crossed.

Outline Views the outline of the element and the color of the outline will be that of the layer color.

2|Page
 SERGIO OSMEÑA NATIONAL HIGH SCHOOL
ANIMATION / ILLUSTRATION

ADDING OR CREATING NEW LAYERS

▪ New layers are created by clicking the New Layer icon. The layers will be automatically labeled as Layer 1, Layer 2, Layer 3 and so
on.

1. To place elements into the first layer, select the layer by clicking the layer name.
2. Click and drag the elements such as text or picture into the stage.
3. To add another layer, click the New Layer icon.
4. Select the second layer and add elements into the layer.
5. To change the layer position, click on the layer name and click it up or down.
6. After arranging the layers, the first layer in the list is the topmost layer in the stack of layers.
7. To rename, double click the layer name and type the new name.

MANAGING AND ORGANIZING LAYERS

▪ As you work in Flash becomes more complex and the number of layers increases significantly, you need to manage and organize
your layers by using Folders.
▪ The layers should be gathered into the folder together based on a certain logical relationship.
▪ If the names of layers and folders are long, you can view the complete label by expanding by hovering your mouse between the
layers and frames’ area until the cursor shows a double headed arrow and then click and drag to the right.
▪ You can also expand the timeline part and the stage area by hovering your mouse in between the stage and the timeline and when
a double-headed arrow appears, drag it to expand.

CREATING FOLDERS

1. Click the New Folder icon and Flash will name it Folder 1.
2. Click and drag each layer into the folder.
3. The layers will be indented to indicate that it is placed inside the folder.
4. Collapse and expand the folders by clicking on the arrow at the left side of the folder.
5. Rename the folder so that you will know the contents of the folder by double clicking the folder.

3|Page
 SERGIO OSMEÑA NATIONAL HIGH SCHOOL
ANIMATION / ILLUSTRATION

TIMELINE TOOLBAR

▪ The tools in the timeline toolbar allow you to easily navigate to frames and set adjustments in the timeline.

UNDERSTANDING FRAMES AND KEYFRAMES

▪ Flash uses the timeline elements, including frames and keyframes to create animation. Keyframes denote or define the start or
change in layer content. It is usually a new art or image and how it is going to move.
▪ Frames usually follow a keyframe. It displays what the keyframe has defined. It also denotes no change of the layer. The frames get
their information from the keyframe. Frames have a gray background. When you move the playhead from the keyframe to the rest
of the frames in a group, the image on the stage should not change.
▪ The last frame before a keyframe is a regular frame, designated by a white dot.
▪ A blank keyframe has no image on the stage. A blank keyframe is designated by a white dot. Blank frames follow a blank keyframe
are indicated by a white background. When you move the playhead along the blank keyframe, no image will be displayed on the
stage.

▪ Regular frames are created by selecting an end frame along the frames timeline or from the Menu Bar, click Insert, Timeline and
Frame.

CREATING A FRAME

The number and boxes on the Timeline

represent frames.
1. Click Frame 30, which is indicated with
a red bar.
2. On the Menu Bar, click Insert,
Timeline and click Frame.
3. There will be a gray bar indicating
frame 1 to 30 is selected.

4|Page
 SERGIO OSMEÑA NATIONAL HIGH SCHOOL
ANIMATION / ILLUSTRATION

4. You will notice that the scenery has disappeared in Frame 30 because Layer 1 or Scene is not selected up to Frame 30.
5. Move the red bar to frame 1 and the scenery will appear.
6. Move again the red bar to frame 25, right click the mouse on the blank frame and click Insert Frame.
7. You will now see that layer 1 has a gray bar and the scenery appears up to Frame 25.

CREATING A KEYFRAME
• When a set of frames are created, a new keyframe usually begins right after the end frame.
• A keyframe is created by selecting the frame where it will be placed and then from the Menu Bar, click Insert, Timeline and then
Keyframe.
• A black dot appears to indicate that it is a keyframe. Selected frames or keyframes are indicated by a blue background. To deselect
the frames, click on the gray area below the frames.

5|Page