This tutorial is great for beginner flash animators. It covers how to know what sounds go with what mouth movements and how to animate the mouth movements to fit with an audio clip. I’ve seen many ways to create Lip-Syncing in flash but I feel this is the best way.
Preview Final Product
Click the play button below to view the final animation. You can download the .zip files here. Files include the final product, mouth guide, and instructions
Step 1
Open a new flash file. Save the file with the name LipSync.fla
Set the frames per second to 24. This will allow for smoother play back and it will let us pick out most for the syllables in the animation.
Step 2
Create your cartoon character and put it on a layer named character. I have created an animated Ron Burgundy from the movie Anchorman. I’m not going to go into detail on this because this tutorial focuses on lip-syncing. I’ve left the mouth off of my character for now.
Step 3
Open the file titled FF_MouthGuide.fla
This file shows the 10 different mouths I used in my animation.
Notice how certain mouths go with certain letters. This is not an exact science and with some practice you will learn what mouth works best and short cuts that trick the eye.
Step 4
Copy the Mouth Guide Symbol within FF_MouthGuide.fla, and paste into your LipSync.fla file and put it on a layer named guide. Move it to the side to use for reference. Or if you want you can create your own mouths. If you create your own be sure to turn each mouth into it’s own graphic symbol.
Step 5
Next import your audio to the library and then drag it to the stage on it’s own layer named audio. I search the Internet and found an audio clip from the Anchorman movie to go with my character. In the Property Panel for Sync type chose stream.
Step 6
Create a new graphic symbol and name it MouthAll. Once in the MouthAll symbol, go to the library and drag out each mouth on it’s own frame.
Example mouth-1 place on frame 1, and mouth-2 on frame 2, and so on…
Step 7
Now place the MouthAll symbol from the library on the main timeline on a layer named mouth, and line it up with the head so it looks normal.
Step 8
Here is where the fun begins. Click on the MouthAll graphic symbol and down in the properties panel make sure the symbol is set to, single frame, The number in the first box will determine which mouth will be shown.
Step 9
Move the play head until you hear sound. You can also see the waveform on the audio layer. Place a keyframe on the mouth layer. Down in the properties panel, in the first box choose the number of the frame that contains the mouth that goes with the sound being made. In my animation at frame 7 I place a key frame on the mouth layer. In the first box I chose frame number 5 for the G sound because my character is saying the word good. Next I chose frame 8, and place a key frame. Then chose frame 4 in the first box, for the O sound. Just keep repeating this and you’ll get the hang of it. It just takes a little practice and time. Publish Preview your file as you go along to see if the mouth looks right.
Step 10
View the FF_LipSync.fla file to view the final animation this will help you understand how the lip Syncing is achieved.
June 1st, 2008 at 1:24 am
wow! there’s not too many people in here!
Good luck with the site.
If you upload how to make a dynamic xml flash menu please tell me!
Saludos y buena suerte
Nico de Argentina.
June 3rd, 2008 at 3:22 am
Great what you do, but last week I tried to download the Dynamic Navigation Menu….. and it is gone!!! the tutorial and everything!!!
Hope you will bring it back soon…..
B.T.W. great thing what you do….
June 3rd, 2008 at 11:16 pm
We are making a lot of changes to the site and plan to put the old tutorials back up soon. Sorry for the inconvenience.
June 4th, 2008 at 1:53 am
Thanks a lot and ….. Please go on with flash tutorials. It seems there is never enough of those….
June 14th, 2008 at 9:34 pm
[...] June 15, 2008 at 1:34 am · Filed under Tutorials ·Tagged cartoon animation, Flash, flash animation, flash cartoon, lip sync This tutorial is great for beginner flash animators. It covers how to know what sounds go with what mouth movements and how to animate the mouth movements to fit with an audio clip. I’ve seen many ways to create Lip-Syncing in flash but I feel this is the best way. View The Tutorial Here» [...]
June 19th, 2008 at 6:11 am
I am a beginner at the really early stages of learning Flash animation. When the thought of learning how to do lip syncing came up, I was absolutely intimidated until I found this tutorial. First of all, there are not that many complete free tutorials on the subject and the few that are out there are confusing. Thanks so much for making this available.
June 19th, 2008 at 8:35 am
No problem Darien. I’m glad the tutorial helped you out.
June 22nd, 2008 at 7:44 pm
I am having a problem with a menu that i am creating- I looked and looked online to see if i could find help and came accross a tutorial from you- but, when i clicked on it, it wasn’t there- here is what it was called- dynamic navigation menu (In this tutorial I will show you how to create a dynamic flash navigation menu using Actionscript and xml. The xml file controls the number of buttons, the title, and the url. Once the flash file is created you can update the menu just by editing the XML)- wondering if you still have it and if you can show me it so I can maybe figure out my problem? Thanks so much.
By the way here is my problem, if you have any thoughts on it I would greatly appreciate it:
I am trying to do a vertical menu in flash with actionscripting and xml where when you press a button it will go to another page I am having trouble troubleshooting my own work- My other question is what can i do to have the type change to white when i roll over it? And, when I get to that page then how can I make it stay white on that particular button? couldn’t figure out how to do these either.
Needless to say, I am very frustrated. Your input would be greatly appreciated.
Thanks so very much,
abbee
June 23rd, 2008 at 12:33 am
Hey abbe sennett,
I have posted the tutorials you were looking for. You can find them at them using the links below.
http://www.flashframer.com/how-to-create-a-dynamic-xml-navigation-menu/
http://www.flashframer.com/create-a-flash-menu-using-only-actionscript/
If you still have questions feel free to post them and I’ll help you anyway I can.
Good Luck
June 25th, 2008 at 12:01 pm
[...] sounds go with what mouth movements to animating the mouth movements to fit with an audio clip. Lip-syncing is huge for successful Flash animations and the technique used within this tutorial is probably the [...]
July 12th, 2008 at 12:16 pm
[...] how to know what sounds go with what mouth movements and how to animate the mouth movements …http://www.flashframer.com/create-a-realistic-flash-animation-lip-sync/Animating an Old Geezer GAXWatch an old geezer go from concept to fully animated with lip syncing in [...]
July 23rd, 2008 at 5:39 am
I cant download the zip files are they still there?
July 23rd, 2008 at 8:33 am
The download link has been fixed. You can now download the source files again.
September 22nd, 2008 at 5:32 am
Awesome tutorial. Definitely the best free online one I have seen. Thanks so much!
November 13th, 2008 at 1:29 am
Hi “FlashFramer”,
Just wanted to say hi and see how everything is going for you. I just finished something I thought you’d appreciate. Take a look: http://www.getmcs.com/mcsPortfolio. I started out with the 3d photo stack and then did my own thing from there. This was for my husbands work. I just LOVE working with flash!!! I just wish I could be so much better at it- I guess it’s because I am more visually oriented. Actionscript does not come easy to me. I wish that you could come up with tutorial explaining how a visual person can understand actionscripting easier. Oh well, I will keep trying… be good. Keep up the good work you’re doing “FlashFramer”! Keep in touch.
January 5th, 2009 at 3:13 pm
yo man this shizit is awsome dude,, you aare god mang
January 22nd, 2009 at 11:43 am
Very nice effect.
March 31st, 2009 at 1:09 am
Just found this lip syncing tutorial… looks great, gona give it a try and getv back to you
March 31st, 2009 at 4:22 pm
thanks 4/5
November 24th, 2009 at 8:21 am
wow i love u!!
January 3rd, 2010 at 3:12 pm
Great tutorial! I’m glad I’m finally getting around to doing lip syncing, and it can be this simple!