Lip Synching in Flash
01.24.11
click here to download the Photoshop document for Import. image source: http://minyos.its.rmit.edu.au/aim/a_notes/mouth_shapes_01.html /
/
make sure you choose Convert to Keyframes.
kill Layer 1
drag a guide to the bottom of the chin in frame...you can use it by itself to line up the rest of the faces or you can combine with Onion Skinning: timeline bottom: Onion Skinning. while you始re there, click on
, look for
and select it to turn on
to bring up this choice:
= = this will allow you to see two frames at once so you can adjust the selected one to perfectly match the one just behind it. click on frame 2. you can line up by the bottom of the chin or the eyes, your choice. I chose the chin at first; it was more comical to me...
click on frame 3 like above. the grey bars automatically jump there and set up the next comparisons. use Shift + arrow keys to move heads up and down to start.
lined up by chin above. next to it, the eyes and nose line-up would be more realistic.
continue until you get to frame 9. seems like a lot of work? well, you始re done. nine phonemes are all you始ll need to get you through most lip synching, and we始re going to embed them into one graphic to make it easy to swap them out. note that there are slight variations in the systems proposed by animators (see examples at the end). some include an extra Rest position where the mouth is slightly open so that makes 10 for them. others like the one we'll use substitute the M for Rest. none of the ones I found included an H????!!!! more about that later...
if you bring in a bitmap with a problem like above, you can Break it Apart: ⌘B...
...select the offending part with the black arrow. delete. or better still:
you can use Trace Bitmap to convert them into vector shapes.
the above settings will give a pretty fine tracing of this. you can also use it to trace photos and even frames from movies for rotoscoping-like effects:
link to the movie here's a link to the swf version:
you can expand it to see the tracing better.
after you close any gaps with either the paintbrush or the pencil tool, you can select the white background with the arrow tool and delete it. you can temporarily change the background to grey to see if it worked...
the file size will be smaller now. select problem areas with the arrow tool to delete. now you can create a Graphic symbol from these frames. however, if you want to reorder them alphabetically or vowels together and consonants together (alphabetically?), this would be a pretty good time. I left mine where they were since I'm going to make a chart of each phoneme's frame position and will call the numbers from the chart so initial random order is really not a problem. we're making this a Graphic for a very good reason as you will soon see!
select all your phoneme frames; right click and Cut Frames; Insert/New Symbol.
save it as a Graphic. Select its first frame and right click/Paste Frames.
Drag
from the Library to the Stage in Scene 1, frame 1.
in Properties:
we saved it as a Graphic because it offers the ability to play back just one of its nine frames at any given moment, and we can now choose which one by typing it in.
We need something to synch our phonemes to so build a new layer.
/
Grab these two. Import. Drag hello class.wav to a new layer above the phoneme.
F5 some extra frames so you can see where it ends.
Set it to Stream so you can scrub the playhead or hit Return and get instant playback/ feedback for even a single syllable.
Click on this in the timeline
and choose
...
You can see in intimate detail all your faces and sound blips. on some computers, this may make the goings real slow...
grab the Text tool and make a chart in a new Layer by comparing Frame 1's image to the faces in the Library unless you have them all memorized already.
H my full chart. I noted earlier that not one phoneme chart (see the examples at the end) lists the H. since our phrase begins with the word "hello," it might be good to know. hellloooo... the H is closest to the A so we'll add it to our chart as a 9. remember M = Rest.
make your movie 12 fps: easier to work with!!!!!
select the face in frame 1 on the stage (you'll always need to access their Properties this way). make sure
is your Graphic setting or you始ll see way too many faces.
you can choose H, frame 9 of my Graphic, for frame 1 to start us off. in frame 3, F6 yourself a new keyframe. change to the L frame, frame 3 of my Graphic.
insert an O and then a U like above to begin to round off the word.
Then maybe this mouth shape and then the M phoneme aka rest shape to bring on each silence. or you can close the mouth completely: my Graphic symbol's frame 2.
final product... here's an interactive, fleshed out version:
source: http://www.flashframer.com/create-a-realistic-flash-animation-lip-sync/
source: http://www.toonboomtutorials.com/2008/manual-lip-synch-toon-boom-tutorial/ nl/
3/4 views on this page and next source: http://basakward.deviantart.com/art/Lip-SyncTutorial-part-2-12043843?qj=24&q=sort%3Atime+favby%3Atalster&qo=5904
source: http://basakward.deviantart.com/art/Lip-Sync-Tutorial-part-2-12043843? qj=24&q=sort%3Atime+favby%3Atalster&qo=5904
more 3/4 views – source: http://www.ontheshortbus.com/extras.htm
source: http://thenonist.com/
Phoneme A I Example sounds are: apple, day, hat, happy, rat, act, plait, dive, aisle.
source: http://garycmartin.com/phoneme_examples.html
Phoneme E Example sounds are: egg, free, peach, dream, tree.
Phoneme O Example sounds are: honk, hot, off, odd, fetlock, exotic, goat.
Phoneme U Example sounds are: fund, universe, you runner, jump, fudge, treasure.
Phoneme C D G K N R S TH Y Z Example sounds are: sit, expend, act, pig, sacked, bang, key, band, buzz, dig, sing.
Phoneme C D G J K N R S Y Z Example sounds are: grouch, rod, zoo, kill, car, sheep, pun, dug, jaw, void, roach, lodge.
Phoneme F V Example sounds are: forest, daft, life, fear, very, endeavour.
Phoneme T Example sounds are: the, that, then, they, this, brother.
Phoneme L Example sounds are: election, alone, elicit, elm, leg, pull.
Phoneme M B P For many M, B and P sounds, it's important that the phoneme shape should be reached before the M, B or the P sound is made, the sound is often only made as the pose breaks. Example words are: embark, bear, best, put, plan, imagine, mad, mine.
Phoneme W Q Example sounds are: cower, quick, wish, skewer, how.
The rest shape The rest shape is not a phoneme as such but a shape used during pauses between words and sentences. When speaking in real life, it is common to speak full sentences without entirely closing your mouth. In limited animation like Flash, this approach looks odd. Use the closed mouth position to better anchor your character’s lip sync in reality.
Preston Blair's mouth shapes http://minyos.its.rmit.edu.au/aim/a_notes/mouth_shapes_01.html
source: http://profspevack.com/archive/animation/course_cal/ week12/week12.html
source: http://profspevack.com/archive/animation/course_cal/ week12/week12.html
source: http://www.11secondclub.com/