70

Technique
  

Flash CS3 or later

Making
lip-syncing
simple
Learn how to speak
easy by going through the
simple steps of lip-
syncing 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 On the disc Time needed

London-based The files 2 hours
freelance character accompanying this
animator and tutorial can be found Skills
illustrator Tom’s in Disc Contents\ Lip-syncing in
clients include Resources\Flash Flash
Cartoon Network,
Drawing in Flash
Nickelodeon,
Timing in
Channel 4,
animation
Paramount Comedy,
Character
Sony and Green
animation
Thing. He has
created work for TV
broadcast, computer
games, cinema and
the internet. See
more at www.
bakeranimator.com

Computer Arts March 2009

ART159.tut_flash 70 19/1/09 4:22:41 pm


01 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.
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
02 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.
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 09 You are now ready to start

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.
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.
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 The last mouth shapes to add

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.
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.
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

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).
14 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.
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.

Computer Arts March 2009 www.computerarts.co.uk

ART159.tut_flash 72 19/1/09 4:22:47 pm