Using Animation to Build Movement in Flash MX
- Dec 27, 2002
If all you want to do is create Web sites with cool graphics and a few text descriptions, you could easily stick with plain old HTML. However, even though HTML can effectively convey a message, its design limitations make it about as exciting as watching your hair grow. Once you've acquired even a little visual savvy, you'll to want to move beyond HTML. In fact, your interest in Macromedia Flash likely stems from your desire to not only bring your message to a large audience, but to bring it to life as well. That, after all, is what animation is all about.
From the early Disney cartoons to the spectacular computer-generated effects seen in today's movies, audiences have long been fascinated by the skillful combination of graphics and motion. Although in live-action films much movement is left to chance, as an animator you determine not only what action occurs in a scene, but exactly when it occurs as well. You can make birds fly and cartoon characters talk, or vice versa. You can even determine what your characters say, and whether they get their lights punched out for saying it.
All you've learned about Flash thus far means little without this chapter's ingredients. This is where the real excitement begins. By animating your message, you make it much more powerful. And if you do it right, you'll find that you can control your audience's emotions in ways they'll not soon forget. Sound appealing? Read on.
How Animation Works
At one time or another you've probably seen the actual film that's used to project a movie. Basically, it looks like a bunch of pictures strung together on a long strip of plastic. A Flash animation is no different. Just like a motion picture, it consists of individual frames, each slightly different from the preceding one. Special frames known as keyframes define where changes occur in your animationfor example, when movie elements are moved, rotated, resized, added or removed, and so on. Each frame can contain any number of symbols or graphics placed on different layers.
Like a strip of movie film, Flash's timeline includes all of your animation's layers and frames. When your movie plays, or when the playhead on the timeline is moved manually, the graphic content of each succeeding frame makes up what you see on stage. When the frames are played back at a fast enough rate, the illusion of movement occurs. And just as in a real movie, the timeline in Flash uses scenes to shift from one area of the story to another, so that you can break your movie's overall timeline into main sections. The timeline can be as long as you wish and play at whatever speed (frames per second, or fps) you designatewithin reason.
At the same time, Flash technology differs from regular movies in two important ways: First, frame actions can be placed at particular frames on the timeline to perform specific interactive tasks (for example, jumping to other frames in your movie or opening URLs in a browser). Also, Flash movies can contain mini-movies (movie clips) and buttons.
Flash offers two methods of animation: Frame-by-frame animation provides more control over the way graphical content is animated but is more time-consuming to create. Tweened animation provides less control but is much faster to implement. Let's take a look at both.
As the most recognizable and widely used form of animation, the frame-by-frame method is employed for everything from creating animated cartoons to bringing clay figures to life. This type of animation involves taking a snapshot of a frame's content, changing the content slightly, taking another snapshot, changing the content again, and so on. When these snapshots are displayed in quick succession, movement appears and animation is accomplished. In Flash, creating this type of animation involves moving the timeline to a given frame, adjusting the content on the stage, then moving the timeline to the next frame and adjusting the content againand so on, for each frame of the animation.
With frame-by-frame animation, you must manually edit each element's movement on the stage (Figure 10.1). In addition to being time-consuming, using this mode of animation can substantially increase your movie's overall file size. Thus, you should only use frame-by-frame animation when it's absolutely necessaryfor quick or subtle movements, such as a mouth moving or hands playing a piano.
For a more detailed discussion of frame-by-frame animation, see "Creating Animation" later in this chapter.
Figure 10.1 In a frame-by-frame animation, each movement is edited manually.
Since we now have computers to make our lives easier, there's no reason to manually create an animation when Flash can do so automaticallyespecially when it requires smooth transitions in movement, size, rotation, shape, or color.
With a tweened animation, you use keyframes to specify two images of a given movie element: its appearance at the beginning of the animation, and at the end. You also specify how long the transition should take from the beginning to end (measured in frames). Flash then generates the graphic content for each of the frames in between (Figure 10.2).
Figure 10.2 In a tweened animation, you define the graphic images at the beginning and ending keyframes, and Flash calculates how each of the intermediate frames should look.
Obviously, it's much faster to produce animations using tweening than the frame-by-frame method. Tweened animations are also much easier to edit, because there are only two editable framesthe beginning and ending keyframes. If you change either of these, Flash will automatically recalculate the content of all of the intervening frames. In contrast, you must manually edit each frame of a frame-by-frame animation. As you work more with animated content, you'll find that tweening works for most animation tasks that involve fluid and smooth movements as well as transitions, or morphing, of shapes. Frame-by-frame animation works best for delicate, complex, and quick movements. Flash's layering functions also make it possible to use both types of animation on different graphic elements in the same scene.