Lip Sync Tutorial by AB / AvidLebon

My first experience with Lip Syncing in cartoon and animation is from watching a Disney production. I think the example was Snow White, where the cartoonist looked in the mirror to remember what his mouth looked like on each syllable of Dopey's lines.

Phonetic Examples Image by comet-cartoons

The technique is simpler once you can reference the chart or memorize the mouth positions on different syllables. However, a cartoonist still needs to keep in mind other features of the face as well as head and body motions that go along with each syllable. Additionally the results of these movements change with the context of the script. Notice how your eyes open when you make an "oh" sound from being surprised, where as "ooh" in disgust makes your eyebrows lower.

Unless your drawings are still comics rather than an animation, naturally tweening between the expressions becomes your next challenge. Part of this is covered in Thor's Keyframe Tutorial.

AvidLebon who animated all lipsyncing in her Rapture animation has provided a sample FLA file with instructions below on how to make great use of it if you are serious about animating like a professional.

Lipsynching Tutorial by AvidLebon

First have the soundboard open in one window, and a new document open in the other. (I'll call the new document "song" just for reference.)

If your character has a different skin color than mine, change the skin color (in the skin layer) in the soundboard to match your characters skin for all letters. It is much easier to do that now than after you've synched everything and have 100+ frames to change. (When you make your own soundboard, you CAN make it without skin, but the teeth will need somewhere to hide if you use them. Skin works best.)

In "song" make a slash on the stage with the paintbrush. Convert the slash to a graphic clip. Double click on the graphic clip. Now you are in the movie within the movie, thus the lips will have their own separate time line and when you need to move them with the head; lip synch timelines will not be an issue. It will all flow smooth.

In "Song" in the graphic clip make a new layer. Drag this layer to the bottom, below the slash. Open your music file you want to synch and put a keyframe at the end of the song. (So you can hear the song while you synch it.) Go to "lip Synch Board." In frame one go to the very top of all your layers. This should be called "Lip line". Click and hold on the keyframe on this layer and drag straight down all the way to "letter". Now all the layers in frame one (And ONLY frame one) are highlighted. Right click (somewhere in the middle of the highlighted area. Occasionally flash will go to just one frame when you right click which is a pain.) On the right clicked menu choose 'copy frames.'

Go back to Song (inside the graphic clip you created). Currently you should only have two layers; Music and the slash. Select layer one with the slash. Delete the slash. Select only frame one in the blank layer. Right click. Paste frames. Hit play (or enter) and listen to the song to where the vocals start, and where you want the lip synch to start. Insert a keyframe (On all layers except music) three or so frames before the first vocal sound. (Simply start at layer "lip line" and drag to layer "letter". Right click < insert frame. I made this a hot key because I use it a lot) This is so the lips aren't slowly tweening open through the song intro, which looks really really weird. Lets say you are synching to the song I used in the example Bob Ricci's "Whiney Slimy Creepy." He is going to say "I Have a dream....."

Go to the document "Sound board." Look for the "A+I" Mouth. (The letters underneath represent the sounds each mouth shape is associated with and makes that shape easier to find. I usually hit enter and play through the movie to find a sound until I memorized where they are.) This is the second key frame over. Starting at "lip line" highlight all the way down to "letter". You should have all frames up and down highlighted, but only one frame across. Right click>Copy frames. Go to the document "Song" Find the frame in the middle of the sound "I". This should be three or so frames after the keyframe you made earlier. Highlight from lip line to letter. (The first time you brought these layers over they should have named the layers in your song document.) Right click. Paste.

Next I find "E" on the lip synch board. Why?

The phrase is "I have a dream"

But sounds like "IEhavadreem"

Note the lips do not close between each word, only on long pauses and letters such as m + b. This is why it is VERY useful to keep a mirror with you.

About two frames after "I" on the "song" document I insert the I keyframes. Since you highlighted the same amount of frames as you copied, the flash will paste them respectively of the first movie.

Repeat.

You'll have a LOT of keyframes, but this is much easier than the traditional way of drawing each and every frame.

Once you have the song synched, which can take hours depending on the song (It gets faster once you memorize the sound board and get use to it) Delete the layers Head, music, and Letter. Then you have just the lips.

Make sure all layers are set to tween>shape. Double click on the stage away from the lips. Insert your song in the main document. The lips in the graphic will be synched. In the main movie they can be moved with the head using motion tween.

When you decide to make your own sound board you'll need to keep the tongue, lips, teeth etc on different layers for them to synch properly, so I do all my synching in a graphic clip. I usually start out by making the A+I mouth and modify the mouth line to create the other shapes I need, otherwise flash tends to do odd things when the layers are tweened. Do not use a movie clip or the lips do not synch right with your time line. There are other methods, but this is my preferred which leads to a very nice smooth look.

There are more advanced things you can do with this technique, such as changing the perspective of the tongue if the head moves. The same technique can be done with eyes and expressions as shown in my final example. There are limitless possibilities to be done with this technique of animating.