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.
So now it's time to make the motion between the four compass points that we've finished complete and fluid. So during the course of rigging the different angles, we've been moving some of the ears. This ear has been moved up to its own level, and we moved the left ear onto its own level above the normal ones, but they are not going to tween properly if we keep them up there. So just as a temporary measure, I'm just going to ignore where they should be and just put them where they are best suited for a smooth tween, and I'm going to just put up another blank in there to keep it nice and tidy. Same thing for the left ear, bring that down to here, same up there.
And I'm also going to help make the motion continuous, I'm going to add an ear. Let's look at this in outline. There is no left ear on this frame, so let's add one in, just as a little placeholder. I'm just going to very quickly slide it behind the head. Same thing for the right ear here, close enough. And now let's activate tweens for all these layers. So if the layer is already green, then it's a Shape Tween, if they are blue, it's a Classic Tween. This will give us a very rough idea about what the final animation is going to look like.
Okay, let's hide the reference for the moment and then activate color, and in general in broad strokes it's working. There is some sliding going around and that's because shape tweening has been asked to do too much. So we can fix that luckily enough. And a two-step, three-step process, and it's going to involve making shape hints, and I'll make this as painless as possible. So let's go down to the neck. That's the big culprit. Switch off everything except the neck layer and you'll be able to see what's going on, on several of these keys. So let's add some hints, and a lot of people don't like to use hints because they just don't realize how powerful they are.
They are pretty cool. The one warning I'm going to give you is that they can be prone to crashing. Sometimes you'll create combos that just freak out the program and it will crash. So before you embark on applying a bunch of shape hints, backup your file. So let's add a few, and we'll make sure that Snap is on because we really want them to-- I think they might even work without snapping. I think they snap by themselves. Yes they do. So let's add a few more. I know this one is going to need about four to really lock it down, and we'll go to the next key, and we'll just apply the same points; a, b, c, d.
That's it, that's what we do. Every time, and here is a trick I had recently developed, actually in the course of building this course, I knew it was going to be confusing with some of these transitions having shape hints and some not having shape hints, and I wanted a way to make it obvious that we actually had hints on a given frame. So open up the Properties panel, and in the Label, type in an empty space. Just space, that's all, hit Enter, and then you'll see a little red flag appear. And I advice you use this to signify every time you've applied shape hints directly to that frame.
Don't put a flag on this frame. This is where they end, but this is where they actually begin. As long as you're consistent with this, you will find that they are very helpful, because it flags trouble spots. So basically we proceed with the same process, with any other layer that has a problem. I'm just going to focus right now on this section here. I'm going to ignore the rest. This will be too much to deal with at the moment there. So let's look very carefully for any other problems. I can see one right off the top and that's his hair. I'm going to hide everything except that. Oops! And there you can see something bizzaro happening.
So let's add some to that. And again, before I even start, let's just put the--I am going to put the little space on the Label, sometimes it's so easy to forget, and let's add some hints. Let's throw some down at random. Ctrl+Shift+H to add the Hint. So in this case, the hints worked first time, and often they don't, and many times you'll find yourself having to move the E into the D spot, or the D back again.
And it can feel like you're never going to get it right. So treat them all as potential Rubik's cubes. Some of them can really be doozies, so I've spent up to 10 or 15 minutes on some of these, but it's always great when you get it right the first time. And I wish I could tell you there was a formula. We may end up falling over some more later on in the course as we go on, that maybe take a little more work than that, but that was almost way too easy. So I'm going to move out for a bit. So now we have the 12 o'clock tweening into the 3 o'clock. And let's look at it in outline and you'll see the ears as well, because some of these obviously are on layers that we can't see, and there is some nice stuff going on, in particular the hair here, which seems to be wrapping around the head in a very real manner.
Now the next thing I want to do is to establish the 1 o'clock and the 2 o'clock positions, and right now what we have is a kind of a diamond pattern. Flash creates directly straight paths or in- betweens between keys. It doesn't make curved arcs, at least not in this Classic Tween mode. So what we have to do is manually create the arc in between stacks, the frames for these slots. So in order to do that, let's be a little more thorough. So I'm going to make a new layer and use some old- fashioned traditional animation techniques for this.
So on this top layer, select the Brush tool, pick a really bright color like red, and just make a little mark for the tip of the nose. Pick a point, tip of the nose is good, that's consistent. And we are at the 12 o'clock position, go to the 3 o'clock position, draw a little x, 6 o'clock and 9 o'clock. And right now this describes a very flat diamond. Now what we also have, I'm going to move our reference folder just below this.
What we also have in here is a little graphic I've created to help us try to get a nice little arc pattern going. Unpadlock that, so I can select it. Now what we want to do is just nudge this thing, and use the Free Transform to stretch it out. It gets a little bit off center. It looks like our original setup wasn't quite as geometrically perfect as I would have liked, but it's close. There is a little bit of offset on this side, but I think we can pretty much follow this path for the nose. So let's padlock that, and now we can get rid of our Layer 2 up there, we don't need that anymore.
So now when I establish the keys for the 1 o'clock position, it tells us where to put the tip of the nose up here, and that will give a really nice curvy action on it. So let's padlock all the layers except the ones that we are going to move, the nose and the eyes, and the mouth. So now we can just select those pretty confidently, even drag them down here if we want, and then move them until the tip of the nose falls directly here.
Done! That's relatively painless. And we're seeing a little bit of flashing again. Now what's happened there is that when we created these shape hints and we made this artificial key we'll call it, because Flash made this. We didn't. The hints are out of order. So let's go, Ctrl+Shift+H and fix them. So I'm going to right-click to remove the new hint that's just being generated, go forward one and reposition these, and that should be easy enough to see where they are.
Again, I'll remind you always backup your project before you go applying too many of these hints. And it looks like we don't need any hints for the next chunk, that's good. And the neck also, remember it has a little red flag, so the same thing will apply to him. So any of these might have fallen out of position, and now they are good. Always watch the corners on these in case any little extra lines or bumps start appearing, but I think that's pretty clean.
Switch off the padlock there. So right now I'm just looking at this section here. It's looking very stable. Now we're seeing a little bit of Flash on the next one, so I can see the neck needs more hints for the next leg. So let's switch off everything except the neck, and we're going to add more hints to get us to the next little bump. So go to Properties, put a space in the Label field, so we could again flag it for ourselves, so that we don't forget there are hints going on here, and Ctrl+Shift+H four times. And once again, we apply them.
Go to the next key, and now let's move through that and see if it's--it looks stable to me. We were seeing flashing again but only in this selection, but from here to here where the hints are operating, we're good. So I'm going to keyframe this stack, and don't forget our clock. So let's padlock this entire layer. Unpadlock the bits that we want to move, the nose, the eyes, and the mouth.
Let's select them all and we want them to go right there. I'm going pretty close. Just to follow that arc guide. This is better I find than eyeballing it. When you eyeball on this--I think something has gotten broken there. I wonder what that is. Hopefully--I see what it is. It's actually the one on the clock, so we don't have to worry about that. I thought for a moment that a little chunk of my eyebrow had broken off.
Now let's go through again and see if any of the shape hints need, and again, I told you it was a two-step or a three-step process, so we have to go back in and correct any of these flashes. And there we go. And I think--see here, there is a little--I'm going to go in close so you can see this. This is the thing to watch out for. It means something somewhere has generated too many points, so it may be just that we need to add more hints here.
But before we do that, I'm going to test this by using the Subselection tool, and now what we have is a culprit. Every time Flash creates a keyframe between two shape tweened objects, there is a danger that it will over compensate and create things where you don't want them. So what I'm going to do instead of adding yet more hints I'm going to just clean that up. So let's pick one of the earlier pure shapes and Ctrl+Copy that, Ctrl+Shift+V to pop it in, and I'm going to go to Outline mode so we can see it.
Use a Selection tool, Snap on, and just re-create it. Pretty simple. That's such a simple shape, it only takes a moment. I'd rather do this and have objects with additional hints on them. I can just click it and drag down here, reapply, Create Shape Tween, and fingers-crossed. We're good. No need for a hint. We could apply the same methodology to the previous one. It's possible that this actually had those two. Let's just go ahead and clean that up as well.
It's a matter of your personal preference. If you prefer to have more hints, but like I said, I just think it's cleaner to not have the things if you don't need them. What I'll do is drop that down to here, right-click, Create Shape Tween. Oops! Something broke somewhere. So let me just add them back in again here. Now for many of the sections of this course, I'm not going to be doing this, because it would simply take too long. But it's a good process to keep in mind for yourself, because obviously the fewer points the more stable overall you are going to be.
And obviously don't forget to--you need to reapply the little label just as a reminder; shape hints are here, and that's your map. So let's have a look at the overall section, and apart from the ears going onto the wrong level, which is temporary, I think it's looking good. It doesn't look like it's moving in a clunky straight line. So that's it. That's the process that you follow. It's the same process, identical for the rest of this to create these.
And you don't forget you have your clock which will help to construct the positions of the face. And as long as there's no flipping of symbols horizontally, and there is absolutely no reason why you would, then this entire section can be done to match the quality that you see from here to here. I will leave the remaining sections for you to do as an exercise. In the next movie, I will cover the layering issues and how we deal with the fact that the ears move from the top of the head to the bottom of the head and back again.
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.