Creating the mouth symbol

Creating the mouth symbol

You’ll create a simple character and sync the character’s mouth to the words in an audio file. Even when your

If you want to see simple characters animation is extremely simple, good lip syncing (and good

animated masterfully, do a search timing in general) can make for a convincing and compel-

for videos by Don Hertzfeldt. ling animation.

1. Choose File > New. In the New Document dialog box, switch to the Templates heading, choose Media

Playback > Title Safe Area NTSC D1 (Figure 2.121 on the next page), and click OK.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Figure 2.121 The New from Template dialog box allows you to create a new document with a title safe area.

Your new document will already contain a title/action safe guide layer.

2. Save your document as lipsync1.fla.

3. In the Properties panel, set the FPS to 24. The audio clip that you will import is short (~ 1 sec) and fast, so

you’ll use a high frame rate to more effectively sync the audio.

4. Select the first frame on the content layer and switch to the Brush tool.

5. Ensure that object drawing mode is turned on within the toolbar (Figure 2.122).

Object drawing mode converts your Figure 2.122 Object drawing mode has brush strokes into a distinct object.

been toggled on in the toolbar.

Object drawing mode is discussed at length in Chapter 4.

Chapter 2 Character Animation

6. Choose a solid black fill in the Properties panel.

7. Draw a simple shape for your character’s face (Figure 2.123).

A simple oval for the character’s face with a little wisp of hair at the top.

Figure 2.123

8. With the Brush tool still selected, draw two simple shapes for the character’s eyes (Figure 2.124).

Figure 2.124 The character now has a couple of eyes.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

9. Draw an open mouth for the character in the shape of

a backwards “C” (Figure 2.125).

Figure 2.125 The character’s mouth is now in place.

This shape will serve as the character’s default mouth for now, but you’ll create several more mouth shapes in

a moment.

10. Switch to the Selection tool, click on the mouth (Shift- click if you need to select multiple parts), and convert

the mouth into a symbol (F8).

11. In the Convert to Symbol dialog box, name the sym- bol mouth, choose Graphic from the Type menu,

and make sure the registration point is in the center (Figure 2.126).

Figure 2.126 Convert your mouth shape to a Graphic symbol.

The center registration will serve as a guide so that each of the mouth shapes you create in the next section will be positioned appropriately on the face.

12. Save your document (File > Save). Now that you have your file set up and your mouth in

place, let’s prep the mouth for some incoming audio.

Chapter 2 Character Animation

Populating the mouth shapes

A basic unit of sound is referred to as a phoneme. The mouth shape and facial contortions that correspond with

F/V vocalizing phonemes are known as visemes. Animators generally refer to phonemes and visemes interchangeably (even though they are technically different concepts).

A/I

There is a standard set of about six or seven phonemes/ E M/B/P visemes (i.e., mouth shapes) that are sufficient to create

the illusion of speech on an animated character. The basic shapes correspond to the following spoken sounds (Fig- ure 2.127):

A as in “cat” and “say,” and I as in “kite” (same shape)

O/U

E as in “street” or “trek”

Figure 2.127 Six mouth shapes that

. O as in “boat” and U as in “clue” (these two are some-

correspond to the most common

times separated)

phonemes.

F and V as in “favor” . M as in “might,” B as in “back,” and P as in “pass” . L as in “laundry”

You can include more mouth shapes for specific sounds, When you move or transform your

but at some point, you will find that you reach a point of mouth symbol, all nested assets are diminishing returns when you expend a lot of effort for

moved or transformed as well. small improvements. Ideally, you’ll be able to find a balance where minimal effort meets maximal reward. On that note, it should be mentioned that simpler mouth shapes tend to work well because they’re only onscreen for a fraction of a second. Simple shapes are also easier for the brain to pro- cess in the time available (1/24th of a second, in this case).

You may find it helpful to act Now you’ll draw the basic mouth shapes onto the mouth

out and exaggerate the different symbol’s Timeline.

sounds as you’re drawing them. Most animators have a mirror

1. Double-click on your mouth symbol to edit its contents.

handy as well.

2. Select frame 2 and insert a blank keyframe (F7).

3. Switch on the Onion Skin feature at the bottom of the Timeline (Figure 2.128).

You should now see a light version of the content from

Figure 2.128 The Onion Skin feature

the previous frame.

allows you to see faded versions of content on adjacent frames.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

4. Switch to the Brush tool. Using the registration point (the crosshairs) and the onion skin as a guide, draw

and position a mouth for an “ah” sound on frame 2 (Figure 2.129).

Figure 2.129 The “ah” mouth shape on frame 2.

5. Insert a blank keyframe (F7) at frame 3 and draw a mouth shape to match an “eh” sound (Figure 2.130).

Figure 2.130 The “eh” mouth shape on frame 3.

6. Insert a blank keyframe at frame 4 and draw a shape to match an “oh” sound (Figure 2.131).

Figure 2.131 The “oh” mouth shape on frame 4.

This frame will double as “oh” and “ooh” since they are reasonably similar.

Chapter 2 Character Animation

7. Insert a blank keyframe at frame 5 and draw a mouth that looks like your character is biting his/her lip for an

f/v sound (Figure 2.132).

Figure 2.132 The f/v mouth shape on frame 5.

8. Insert a blank keyframe at frame 6 and draw a mouth that looks like the character is forming an “m,” “b,” or

“p” sound (Figure 2.133).

Figure 2.133 The m/b/p mouth shape on frame 6.

9. Insert a blank keyframe on frame 7 and draw a closed mouth (Figure 2.134).

Figure 2.134 The closed (neutral) mouth shape on frame 7.

The closed mouth will be useful for separating words when syncing your mouth shapes to the audio.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

10. Turn off the Onion Skin feature, and then return to the main Timeline by clicking the Scene 1 button at the

top-left corner of the Stage.

11. Select only the mouth symbol instance on Stage. In the Looping section of the Properties panel, click the

Options menu and choose Single Frame (Figure 2.135). The Single Frame option instructs your symbol’s Time-

line to stay put rather than Play Once or Loop (play

Figure 2.135 The Single Frame option

ensures that the Graphic symbol

multiple times). You’ll want your mouth symbol to stay

remains on a single frame.

on the frame you’ve assigned until you create a new keyframe for a different mouth shape.

12. Ctrl-click/right-click on the mouth symbol and choose Distribute to Layers (Figure 2.136). This will move the

mouth symbol to its own named layer (Figure 2.137).

Figure 2.136 The Distribute to Layers feature is found in Figure 2.137 The mouth now has its own the context menu.

named layer.

13. Save your document. Now that your mouth symbol is ready to go, it’s time to

bring in some audio.

Chapter 2 Character Animation