Introduction: How to Do Simple Lip-Syncing in Adobe Flash CS5

Picture of How to Do Simple Lip-Syncing in Adobe Flash CS5

Lip-syncing. It sucks. A lot. And if you are reading this, you probably believe so as well. Well fear not my equally frustrated friend, for I am here to save the day. In this tutorial I will show you how to make the basic shapes a mouth makes during speech, turn them into graphics and then create a guideline to place them in. And since this process is so quick and simple, I'll even show you a few tricks along the way to make your animation a bit better. Prepare to be swept under my wing, young grasshopper, for we are to venture on a journey. A journey of LEARNING and all that jazz.

Step 1: Developing the Mouth Shapes

Picture of Developing the Mouth Shapes

First of all, we need to draw the mouths for the animation. Draw them above the stage. Also, as a little trick, draw the mouths with the characters personality in mind. If they're lazy, perhaps make the mouths small to make them appear to be mumbling. Or maybe they're very energetic all the time and wider, more open mouths would be better suited. Take mood in to consideration too (ex. mouths slanted down for sad). Also, when choosing the mouth shapes, remember that people don't all talk the same and that for some sounds one person will make a different mouth shape than others. So, really there is almost no right or wrong way to draw these mouths. I will, however, include a chart for reference based on the way I personally speak. After you have drawn the mouths, I would label them. This will help you after you convert them later on.

Step 2: Converting the Mouth Shapes Into Graphics

Picture of Converting the Mouth Shapes Into Graphics

This part is where it gets a lot simpler. Having all of your mouths drawn and ready to go means its all smooth sailing from here on out. Firstly, highlight each mouth individually and right click it. Then look for the button that reads 'convert to symbol' and click on it. You can name the mouths anything you want, but I recommend labeling them with numbers as I have previously shown and then naming them that number. This simplifies the process of replacing the mouths as I will show you how to do later. Also, make sure the type of symbol is set to graphic, as this is the key to doing the from of lip-syncing that I will show you how to do. If you don't do this, then you won't be able to do what I will teach you in the next few steps.

Step 3: Importing the Sound

Picture of Importing the Sound

I highly recommend to import the sound into the program before you start to lip sync the characters mouths. This will allow you to hear the sound at the exact millisecond  it occurs in, which will be of much help, let me assure you.  This step is quite simple. Go to File>Import>Import to Library. To retrieve the file you just imported, go to Windows>Common Libraries>Sounds. Then, simply drag your sound files onto the stage and viola, you have imported the sound. The good thing about doing it this way is that the sound files are now stored there and if doing sound effects or such, you wont have to re-import them. You'll simply go to the sound library and drag them onto the stage again. 

Step 4: Placing and Replacing the Mouths

Picture of Placing and Replacing the Mouths

First things first, you take the first mouth you wish to have in your animation from the labelled graphics and drag it down to where you wish to place it on the face of your character. Easy enough, right? Next, locate spot on the timeline where the next sound occurs. Add a key-frame at this spot (press F6 or add manually).Then, choose which mouth you drew would best fit this sound and right click the mouth you dragged onto the face of your character. Then, choose the 'swap symbol' option. A small screen full of the different mouths you drew and converted will pop up. Simply choose the mouth you want from this list and hit OK. And presto! You've replaced your mouth. Also keep in mind that if the animation isn't smooth enough for you, just draw some in-between mouths and use more key-frames. Simple as that.  Do this for the rest of the sounds in your sound clip and you'll be done in no time!

Step 5: And There You Have It, Folks

And that's that. A very simple, quick easy way to do lip-syncing, that can also be used for many other things other than lip-syncing as well. Like sprite animation. I just taught you something super useful. You're welcome. 

Comments

amandaghassaei (author)2012-11-05

you explained this really well, how many frames were used in the video at the end?

Lettiee (author)amandaghassaei2012-11-06

Thank you very much! There was about 95 frames used to make the video at a 24 per second rate.