70 Technique   

Flash CS3 or later

Making lip-syncing simple

Learn how to speak easy by going through the simple steps of lipsyncing using Flash CS3 with animator Tom Baker Character animation is a pain. It’s time consuming, difficult and – unless you are capable of knocking out quality that’s at least as good as that of TV’s big-budget, mega-crewed cartoons – it’s hard to impress anybody. Or, rather, it would be was it not for one saving grace: lip-syncing. Lip-syncing is one of the most satisfying things to learn in animation because it both impresses people and it’s easy. It’s great when someone says, “Wow, how did you make it talk?” And what’s better is that lip-syncing using Flash is even easier. This tutorial is purely an exercise in lip-syncing using the Flash technique that I learnt while at Cartoon Network. I’ve set up the character, body animation and background, so all you need to do to complete the film is to make the little professor talk! In case you get lost at any stage, I have also included a finished project file on the disc, which you can use as reference (chemistry_todayfin.fla).

Tom Baker London-based freelance character animator and illustrator Tom’s clients include Cartoon Network, Nickelodeon, Channel 4, Paramount Comedy, Sony and Green Thing. He has created work for TV broadcast, computer games, cinema and the internet. See more at www. bakeranimator.com

On the disc The files accompanying this tutorial can be found in Disc Contents\ Resources\Flash

Time needed 2 hours Skills Lip-syncing in Flash Drawing in Flash Timing in animation Character animation

Computer Arts March 2009

ART159.tut_flash 70

19/1/09 4:22:41 pm





01

02

Open the Flash document chemistry_today.fla from this month’s disc, and play through the timeline (Control>Play). The file contains a short animation of a professor in his laboratory. Double-click the professor on the main stage and create a new layer on the timeline within the ‘prof’ symbol called ‘Audio’. Now double-click the ‘head’ symbol and do the same.

Import the audio by selecting File>Import>Import to Library and choose profaudio_german.wav from the disc. Now create a new layer in the main timeline and, with this layer selected, drag the audio from the library onto the stage. You should be able to see the audio in the timeline in blue. Do the same for the ‘Audio’ layers you created inside the ‘prof’ and ‘head’ symbols.

03

With the audio selected in the timeline, set the Sync setting to Stream in the Properties panel. This enables you to scrub through (by dragging the red bar) and play (press Return) the audio from the timeline. Create a new layer in the ‘head’ symbol called ‘dopesheet’. This layer will serve as your dopesheet for writing notes, as an animator would have in the days of paper animation.

05

Select the ‘mouth’ symbol in the ‘head’ symbol. You may have noticed that throughout this file all symbols are graphic symbols. This ‘mouth’ symbol is also a graphic symbol but has been selected to display a single frame as displayed in the Properties panel. Try changing the first frame number and notice how the frame displayed also changes. This is the main principle to lip-syncing in Flash!



ART159.tut_flash 71

71



04

By scrubbing along the timeline, write down, phonetically, what the professor is saying by creating new keyframes for each syllable of the word into the ‘dopesheet’ layer. It’s important to listen to what is being said as opposed to how it is spelt, as different accents pronounce words in very different ways. Use my completed file chemistry_todayfin.fla as reference if you get stuck.

06

Now double-click the ‘mouth’ symbol and scrub along the timeline within the symbol. There are lots of different mouth shapes! When creating mouth shapes, I use the Onion Skin option to see the previous frame I have created in order to make smooth transitions between shapes. The Onion Skin button is located at the bottom right of the timeline.

Computer Arts March 2009

19/1/09 4:22:44 pm

72 Technique   

07

There is also a layer within this symbol guided out with the nine basic mouth shapes commonly considered essential to lip-syncing. I use this as a reference when creating mouths for new characters, and this has also been included on the disc as a separate file called 9basicmouths.fla. Use this as reference when creating mouth shapes in the future.

09

08

It’s good practice to create a new file with all the mouth shapes displayed on one page next to their corresponding frame number within the ‘mouth’ symbol, to be used as reference when lip-syncing (so that mouths can be referred to as numbers). Try creating one for yourself or open profmouth_ref.fla. Add any new mouth shapes to this as you create them. I often print these references sheets out.

You are now ready to start lip-syncing! The easiest way is to start with an open mouth and insert closed mouth shapes when your character pronounces ‘m’s, ‘p’s and ‘b’s. Create a new keyframe at Frame 145 (F6) and choose an open mouth shape. Continue along the timeline inserting closed mouth keyframes at pauses between talking and at ‘m’s, ‘p’s and ‘b’s.

12 10

Next put in the ‘f’s and ‘v’s (mouth numbers 12 and 13 on the chart). You may notice that, while the professor appears face on, his mouth is more sideways. This is partly because ‘f’s and ‘v’s are easier to draw like this, and also it means you can flip the head and make him appear to do a heard turn without really having to create a side profile – a technique made popular by Hanna Barbera.

13

It’s possible to use motion tweens on certain mouth shapes, and this can be particularly useful when a character is talking slowly. For example, when the professor says ‘cookies’ on Frame 405, try stretching mouth shape 16. Make sure that when you do this the transformation point (where the symbol stretches from) is correctly aligned (select Symbol>Q).

Computer Arts March 2009

ART159.tut_flash 72

14

11

When previewed, it should now be starting to look like he’s talking. Next add in the ‘w’s and ‘q’s (mouths 15 and 16 on the chart). There might now be quite a few keyframes along the timeline, so try to ensure that each mouth shape is displayed for at least two frames.

You may need to create additional mouth shapes as either in-betweens or extremes. I usually break apart an existing mouth shape and, using the Onion Skin effect, draw the new shape. You can see in chemistry_todayfin.fla how I have created new mouth shapes at Frames 203 and 330. Add these new frames to the existing ‘mouth’ symbol.

The last mouth shapes to add in are the ‘o’s, ‘ooh’s and ‘u’s (mouths 11, 14 to 19 and maybe 6 on the chart). Notice that you can often use the same mouth shape for different sounds; there’s no real rules for this, so if it works, use it! Often an animator will lip-sync a sequence in an entirely different way to another animator, and neither will be wrong.

15

When you have finished lip-syncing, preview the movie. If the lip-syncing seems a little off time, try removing a frame at Frame 1 on the mouth layer in the timeline (Shift+F5). The mouth then moves slightly early, but the human eye is better able to register the movement. Another idea is to hold closed mouth positions for three frames as these are generally the most important to the audience’s comprehension.

www.computerarts.co.uk

19/1/09 4:22:47 pm