Did You Know?


What is a Timeline?

The timeline is the key to creating animation. Remember when we talked about cel animation, we said that numerous cels would be created and photographed in sequence. Then the playback of these sequenced images would allow for the eye to perceive motion. The timeline represents the passing of time in the animation.


Flash makes this process easier by allowing you to create the cels on the stage area. Instead of having to photograph each cel, Flash allows you to simply playback the cells in the sequence you created them by using they playhead. Instead of calling each drawing a cel, however, we will now refer to them as frames.



Each box on the timeline is what we call a "frameholder". They remain empty until they are filled with a frame.

1. Clicking on the first frame, the stage will reveal what is on that frame.
2. Choose the oval tool and draw a circle.
3. Select the second frame and choose Insert > Timeline >Frame. Or use the shortcut key F5.
By default, Flash assumes that you want to have frame 1 duplicated on frame 2.

4. Click on Frame 5 and push F5.
Now the same image has been copied to 5 sequenced frames.



5. Click on the playhead a and drag it back an forth across the five frames.
This is called "Scrubbing the playhead".

Nothing really happens because the shape does not move from frame to frame. It simply stays put. If you try to move the object, it will move it on all 5 frames. If you want to change the position on each frame, you need to use Keyframes.


Key Frames

Keyframes are what we use to signify a change in motion. If you want an object to change from one frame to the next, you must insert a Key frame.

To Insert a Keyframe

6. Select the second frame and choose Insert > Timeline > KeyFrame. Or use the shortcut key F6.
This creates a new Key frame in which you can make a change.

7. With the second frame selected, double click the oval on the stage and use your arrow keys to nudge the shape 5 times to the right.

8. Repeat Steps 6 and 7 for frames 3, 4 and 5.

You will notice that each time you create a keyframe, it reproduces the previous frame as a starting point. You can then make the change on the new keyframe.

Removing Frames & Keyframes

Sometimes you create a frame or keyframe that you do not want. In this case you can not simply click the frame and press the delete key or you will delete only the object on the frame.

To Remove Frames and Keyframes

1. Choose the third frame on your animation and right click.

2. Choose Remove Frame.

Scrub the playhead and you will notice that removing that keyframe removed part of your animation. Remember that before you remove frames you sure make sure that it will not affect the sequence of your animation.

3. Press Control Z to undo.


Putting Animations Together

Often animations involve more than one simple motion. Often an object will move, pause, change direction, move, pause, etc. To do this requires a combination of Keyframes and regular frames.

To Combine key frames with regular frames

1. Select frame 6 and press F5 four times.

This will insert four frames where the shape stays in the same place.

2. Select frame 10 and Press F6.

This will insert a key frame where you can begin to make the shape move again.

3. Double click on the oval and use the arrow keys to nudge the oval up 5 times.

4. Repeat this process 5 times until you have keyframes all the way to frame 15.

Your timeline should appear as seen below.


If you scrub the playhead you will see that you have movement, pause, change of direction, movement. This is how we begin to create animations.


Flash File Format

When you create a Flash file and save it, .fla is the file extension that will be used. This means that when you open the file it will have your timeline and objects just the way you left them. You can still work on the file and make changes.

When you are finished working and you want to share your animation with others, you must export your work into an animation file. This means that a file will be created that allows users to watch your animation but not change or control any of your work. Flash exports an .swf file for this purpose.

To Save Your Flash Work

1. Choose File > Save and save your oval animation as oval.fla

Save it to your Flash Folder

2. Once the working file is saved, you choose Control > Test Movie

This will export the file into .swf format.

**Note** The .swf file will automatically be exported to the same folder as the .fla file. If you check on your desktop, you will see the files as shown below.