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