banner
 

Lip Synchronisation

This tutorial only briefly outlines the concept. Having steps/ instructions to create a lip sync would be impractical, however there is a video demonstration showing the steps necessary. To watch the video demonstration, click here.

Now, I'm going to show you a very short simple lip sync that works even though it is very basic. (This is not voiced by me, it's just some old recording a friend did for me back when I was working on a cartoon)

So you see, you don't need to think too hard about lip syncing. Just remember one keyword - syllables. For each syllable, open and close the mouth - that is the most basic principle. But we can take it even further if we take into account some other key mouth movements. Simple variations like having a different mouth movement when you hear the letter 'u', 'w' or 'o' can have a powerful effect in making your animation more dynamic.

As you can see, the mouth movement is a lot more believable. Let's finally take it one step further and add another variation in movement for all the 'r' and 's' words.

Now it's really coming together. To me, that looks like a very believable lip sync - believable enough to keep me watching. That's the basic concept - just opening and closing the mouth with one or two variations. Now we know what we're going to do, we now have to figure out how to do this efficiently in flash.

Simple Preparations:

I'll just introduce the whole layout of flash so that when I refer to a particular area, you'll know where it is. If you can't see any single component shown below, go to your standard menu and click "Window". Every toolbar is there, just click on the one you are missing. Click on the image to full view.

6

Use the brush tool in the tool box and draw a nice face to have your lip sync on. Make sure you draw on the stage.

1

It doesn't have to be as awesome as this, just any old drawing with a face will do. Just make sure you leave out the mouth - we'll be drawing that on another layer. But first, we'll change the frame rate so that our animation will look nice and smooth.

In your properties panel, change the frame rate from 12 fps (default) to 24 fps.

3

Now that everything is set, let me discuss how everything is going to work. Everything relating to the mouth movements is going to be inside a main graphicSymbol. Why graphic? Because graphic symbols allow you to show any frame inside it whenever. Let me elaborate.

Let's go back to the first example I showed you - the simple open mouth closed mouth. How that works is, I have a main graphic symbol with the two animations - open mouth and closed mouth inside it. These animations are both inside movieClip symbols. Here's a nice diagram explaining.

2

So as you can see, there are two movieclips (on different frames) each having either the closed mouth or the open mouth animation. These are both inside the main mouth graphic. Each time the person is talking, the main mouth graphic shows movieClip2, each time the person is silent, the main mouth graphic shows movieClip 1. MovieClip 1 is also shown in between syllables.

Still confused? Here's a look into sample 1, which should explain it better.

4

5

I hope that explained it better.

If you already have a good knowledge of how to use flash you should be able to animate a lip sync now with just the concepts.

Here's the voice sample used.

And if you did it correctly it should end up like this:

                                                                                                                                  
Copyright © 2010 Howe Tom. All rights reserved.