Cooking with Flash: Learning the Timeline

Prerequisites:

Begin

Flash wasn’t always this difficult to get your head around. Before it was hijacked by codemonkeys, the software was a very capable animation program. The focal point of Flash animation is the Timeline, and all the wonderful things it can do. This lesson is a primer on how to move around the timeline and to figure out how it works. In a future lesson, we’ll delve into different animation styles you can pull off using the Timeline.

Start a project as described in Basic Flash Project Setup, or continue from an existing project. Make sure that you can see the Timeline in your screen setup. In the menus, click Window > Timeline.

1. Time moves from left to right.

Flash timeline

This is an obvious point if you’ve used any other timeline-based software like Premiere, Audacity, or Director. Those numbers stretching off into the distance are frame numbers. A frame is a single picture in your movie. Play the pictures one after another quickly enough, and our persistence of vision creates the illusion of motion.

Flipbook

Flipbooks use sequential images to trick the eye into seeing motion. The Flash Timeline is an elaborate flipbook.

2. FPS Determines how fast your frames play.

Your default .fla file makes frames whizz by at 30 frames per second.

Flash Properties frames per second setting

To change the frame rate of your Flash movie, type a different number into the FPS: field in the Properties panel (Window > Properties).

note: The Properties panel is context-sensitive, which means that it shows different options depending on what you’ve selected. To see the FPS setting, click on any blank area of the stage.

30 FPS is standard for most video. Classical animators used to work at 24 frames per second for feature films, and 12 frames per second for television and lower-quality animation. 12 fps is sometimes called working “on twos”, because the camera man would photograph each drawing twice to bring it up to 24 fps. The fewer the drawings you use in your animation, the choppier your animation will look.

3. Understanding keyframes

The word “keyframe” is inherited from animation. A common technique for animating a scene – especially involving a character – is to draw the key frames in the action. If you’re animating a bouncing ball, you might have three key frames: the ball at the top of its drop, the ball at the bottom as it squishes against the ground, and the ball at the top again. Keys are the most crucial drawings in the action. A person should be able to completely understand what’s going on just by looking at the keys.

Animation key frames

Once you’ve drawn the keys – the most important drawings – you draw the in-betweens. Without these drawings, we can’t create the illusion of motion. They are the pictures that “move” us from one key to the next.

Computer animation packages like Flash enable us to set up key frames, and to draw our own in-betweens. Flash can also draw in-betweens for us using a process called interpolation. We’ll look at interpolation, or tweening, in another tutorial.

4. Understanding frame symbols

There are important symbols that appear on frames. Understanding them is the key to understanding the Timeline, like learning to read music.

  1. Blank keyframe

    Flash blank keyframe

    An empty circle indicates a blank keyframe. There is nothing on the stage on this layer on this frame.

  2. Keyframe

    Flash keyframe

    A black circle with a grey background indicates a filled keyframe. There is something on the stage on this layer on this frame.

  3. Empty frame

    A blank white frame means that our animation will play to at least this point. The animation continues to play until it reaches the latest keyframe, blank keyframe, blank frame or filled frame in the Timeline.

    Flash blank frame

    Even though the stage is empty, this animation will play past frame 30 because the blank frames stretch at least that far.

  4. Filled frame

    A frame with a grey background means that the contents of the preceding keyframe appear on stage to at least this point.

    Flash filled frame

    The contents of frame 1 stay on stage well past frame 30.

  5. Terminal frame

    This white rectangle marks the point after which the contents of the preceding keyframe stop appearing on-stage.

    Flash filled frame

    The contents of frame 1 persist on stage from frame 1 to frame 20. After frame 20, they stop showing up.

5. The function keys insert frames.

The F5, F6 and F7 keyboard keys are crucial when using the Timeline. Used on their own, they insert various frame types. Hold down the SHIFT key and press one of these function keys to delete that frame type.

F5 – Add a frame. They will be either blank or filled depending on whether they’re preceded by a blank or filled keyframe.
SHIFT+F5 – Delete a frame.

F6 – Add a keyframe. note: If you add a keyframe to a blank range of frames, you’ll drop in a blank keyframe.
SHIFT+F6 – Remove a keyframe.

F7 – Add a blank keyframe.
SHIFT+F7 – Remove a blank keyframe.

Sample usage: If you have something on stage, and you want it to disappear at frame 25, add a blank keyframe to frame 25.

You can click and drag to range-select a chunk of frames to delete them, or to convert them to empty or filled keyframes.

note: If you insert frames, they don’t overwrite your existing frames. Rather, the end of your Timeline on that layer gets pushed out farther.

6. The Playhead controls frames on all layers.

If you want to add or remove different frame types through all layers of the timeline simultaneously, first click on the pink rectangular Playhead. Then when you add or remove frames, they’ll be added to or removed from all layers at once.

7. Scrub or play your animation.

Click and hold the mouse button on a frame and move the mouse around to preview your animation. This is called “timeline scrubbing”.

To scrub the Timeline without fear of moving your keyframes around, click and drag the pink Playhead back and forth.

To play your animation within the Flash IDE, press the ENTER key on your keyboard.

To compile your movie to a swf, hold CTRL and press ENTER (Command+Enter on the Mac). Notice that Flash automatically loops when the Playhead reaches the end of the timeline.

note: In order to drag your empty and filled keyframes around, first click on the keyframe to select it, then click and drag to move it around.

Finish

This basic Timeline lays the foundation for the actual animation exercises we’ll be doing. We’ll learn how to do “straight-ahead” or “frame-by-frame” animation, as well as how to get Flash to draw the in-betweens for us.

6 thoughts on “Cooking with Flash: Learning the Timeline

  1. Pingback: What are the best tutorial sites for flash animation?

  2. Pingback: Flash-animation tutorial(for beginners) part 1

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.