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

Rigging a Face in Flash Professional
Illustration by John Hersey

Adding expressions to the animation


From:

Rigging a Face in Flash Professional

with Dermot O' Connor

Video: Adding expressions to the animation

In the previous movie, we took a simple short line of dialog, and we arranged the mouth shapes so that we brought this thing to life and made it speak. (character speaking: I'm happy! But now I'm mad!) Great! So now the next step, obviously, is to place that inside the face. So let's go into our Library panel and see how we do that. And the best way will be to pick our facial acting rig, right-click, Duplicate this, and we'll call it facial acting dialog, and that will match our mt A dialog symbol that we've made our dialog in. So click OK to that, and there it appears.
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

Adding expressions to the animation

In the previous movie, we took a simple short line of dialog, and we arranged the mouth shapes so that we brought this thing to life and made it speak. (character speaking: I'm happy! But now I'm mad!) Great! So now the next step, obviously, is to place that inside the face. So let's go into our Library panel and see how we do that. And the best way will be to pick our facial acting rig, right-click, Duplicate this, and we'll call it facial acting dialog, and that will match our mt A dialog symbol that we've made our dialog in. So click OK to that, and there it appears.

Let's double-click on that in the Timeline, in the Library I am in, and now let's make a few little fixes here to line these up. What we need to have happen is to have the timeline of the face perfectly match the timeline of the mouth. So let's double-click on the mouth now that we see it next to the face, and that's the wrong mouth, so let's go back out again. I am going to go back into the Library. Happens a lot this, so bear with me. So now we have our hd 2 face symbol.

I am going to move the timeline back a little bit, so we can see the name of that. We don't want to get lost, so here we go! And the mouth right now is the wrong mouth symbol. So let's right-click on that, and we'll swap the symbol for the mt A dialog, and that's the one that has our great mouth dialog in, so there we go, and let's test that again, click on the mouth. That's it! Next step, select the sound, emotions, and shapes, so click this, hold down Shift and click on shapes, or Ctrl-click, click, click, right-click on that, copy those frames, go back into our hd 2 facial acting dialog scene, or click here, and then on the three new layers on the top--we'll make 1, 2, 3--I am going to paste those layers in here, and let's get rid of this little reference folder, we don't need that anymore.

We created that when we were rigging the thing, but obviously we're done with that now. Okay, so now we have if we play through. (character speaking: I'm happy! But now I'm mad!) That's great, and then we have at the end of this, and I am going to just move these to the back just to clear the Timeline. So now we have our Timeline and our custom faces. So the problem will become how do we integrate these custom faces with the dialog? So usually it's easy to get a little bit flustered and quit before you even begin with this, so let's start with basic principles, and we'll work forward.

(character speaking: I'm happy! But now I'm mad!) Okay, so for the first chunk of this, he will start out in the happy face which we can see from our labels here. And actually, these happy labels are kind of confusing because they came with the rig, so I am going to delete these, make this easier to follow, and let's pull this forward by 1, right- click and clear that keyframe. So the only labels that we have now at the top are the ones that tell us where our different emotions should go here. So I like the first one of course, it's nice to start in the A pose, and we'll start from here, and stay happy until about this frame.

So let's put a keyframe in here. And also one little thing to be sure of for whatever reason, make sure that your mouth symbol on the first frame in the Properties panel under Looping is set to Play Once and is set to frame 1 from the start. That way, all of your future frames will line up and play perfectly. So at this point here, we're going to go to mad and sad, so let's make a little F7, a blank keyframe just to make a note of that, and I want to go to the end and pick the angry face, that could be about this one.

So let's select that stack, hold down Alt/Option and drag and move it to there and see what that looks like, and it's probably made a bunch of keys for the mouth that we don't need, so let's delete them, put the mouth level as one continuous line. (character speaking: I'm happy! But now I'm mad!) Great! So you're getting the rough idea as to how this will work by now. So let's pick a big bright happy face for the D mouth.

If you remember the custom happy mouth that we used for the previous movie right here, that's where he is at his absolute happiest, so I am going to make a little note there. And actually that wasn't an A mouth, that's a D mouth, so I am going to fix that in the Properties. This will be a custom mouth, so let's call it WIDE, and it's nice to use these labels to make little notes and reminders for yourselves, because it's very easy to get lost with these huge timelines.

So again, let's go forward and get the jubilant face and hold Alt/Option and drag that back to here. (character speaking: I'm happy! But now--) Okay, now there is some weirdness happening because this symbol for the mouth got pulled in, and it's the wrong one, so let's right-click on that and go clear that keyframe. (character speaking: I'm happy! But now I'm mad!) Okay, so there is a lot of stuff going on that needs to be fixed with these tweens. So what I am going to do is to hold the neutral start frame until this point here, and then I am going to start activating tweens.

So it's just a method of right- clicking on each layer, and it allows you to Create a Shape Tween, you Create a Shape Tween, and if it doesn't, then you make a Classic Tween. So here, for example, we can only do Classic Tween because it's a symbol, on these layers as a shape, so we apply Shape Tweening, and we go forth. Let's see what that looks like. (character speaking: I'm happy!) Now, I think the face is moving a little fast with this. I think we should get him into that happy a little sooner. So I am going to drag that to here, see what that's like.

So really it's just that wide open flash of happy, so I am going to move these forward just a little bit. (character speaking: I'm happy!) I am not worrying too much about the mouth right now, but if it does get to annoy you that it's on the wrong frame, then select those new keys and just get rid of them. (character speaking: I'm happy! But now I'm--) Okay, looking good! So then we want the transition from the end pose, the regular happy pose, into the mad or sad pose. So let's keyframe that, and we'll just start making tweens again.

(character speaking: I'm happy! But now I'm mad!) Looking better, so you get the general idea about where we're heading now. So let's fix some little things that are flashing, the creases around the mouth, and I think that's because when we dragged the lines back, there were some layers that got left out. So I can correct that. So that's on this layer here. So the uppercase layers, and this is where it's nice to have uppercase for the custom layers that we use for this symbol that need to be added.

So I am going to hold down the Alt/Option key and drag them to where they will fade in and fade out, and we obviously don't need them here, so let's right-click and remove those Tweens. And here, adding the creases means that we would have to make them move with the mouth. And frankly, for the purposes of this tutorial, it's too much work, but it would be a matter of your personal preference whether or not you wanted to have these creases added for all of the rest of the dialog.

But what I am going to do for the moment is just take them out. So on these layers that are marked uppercase, let's just delete them, and we don't need them here either, so we'll delete them there too. And by here, of course, they are invisible anyway, so I will put a blank keyframe in there. Now, we only see them for this gesture. (character speaking: But now I'm mad!) Now, as you can see, he is tweening here at the end, and we probably don't need him to tween, so let's select these and go Remove Tween.

(character speaking: I'm happy! But now I'm mad!) Now, he goes into that really fast, so let's see if we can punch that a little bit. (character speaking: But now I'm--) So maybe we can add an extra expression because we have this puzzled expression as well. And don't worry about these lines here, we're just going to work with--and the mouth is very distracting, let's switch that off. It would be nice if we could work this shape in. So let's select these instead, grab these with the puzzled stack, hold down Alt/Option, let's drag them in here.

Maybe we can go to puzzled first and then take him into angry, that will be a nice transition. So I'm going to put puzzled to here, select angry, and just let's replace them one to the other. I think I accidentally dragged one to the wrong layer, so let's undo that. You have to be very careful when doing this so you don't accidentally move like one down, or you will cause a problem. So I will have him in the furious here, and we'll begin with puzzled, and once more, let's get rid of the creases on the face, and we've also probably generated a bunch of mouth shapes that are in the wrong state, so let's right-click them and clear those keyframes. So now we're looking better.

(character speaking: But now I'm mad!) And let's slow this down a bit. So I am going to pull the angry face forward just a little bit, so he gets there a little bit slower. Now you can see some weirdness happening with the mouth because it's not tracking the motion of the nose. So let's correct that. Now, we can put in keyframes for the mouth where they are needed. So I am just hitting F6 to do that, right-click on these and Create a Classic Tween, and if you think that mouth is a little high or even too big, you can use Free Transform to apply Motion Tweens and make smaller adjustments or even rotate these, hence the beauty of nesting all of your animation inside other symbols.

And by here, let's move that mouth down because that looks mighty strange with that nose there, so let's see what this looks like. (character speaking: I'm happy! But now I'm mad!) That's much better. So just for the sake of cleanliness and making this timeline easier to follow for the tutorial, I will remove these frames. (character speaking: I'm happy! But now I'm mad!) Imagine how long this scene would have taken me to animate if I didn't have access to that beautiful library of pre- constructed expressions. It would have taken hours.

I would have been here all day, and instead I've been able to put this little scene together really in 20 minutes. It's astonishing when you see actually in practice and in real-time how little effort it takes to do this. You do have to practice with the rig and get used to it and maybe build your own, and you will be really intimately familiar as you create your own characters and develop your own methods and systems. But let's look at this fellow one more time. One last thing I would like to change is, again, adding a slow in here, very important, and I like easing in--or easing out rather--80% usually gives a really nice feeling.

(character speaking: --now I'm mad!) Oops! Let's go back and fix that. So what I am going to do is simply go through all of these, add 80 out, and that gets rid of the mechanical feel where everything is moving at the same consistent speed. Let's see what that feels like. (character speaking: I'm happy! But now I'm mad!) Great, and I feel like the mouth at the end gains a little bit of volume from here to there, and there is a beautifully easy fix for that.

I'll make a keyframe under the D, make a keyframe under the A, and you can make it as small as you think you need, or even rotate it, and if you want to do something like rotate the nose, for example, then again, make a keyframe in the same place, Create Classic Tween, Create Classic Tween and maybe do an Ease Out again and then Ease Out here, now we can move the nose just very slightly, very slightly.

And again, nothing stopping you from adding little custom movements here. If you wanted to bring the eyebrows down, for example, simply add more keyframes. Use Free Transform, hopefully the shapes will continue to behave. Let's squish them a little bit. (character speaking: I'm happy! But now I'm mad!) There we go! So that's the method, and as you can see, we break it down into two steps, first pass, we do the dialog, on the second pass I match the head to the mouth.

You could of course do the other way around. You could animate the head animating first and then add the mouth in. It really comes down to what workflow is going to work best for you. I like to begin with the mouth and workout, you might want to animate the entire body, then animate the head, then animate the mouth. I am not trying to encourage you to do one or the other, but I find this is a good approach for me, as you can see, it's a very nice squishy plastic feeling, and other things can be added, for example, if you could articulate the jaw here on this like really wide open motion there.

There is really no end to this, you could keep going, adding more and more subtlety and more and more animation to it. So, as you can see, it's possible to use this system to animate rich lifelike characters very, very quickly. Imagine how long it would have taken me to animate this scene from scratch. It would have required hours, and instead, I was able to put it together in just minutes. So this is the payoff for all the really hard work that we did at the beginning of the course. This is a very flexible powerful way to animate, and I think it's pretty amazing.

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

Share a link to this course
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

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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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.