Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
As we've already mentioned, the ears are giving us trouble, so they are in their right physical position, but they're just the wrong shape, and that's obvious, because you can't have the same direction of the ear around 360 degrees. So let's see how we will fix that. So let's just click on the right ear. We'll switch off everything; keep things nice and simple and clean, except the jaw, the neck, and the skull, so we can really see the amount of motion on this thing. We get to this point and I'm going to put the reference layer on beneath, and going to go to Outline mode, and let's go in and take a look at this.
So already by this point here by the D angle, this ear should look quite different. So what we're going to do is go to the labels at the top, right-click, and go Copy Frames. And then go to the ear symbol, that's right here, double-click on that, and now we're inside the ear symbol. And if you go into Outline mode again, we can see next to the image that we want. Now what I want to do is to create for the ear symbol its own internal timeline and its own internal selection of ears.
So let's make a New Layer and right-click on the New Layer > Paste Frames, and then just extend the timeline, hit F5, and right under the D, here's where we're going to make a new ear. So hit F6 for that. And I don't like this light green, it's not a really great color, so let's pick dark green for this, so you can actually see ourselves in Outline mode. And there are a few different ways of doing this. Let's split this onto some layers and make it a bit easier. So what I'm going to do is make a new layer, take this inner color, for example, copy it, and on that external layer, on the upper layer, paste in place, Ctrl+Shift+V, and actually let's just do the same thing for, hold down the Alt+Option key and copy that, and we'll take it off this.
So just Eyedropper, paint it out on the bottom layer. So what we have now is two frames that are of the same, with no internal line. On the top layer we have the internal shape, and now we can start playing around with it. So frame 1 is great, it's exactly the way it was. Frame 2, let's start pushing that. So I'm going to select everything, draw a box around it, and with the Free Transform tool, just pull this into place. And even though it's slightly different, I'm not going to heroically try to match the reference drawing. I'd rather have this be a little bit closer to the original state.
It will make a much better transition. And let's thicken the highlight area. I am switching Snap off so I can get a much more fine level of control over this. And this is why I like having this fellow on its own layer, it just makes a little bit easier to control, zoom in a little bit. Actually if I can padlock that and select the layer. It's getting a little too thin. I'd like it to really match the line weight of the first one.
I don't like it when these feel like you've just grabbed them and skewed them really thin, it looks kind of lame, whereas this looks more like an original piece of work, which it is. Now this is on Frame 13, which you can see down here, on the current frame marker. So let's go back to the external clip, the head turnaround, and on this I'm going to click on that, and in the Properties panel, under Looping, set to Play Once, and I'm going to set it to 13. You can set it to Single Frame as well if you prefer. What I'm going to do here is try to make a few of these so that we can actually get several different ear images working here.
So let's zoom out and already we have, I think you get the general idea, the ear in a much more believable position. By the time we get to here, we need one more, and this will be on the E frame of the internal, and that's number 17, so let's click on that. And again, notice, I'm not flipping anything horizontally. These symbols, both the right ear and the left ear, are in their natural position. They're not being mutated beyond having extra pieces of artwork inside them. So let's make the E an absolute mirror of this, but it will be the internal shapes that are being flipped, not the symbol itself.
So in this case, we're looking at the back of the ear, we don't need that inner shape. So select the lower level, Modify > Transform and Flip that Horizontally, go in really close. And I'm just going to use Shift and the Arrow Key to get it closer. Click Snap to Grid on will get us to snap to this little thing, View > Snapping > Snap to Grid, because I want that to be exact. It's a little bit off on this, so let's pull that in as well, there we go.
How great is that? And now we could probably use some in between frames between this and this, but first let's see what we look like. Also, the A here will probably start coming in somewhere around here, but for now let's just see what this looks like by itself. So we have to correct the looping instruction, and we're on frame 17, which you can see down here. So let's go to Play Once, frame 17.
Now we go from the first frame to this pretty quick, and then we have 1, 2, 3, internal frames before we get to that, and maybe one more in-between. So what I'm going to do is show you how to do a manual in-between in Flash. So let's click on this, go in really close. I used to do in-betweens by hand back in the day, and it turns out to be a very useful skill in Flash.
Let me make a couple of empty layers, and we want to go between here and here. And I'm just going to make one between these two extremes. So let's make a blank here and here. I'm going to make another empty frame here, so this will be our first frame. Hit Ctrl+C, Ctrl+Shift+V to paste it into place. Go into Outline mode so we have this proper outline, which is the first frame, and we're trying to in-between into this one, so Ctrl+C and Ctrl+Shift+V here.
And let's hide the two layers. So now we have copies on one layer of our first and our second key. And let's pick nicer Outline colors for these, we'll pick medium green and medium blue, so we can see them. Okay, so let's draw. We'll use the line tools in Flash for this. Let's make some marks here. So I'm going to make this a hairline. I like using a hairline color for this. Let's put Snap on so we really get precisely onto that, and now we can switch it off.
And by holding the Alt key you can just pull the line and make new points, and I think we want to switch off any other snapping like Grid. So if you have a tablet of course, feel free to draw it. I'm working with a mouse, so that even those of you that don't have tablets can get the general idea that you don't have to have a tablet to do this. And also padlock the two lower layers so you don't interfere with them. I'm going to make this pretty quick and dirty, again, just to give the general idea.
Make a Snap back on, and if it's hard to see then hide the other temporarily. Okay, and then one more, that will just color this for the highlight area that defines the edge of the ear so we can see it. And then Snap off. Nice! There it is. So now let's color it.
I'm going to get rid of these two and drop that, let's see where we will put it. So we have this and we have this, so let's just drop this down to here, and move that blank frame to there. So we're going from the start position to the skewed forward, to this intermediate position, to that one. So now I'm going to use the Eyedropper just to grab the colors and paint, and let's double-click on the lines to get rid of them.
And now when we go back to the head turnaround, there is the intermediate frame. And of course you can add as many of these as you like, and probably one more on each side wouldn't hurt. Let's go back into full color so you get the idea. And you might think how few--how many of these do I need? It's really a matter of your personal taste or the style of the project that you're working on. It depends on how naturalistic you want it to be. The exact same process will apply to the left ear.
So what I'm going to do in the meantime is leave the rest of this to you as an exercise. I will provide the final artwork with the smooth in-betweens, so that you'd be able to see that in the exercise files. But this is a really, really cool trick to have up your sleeve and it will really help you to sell all kinds of illusions that will otherwise simply would not be possible. Small thing, we have to deal with the layering a little bit, but again, that's something that I'm going to leave to the final fine- tuning pass of this particular section.
So with that, I think we're ready to move on to--first of course, please have a go at fixing the left ear, and feel free to use some of these as reference of course. Don't copy this horizontally onto the left ear, that's a shortcut that you really should avoid, but do feel free to take the internal timeline and copy that into the left ear symbol. That's not a problem. So with that, we'll move on.
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.