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 mad or sad mouth dialogue shapes

From: Rigging a Face in Flash Professional

Video: Creating mad or sad mouth dialogue shapes

Now that we've done the happy mouth, let's move on and do the angry sad mouth. So let's click inside until we get into the mouth symbol. And what I want to do is add more frames to the timeline, so let's switch the Workspace layer to something a little more user-friendly. I'll go to Window > Workspace > rigging face, and that's our horizontal layer. Or you can manually move your shapes around if you want, but that's quicker for me. I'm now going to select that little reference layer and get rid of that, to save some room. We don't need that anymore. So the next thing to do is to select all the frames on the timeline, hold down Alt or Option and drag so we copy them.

Creating mad or sad mouth dialogue shapes

Now that we've done the happy mouth, let's move on and do the angry sad mouth. So let's click inside until we get into the mouth symbol. And what I want to do is add more frames to the timeline, so let's switch the Workspace layer to something a little more user-friendly. I'll go to Window > Workspace > rigging face, and that's our horizontal layer. Or you can manually move your shapes around if you want, but that's quicker for me. I'm now going to select that little reference layer and get rid of that, to save some room. We don't need that anymore. So the next thing to do is to select all the frames on the timeline, hold down Alt or Option and drag so we copy them.

Now we have us an identical duplicate over here. Click on the happy emotions label, and let's just rename that mad/sad. These mouth shapes will actually work for both of these states. And then the next thing to do, I think we should probably--it's good procedure to clear keyframes for the b-mouth and the c-mouth and for the e-mouth, and let's just work with our three most important ones: the a, the d, and the f. And the next thing to do is let's hide everything. We're just going to work with the inner mouth layer, un-padlock that; the mask layer, un-padlock that and unhide it; and lip upper and lip lower.

So let's go to the a-mouth first and just select everything, and the padlock layers won't be selected of course. Let's hit Free Transform, and sometimes with these very long thin selections it can be very hard to find the controller, so you might have to go in a little bit tighter. Hold down the Shift key and rotate and you see when Shift is held down, it moves in 45-degree increments, and then release. Do the same thing for the d-mouth, and the same thing for the f-mouth. And let's have a look at that.

I'm going to leave the happy mouth. I'm not going to mess with that, because I want to see for the moment that we can actually blend back into the happy mouth as well, which is nice. Great! So the next thing to do, let's padlock them because they are looking great, and let's look at the teeth upper, teeth lower, and the tongue. You would almost certainly have to play with, or adjust, the teeth. So let's un-padlock all of these guys and hide the mask, because it's only getting in our way at the moment. I'm going to move the lower teeth down a little bit and just spread them out slightly.

Move the tongue so it sits in there a little better. I don't move the upper teeth too much, because it's supposed to be fixed to the skull. The lower jaw moves far more than your upper teeth do. So that looks good. And I think I'll leave this alone. I think the ooh mouth is pretty much the same for the happy, so there is no need to move them. So let's padlock them back up and have a look then. Looking great! So let's check the lower lip, see if that has been altered. And I think the happy ooh mouth is here, the angry and sad is there, and I think maybe let's just nudge the lower lip a little bit more that way.

And we're great! So the next thing to do is just make the e-mouth. And rather, again, than using the halfway one, which looks a little bit bland, let's pick something a little closer to the f. You could go really close like that. And I think for this one I use something closer to here. Let's match there. Whatever we did on the first section I like to keep it fairly consistent with the second. And the c-mouth, I usually like something halfway out. Let's move that to there. And the b- mouth should be fairly close.

If you want something even finer, you can temporarily go into here, hit F5, and it gives you a much wider range of secondary mouth shapes to choose from. So maybe you like something like this, with a little slight gap between the teeth. Pull that back and then just remove these frames to get back to the right timing. Now I'm seeing something weird happen, as often does. When you create these secondary keyframes, Flash then has to take its best guess of course, what that shape should be, sometimes it adds points that aren't needed.

And if we go really close on the upper lip, I'll show you exactly--let's see what happened. Something else happened, too, when I inverted those shapes: the upper lip became the lower lip. And let me see this in Outline. As you can see, I used the green outline for the upper lip and the blue for the lower, and then when we rotated them 180 degrees, things were worse. So let's fix that first, because I like things to be completely consistent.

So I'm going to make a temporary layer above and then copy the lower layer back on top and drop them back down again. And now when we move through, as you can see, green on top, blue on bottom. You begin to see the virtue of having a consistent outline policy with your colors. Now, let's get back to fixing this weird little glitch on the e-mouth. And I caught that mistake because of the outline consistency. So again, we need to make a temporary layer on top, and let's just make a little empty placeholder for that.

I hit F7, go to the d-mouth. Or actually the other thing we can do is simply draw it from scratch; it might be easier. Let's go to the Rectangle tool. Let's draw a box, and let's get rid of the outline. As long as the box is black, it can be the same color, and then just with Snap to Objects on, drag your corners to there and there, and hold down Alt or Option so that we create new points on the lower area. And I have switched Snap to Objects off because I really want to have a much finer level of control over this.

Let me switch the outline color to black, so you can see it a little better. It's very important to get the shape tween to work right, that each of your frames has the same number of points. If Flash has to tween between a shape that has six points and one that has seven, eight, or nine, you really can't expect it to be totally accurate. So this is why sometimes you have to do these occasional redraws. And I think we--let's padlock the green, so that we actually are selecting.

I am using the Subselection tool to check that these points are fairly close. Let's look at the layer beneath. As you can see, on the green layer, the one that Flash made automatically, there's far too many points. That's why the tween was going berserk on us. So I think let's just take the upper level, the corrected one, and drop it down, and that will replace the one beneath. Right-click to create a shape tween. Let's just pull that in a little bit and see if that works.

And there we go! That bizarre effect seems to be gone. So I'm just going to unhide everything, and there we go. With this mouth, as you can see, with these eyes looks more sad or concerned. To pull the eyebrows down into a V shape would create an angry mouth, so it's one way for getting two for one. And the last thing we need to do is I like the mad or sad mouths to begin and end with the angry or sad closed mouth.

So let's select the close mouth in the angry sad state, hold down Alt or Option, and drag to here. And then more housekeeping. Let's just remove those tweens so that we've a solid untweened buffer between each of these. You could switch on tweening here if you like. I like to have this gap here; it's easier for me to read. So, there we go. Now as you can see, notice this, that the keyframes at the end of the happy mouth have a black line between them, and these don't. And this really, really puzzled me when I saw it. This seems to be a recent behavior of Flash: when you switch tweening off, it pulls the line away.

Now this can be worrying, and it was worrying to me when I saw it, because this has a specific meaning. Now I'm going to open up, in your exercise files folder there's a project called 02_03_sync, so let's open that. I'll sync test. Let me show you what this means, if you're not familiar with it. If you're familiar with it, then you probably don't need to be watching this, but if you're not, this is worth seeing. I made a symbol with nine frames in it, from 1 through 9, numbered 1 through 9 graphically, and with this syncing effect, when you select motion tweening and you click on the area, in the Properties panel you can switch syncing on or off.

What syncing means is that all of the keyframes following the sync don't have a line separating the keys, and this means if you click on the first key and tell it to Single Frame, all of the ones that follow will obey that. And this final one doesn't because it's not synced. You see there's a black line separating it. So when I saw this happen on the dialog, I thought, oh no, there is no way to-- there is some way that syncing has been activated and that's going to mess me up, because I like to have the fine control. I like to be able to set the individual properties of all the keyframes.

And so what happens with this was, I obviously tried to remove the tween, and it's something that you often have to do. You have to switch tweening off, if you want to hold an object. And in this case, I can still set this to, for example, Single Frame and the frame that follows, I can make it Play Once. I can make it play from frame 3. There is no follow on from that. So essentially you will see this happen. Don't be freaked out by it. If you add another frame, it will be automatically selected with its own controller, and it's not going to mess you up. It's just, visually, for those of us who are familiar with older versions of Flash, it might throw you for a little bit.

I don't see any reason to panic about it, and I've included this exercise file if you want to play with this for yourself and see if there's any potential trouble. I haven't been able to see anything that's an issue with it. So as I said, just proceed and be aware that you're going to see this, but it's not going to affect your workflow. So with that done, I think we're ready to move on to do the neutral mouth by look.

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.