This chapter is from the book

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 animationfor 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 designatewithin 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.

Animation Methods

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.

Frame-by-frame animation

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 againand 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 necessaryfor 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.

Tweened animation

Since we now have computers to make our lives easier, there's no reason
to manually create an animation when Flash can do so
automaticallyespecially 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 framesthe 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.