Creating lip-sync animation in Adobe Animate CC is a lot easier than it used
to be in previous versions of the program
The basic premise for creating a lip-sync character animation is, first,
you need to have a character that has multiple lip-sync positions in order to
find out what the lip-sync positions are make sure to check out your animation
resources online, google images, etc. The keyword search term is lip-sync
positions animation now the more lip-sync positions you have and those
mean the actual mouth movements you have the more realistic and smoother
your lip-sync will be, but the more complicated it is to create. So, whether
you're creating a stick figure with five mouth positions or a fully illustrated
dragon from illustrator that has 15 mouth positions it's up to you
In this particular example we tried to stay middle-of-the-road
it does have 14 lip positions two of them are different smiles for some
Sometimes when she's not talking and we didn't do things that some people do
like create different expressions and eyebrow movement and hand gestures to go
with the lip-sync animation to make it a lot more natural. Our character the only
thing that's gonna move on her is the mouth not very natural but it makes it a
little bit easier for us to learn with. So whether you create your
character in Illustrator or you create it in animate cc is totally up to you
try something really easy first and then move on to more complicated characters
so if you want to know how to create your illustrator character with the
mouth positions or at least how to organize it make sure to watch the setup
character for lip-sync animation video on my youtube channel.
So let's go ahead import that particular character to our stage and set her up for lip-sync
animation so we'll go ahead and do import to stage and we're gonna choose
that illustrator file of the character and in the illustrator file each of the
mouth positions has its own named layer which is really important and then the
girl's body is on one layer on its own.
we need to put these in animate layers click import.
Now what this is going do
is its gonna import all the different mouth positions to their own
layer that's named and the girl on her own layer at the very bottom. With them
all selected I'll go ahead and make her a little bit bigger so we can see her
and then we are good to go. Now what we need to do is lock the girl, so that
she's not a part of our graphic symbol of the mouth positions, and then move all
of these different mouth positions into a graphic symbol so we can lip-sync with it.
So we'll click the very last keyframe, hold shift, and click the very first
keyframe to highlight all of the different mouth positions and then we're
gonna right-click and choose cut frames.
Now we need to go to insert, new symbol,
create a graphic symbol, gfcmouth, and then click OK.
Now with that created you'll see we're in the GFC mouth here we're gonna right
click on this first frame of the blank layer 1 and do paste frames. This will
paste all of those graphics into the graphic symbol in order with their names
and that's really important with them all still selected we'll move it over so
that they align their top left corner with this point okay now by the way if
you can't see the graphics you might need to control - or ctrl + to zoom-in
zoom-out, it's important that all the mouth positions be there on their own
layer make sure they're named and make sure they are stacked kind of with their
center points aligned so to speak so before we actually start messing with
this graphic symbol I'm gonna go back out to scene 1 and set up the rest of my
document so we'll fit this in window and as you can see her mouth is gone so
we'll highlight all of these layers and delete them so we just have the girl layer
Go into the library panel and drag the gfcmouth, oops we're gonna need to
create a new layer, and drag the mouth and put it where we think it's gonna be
positioned on her face that looks pretty good so we'll give this a name called
mouth and then the next thing we need to do is we need to actually add the audio
so let's go ahead and go to file import to the library and we're gonna add our
audio so mine is called welcome enemy edit mp3 and it's just me saying welcome
to Adobe animate CC and I think I say something else so there's my mp3 file so
I'll go ahead and create a new audio layer
and then on the very first
keyframe go to the properties panel and choose that welcome enemy edit mp3 so
this shows the start of that wave but since we only have one frame in our
timeline we can't really see all of it so I'm gonna make these normal size and
I'll highlight frame 100 and hit f5 and this extends the length of the animation
to the hundredth frame but as you can see that my WAV file is still going
strong so I'll do like 190 and hit f5 and it looks like it's still going, ah, so
it ends about frame 191 maybe 190 so I'm just gonna highlight back I still want
this little buffer room where where there's no talking so I'll go ahead and
right click remove frame and make sure that they all end on the very same frame
so that's the basic setup for this particular audio animation or this
lip-sync now as I scrubbed it back you can hear a
little bit of garble
[Garble Noise]
now if you can't hear that on yours it might be because
your particular wav file is set to event that's okay because event is the proper
one we want to use because it'll create very clear smooth quality audio when we
test it test the lip-sync but unfortunately when we set it to event we
can't hear it when we scrub the timeline so for purposes of creating the lip-sync
we actually need it to be on stream so don't forget though at the very end when
you're done with your lip-sync animation change the audio back to event so that
you don't get the low quality sound that we get from the stream all right so now
with that set in stream we can listen
[Welcome to Animate CC]
Okay so it says welcome to animate cc
so we need to actually create our lip-sync graphic symbol we need to edit
a little bit more so that we can create this lip-sync.
So going inside of this graphic symbol what we need to do with this is we need
to organize it so each mouth position is on a new frame so we'll go ahead and
choose large it's easier for me to see that way and I want the smile teeth
mouth position to be on frame one and I want the smile line to be on frame two,
frame three, frame four, so I'm just clicking once and then clicking and
dragging and I'm moving them in chronological order so they sort of have
this cascade you could have went backwards and had A, E, I all on frame one
and then went down this way in a stair step pattern it's up to you but it's
but it's just important that they none of them are on the same frame otherwise they're
gonna look like double mouth positions on one frame so here we have
Frame 1, Frame 2, Frame 3, Frame 4, Frame 5, etc. so that's what we needed
now when the frame picker shows it to us it's gonna show it to us by name of
frame number and so it'll say this is frame 1, frame 2, frame 3, but if you
don't know what each of these positions represents like what phonetic sound it
represents this is gonna be hard for you so what you're gonna need to do is
you're gonna need to add a frame label onto each of these particular key frames
so this key frame is for the smile teeth so in properties panel I'll choose the
name of smile teeth and then I'm gonna do that for every successive one of
these key frames so this is the smile line and then we have the TH so this is
the particular mouth movement she will have when the phonetic sound of TH is
happening, so anytime she says "that" or "the" the first mouth movement we're gonna
see is this TH mouth movement so you can do all of these on your own and I have
it done in a different document but the last thing we need to do is create a new
layer and I'm gonna call this skin and the reason why is because when we frame
pick this particular first frame or this smile teeth it's white and the back of
it will be white too so we won't be able to see the teeth, so I'm gonna go ahead
and just put a garish colored backing onto her mouth she kind of looks like
she has a beard a blue beard for right now and I'll lock that down and that
allows me to see all those all of those different mouth movements very easily
and you're gonna just have to trust me on that because I know you can't see it
right now but you'll see it in just a second. This when you're done with your
lip-sync just come in here and either turn its visibility off or delete that
layer so let's go in to this particular project that I have already done and as
you can see if we make this bigger each one of these mouth positions has a
different frame label on it and that's gonna make a difference because now what
we need to do back in our main timeline is actually start doing the lip-sync so
go to the window menu and choose something called frame picker and I'm
gonna drop this over on the left side of my screen so it's easy to see so as you
can see that little background allows me to see the teeth on a white background
so that's very helpful. Alright, so with the frame labels it says
not just frame 2 but frame 2 a smile line frame 4 is CH, J, or SH so what we're
gonna do is over here right now the graphic symbol that's on her face is
showing it might for you be showing a loop and you can tell it's loop because
when you start to scrub it she'll move her mouth even though we don't have any
talking happening right here so this is why we choose graphic symbol instead of
movie clip is because graphic symbol allows us to control whether or not it
loops or it plays once or it plays a single frame so we're gonna have it play
single frame and each new keyframe represents a single frame so right now
she's not talking so I wanted to have just a pleasant smile so when I click on
this particular keyframe I'm gonna choose frame two to have a smile line if
you want to have her smiling big teeth full smile at the very beginning you can
if you randomly want her to go from big tooth toothy smile to let's say on frame
14 we wanted to go to the single lines smile you can absolutely do that. Every
time you choose a new one though, you can see that this frame picker adds a
keyframe which is really helpful so as you can see we're starting to get some
kind of jump or wave right here and that means this is when I start talking now
the thing with this is you're gonna have to think about lightning and
thunder every time you do lip-sync animation, we see lightning first and
then we hear thunder second. So same thing here is we're gonna see things
first and then hear them second. So if you start hearing the word we need to
see it like the frame before it so as we scrub through here you might be able
to hear it but we're gonna start saying welcome to animate CC
so let's hear this
[Garbled Sound]
So I start saying "welcome" here so if this is really where
I hear the W then I should actually have the W key frame right here because I'm
gonna see it before I hear it and I wanted to look like they actually
happened simultaneously so I'll go ahead and find the W so we're looking all
through here and I can never remember there we go
frame is seven for me is W so there's welcome so
[Garbled Sound]
so there's the L so I
probably haven't in here and it's just a regular e not a long e like see or three
so it's welcome so we'll put frame 14 and see how it created a
key frame there's an L so we're gonna look for the L sound so you might need
to sound this out with your own mouth movements and think about how your mouth
is moving and try to try a little guesswork there if it doesn't make sense
to you so for some of these different words that are going pretty fast so
there's wel- there's that "k" "k" of come so we'll go ahead and find the C where
would that be, there we go and then the O
[o sound]
and then this is the M so
we need to find the "mm" the closed lips sound
[mm sound, t sound]
there's the "t"
of two so go ahead and find the T and sometimes you can't see but if you hover
over that frame label will show you so "t" and then this is a long O
[long o sound]
so we'll put two and let it hold for a second
there's the animate
[Garbled Sound]
there's the a so we're gonna do the animate and so on and so forth so I'm not
gonna do this whole thing for with you you can create your own character use a
little stick figure and I'll put the welcome to animate CC mp3 that I'm using
here in the video description below so go ahead and try this out but as I come
in here I'll show you one that's kind of partially done okay so
[Welcome to Animate CC, in this tutorial video, you'll learn how to create lip-sync animation.]
okay so watch again
[Welcome to Animate CC, in this tutorial video, you'll learn how to create lip-sync animation.]
okay so that's all there is to creating lip-sync animation it's a
little bit time intensive for your characters but it is well worth it
because what character doesn't actually have the ability to talk so it's just a
matter of creating a graphic for the mouth positions and then adding audio to
your timeline lengthening all the frames so that we have the mouth and the audio
last the same amount of time and then setting up that graphic symbol to have
both keyframes in chronological order of frame labels and then making sure that
we use the frame picker to coordinate with the phonetic sounds of the audio
that we hear.