Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Flash

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

Character Animation Basics

Animation is simply the illusion of movement. However, in the world of animation, stark realism doesn't necessarily make for a successful animation. If you faithfully reproduce 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 of "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." They occur when a character or object interacts with force or motion.

  • Timing. Both a mechanical function and an aesthetic quality. You, as the animator, are required 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 or she does before bolting.

  • Mechanics. In the physical world, objects tend to behave in predictable ways. 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.

Illusion of Movement

The principle behind animation is quite simple: Fool the viewer into believing that your creation is alive and moving. Although it's not as easy as it looks, if you plan everything and do your homework, you can do the following successfully:

  • Stop motion. Stop-motion animation is accomplished by taking successive photographs of posed objects that are moved slightly after each shot. 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 opening sequence of the Japanese animated movie Ghost in the Shell. It can also be seen in 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. In cel animation, the keyframes are drawn and the tween frames are added later. The good news is that Flash does both simple shape and motion tweening for you. The bad news is that most character animation is done 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.swf file in the Examples/Chapter11 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 188KB. Granted, you've 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 life-like effects and keep your file size low. The next exercise walks you through setting up a simple rotoscope animation.

Exercise 11.1 Rotoscope Animation

With rotoscoped animation, you import live-action footage and trace over it. In this simple exercise, you 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. In addition, it's a great crutch for those of us who can't draw.

  1. Open handAnime.fla in the Examples/Chapter11 folder on the CD and save it to your hard drive.

  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 comfortably.

  4. Add a new layer and name it tracing. Lock the images layer.

  5. 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 better—you'll get variations in your lines, depending on the pressure you use.

  6. On the tracing layer, trace each hand image with as much detail as you want.

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

  8. When you're happy with your animation, you can delete the images layer.

  9. Save and test your movie.

To see an example of a completed rotoscoped animation, open handAnime_final.fla in the Examples/Chapter11 folder. (See Figure 11.2.)

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

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

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 that is 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 occurs when things happen at the same time. For example, when your character speaks, two things should happen. The mouth should move (assuming that your character has a mouth), and you should 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.

  • + Share This
  • 🔖 Save To Your Account