Start learning with our library of video tutorials taught by experts. Get started
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.
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.
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.