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 same could be said about stop motion animation, wherein we have an object, take a picture, move the object, and take another picture.

The timeline represents the passing of time in the animation or the steps taken from beginning to end.

Note that there are different ways of viewing the timeline, as represented above by “Frame View.” Clicking that box reveals some options which may make your timeline easier for you to read/work with.

You can decide which you prefer. To better illustrate here, I’ll use Large, but I also like Preview  in Context, because it shows me a visual reminder of the object and position I’m working with.

Flash makes the animation 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.

Frames

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

Clicking on the first frame, the stage will reveal what is on that frame.

In this example, I have 3 blank layers and one with an image on it. The layers with nothing on it contain an empty circle, to indicate that there is a frame there, but nothing has filled it yet.

The bottom layer, “background” has a black circle, because I’ve placed that on to the stage, so something happened. Whenever something happens/changes, the frame will have a black circle.

Those black circles are called KEY FRAMES, and they signify that something has moved/changed/happened. As I add elements to my animation, each will have a start and end point, (and probably some motions along the way), and these will all be represented by that black circle.

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

If you drop an item onto the stage, a keyframe will be created for you, since something happened. If you want to add another position/motion/change, you can right click on a frame and “Insert KeyFrame” or press F6.

HANDY SHORTCUT: F6 adds a key frame!

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.

Alternately, if you wanted to start a new action without the previous object, you can insert a BLANK KEYFRAME, which starts you from nothing (so the previous object/motion disappears)

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, right click and Clear.

Keyframes can also be moved very easily by dragging and dropping them into a new position on the timeline.

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

You can combine different movements by adding new keyframes. If you want an object to stay in one spot for 10 frames, add a keyframe and leave the object in the same spot.

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

Choose File > Save and save your animation

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

to make sure that the animation works the way you want it to. If you’re happy with your animation, you can choose Publish. This will export the file into .swf format.

**Note** When you test a movie, a .swf file will automatically be exported to the same folder as the .fla file.

You can (and should) look at your publish preferences to see/make sure that your animation is published in the format you want.

You can also preview your animation in different ways, by choosing Publish Preview