Start learning with our library of video tutorials taught by experts. Get started

Rigging a Face in Flash Professional
Illustration by John Hersey

Creating mad or sad mouth dialogue shapes


From:

Rigging a Face in Flash Professional

with Dermot O' Connor

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.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Rigging a Face in Flash Professional
6h 46m Intermediate Sep 19, 2012

Viewers: in countries Watching now:

In this course, author Dermot O' Connor offers experienced Flash designers a step-by-step guide for creating and animating a full-featured cartoon face in Adobe Flash Professional. The course begins with some best practices for setting up the rig and moves on to building facial features such as the mouth and eyes, sculpting the mouth to simulate dialogue, and creating a range of expressions. The course also shows how to rotate the head using poses, move the rig along multiple axes, and incorporate audio.

Topics include:
  • Setting up layers for the head
  • Animating blinks
  • Fine-tuning expressions
  • Fixing layering issues
  • Adding expressions to the animation
Subjects:
3D + Animation Character Animation
Software:
Flash Professional
Author:
Dermot O' Connor

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.

There are currently no FAQs about Rigging a Face in Flash Professional.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Rigging a Face in Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.