You are on page 1of 3

70 Technique


Flash CS3 or later
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
Timing in
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.

Computer Arts March 2009

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

01 Open the Flash document 02 Import the audio by selecting
chemistry_today.fla from this month’s File>Import>Import to Library and
disc, and play through the timeline choose profaudio_german.wav from the
(Control>Play). The file contains a short disc. Now create a new layer in the main
animation of a professor in his timeline and, with this layer selected,
laboratory. Double-click the professor drag the audio from the library onto the
on the main stage and create a new stage. You should be able to see the
layer on the timeline within the ‘prof’ audio in the timeline in blue. Do the
symbol called ‘Audio’. Now double-click same for the ‘Audio’ layers you created
the ‘head’ symbol and do the same. inside the ‘prof’ and ‘head’ symbols.

03 With the audio selected in the 04 By scrubbing along the
timeline, set the Sync setting to Stream timeline, write down, phonetically, what
in the Properties panel. This enables you the professor is saying by creating new
to scrub through (by dragging the red keyframes for each syllable of the word
bar) and play (press Return) the audio into the ‘dopesheet’ layer. It’s important
from the timeline. Create a new layer in to listen to what is being said as
the ‘head’ symbol called ‘dopesheet’. opposed to how it is spelt, as different
This layer will serve as your dopesheet accents pronounce words in very
for writing notes, as an animator would different ways. Use my completed file
have in the days of paper animation. chemistry_todayfin.fla as reference if
you get stuck.

05 Select the ‘mouth’ symbol in
the ‘head’ symbol. You may have noticed 06 Now double-click the ‘mouth’
that throughout this file all symbols are symbol and scrub along the timeline
graphic symbols. This ‘mouth’ symbol is within the symbol. There are lots of
also a graphic symbol but has been different mouth shapes! When creating
selected to display a single frame as mouth shapes, I use the Onion Skin
displayed in the Properties panel. Try option to see the previous frame I have
changing the first frame number and created in order to make smooth
notice how the frame displayed also transitions between shapes. The Onion
changes. This is the main principle to Skin button is located at the bottom
lip-syncing in Flash! right of the timeline.

Computer Arts March 2009

ART159.tut_flash 71 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 lip-syncing! The easiest way is to start
basic mouth shapes commonly with an open mouth and insert closed
considered essential to lip-syncing. I 08 It’s good practice to create a new file with all the mouth shapes when your character
use this as a reference when creating mouth shapes displayed on one page next to their pronounces ‘m’s, ‘p’s and ‘b’s. Create a
mouths for new characters, and this has corresponding frame number within the ‘mouth’ symbol, to be new keyframe at Frame 145 (F6) and
also been included on the disc as a used as reference when lip-syncing (so that mouths can be choose an open mouth shape. Continue
separate file called 9basicmouths.fla. referred to as numbers). Try creating one for yourself or open along the timeline inserting closed
Use this as reference when creating profmouth_ref.fla. Add any new mouth shapes to this as you mouth keyframes at pauses between
mouth shapes in the future. create them. I often print these references sheets out. talking and at ‘m’s, ‘p’s and ‘b’s.

12 The last mouth shapes to add
in are the ‘o’s, ‘ooh’s and ‘u’s (mouths 11,
11 When previewed, it should 14 to 19 and maybe 6 on the chart).
10 Next put in the ‘f’s and ‘v’s (mouth numbers 12 and now be starting to look like he’s talking. Notice that you can often use the same
13 on the chart). You may notice that, while the professor Next add in the ‘w’s and ‘q’s (mouths 15 mouth shape for different sounds;
appears face on, his mouth is more sideways. This is partly and 16 on the chart). There might now there’s no real rules for this, so if it
because ‘f’s and ‘v’s are easier to draw like this, and also it be quite a few keyframes along the works, use it! Often an animator will
means you can flip the head and make him appear to do a timeline, so try to ensure that each lip-sync a sequence in an entirely
heard turn without really having to create a side profile – a mouth shape is displayed for at least different way to another animator, and
technique made popular by Hanna Barbera. two frames. neither will be wrong.

15 When you have finished lip-syncing, preview the
13 It’s possible to use motion 14 You may need to create movie. If the lip-syncing seems a little off time, try removing a
tweens on certain mouth shapes, and additional mouth shapes as either frame at Frame 1 on the mouth layer in the timeline (Shift+F5).
this can be particularly useful when a in-betweens or extremes. I usually The mouth then moves slightly early, but the human eye is
character is talking slowly. For example, break apart an existing mouth shape better able to register the movement. Another idea is to hold
when the professor says ‘cookies’ on and, using the Onion Skin effect, draw closed mouth positions for three frames as these are generally
Frame 405, try stretching mouth shape the new shape. You can see in the most important to the audience’s comprehension.
16. Make sure that when you do this the chemistry_todayfin.fla how I have
transformation point (where the symbol created new mouth shapes at Frames
stretches from) is correctly aligned 203 and 330. Add these new frames to
(select Symbol>Q). the existing ‘mouth’ symbol.

Computer Arts March 2009

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