Character Animation Basics

Animation is simply the illusion of movement. But in the world of animation, stark realism doesn't necessarily make for a successful animation. If you faithfully reproduced a photographic sequence by meticulously tracing the cycle of images, the resulting animation would likely be a little mechanical and stiff.

Professional animators take advantage of techniques that exaggerate and embellish motion to create a more interesting story. There are certainly different degrees to which you can use these techniques to affect the presentation of your story, so it really comes down to the kind of emotional response that you're trying to elicit from your audience.

Before you can dive into animation, you need to become familiar with the language of animation. As with any profession, animation has its own set of jargon that you need to know. Some of the basic concepts are outlined here:

• Keyframes. In the world of hand-drawn animation, keyframes represent critical moments in the timeline. This same concept holds true in the Flash environment. Keyframes in the application timeline are the points at which changes in a character or object's orientation take place.

• Tweening. The term tweening is derived from the old animation industry term "in between," which referred to the profession or duty of creating the animation sequences in between the keyframes. In Flash, tweens also take place in the space between keyframes, but they can be used to automate transition effects such as scale, rotation, visibility, and so on.

• Easing. Easing in and easing out indicate the acceleration or deceleration of an object or character when it begins or ends a tween.

• Action and reaction. These refer to exaggerated qualities such as "squash and stretch" when a character or object interacts with force or motion.

• Timing. Both a mechanical function and an aesthetic quality, timing requires you, as the animator, to set up an event and then give it plausible timing as it occurs.

• Posing. This communicates mood, emotion, and attitude. Posing helps orient the audience to a character or object's disposition.

• Anticipation. This is used to forecast to the viewer what is about to happen or what has the potential to happen. If a character is preparing to run, anticipation is the wind-up that he does before bolting off.

• Mechanics. In the physical world, objects tend to behave in predictable manners. More often than not, animated characters follow arcing motions because they are hinged ( swinging arm) or are reacting to a force such as gravity.

You've got the basics in hand; it's time to take a look at how you actually go about creating the illusion of movement.

The Illusion of Movement

The principles behind animation are quite simple: Fool the viewer into believing that your creation is alive and moving. Okay, sometimes it's not as easy as it looks, but if you plan everything and do your homework, there are a number of approaches to creating different kinds of animations:

• Stop motion. Stop-motion animation is accomplished by taking successive photographs of posed objects that are moved slightly between shots. The classic example of stop motion is Claymation, in which clay figures are posed and photographed. This leaves you with a series of sequential bitmaps that, when played back, give the illusion of movement. If you've seen the movie Chicken Run , you are familiar with this type of animation.

• Rotoscope. In rotoscoping, you import live-action footage and trace over it frame by frame to give your characters realistic movement. It should be noted that most animators look on rotoscoping as a crutch, but it can be quite useful. Examples of this kind of animation can be seen in the in the opening sequence of the Japanese animated movie, Ghost in the Shell , directed by Mamoru Oshii, as well as the 1980s pop video "Take on Me" from the band a-ha.

• Cel animation. This is the classic hand-drawn style of animation that you've come to know and love from Disney animations. In cel animation, the keyframes are drawn and the inbetween (tweens) frames are added later. The good news is that Flash does both simple shape and motion tweening for you. The bad news is most character animation is frame by frame.

Stop-motion animations can be set up inside Flash, but because they depend on bitmaps, they can leave you with large file sizes. As an example, look at the StopMotion.fla file in the Chapter_10/Assets folder. This is a classic stop-motion sequence in which each frame of the animation was posed and photographed. When the frames are played one after another, you get the illusion of movement. You also get a file that's 188KBthat's with added effects, but it's still a large file size .

Rotoscoping, on the other hand, takes advantage of what Flash does best: vector graphics. By tracing over a video sequence, you can get very life-like effects and keep your file size low. The next exercise walks you through setting up a simple rotoscope animation.

Exercise 10.1 Rotoscope Animation

With rotoscoped animation, you import live-action footage and trace over it. In this simple exercise, you'll use a series of images that were converted to JPEGs from a movie clip. This type of animation can be fairly tedious , but it can also give you a realistic effect that would be difficult to achieve otherwise . Plus, it's a great crutch for those of us who can't draw.

1. Open handAnime.fla in the Lesson_10/Assets folder on the CD.

2. In the Library, double-click the imagesMC movie clip to open it in Symbol-Editing mode. This clip contains the sequenced JPEGs of the hand motion.

3. Obviously, tracing that itty-bitty image would be an incredible pain. Use your magnifying tool to drag a marquee around the image to make it large enough to work with.

4. Select one of the smaller Paint Brush sizes. To get a sketch-like appearance, you'll want to use the Paint Brush rather than the Line tool. If you have a pressure-sensitive tablet, all the betteryou'll get nice variation in your lines, depending on the pressure you use.

5. Trace each hand image in as much detail as you want.

6. When you've finished tracing the individual hand frames, hide the bottom layer and play through your animation.

To see an example of a completed rotoscoped animation, open handAnime_final.fla in the Chapter_10/Assets folder. (See Figure 10.2.)

Figure 10.2. The hand sequence is traced frame by frame from video stills.

Traditional or cel animation is probably the most widely used form of animation in Flash. You'll have the opportunity to work with this type of animation in the following sections.

Timing and Synchronization

Timing and synchronization are two of the most crucial elements that you need to deal with when animating.

Timing can make or break a good animation, whether it is abstract or character-based. One of the most essential messages that you are trying to convey to the audience is the passage of time. The speed at which an event happens carries a tremendous amount of emotional weight. For example, a hand animated in a sweeping gesture can be interpreted in different ways, depending on the timing. A very fast and abrupt transition from one end state to another could be interpreted as a slap. A slower, more deliberate motion could be interpreted as a sweeping gesture. It's all in the timing.

Likewise, timing of motion can help outline the relative weight of objects on your Stage. Something that is large and heavy should be harder to place in motion and should move more slowly than a smaller, more lightweight object. In fact, if your large objects move faster than your smaller ones, chances are good that your animation will feel "off."

Synchronization refers to when things occur at the same time, when actions are simultaneousfor example, when your character speaks, two things happen at the same time. The mouth moves ( assuming that your character has a mouth), and you hear a sound. Those two events have to be timed properly, or they just won't work.

Now it's time to use some of these concepts to help bring your character to life.