Hacks #26-34

This chapter covers a topic near and dear to Flash's heart: animation. The Flash interface is based on the techniques of traditional cel animation. The Flash timeline is the digital equivalent of a flip book, with each frame representing a slice of time and successive cels (frames) displayed over time to create the illusion of motion. Like traditional cel animation, Flash supports the concept of layers, which are used to build up an animation from the background to the foreground, with various elements at appropriate depths.

Keyframes and tween frames, in which the master artist creates the keyframes and underlings create the in-between (tween) frames, will also be familiar to traditional animators. In Flash's tween-based system, the artist creates the keyframes and Flash can generate the tween frames automatically. All changes created by the animator, such as moving a graphic to a new location, must occur on a keyframe. Frame 1 is always a keyframe and you can create additional keyframes using InsertTimelineKeyframe (F6). So you might create a graphic in frame 1 and position it at the left side of the Stage. Then you can create a keyframe in frame 19 and move the graphic to a new position at the right side of the Stage. You can apply a motion tween by selecting the animation's beginning and ending keyframes in the timeline and setting the Tween option in the Properties panel to Motion (or by choosing InsertTimelineCreate Motion Tween). Flash automatically tweens the animation, which makes the graphic appear to move across the Stage in 19 steps as you scrub the playhead across the first 19 frames.

When a graphic is placed in a layer, it appears on Stage until a blank keyframe is encountered in that layer. For example, if you want a graphic to be removed from the Stage after frame 19, you can insert a blank keyframe in frame 20 (using InsertTimelineBlank Keyframe or F5).

Even though Flash does a lot of the work for you, this chapter has a number of hacks that benefit the traditional animator and newcomer alike. Creating animation can require a lot of time and skill, so this chapter offers hacks that both reduce the time required and simplify the process. Unlike traditional animators, Flash animators must also be concerned with download times and runtime performance. This chapter looks at ways of reducing or automating common animation tasks by:

• Simplifying animations (for both the animator and Flash)

• Generating complex animation via third-party tools, particularly for character animation

• Showing how to make long nonrepetitive animations via short, repetitive animations

Flash also allows you to generate scripted motion. In scripted motion, the appearance of the next frame in the animation is calculated and drawn by ActionScript. This form of animation is the route best taken when you want to create interactive animation or when your animations are controlled by mathematical rules (such as physical equations of motion).

When using scripted animation, be aware that Flash uses print-based coordinates, not mathematical ones. A printed page takes the origin at the top-left corner, whereas the traditional Cartesian axes use the bottom-left corner as the origin. This means that the Flash origin is at the top-left corner of the Stage, and the positive Y direction is downward, as shown in Figure 4-1.

Figure 4-1. Flash coordinate axes (left) and traditional Cartesian coordinate axes (right)

For scripted motion, the limiting factor is performance, and we will look at ways of making your code create animations that are as smooth and responsive as possible. We will also look at several quick ways of creating common scripted animation effects.