Intent

In this activity students are going to bring life into their character by using lip syncing techniques. They will learn about lip synchronisation animation and give their character a voice.

Mouth Shapes

Preston Blair's Mouth Shapes
p_blair_mouths.gif
Courtesy: http://minyos.its.rmit.edu.au/aim/a_notes/mouth_shapes_01.html

Frank Hellard's Mouth Shapes
f_hellard_mouths.gif
Courtesy:
http://minyos.its.rmit.edu.au/aim/a_notes/mouth_shapes_02.html

Step 1

Open a new flash file (Action Scrip 3). Save the file with the name FirstnameLipSync.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’ve left the mouth off of my character for now.
external image ff_lipsync_figure1.gif

Step 3

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. Think of a sentence that you want your character to say and draw the mouth shapes accordingly.

external image ff_lipsync_figure2.gif

Step 4

Create your own mouths. If you create your own be sure to turn each mouth into it’s own graphic symbol.
external image ff_lipsync_figure3.gif

Step 5

Next import your audio to the library and then drag it to the stage on it’s own layer named audio. In the Property Panel for Sync type chose stream.
external image ff_lipsync_figure4.gif

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…
external image ff_lipsync_figure5.gif

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.
external image ff_lipsync_figure6.gif

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.
external image ff_lipsync_figure7.gif

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.
external image ff_lipsync_figure8.gif

Step 10

external image ff_lipsync_figure9.gif

Existing methods of lip-syncing

Flash animators have developed many techniques to speed up lip-syncing in Flash. The three most common methods are swapping symbols, nesting, and nesting with labels. Each of these three methods utilize reusable mouth shapes for phonemes.

The swapping method involves creating each phoneme in its own symbol and then swapping the symbol shown on each frame to match the audio at that frame.

The nesting method involves placing all of the phonemes along the Timeline within a single graphic symbol. By manipulating the First (frame) value in the Property inspector, you can control which frame of a graphic symbol's Timeline is displayed (as shown in Figure 2). The nesting method is a bit more organized and efficient than the swapping method, but it does require that you memorize (or write down) the frame numbers that correspond with each mouth shape.

Teachers Exemplar






Assessment