Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we start doing the dialog mouth shapes, just have a quick overview of why we are using these particular shapes and where they came from. If you've watched Disney movies and feature animated films, then you know that there's all kinds of amazing mouth shapes that can be done to create dialog. In Flash of course we are not doing it in that style; we are trying to tween between different shapes, so there are compromises that we can make. But there is also a more simplified way of doing dialog and that's the kind of TV style that you would have seen in the '60s, the Fred Flintstone or Scooby Doo style, and this usually involves six static mouth shapes, going from closed to what you see here as the D mouth to the ooh mouth on the far right.
And you can make any kind of dialog you want with these six shapes, believe it or not. So what we'll do in Flash is we are going to take this basic style and really develop on it and expand on it. We are going to be able to blend our tween between any of these six shapes, and that gives you all kinds of intermediate dialog shapes. And you can even make custom mouth shapes that are different from these, if you want to, using the same principles that we are going to cover here. In later chapters we will go pretty wild with some of these custom mouth shapes, so that we try to begin to approach some of the effects that are feature animator or a 3D animator might have at their disposal.
Again, it's Flash; it's flat, it's 2D. So it's a little different, but if you follow along, I think you will be surprised by some of the effects that we can wring out of this thing. So let me close this basic demonstration, and I'm just going to reopen the old one, and I'll switch my window layout back to the vertical. So now we are inside so you know where we are. We are inside of our heads, inside the mouth. And what I have done is I've added a layer here, which has some of the B mouth, which will be the E sound; and the D mouth, which is the wide-open mouth; and the F mouth, which creates the ooh sounds.
These are letters A through F, do not correspond to the phonetics. So the A mouth, for example, which is the starting point, that could be the mouth we would use for the B or the meh sound, the closed shapes, and the D mouth for a shout or a yell, and this will be any ooh sound, phonemes basically. So let's get going. First things first. Let's just extend the timeline out and hit F5 to match that, and let's make some labels. We are going to start with a happy mouth, so let's make a label note here called happy. Put a space, happy. And here at the intervals of about three frames, we will have the A mouth and the B and so forth.
So I am just going to select these, hold down Alt+Drag or Option+Drag to create just the notes. This will help us with positioning. So the first mouth in the label will be A, the next will be B, then C, and so forth, and then back to A. So since A will be the beginning and the end, let's hit F6 to do that. We will hit an F7 there and padlock the reference layer, maybe put it in Outline, hide it for the moment. So the way I like to approach this is after the A mouth is done-- I have noticed something looking at it here, the lip is a little bit off center.
Not the end of the world, but let's select that, hold down the Shift and the arrow key, and push it back a little bit. You can always be looking for things to fix and tweak and improve. So let's do the D mouth first. I like to go from the closed mouth to the open mouth. Now bear in mind that we need these to be able to shape tween and motion tween into one another, so this can be a tricky, but let's see if we can make it happen. So let's start with just a mouth inner layer and hit a keyframe here, F6. I am going to switch the little preview sketch that I have done on, and now let's select the layer for the mouth inner shape and use the Free Transform tool to push it in as close as we can get just to the edges.
I'd like to minimize the amount of pushing of actual points around, so that's one way of getting some of it taken care on. Next, I am just going to, without losing or accidentally blending these points together, we can be pretty bold with it. Now that looks weird there. We don't want that little bump. It's going to look really bad. So I think we can simplify this, maybe not do that curve there. We really do want this to be consistent on both sides. Now, you don't have to regard the sketch beneath as clad in iron.
I mean I'm taking liberties with it. I am trying to get as close as I can though with as few points as possible. Oops, see, what's happened here? They have all disappeared, and now it's going to mush. So let's hit undo for a little bit. Let's hide that layer for a second. Okay. And I can move these independently, so that's good. Now the test: select these, right-click, and Shape Tween, and see if that works, and that does.
Now we need to finesse the upper lip. Not too bad. And notice that no shape hints are needed. It's very important that we do this without using shape hits. This system, if you have to use shape hints for all of the transitions it will be a nightmare. So you really need this to be stable. Unfortunately, if you use shapes that have a not too high number of points, you can often get it to work, and in this case one, two, three, four, five, six, points total. So you might find you to compromise on the kinds of shapes that you can get away with.
Sometimes you can get away with much larger ones. It just depends from design to design, and it's just something that you're going to have to experiment with to see if your version of Flash or your design will support it, but this will. So let's padlock that. Once you get something working like this, just padlock it. And the beauty of this particular system is that the inner mouth and the mask will be the same, and we can actually cannibalize some of this work to generate the upper lip and the lower lip. So let's just copy. I am holding down Alt or Option and dragging these frames just to duplicate them up here.
We are going to keep the mouth inner open with this Outline mode on, and let's go to the upper lip. And if you remember, we colored this black originally. So let's gray color that so we can tell them apart. So this is the upper lip, and obviously we don't want the upper lip to be all the way down to the bottom. We just want it to track to here. And it helps if you click on the Subselection tool to make sure that these little points line up from side to side. You have to move that one over a bit, and now let's see if that obeys.
That is really nice. Padlock that so you don't accidentally change it later on, and let's switch it to outline so we can see exactly what we are working on beneath. This is the lip lower and again I switched this back to black. It happens often that you just accidentally override one colored layer with another, and this is the opposite. This lip will be pulled down to here. And again, hit the Subselection tool or A on the keyboard and try to get these two points to line up on each side so you get as consistent a tween as possible.
There is a little bit of weirdness on the right side. You see, about here it's getting a little too thin. So let me take another look at that. So the problem might be on the closed mouth. See, the two points are slightly different here, so let's go in a bit tighter and see if we can tweak that. Let's pull it over. You can see what that looks like.
It's a little bit better, but let's see if I can pull it a little to the right. To see it, let's just do that. Any change that we make, don't forget, to the first two shapes here, we've got to copy that to there and then right-click and remove the tween, just to do a little bit of housekeeping.
You don't want things getting too weedy. So that gives us the upper lip and the lower lip. The mask is set, the inner mouth should be set, I think, too. The next thing to take care for is the teeth, and these are pretty easy because they're motion tweened. So let's just hit F6 to make some keyframes. Let's right-click to go Create Classic Tween. I do not use the newer Motion Tween. I always use the Classic Tween. The modern version simply doesn't work with this particular style. It will just cause problems.
So let's go to the D mouth. We will do one of these at a time. Bring those teeth down a little bit, and the teeth lower will really move down on the open mouth down to here, and the tongue also. Now you will notice straightaway, now, there's no masking activated as we animate with these, so you have to tolerate this ugly spill-out, but there are things that we can do to really improve this. The teeth seem to be a little too big for the mouth. So things that we can do are, pull them in.
We can also stretch them up, and there's the virtue of having the pivots placed so carefully it really makes this easier. I think we can move the lower teeth up just a little bit, and we can also go in and change these internal shapes if you think there's no other way of doing it, which is the beauty of having these as a symbol. Okay. So let's padlock that. Now one last thing: the lip. Now let's hit F6 here and the Shift and Arrow key until the lip shape comes down. Select those frames, right-click, and Create Shape Tween, and now I will just pull that down a little bit.
So it's not just a static shape that moving. That's actually following the curve. That's great. Let's just padlock everything, just to keep it safe from any further error. And there we have our basic open and closed mouth. No shape hints used anywhere. So with the open D mouth taken care, of it's time to move on to the F mouth, which will give us the ooh sound, and we'll do that in the next movie.
Get unlimited access to all courses for just $25/month.Become a member
107 Video lessons · 33197 Viewers
94 Video lessons · 23034 Viewers
78 Video lessons · 9425 Viewers
147 Video lessons · 3156 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.