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.
So we've set up all of our levels, we've colored the outlines, and we are ready--almost-- to start lining and creating the vector work. Before we do that one, little thing to take care of: let's double-click on the hd 1 turnaround symbol in the Library panel and you'll see that the Timeline just squishes in. And some people don't have a problem with that. They just are happy scrolling up and down. I just can't work like that. So luckily, there is a simple enough way to fix that. Let's rip off the Timeline--just drag on the Timeline text and drag it away--and let's drop it in there. And now notice that the Motion Editor got lost.
I don't we think we really need the Motion Editor for this. We can get rid of that if you like, or we can drag it back into that Tab. So now we have a vertical Timeline, and we can close it just about to where we need. One of the virtues of having lowercase is that we can pull this in just a little bit more and still read everything, and a little more room here. I think we should probably get rid of the Library panel, at least as a vertical stack by itself, so let's very carefully strike this back to here. I am just going to drag the Library panel and the Motion Presets here.
Let them all share the one space, and now we can toggle between them here. And as you can see, we've made a nice vertical space for our line area. And the next thing to do will be to save this. So this is a new workspace, and let's call this one rigging_face_vertical. And if we have to go back to the other one with the horizontal timeline, we can do that too, just by simply going back to Workspace and clicking on that. But for now this will speed up the workflow. Okay.
So let's zoom in a little bit. And we will start lining, so there's a couple of ways of doing it. We could create lines. Let's pick the skull for example, so we will select the skull there. I can start drawing, and you can see it appear in here. That's kind of distracting. So let's pick on the Properties Tab. We could do that, and then use the V on the keyboard, the Selection tool, and the N on the keyboard, the Line tool, and pull between them to create these shapes.
But I find there is a quicker way of doing it, and that's just to select the Rectangle tool. That's the one we want. I am going to just get rid of the color in the center. And I think we can switch off Snap to Objects. It gives us a lot more subtlety with control. Now the big question when you are doing this, when you are trying to match the line work beneath is exactly where to place these lines, because obviously the skull will go behind the hair.
We are dealing with the lines, but they are really meant to represent objects that are three-dimensional. So let's give it a little bit more room. And I am going to hold down the Alt+Opt key to create a new point. And something has happened here. You see the Flash is trying to combine these two points together, so I will be very careful as we are doing this that we don't lose that point. Now it's gone, you see. So you find me doing a lot of Ctrl+Z to undo that kind of damage, because I like having that level of control.
I don't like it when Flash snap these lines together. Sometimes I will do that, and you see the point is still there. It's fine. So that's good, and if you have to, we can zoom in. Smooth some of these out, and we go in a bit more precise than that. And let's put it into Outline, and then you can see the beauty of having our layers precolored. With the push of a button, they can go from black to a more gentle color. And then we can move on to a new layer, let's say the jaw, and again, pick the Rectangle tool. And again, whatever color appears in there, we can just color to that at the moment. I'm hitting Snap to Objects so that we can exactly hit those points.
I like to not have little white gaps in the middle so we can overlap them slightly. Now we can switch off Snap to Objects. The big question that you face is, how many points do you put in to achieve these shapes? So my philosophy is, as few as it takes, as few as possible, because that gives you greater flexibility later on, when you want to really begin to play with different shapes for the jaw. And again, sometimes I do this to make sure that Flash hasn't taken the liberty of blending these two lines into one big one.
Okay, that looks good. So again, just do that little test, and we are excellent. So if you click on the A key for the Subselection tool, you'll see that we have 1, 2, 3, 4, 5 points, which is probably the fewest possible points that we could have made that shape in. So now that we've got that done, click that, padlock, and let's proceed to the hair levels. I made different layers for the hair when it's on top of or beneath the skull for later on when we begin to do the turnarounds.
Well, I think for this one we will do the upper one, because this hair, from the front view, will be on top of the skull of course. So let's get that Rectangle tool again. And once more, let's make it an empty box, easier to handle. And I think we need one more point here, so let's hold down Alt+Opt+Drag. It's going a little closer here. Put Snap to Objects back on so we can precisely line that, and then back off again, and now we can switch out to Outline.
And the beauty of switching to Outline is it doesn't confuse you. You can see what levels are done and what remains to be done. We will do the other hair now, and again, remove that, snap on, and snap off, and now we can put that to outline in the padlock. And I think we have the eyebrows next. So the eye right brow. Again go over to that inner color. Alt+Opt to create a new point, pull this in to match. And with this kind of structure you will be able to later on create different expressions.
That's the basic geometry of the future animated scenes will be built upon. So let's go into Outline mode so we can see a little finer. Okay, so again, I am trying to pull this match the original without losing the point control. Now I know some of you like to use the more Illustrator-like spline controls, and I've never been able to really adapt to these very well. I also find that they can be a little tricky to use in Flash. If you are happy with using those controls and if they work for you, then go ahead, but like I said, it's just been my experience that they tend to be a little harder to keep disciplined.
So now we have the right brow down. The left brow of course will be pretty much like that, so let's copy that and then we will paste it in place. Ctrl+Shift+V. I am going to use the arrow keys to move the copy over, and again, we are on the new layer. Another beauty of using the Outline mode is that you can quickly see when you have done something on a new layer. Let's modify that, slip it horizontally, and just pull it into place. I said earlier that I don't flip horizontally. This applies to symbols.
It doesn't apply to artwork on the stage. If you're flipping a symbol horizontally, that's the issue that I find creates problems. And then I think the last component for the moment will be the hair at the top, on this layer, and again, just to leave the color inside. And again, it's a question of using as few points as possible to create the shape. Bear in mind also, this is going to animate. At some point you are going to want this hair to move and to be able to do little reversals.
So you do want it maybe consider that when you're assigning these points. And I think in this case we have enough to make the hair curve any number of ways. You can add more later, but I think this is pretty good. And let's go into Outline so that we can see they are really sharp line. See that little bump there? So let's make that as little as possible. And then just grab these different sectors and cull them to make sure that they have been combined into one big wobbly line, and that's really good.
Okay, and then the neck. And once more, bleed that color. I think we can probably draw the neck all the way through. We won't be seeing much of the neck that's behind the upper body, or behind the jaw rather. It's nice if we can make it align with this point of origin here where the hair converges with the jaw and the skull. And I think we need to hold down the Alt+Opt key to make one more. And now we have all the line work down for the basic first pass of the head.
Of course we haven't done the nose or the ears or the mouth yet, but this will be the first stage in completing the head. So let's start putting some color on this, because people might be getting a little confused by all the lines and figuring out what's on top of what, and this is starting to look a little confusing. So if we click on the Swatches tab and go to the middle red and drop down to the eighth row above the bottom, and that will be our basic skin color. So now we will just start applying it. And be sure that everything is padlocked off so that you can freely color it.
So I am just going to apply it to the neck, the jaw, and the skull. And let's pick that really, really dark black for the eyebrows, and they might be in Outline mode. I thought so. So again, be sure that everything is in solid mode, not in outline. And for the hair color, let's pick the gray right beneath that middle blue. Using these three colors is a really nice way to memorize which exact hue or shade that you are using, because it will be very easy to get lost inside this long line. So this is the one we are using for the hair.
That's pretty good. Now I want to get rid of the lines. We don't need them, so I am going to zoom out, hit the Erase tool--and be sure that you have Erase Line selected--and then just erase everything. Be sure you don't miss anything. You want to make sure that everything is gone. And now we can zoom back in, and you will notice that he started looking a little more cartoon-like. The only problem is that the neck area is exactly the same color as the jaw, and they are blending into one another, and we don't want that. So probably the quickest way to do that is to make this a different color. We could do something simple like make it a much darker skin tone.
That would work. That might get us into some trouble though as we begin to rotate the character. Remember that we are going to be looking at this guy from three quarters in this profile view, and that's probably going to look weird. So instead of doing that, we are going to apply a gradient. So let's click on the neck area, and we will select the swatch. Let's go hit the Color tab and we will select here our Radial gradient. And on the left, click on the left color, and we will type in in the RGB values, the following numbers: 234, 178, and 148. And in the right side, the following numbers: 223, 160, and 125.
Now let's click off there, so we can see, we've already begun to do a nice job of defining the boundary between the jaw and the neck. And actually, if we switch off the jaw, it gives us a better idea of what we are dealing with. So let's--under the Free Transform tool, you should find the Gradient Transform tool, or hit F on the keyboard, and then click on that area. And here you can manipulate the device, so you can move it up if you want a different degree of gradient. For example, if you move within very tight, you see it's not going to be of much use.
We can pull it out to about here I think it might be good. Let's try that. Great! And that still works. So the next step I want to do is to create the ears and the nose. Let's do the nose, because the nose is also a gradient. I am going to hide all the other layers, because I want to see this really closely. So we're going to go on the top layer now. And under the Rectangle tool, instead select the Auto tool, and just draw something pretty neat.
Let's click on that line and delete that. And here, too, let's go reselect everything so we see what this looks like. It looks okay, but I do want to do something a little nice with the gradient here too. So let's select the Gradient Transform tool. And using these widgets here, you can of course change the position a little bit. And this triangle changes the area of focus. And let's go to the swatches again and pick the Color tab and I am going to get some different numbers, so I want to brighten this a little bit.
So on the left side--actually, let's pull that about to this point, and that will be 234 as it is, then 182, and then 149. And on the right side, 247, 219, and 213. And that's feeling a little too bold, so let's--what I want to have happen is the area on top look a little brighter. And if you get lost, just pull it back in. This is quite subtle. Okay.
Now you might find that the area beneath here is like a little too similar to that below, so let's go back in, Color. And if we go to this setting here, H, then you might be able to pull the tone down a little bit. When that's done, I want to symbolize this now, so hit F8. And let's put the registration point, I think here might be fine. We'll call it nose. It's a graphic. Click OK. And of course, Flash puts the pivot down here, so let's fix that, with the Free Transform tool.
Okay. So let's do the ears. So again, the ears are a little tricky. Let's go in a little tighter and hide everything else. And this is the right ear, when I say ear right, I mean his physical right ear of course. So let's make a new rectangle for this, Rectangle tool. Let me get rid of that internal color, and we will do it in Outline. And you can switch snap off at this point. And let's switch back on. I want to make that little space for the Highlight layer. And I want the edge of the ear to be a little brighter than the interior, and then we have to do the line work for this internal shape. And now I am just using the Line tool and connecting them altogether.
Let's switch snap off again. Snap can be too aggressive sometimes, so occasionally, I'll just like to work without the artificial intelligence of it trying to click everything to one another. That's pretty good, thicken that a little bit. And I think we will use the basic skin color, but first let's go back into Outline off. And remember, the skin color was the middle red, eighth row. And for the Highlight on the outer edge of the ear, let's see.
I will use this one. And for the inner ear, I'll use this one. Okay. So another way of getting rid of all these nasty black lines is just double-click on them and hit Delete. Let's look at everything in place again. So I want to go in on the ear, and just make a symbol of that again. So once again, let's hide everything. Just make sure we have the entire ear selected, hit F8, and this time I'd like the pivot to go actually here.
So a little bit different on this one. I am going to just make the pivot right in the middle for the moment, call this symbol ear R, and click OK. And if you double-click, as you can see, the pivot is not where I want this to be; nobody is going to want to rotate the ear from this point of view. So we could, for example, move this to here. The only problem with that is that if this ever moves, you'll get into trouble. So let's undo that. I am going to go back in. Now we've double-clicked on the side of the ear. We are now inside the ear symbol itself. And what I want to do is to move this so that this becomes the internal point around which the ear pivots.
Go View > Snapping > Snap to Grid and pull that there. Now you have a perfect internal pivot that you will never lose. I go back out to the head and reselect Free Transform, and just be sure that you've got that exactly right. And you want to make sure that Snap to Objects is on, and there you will feel it click, right there. That couldn't be better! And then the last step is to move that to there. Now you want to do the other ear. So rather than redoing all of that, there is a quick way, a shortcut.
So we will click on copy that ear, paste it, and we will make this ear function as the left ear, by first positioning it where we want, and now we right-click and duplicate the symbol and make ear left. Now we'll double-click so that we are inside the ear, Modify > Transform > Flip Horizontal, and again, we want to make sure that that completely hits that spot, and it does.
Notice that that symbol has not been flipped horizontally; the internal artwork has been flipped horizontally, but symbol is perfect. It's not flipped, and that will save us many confusing problems later on. So as of now, we have the entire first pass of the head fully colored with the ear as a symbol, the nose as a symbol, and the left ear as a symbol. The remaining layers will be, if you draw a line around them, no blue box, so they are alive. They can be shaped-tweened, the elements with the blue outline we'll motion-tween, and we are ready to move on to the next section.
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.