Home / Articles / Top Techniques for Creating Animation in Adobe Flash CS3 Professional

Top Techniques for Creating Animation in Adobe Flash CS3 Professional

If you've created artwork in Photoshop or Illustrator (or on paper, for that matter), you're accustomed to drawing in visual space. What you may not be used to is drawing in time.

Time is what makes animation possible. Animation isn't just cartoon characters running around; the term refers to any incremental change in visual elements over time. Text moving across the Stage is animation; so is a black-and-white photo that blossoms into color.

If you're planning to use Flash strictly as an ActionScript programming environment—for example, to make dynamic Web interfaces—you may think it's not important to know how to create animation. In Flash, however, Web interfaces or online applications are animation. (After all, the user's interaction with the computer takes place over time.) Whether you're an aspiring animator, game developer, or interface designer, you'll need to be familiar with the techniques in this chapter.

#30 Getting to Know the Timeline

The Timeline is where you control how the objects on the Stage change over time. The vertical red line that crosses the Timeline is called the playhead; it marks the passage of time as it sweeps across the Timeline from left to right (Figure 30).

Figure 30

Figure 30 These are the features of the Timeline you'll use most often for animation.

The Timeline is divided into cells, each of which represents a unit of time. The duration of that unit varies according to the frame rate—see #31—but it's usually somewhere between one-twelfth and one-thirtieth of a second. The content of each cell (or each column of cells, if the Timeline has more than one layer) determines what's happening on the Stage at the moment the playhead passes over it.

The cells in the Timeline are empty by default, but you can fill them with either a keyframe or a regular frame.

  • Keyframe. A keyframe signals to Flash that you want something in your movie to change. When the playhead passes over a keyframe, it updates the Stage to display whatever is new in that keyframe. A keyframe can also mark changes that aren't visible on the Stage, such as the start or end of a sound.

    To insert a keyframe into the Timeline, select the cell in which you want the keyframe to appear and choose Insert > Timeline > Keyframe, or press F6. A small black circle appears in the cell.

    On some occasions, you may want everything that was in the preceding keyframe to disappear. You can make this happen by choosing Insert > Timeline > Blank Keyframe, or by pressing F7. A blank keyframe is represented in the Timeline by a white circle instead of a black one.

  • Frame. A frame (which we'll sometimes refer to as a regular frame, to distinguish it from a keyframe) signals to Flash that you want to maintain the status quo. When the playhead passes over a regular frame, it tells the Stage to continue displaying whatever was in the most recent keyframe. To insert a frame into the Timeline, select the cell in which you want the frame to appear and choose Insert > Timeline > Frame, or press F5. A white rectangle appears in the cell.

    To insert a series of frames, select the cell in which you want the series to end. (Flash will assume that you want the series to begin in the cell immediately following the most recent keyframe.) When you choose Insert > Timeline > Frame or press F5, a white rectangle appears in the last cell in the series. The intermediate frames don't contain white rectangles, but the dividing lines between the cells disappear; the absence of dividing lines is what allows you to distinguish a series of frames from a series of empty cells.

Note that you can't have empty cells in the middle of a movie. If you insert a keyframe, skip a bunch of cells, and then insert another keyframe, Flash automatically fills the intervening cells with a series of regular frames.

Note also that there may be different things happening on different layers. When the playhead reaches any given point in the Timeline—let's say it's frame 12—Flash looks at the entire column of cells and follows the instructions on each layer. For example, if frame 12 on Layer 1 is a keyframe, Flash will replace whatever was previously on that layer with whatever is new in that keyframe. If frame 12 on Layer 2 is a regular frame, Flash will continue to display whatever was in the previous keyframe in that layer. If frame 12 on Layer 3 is a blank keyframe, Flash will clear whatever was previously on that layer. All of these changes happen simultaneously when the playhead reaches a given frame, regardless of how few or how many layers there are.

2. #31 Setting the Frame Rate | Next Section

There are currently no related articles. Please check back later.