Flash MX Animation Techniques

This chapter is from the book

Inside Flash MX, 2nd Edition

Learn More Buy

This chapter is from the book

This chapter is from the book 

Inside Flash MX, 2nd Edition

Learn More Buy

Adding Life to Your Character

When you create a character, you need to think about its personality and how its personality relates to its appearance. You can give personality to almost anything. A line or a dot can have character. If you've ever seen Disney's Aladdin, think about the magic carpet. It's just a rug—no mouth or eyes—but it has personality nonetheless. Just push your creativity to find ways to give your object its own internal life.

A good way to get started is to draw sketches of your character in different moods so that as you animate, you have a visual reference from which to work (see Figure 11.3). In the animation industry, studios will often get a reference actor to pose for the artists so that they can observe actual moods and reactions. It's the nuances that help give their characters more life. This technique was used in creating the animated feature Shrek. The artists clearly picked up on some of the actors' movements and expressions as they recorded their lines, and they incorporated those traits directly into the actors' animated alter egos.

Figure 11.3 By sketching your character in different moods, you have a reference from which to work during the process of animation.

Walking and Other Motion Cycles

You can give your character the appearance of self-mobility and save yourself a lot of work by animating it in a cyclical fashion. You can make your character hop, jump, crawl, swim, run, waddle, or fly at will. All you do is combine keen observation with a little bit (or a lot) of creativity.

One of the first things you have to do is to figure out "how" your character gets around. If your character has no feet, it can't walk or run. If your character has fins, your audience is going to expect it to be able to swim.

How does your character move? Are its movements slow and methodical, or jumpy and frenetic? Does your character have a limp or a particular style of walking? Just as you need to be sensitive to your character's environment, you must be sensitive to your character's physical state.

Many types of movement are cyclical. Take walking as an example. You can capture the full range of motion needed for walking in relatively few frames. When you have the basic sequence, you can loop or reuse it to give the illusion of continuous motion.

Looping Animations

As you've probably figured out, looping your animation is a common technique. You create a loop by having your beginning frame match up with your end frame; the movement between depicts an action. When played back to back, the looping animation gives the appearance of continuous motion.

Looping is used in many aspects of animation, whether it's constantly moving the background in one direction or having your character running. These actions are repeated until your character is ready to do something else. In Flash, it's relatively simple to make loops within loops by using embedded movie clips. Although creating detailed vector art for each frame is possible, using loops is a great way to cut down on file size and production time.

Loops are commonly used to create the illusion of walking and running. Now's the time to get out of your chair and walk down the hall. You are going to be your own model. Really pay attention to how your legs are moving.

Start from a standing position, and step forward with your right foot. Your leading leg should be only slightly bent, with your foot flat on the ground. Your trailing leg will have more of a bend, with only your toes resting on the ground.

Continue your step. Your left foot should lift off the ground, the bend in your left leg should become more pronounced, and your left leg should move forward.

Continue monitoring the sequence of your steps. If you break the pattern into five steps, it would look something like Figure 11.4 (assuming that you were a grape with legs, of course).

Figure 11.4 The walking grape demonstrates how you can capture the walking motion in relatively few frames. Put this sequence in a loop, and he'll walk forever!

You can practice breaking an animation into loops in the next exercise.

Exercise 11.2 Looping Your Animations

This animation has already been created for you; your job is to figure out which segments could be effectively converted into symbols so that you can combine and reuse them to your advantage.

1. Open walker.fla in the Examples/Chapter11 folder on the CD.

2. Scrub through the animation several times to see your little walking grape stand up, do a flip, and walk.

Your next step is to isolate those individual motions into reusable movie clips.

3. Go to the first frame of the standing-up sequence. If you advance through the animation one frame at a time, you'll see the following sequence:

Frame 1: The little guy is just sitting there.
Frame 2: His feet, such as they are, appear.
Frame 3: He's in a crouch.
Frame 4: He's fully upright and ready to go.
Frame 5: This is a repeat of frame 4.
Frame 6: He begins his flip.

4. It looks like frames 1–4 can be converted into a functional standing sequence. Highlight frames 1–5 in both layers, right- or Command–click one of the highlighted frames, and then choose Copy Frames.

5. Create a new movie clip symbol (use Insert, New Symbol, or Ctrl+F8/Command+F8) and name it standUp_mc.

6. Right- or Control-click frame 1 and choose Paste Frames. If you were working in Flash 5 right now, you'd have two unnamed layers, but Flash MX remembers your layer names! No more tedious renaming of layers every time you cut and paste.

7. Add a new layer to the top of the stack, and name it actions. Insert a keyframe in the last frame of your movie clip, and use the Actions panel to give it a stop() action.

8. Now it's time to move to the next logical step: the flip. Return to the main Timeline and scrub through the animation again by dragging the playhead across it. Begin with frame 6 (you already know that this is where the flip starts).

Frame 6: He begins to crouch to get leverage for the flip.
Frame 7: He crouches a little lower; he's going for the gold.
Frame 8: He begins the release into the flip.
Frame 9: He's got some good stretch now.
Frame 10: His feet come off the ground.
Frame 11: He's completely upside down.
Frame 12: The flip is almost complete.
Frame 13: He lands safely, absorbing the impact in his feet. It's a perfect 10.

Here's where it starts to get interesting. In fact, here is where you might want to rethink the first movie clip you set up. What is the logical breaking point here? Is it when the flip is nearly complete? Or is it when his feet are back on the ground?

In terms of reuse, it probably makes more sense for the flip sequence to end just before the character makes contact with the ground because, after he is in contact with the ground, the stand-up sequence begins again. If that's the case, the first frame in the standup_mc sequence should be removed from the movie clip. Then frames 6–12 should be used for the flipping sequence. Try this approach.

9. Double-click the standup_mc movie clip to open it in Symbol-Editing mode. Insert a keyframe in frame 2 of the Shadow layer so that you don't lose your first shadow. Highlight frame 1 in all three layers, right- or Control-click, and choose Remove Frames.

10. Back on the main Timeline, highlight and copy frames 6–12 in both layers. Create a new movie clip called flip_mc, and paste these frames into it. Don't highlight these frames and choose convert to symbol. If you do, you'll just get the last frames of the sequence. You need to physically paste them into an empty movie clip.

11. Add an actions layer to the top of the Stack, and put a stop() action in the last keyframe.

The next unique set of movements comes as the grape actually begins to walk (you already have the standup_mc sequence taken care of). Frame 15 ends the standing-up sequence, and, in frame 16, the grape turns and begins to walk. Frames 16–23 comprise the complete walking sequence.

12. Copy frames 16–23, create a new movie clip named walk_mc, and paste these frames into the new movie clip. Add an actions layer, and add a stop() action to the last frame.

Now you have all the pieces of your animation. How do you reassemble them? Well, you can add the appropriate symbol to the Timeline wherever you want it to play. Just remember to leave enough frames before the next movie clip so that it can play all the way through. You could alternately allow your user to control the movement with button clicks, using on (release) events to go to named frames. It's really up to you and depends on what you want to accomplish. In most cases, you'll want to control the animation of your character.

Now that you've got things moving, it's time to give your character a voice.

Speaking Vowels and Consonants

Getting your character to speak isn't really as hard as it might first appear. You just have to look at it from a simplified point of view. Many of the letters of the alphabet can be broken into phonetic groups. Your mouth opens and closes differently when pronouncing different letters. For example, the letters A, O, and T are pronounced differently and require different mouth positions, but the letters A, H, and I have similar pronunciations and only minor differences in mouth positions.

So, how does all this help you get your characters to speak? Well, first of all, it means that you don't have to animate the mouth for every letter of the alphabet! You can group the similarly pronounced letters into one drawing.

One possible breakdown of letter groupings looks like this:

• A, H, I

• B, M, N, F, T, J, K, P, V, W

• C, D, E, G, X

• L, R, S, W, Z

• O, Q, U, Y

Of course, you could break this out even further, depending on your animation needs. However, for now, instead of having to deal with 26 different mouth shapes (we're talking about the English alphabet here—your mileage may vary), you've boiled it down to 5.

These groupings of letters can be modified to fit the way your character speaks. When you have the drawings of your character grouped for each different vowel sound, you can convert each drawing into a symbol. Now all you have to do is synchronize your new mouth symbols to a voice-over (V.O.).

Synchronizing Drawings to a Voice-Over

You now have your letter patterns arranged in separate groups. Next, you need to import your V.O. and set it in a frame with its own layer. When you have done that, you can begin to piece together your talking sequence.

Figure 11.5 shows a monster named Bob the Blob. Bob has no feet and no arms. Basically, Bob's just a blob with a big mouth and a tendency to get into trouble.

Figure 11.5 Bob the Blob does the alphabet.

To see Bob in action, open BobTheBlob.swf from the Examples/Chapter11 folder on the CD. Press the Birthday button. In this V.O., Bob wants a cupcake because it's his birthday. I'm warning you—he's going to beg. Now would you give an ugly, green, big-mouthed blob of a monster your cupcake? I don't think so! Well, not if you like cupcakes, anyway.

Bob's voice was captured using CoolEdit Pro and then was altered to a lower pitch with a lot of bass. He's got a big mouth. He needs a big voice. It's important to make the voice "fit" the character. Imagine Fred Flintstone's voice swapped with Elmer Fudd's voice—that wouldn't sound right at all, would it? That's why animation studios take their voice talent for each character very seriously. In the next exercise, you get your chance to synchronize Bob to a V.O.

Exercise 11.3 Synchronizing to a V.O.

In this exercise, you use what you know to synchronize sounds to mouth shapes.

1. Open BobPhonetics.fla from the Examples/Chapter11 folder on the CD.

This is our old friend, Bob the Blob. Bob has already been given the basic vowel and consonant groupings; your job is to use those frames, as needed, to create a convincing animation of Bob talking. Make no mistake—it is a tedious and time-consuming project. However, when you learn how to do this well, you can make your animations much more convincing.

2. The phrase to which you're going to be synchronizing is this:

   My name is Bob. Bob the Blob. B-O-B B-L-O-B.

3. The first thing you need to do is put your headphones on. Otherwise, your officemates will hate you. Even if you work alone, you'll find it easier to concentrate and hear the sounds with your headphones on.

4. Next, set the V.O. track BobVO.wav to Stream. Why? You then can scrub through the sound using the playhead. It'll sound awful, but it'll make synchronization much easier. Select the first frame of the AUDIO V.O. layer, and open the Properties Inspector.

5. Set the Synch for the sound to Stream, and leave all else as is.

6. Add a new layer named Animation, and extend the frames so that the Animation layer has the same number of frames as the AUDIO V.O. layer. (Highlight frame 116 and press F5.)

7. Now you're ready. You already know what the first word is—My. That's going to require the phonetic grouping with the consonant M and the grouping with the vowel I.

8. Because the M sound is a closed-mouth sound, copy and paste the frame from the TALK BMNFTJKP layer into frame 1 of the Animation layer. You don't need to unlock or unhide the TALK BMNFTJKP layer to do this, and keeping the existing layers hidden and locked makes your file easier to work with.

9. Scrub slowly through the Timeline, and determine where you think the I sound should start. When in doubt about placement, place the visual for the sound a frame earlier than you think it should go. Anticipation is half the game. Frame 3 seems like a pretty logical spot.

10. The next sound you'll hear is the N in name. Scrub through the Timeline again and listen carefully—it's a soft sound. For the N sound, you'll use the frame that you used for the M sound. I picked frame 5, but it's up to you.

TIP

It's important that you actually test your synchronization in a browser by pressing F12. If you don't, you might find that your carefully synchronized piece isn't really synchronized at all.

11. By now, you should be starting to get the picture. It's listen, pick a sound, find the frame—over and over again. Go ahead and complete the rest of the phrase for this exercise. When you're done, check it against BobPhonetic_final.fla in the Examples/Chapter11 folder on the CD.

12. When you've finished, test your file and make sure you're happy with it. Frequently, when you stream a sound, particularly music, you'll hear a loss of quality. In this case, with this sound, it's not too bad. If you encounter a case in which streaming has a significant negative impact on your sound, set the sound to Event and use a small sound, muted and streamed, to lock in the file synchronization. This technique is covered in more detail in Chapter 5, "Using Sound in Flash."

Expressions

Simple changes to your character's facial expressions can convey enormous amounts of information about your character's general state of being. The way your character reacts to situations and the range of emotions that it displays give your viewers valuable clues about what is happening in your movie.

The Double-Take

The double-take is a technique used in comedy (see Figure 11.6). A person observes something extremely unusual or bizarre, but it takes a few seconds for it to register in his or her mind, so he or she has a delayed reaction. If you watch a lot of early sitcoms from the 1950s and 1960s, you will notice this technique. The Three Stooges were famous not only for their double-takes, but also for anticipating the gag sequences.

Figure 11.6 Bob the Blob does a double-take.

Anticipating the Gag

This is kind of like basketball, but instead of positioning yourself for the lay-up, you are setting up your audience to anticipate that something funny is about to happen. For example, anticipating the gag sequence might go something like this:

• Shot 1: The first person is hiding behind a corner and holding a moon-pie.

• Shot 2: The second person is running down a hall.

• Shot 3: You show the first person lifting the pie and taking aim.

• Shot 4: The second person turns the corner and is hit in the face with the moon-pie.

The audience laughs—not because they weren't expecting the action to happen, but because they were given the suggestion that something funny was going to happen. Timing does play a part in how well the anticipated gag plays out.

You'll also have to deal with how your character displays emotion.

Emotions

Every character needs emotions. Even showing no emotion is an emotion. Emotions define a character. As an example, think about Oscar the Grouch from the show many of you watched when you were kids—Sesame Street. (You can stop humming now—we all know it by heart!)

In the show, Oscar is a "grouch"—hence his name—and this defines his personality and who he is as a character. Your character doesn't have to always display one emotion all the time, but how his personality is defined can make a difference in how he reacts to the environment surrounding him. You could say that how you handle situations defines you as an individual. Everyone reacts in a different way to the surrounding environment and your character should do the same.

Just as actors do research on the characters that they perform in plays and movies, animation studios do research on the subjects that they animate. In fact, Disney is well known for sending its animators to distant locales to observe the actual subjects and environments that they are animating. Some argue that that's going to the extreme to capture the realism in animation, but you can't deny that this devotion to keen observation and efforts to capture all the nuances of their subjects makes for some terrific animation. It's this dedication to the smallest details that makes these films "classics" and that sets the bar for all movies to follow.

So how can you give your characters emotions? Start by looking in the mirror. What happens to your face when you're happy or angry or sad? Your expression changes. Your overall body language probably changes as well. Figure 11.7 shows Bob the Blob in a variety of emotional states.

Figure 11.7 With only minor changes to the body and facial expressions, Bob the Blob can display a wide variety of emotions.

Exercise 11.4 Giving Your Character Emotions

In this exercise, see if you can give Bob more emotions.

1. Open simpleBob.fla from the Examples/Chapter11 folder on the CD.

This version of Bob the Blob has been somewhat simplified to make him easier to work with.

You have a happy Bob. Why not make Bob just slightly unhappy—you can significantly alter his appearance and mood by making a few simple changes to his eyes. You already saw the changes that took place in angry Bob in Figure 11.7. His eyes lowered, and he gained a pair of angry eyebrows. His cheeks deflated, and his happy smile disappeared.

By just lowering his eyes and adding in some eyebrows, you can make Bob look like he's just itching to get into trouble. In addition, it makes a good transition frame between happy Bob and angry Bob.

2. Insert a keyframe in the Bob layer and in the Eyes layers at frame 3. Lock the Bob layer.

3. Select both eyes by dragging a marquee around them. Use the arrow keys on the keyboard to lower the eyes until they protrude just slightly above the top of Bob's head.

4. Use the Paint Brush tool with a small brush setting and the black fill color to add a pair of slanted eyebrows (see Figure 11.8).

Bob isn't looking so happy anymore. Would you trust a face like that?

Figure 11.8 Making minor alterations to the eyes of happy Bob leaves us with a not-so-happy Bob.

5. Insert keyframes in both layers at frame 6, and take Bob one step further. When you're pouting, you usually drop your lower lip—why not try that with Bob? Unlock the Bob layer, select Bob's teeth and lips, and move them down closer to his chin. You'll probably need to hold the Shift key down to select all the parts of his lips. Using the Eyedropper tool, sample Bob's green color and fill in the holes in his face where his teeth used to be!

6. He's no longer smiling, so you might as well go ahead and reshape his cheeks as well—flatten them out a bit. Use the Arrow tool to reshape the lines.

7. Save and test your movie.

The very minor alterations that you made to your character significantly changed his demeanor. You could give Bob a bit of a saucy look by alternating between the happy Bob and the not-quite-happy Bob. I'm pretty sure that I've met a guy like Bob in a bar at some point in my life.

When you're done playing with alterations to Bob, go ahead and launch the BobAnime.html file from the Examples/Chapter11 folder on the CD. Click the different buttons and put Bob through his paces. You'll see that, for a mere blob, Bob has quite a bit of character. The source file, BobAnime.fla, is also available on the CD for you to pick apart.

Every character needs a background to operate against. Because you're dealing with animation, you'll be working with an animated background.