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 rugno mouth or eyesbut 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 to work from. 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 little nuances that help give their character 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.

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 cyclic. 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 it (reuse again) to give the illusion of continuous motion.

Note

These "rules" about how you approach animation aren't set in stone, and you wouldn't want them to be. Consider them as more of a guide. It can actually be quite funny and entertaining to have your character do something completely "out of character." But you can't get there until you have a solid understanding of how your character should behave. Tex Avery was world-renowned for his ability to put his characters in surreal situations. Another great animator from the golden age was Chuck Jones, who was well known for his ability to give his characters a wide range of expressions. Both are credited with creating Warner Brothers's most popular characters , such as Bugs Bunny, Daffy Duck, Elmer Fudd, Road Runner, and Wily E. Coyote.

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, and the movement in 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 even 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.

Two of the most obvious sequences for creating as loops are walking and running. Now, get up 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 step. If you break down the pattern into eight steps, it would look something like Figure 10.3 ( assuming that you were a grape with legs).

Figure 10.3. 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 up an animation into loops in the next exercise.

Exercise 10.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 Chapter_10/Assets folder on the CD.

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

   What you want to do is 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 at 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. So, it looks like frames 14 can be converted into a functional standing sequence. Highlight frames 14 in both layers , right- or Control-click one of the highlighted frames, and choose Copy Frames.

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

6. Right- or Control-click frame 1 and choose Paste Frames.

7. If you really want to mimic the behavior of the original animation, you can insert an additional frame (not keyframe) in both layers at frame 5.

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

9. Okay, time to move to the next logical step: the flip. Scrub through the animation again, beginning with frame 6 (you already know that this is where the flip starts).

   Frame 6: He begins to crouch down 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.

   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 break-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, once he is in contact with the ground, the StandUp sequence begins again. If that's the case, then the very first frame in the StandUp sequence should be removed from that movie clip, and frames 612 should be used for the flipping sequence. Try that approach.

10. Double-click the StandUp 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.

11. Back on the main timeline, highlight and copy frames 612 in both layers. Create a new movie clip called Flip, and paste these frames into it.

12. 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 sequence taken care of). Frame 15 ends the StandUp sequence, and, in frame 16, the grape turns and begins to walk. Frames 1623 compose the complete walking sequence.

13. As you did in previous steps, copy frames 1623, insert a new movie clip named Walk, 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? You can take a couple of approaches. 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 down 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 that 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 together into one drawing. One possible breakdown of letter groupings could look 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. But now, instead of having to deal with 26 different mouth shapes (English alphabet your mileage may vary), you've boiled it down to 5.

Now these groupings of letters can be modified to fit the way your character speaks. When you have your 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 synch your new mouth symbols to a voice-over.

Synching Drawings to a Voice-Over

Okay, so now you have your letter patterns arranged in separate groups. Next what you need to do is import your V.O. (voice-over) 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 10.4 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 10.4. Bob the Blob does the alphabet.

To see Bob in action, open the BobAnime.html in the Chapter_10/Assets folder on the CD. Press the Birthday button. With this voice over, Bob wants a cupcake because it's his birthday. I'm warning youhe'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 voice 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 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'll get your chance to synch up Bob to a voice-over.

Tip

I almost always create my sound and voice-over before I begin to draw the mouth stages. It can be done the other way around, although some argue that it's much more difficult to do.

Exercise 10.3 Synching to a Voice-Over

You can use what you know about synching sound to mouth shapes in this exercise.

1. Open BobPhonetics.fla in the Chapter_10/Assets 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. There's no doubt about thisit is a tedious and time-consuming project. But when you learn how to do this well, how to anticipate, you can make your animations much more convincing.

2. The phrase you're going to be synching to is:

   "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 office-mates 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 voice-over track BobVO.wav to Stream. Why? Because then you can scrub through the sound using the playhead. It'll sound awful , but it'll make synchronization much easier. Select the AUDIO V.O. layer, and launch the Sound panel (Window > Panels > Sound).

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 both the phonetic grouping with the consonant M and the grouping with the vowel I.

8. Because the M sound is a closed-mouth sound, go ahead and copy and paste the frame from the TALK BMNFTJKP layer into frame 1 of the Animation layer.

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 might 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. You'll copy the same frame that you used for the M sound for the N 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 may 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 frameover 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 Chapter_10/Assets 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 13, "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 . A person observes something extremely unusual or bizarre, but it takes a few seconds for it to register in his mind, so he has a delayed reaction. (see Figure 10.5.) If you watch closely to 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 10.5. 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 holding a moon-pie.

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

• Shot 3: The first person lifts the pie and takes aim.

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

The audience laughsnot because they weren't expecting it 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 will help convey the personality of your character. They help define a character. As an example, think about Oscar the Grouch from the show many of you watched when you were kids , Sesame Street (okay, you can stop humming nowyou all know it by heart!). Oscar is a "grouch"hence his nameand 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 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, too. Figure 10.6 shows Bob the Blob in a variety of emotional states.

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

Exercise 10.4 Giving Your Character Emotions

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

1. Open simpleBob.fla from the Chapter_10/Assets 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 couple of simple changes to his eyes. You already saw the changes that took place in Angry Bob in Figure 10.6. 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. And it makes a good transition frame between happy Bob and angry Bob.

2. Insert a keyframe in both the Bob and 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 just protrude slightly above the top of Bob's head.

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

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

   

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

5. Insert keyframes in both layers at frame 6, and take Bob one step further. When you're pouting, you usually drop your lower lipwhy not try that with Bob? Unlock the Bob layer, select Bob's teeth and lips, and move them down closer to his chin.

6. He's no longer smiling, so you might as well go ahead and reshape his cheeks as wellflatten 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 back and forth between the Happy Bob and not-quite-happy Bob. I'm pretty sure I've met a guy like that in a bar before.

When you're done playing with alterations to Bob, go ahead and launch the BobAnime.html file from the Chapter_10/Assets folder on the CD. Press 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, as often as not, you'll be working with an animated background.