New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating happy mouth dialogue shapes, part one

From: Rigging a Face in Flash Professional

Video: Creating happy mouth dialogue shapes, part one

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.

Creating happy mouth dialogue shapes, part one

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.

Show transcript

This video is part of

Image for Rigging a Face in Flash Professional
Rigging a Face in Flash Professional

44 video lessons · 5861 viewers

Dermot O' Connor
Author

 
Expand all | Collapse all
  1. 14m 16s
    1. Introduction
      42s
    2. What you should know
      2m 0s
    3. Setting up Flash
      8m 35s
    4. Dos and don'ts
      2m 59s
  2. 59m 26s
    1. Establishing the directions
      7m 9s
    2. Setting up layers for the head
      6m 58s
    3. Drawing the head
      19m 2s
    4. Creating the mouth
      11m 27s
    5. Drawing the eyes
      4m 31s
    6. Animating the eye blink
      10m 19s
  3. 48m 0s
    1. Creating happy mouth dialogue shapes, part one
      10m 24s
    2. Creating happy mouth dialogue shapes, part two
      7m 43s
    3. Creating mad or sad mouth dialogue shapes
      10m 7s
    4. Creating neutral mouth dialogue shapes
      7m 36s
    5. Building unique mouth shapes
      12m 10s
  4. 29m 27s
    1. Creating jubilant expressions
      11m 47s
    2. Creating furious expressions
      6m 4s
    3. Fine-tuning expressions
      11m 36s
  5. 1h 9m
    1. Clock rotation demonstration
      2m 23s
    2. Creating the twelve-o'clock pose
      9m 2s
    3. Creating the six-o'clock pose
      5m 19s
    4. Creating the three-o'clock pose
      10m 16s
    5. Creating the nine-o'clock pose
      9m 35s
    6. Creating the remaining poses
      13m 17s
    7. Fine-tuning the head rotation
      11m 54s
    8. Fixing layering issues
      7m 42s
  6. 2h 10m
    1. Introducing the turnaround
      2m 55s
    2. Creating the B head (3-quarter)
      6m 45s
    3. Creating the C head (profile)
      8m 51s
    4. Creating the D head (3-quarter rear)
      13m 2s
    5. Creating the E head (rear)
      8m 59s
    6. In-betweening symbols manually
      9m 58s
    7. Creating the H head
      6m 41s
    8. Creating the G head
      11m 33s
    9. Creating the F head
      19m 18s
    10. Creating the B mouth (3-quarter)
      13m 41s
    11. Creating the C mouth (profile)
      14m 33s
    12. Adding detail to the C mouth
      7m 42s
    13. Creating other mouths
      6m 28s
  7. 54m 24s
    1. Putting together a head rotation
      14m 29s
    2. Moving frames between symbols to make a rotation
      10m 23s
    3. Using the rig with audio
      14m 59s
    4. Adding expressions to the animation
      14m 33s
  8. 1m 0s
    1. Goodbye
      1m 0s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.