Flash Tweening

You can use Flash tweening to help your cartooning. Now that you've created some symbols, such as the walk cycle, here's where you can save a great deal of time making them slink and prance across the view without drawing every tedious frame. The hard manual drawing work is done; now you'll choreograph the character. Once you've built a library of various walks, runs, turnarounds, and standstills (a piece of walk cycle that ends with the character just standing still), you can use computer power to help you tell a story. Remember that you can always create more symbols of the character as needed — you can even steal from other symbols to create new ones.

Panning

Use the techniques we discussed earlier in this chapter to get your walking symbol looping, stationary in the middle of the view. Then move the background elements to give the illusion of the camera following alongside the walking character, a sort of dolly. We describe the trick for creating extra long pans later in this chapter. It usually requires a little experimentation to get the motion of the background to match the stride of the step. If the timing isn't correct, you'll notice that the feet will seem to skate across the ground. To fix this, adjust the speed of the background by either increasing or decreasing the number of frames in the tween of the background. Another trick is to set the walking symbol to start at one end of the view and to move to the other by tweening the symbol itself. What's really cool is to use a mixture of both. Again, to get it just right, experiment.

Instance Swapping

There comes a time when the star of your show must stop walking (or running, or whatever he's doing) and reach into his pocket to pull out a hot rod car and make his getaway. This is where instance swapping comes in. At the end of the tween, create a keyframe on the next frame (the frame immediately following the last keyframe in the tween), and then turn off Motion tweening for that keyframe in the Property inspector. This causes the symbol to stop at whichever frame the cycle ended on in the Timeline. To swap the symbol, follow these steps:

1. Click the symbol to select it on the Stage.

2. Open the Property inspector.

3. Click the Swap Symbol button.

4. In the Swap Symbol dialog box, select the symbol that you want to replace it with (in this case, the one where he reaches into his pocket).

5. Click OK.

If you loop the play of the symbol, you can also choose the frame on which the symbol's cycle will start. Other choices are limiting the symbol to play once and playing just a single frame (still).

Caution 

When you swap a symbol instance on a Motion tween, if the Synchronize box is checked, the old symbol instance will not be replaced with the new one, which is Swap Symbol failure. If you turn off tweening on the frame where you swap the symbol, synchronization is not an issue.

Finally, unless you've drawn all your symbols to perfect scale with each other, this new symbol may not fit exactly. No problem! To fix this, simply enable Onion skinning from the Main Timeline, and set it to show the previous frame (the frame the tween ended on). Now you can align and scale the new symbol to match the ghosted image. We can't begin to tell you how much you'll use this simple instance-swapping function when you create your cartoon. This is one of the unique functions that sets Flash apart from all other cel-type animation programs. After you have a modest library of predrawn actions, the possibilities for combining them are endless.

Motion Guides

Although not terribly useful for tweening a walking character, the Flash Motion Guide feature is tops for moving inanimate objects. If your character needs to throw a brick, a straight tween between points and some blur lines will do fine. If he needs to lob that brick over a fence to clang a pesky neighbor, then motion guides are the ticket. Here's how:

1. Turn the brick into a Graphic symbol if you haven't already. This makes it easier to make changes to the brick later.

2. Create a Motion Guide layer.

3. Draw an arc from start to destination. This is best done by drawing a line with the Line tool and then retouching it with the Selection tool until you have bent it into the desired arc. This method keeps the motion smooth. (Using the Pencil tool to draw the Motion guide would create too many points and can cause stuttering in the motion.)

Although your brick is flying smoothly, something's wrong. Again, the computer made things too darned smooth. You could insert a few keyframes in the tween and rotate slightly here and there to give it some wobble. But that's still not convincing. You want this brick to mean business! Here's what to do: Because the brick is already a symbol, go back to the brick symbol and edit it, adding a few more frames. Don't add more than three or four frames; doing so will slow it down. At each of these new frames, mess up the brick a little here and there; differ the perspectives a little from one frame to another. Then, when you go back to your main Timeline, the brick should be twitching with vengeance as it sails toward its target.

Lip-Syncing

Now here's the part we've all been waiting for … a word from our character. If you do it properly, lip-syncing is where a character can really spring to life. You accomplish this by drawing the various mouth positions that are formed for individual phonemes, which are the basic units of sound that make up a spoken word. Then these phonemes are melded together into morphemes, which are distinct units of a word, like a syllable. Morphemes are then strung together over the course of a sentence to present the illusion of a talking, animated character. Most languages, although populated with thousands of words, are really made up from around 30 to 60 distinct sounds, or phonemes. For cartooning, these phonemes can be reduced to about 10 basic mouth positions. Some of these positions can be repeated for more than one sound because many sounds share roughly the same mouth positions. Although there are more subtleties in the real world, for cartoons, reliance upon transitions between mouth positions is convincing enough.

Earlier, we suggested that the face in an action (walk) cycle should be drawn without a mouth. That's because this method facilitates the use of layers (in the Timeline) for the addition of lipsyncing. To do this, create a layer above the character so that you can freely draw in the mouth positions needed to add lip-syncing. It's also very helpful to put the voice track on another separate layer directly above the Mouth layer. This makes it easy to see the waveform of the sound while you draw, giving important clues to where and when the sound occurs visually.

Since version 4, Flash has had the capability to scrub the Timeline, which means that you can drag the Playhead, or current frame indicator, and hear the sound as you drag. This functionality is limited to streaming sounds, which means that the sounds have their Sync option in the Property inspector set to Streaming. The capability to hear the sound and see the animation in real time is an important tool for lip-syncing. This real-time feedback is critical for getting the timing just right. There's nothing worse than being plagued with OGMS (Old Godzilla Movie Syndrome), in which the mouth doesn't match the sounds coming from it.

Shape Morphing is Not for Lip-Syncing

You may be asking, "What about using shape morphing to save time in lip-syncing?" Well, shape morphing is a wonderful tool, but for lip-syncing, it's more hassle than it's worth. Your mouth drawings will become very complicated because they consist of lips, tongue, teeth, and facial features. Furthermore, because shape morphing only seems to work predictably on the simplest of shapes out of the box, shape hinting is required. Thus, by the time you've set all hinting (and even hinting heavily still leaves you with a mess at times), you might have had an easier time and obtained a better result (with greater control) if you had drawn it by hand.

Expression and Lip-Syncing

In terms of control and expression, it's important to remember to use the full range of expression when drawing the talking mouths. Happy, sad, or confused — these give life to your character. Furthermore, always emphasize mouth movements on those syllables that correspond with spikes of emotion in the voice track. These sections usually have a spike in the waveform that's easily recognized in the voice track. This device helps to convince the viewer that proper sync is happening.

Lip-Sync Tricks

There are a few more tricks to help ease the load. When characters talk, they do not always have to be looking you square in the face. Try lip-syncing the first few words to establish that the character is speaking, and then obscure the character's mouth in some natural way. (Refer to Figure 14-13.) The head and body of a character can move with the words being said, but the mouth can be hidden by changing the angle of the head, or with a prop such as a microphone, or even with a moustache — think about this when designing your character's features. A bit of design savvy can save time without detracting from a character's purpose in the story line.

Figure 14-13: Lip-syncing tricks include economy of effort, such as having a character begin to speak and then turn away naturally (left). Appropriate props and even moustaches can also be used to hide mouths (right).

Many animators use a mirror placed nearby and mouth (act out) the words they're trying to draw. This is extremely helpful when learning to do lip-sync. It is also of great help in mastering facial expressions. Just try not to get too wrapped up in drawing every nuance you see. Sometimes less is more. Another trick that you can use to ease the load is to reuse lip-sync. Do this by copying frames from previous stretches of mouth movements to new locations where the words are the same, and then tweak the copied parts to fit the new dialogue. Still, there is no magic lip-sync button. Even with all these tricks, effective lip-syncing is hard work. It's also one of the more tedious tasks in animation and takes practice to get it right.

Syncing with Music and Sound Effects

Because our brain works to create connections between sound and visual input, it is relatively easy to make movement in your animation match up with audio elements in your soundtrack. If you've already succeeded with lip-syncing work, then this type of syncing is easy. All that's required is a bit of instance swapping set to the beat of the music. If you study your music waveform for visual clues and then scrub it for the sound, you're sure to find the exact section where the change in action (instance swap) needs to go. You don't have to make your sync tight to every note. To keep the shot engaging, sync to the highlights, or hard beats.

Adding sound effects is really the fun part. It's easy and highly effective. Either working from your storyboard, or as you're animating, you'll know where you want to insert a sound effect. For example, when the anvil hits the head, a CLANK is needed there. If the effect you need is on hand, great! Just make sure it has the necessary duration, and then plug it in at the frame where it should start. For broadcast animation, you'll set the sound sync to Streaming for the soundtrack exclusively. In addition to using separate layers for each voice track, it's wise to confine your sound effects to a layer or two. This leads to less confusion; yet using two layers enables more than one sound effect to occur at a time.

On the CD-ROM 

For the following Expert Tutorial, we've supplied a short track for your use, lip_track.wav or lip_track.aif, which you'll find in the B_Turner subfolder inside the ch14 folder of the CD-ROM. These tracks include the major sounds used in the English language.

Lip-Syncing Cartoons, by Bill Turner

For animated characters to really come alive, you need to know how to do lip-sync. To get quality lip-sync effects, you either need to draw them yourself or hire someone else to do it for you. Although this tutorial can't possibly cover every circumstance known to human communication, it can get you started on the road to lip service. There are some prequalifications: First, you must be able to draw in Flash, which usually means drawing with a tablet, preferably a pressure-sensitive graphics tablet (such as a Wacom tablet); and second, you need to have a recorded voice track on its own layer in Flash.

Because lip-sync can't be described in a simple a, b, c routine tutorial, you'll be required to improvise — in your style of drawing. I can't tell you how to do that. Style comes from years of practice and experimentation. But if you do know how to draw and you do have a style, then the intention here is to provide a context in which you might discover the basic trick of lip-sync.

The major sounds, known as phonemes, are less numerous than you might think. It's how these sounds meld together to become words and sentences that add an aura of complexity. Although one might surmise, from the alphabet, that there are 26 sounds, there aren't nearly that many. That's because many letters have the same basic mouth shape, movement, and pronunciation. And because we're now in the land of cartoons, we can simplify even further — the really great cartoons are often the simple ones built of tireless simple reinterpretation.

In this tutorial, to keep it simple, you'll deal with the two dominant views of talking heads: profile and face forward. A face forward talking head is probably the easiest to animate in Flash because the mouth can be animated on a layer that's situated in the layer stack above a drawing of a mouthless head. A talking head in profile is more difficult because of the need to redraw the portion of the face that extends down from the nose, to and including the chin, for every frame. Of course, including nose-to-chin movements can also enhance the animation of a face forward talker, and doing so would make for a more expressive animation. But I want to move quickly here.

In Figure 14-14, you see a mouthless head (provided on the CD-ROM in the B_Turner folder for both demonstration and practice) in both of the basic orientations: face forward and profile.

Figure 14-14: A mouthless head in both of the basic orientations— face forward and profile with sound and animation layers for adding lip-sync

The spoken test line reads, "Zinkle Meyers is very talented on the bongo drums. Flip Flap beats his hands on the smooooth skins. Dig the rhythm. Excellent!" Creating lip-sync for this line requires a number of mouth positions. To demonstrate the concepts, the first sentence of this test line is supplied, already drawn to lip-sync. Your task is to draw the mouth positions for the remainder of the spoken text.

On the CD-ROM 

To help get you started, Bill Turner supplied a fully functional .fla file for you to work on, with the base character already drawn (lipsync.fla). You can find the file in the ch14/B_Turner folder on the CD-ROM.

The Sync option

If you were setting this file up from scratch, you'd want to start by placing the voice soundtrack on its own layer in the Timeline. You'd rename this layer with a meaningful name, such as "voice," and then, in the Property inspector, you'd set the Sync option to Stream.

Never use Event as the Sync option for any sound that must sync to the Flash Timeline. Otherwise, the timing of the voice will not be locked to the frame rate, meaning that the mouth drawings may not appear simultaneously with their appropriate sounds, thus losing sync.

Getting into sync

The best way to understand lip-sync is to have the sample file open. Note that there is a visible waveform (the little squiggly stuff) that shows where the peaks and valleys of the sound occur across the Timeline. Note, too, that the voice is brought in as a separate asset. It's on its own layer, separate from background sounds or music. It would be impossible to see the voice within the waveform if it was premixed with other sounds before bringing it into Flash. If you're producing a cartoon show, it's best to have each character recorded separately, particularly in cases in which they may talk over each other simultaneously. This separation gives you more control when animating. In fact, the entire animation is broken into layers for ease of editing. There's at least one layer for each major element. You might also note that the bongo soundtrack is set to event. This is useful while authoring because it mutes the track when scrubbing the Timeline to listen for timings in the voice track. If both were set to streaming, it would be more difficult to concentrate on the voice alone. (You must remember to reset this option to Stream when syncing is completed, or you could just delete that layer until after you are done animating the mouth.)

The phonemes

Now for the phonemes, there are several standard mouth positions for most of the major sounds, as shown in Figure 14-15. Although this is not a rigid rule, it does provide a good basis from which to expand into greater mastery of lip-sync. First, you'll note that the word Meyers begins on frame 12 of the animation. The mmmm sound is best represented with the bottom lip tucked slightly under the top lip. Try saying mmmm to see for yourself. In the word Meyers, this mmmm sound lasts two frames and is then followed by the long I sound. Notice that we didn't sync the word as it is spelled, e-y-e, because that's more complicated than it needs to be. The word Meyers is usually pronounced M-I-ER-Z, with the ER being just an ease-out (mouth holds shape but gets slightly smaller as phoneme trails off) of the long I sound. The word ends with the Z phoneme, which is simply drawn with the mouth slightly open, and the tongue at the top of the mouth.

Figure 14-15: You can combine a few basic phonemes to create lip-synced speech.

In the next section of speech, the "very talented" part is a fast-moving set of syllables, so every available frame is needed to represent it. Here, you'll notice that most of the movement occurs when the tongue engages the roof of the mouth for both the T and L phoneme. Now, because the T and L are nearly the same mouth position, you can use the luxury of duplicating frames. Similarly, the V sound requires the same basic mouth formation as the M sound, so you could copy this one as well from the Meyers word. Although the B sound, in bongos, uses nearly the same mouth as M and V, we don't copy that one. Here, we draw a new mouth to add a bit of chaos because we don't want the mouth to look like a machine. The logic behind deciding which part to copy and which part to make new drawings for is a large part of the art of lip-sync. In short, it's all about balancing how much new artwork you really want to do, while avoiding obvious repetition.

Now that I've given you an insight into how this is done, I've left the rest of the phrase for you to complete. To accomplish this, you'll probably want to reuse many of the supplied mouth positions to sync the remaining voice. Remember that timing is the most crucial part. You can determine where a new mouth position is needed, or where the mouth needs work, by slowly scrubbing the Timeline. Then, if you need new mouths, simply draw them in. I highly recommend doing this drawing yourself because this practice will start you on your way to becoming a master of lip-sync.