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.
In this movie, we'll do a very subtle head turn. We are going to improve it a little bit by moving frames from one of our rigs and goes into another which is a very important skill to know how to do. First, before we go any further, I want to show you a fundamental Flash glitch that is the kind of thing that crops up from time to time, so not to get freaked out if you do see it at some point. If you open the library and look at the body test hd reaction symbol, click on that, and when you play it, have a look at this, absolutely weird, and I saw this, and I thought, "Oh no, what's gone wrong?" Maybe it deleted all of my shape hints or something, but there is actually symbols are disappearing here, two at the nose, that's just wrong.
So when I click inside the head. That all looks fine, and then when you click outside the head, let's go back to the symbol, and now everything is just back to normal. So, if you see that happening and your character becomes a faceless wonder, don't panic, simply tunnel into this symbol and back out again, and that will fix the problem. Now there's a couple of other problems that could arise with this, if you have a project file that has hundreds of symbols, that's a lot of work to be going back in, and clicking in one and back out again just to make this bug go away.
This is a CS6 bug that has crept in, in the latest version. So, one workaround is to save your file as a CS5.5 or a CS5 document, and then open it in a version of Flash that's CS5.5 or 5, and it will go away. I've tried this, and it simply does not appear anymore. It solves the problem. The problem is you have to have access to CS5.5, it doesn't help you very much if you only have CS6. I'm sorry about that, I wish I had more to tell you on that, but that is the situation right now.
If you do have CS6, and you have no backward version, then you're basically trapped into using this little workaround. I would also recommend that you check the Adobe website for updates to Flash in case they do get around to fixing this glitch. But that is a situation that we're in at the moment. Anyway, that said, let's make another cool little scene. This one will be a little bit simpler in some respects. What I want to do is to take our head turnaround, hd 1 turnaround, right-click, and duplicate that, and I am going to call it test hd turn, space, test hd turn.
We'll call it turn LR from left to right, click OK, and double-click on this. I'm not sure if we need to embed this or not. I am going to go from the H direction into the A direction, and then forward again into the B direction. That will be the range of motion that we're going to do. So I suspect this is going to be fairly constrained. So let's just work inside here inside our test hd turn LR symbol.
Let's get rid of the reference folder, let's clean up a little bit. There is all kinds of little bits and bobs around the place that can be cleaned up, but this is always the way of Flash. Little bit of housekeeping from time to time keeps your files clean. So, let's get rid of all of the poses that we don't need, and that's C, D, E, F, and G, and we don't need these two. So, we are going from H to the A pose to the B pose.
So, what I'm going to do is select these two, and this might break some of our shape hints, but don't worry, we'll fix them in a moment, and just drag that to here. Super simple! That's all we're doing. So, of course we've got some broken business with the ears. This always happens when you do this kind of thing in Flash, there is hints or there is extra frames and spot to spot, don't worry about that. So, let's stretch this out a little bit. It's a bit fast.
There will be two more empty frames, hit F5, one, two. Next, I want to correct this ear. So, I click on that to find what level we're on, and we need to put an ear in that level. So, let's copy this one, Ctrl+C, Ctrl+Shift+V, so now we have two and put a blank frame after that. So we hand it off. That's taken care of the worst of it. The right ear seems to pop on a little bit.
So, let's see if we have one beneath. We do right there. So, Ctrl+C for that, that's on this level, and if I put it up here, however, it will pop on top of his head. So, let's copy this ear, Ctrl+C down to here, Ctrl+Shift+V, and you see it just got a little bit darker, and now we can black that out. Let's see if that works. That's better! Okay, so that's basically it. If this was a head turn, I wouldn't want to be moving the neck so much.
It's more like the whole body is rotating. So let's just go with this neck position here. So, I'm just going to drag that back to there and delete this, Clear Keyframe, and maybe adjust the neck in a little bit, but this is a better sense of what's going to happen. So what I want to do is just pull that neck in a little bit, padlock everything except the neck, coax it in, do that, let's track through. That seems to work better for most of them.
If you were animating a head turn, I always stress this isn't going to be the be-all and end-all animated head turns, let me just fix this little neck. What I want to do is to show you how you move frames from one comp into another. So, what I want to do in the middle of this turn right here is for the head to dip down a little bit. That will be a much more standard way of doing a head turn, and if we didn't have this already done earlier, we'd have to go in and move all these objects down, and there are so many of them, and we've already done this work in our other rig.
So let's go into that, open the library, go into the hd 3 clock, and if you remember, our 6 o'clock position already has all of that work done, including changing the shape of the hair, and we can obviously make this a little more subtle, but this is the bulk of the work already taken care of for us. So let's just select all of these, copy those frames, and now go back into your library and back into the test head turn left, right, and now currently, we have A, select that stack, right-click, and go Paste Frames and watch what happens to the head.
Flash has inserted a keyframe here that we don't need right after our paste, get rid of that, right-click, and go Clear Keyframe, and now we have a much nicer little head turn, of course a lot of these shapes need to be fixed and so let's see what that's going to entail. Skull will probably be fine. The left hair will get small and disappear almost.
So we probably have to add some hints in here, so same process again. Go to the Properties panel, insert a blank label, 5 hints, A, B, C, D, and E. There we go, click and match them on the second. Again, remembering to back up your file before you do too many of these, and we need to fix these here as well. Okay, super! Now, we just repeat that process, and there may have been a little bit of slippage here, so pull the hints off.
If I see things like this, it tells me something got moved, sometimes it is easier to move them all, A, B, C, D, and E, great! Same, let's not wonder it's flickering. It's good, okay, and we just keep going, and we need to fix these here as well.
So, let's just click off this. So now let's unhide everything, and it's looking a lot less scary now. When I looked at it first, I thought, "Oh no! I think this is going to be a nightmare!" But we fixed a few hints here and there and suddenly things are looking really polite again. So, from here to here looks pretty good, maybe there's a slight issue with the ear at this side, it needs somewhere to go to, and that means we need to adjust for a layer again, and that's the blue ear here. So, let's see, from this point on, that ear should be on the bottom level, meaning that you go from here to--let's see, would it be here? Actually, it should disappear from this level, so let's put a blank frame in there, and let's fix the neck.
I am going to put a keyframe in there, and just pull that neck in, and that's it! So, this is a great help when there is a little bit of business going on, on the top of the hair that needs to be fixed, but I think you get the idea from this, and if you had a lot of very detailed characters, actually they are the ones that really pay off on this, if the character was super simple, and you could probably make up all of these little positions as you go along. But with this guy, he has got so many levels, I don't won't to be messing around with these every time I need to do a head turn.
This way, I can create the different angles for the head. The system that I used during this course is my own system, you might find it's not even complex enough, you might need more positions or less. But this is the general methodology that I use for years now to pre-create all of these little poses and directions that give a level of subtlety that is just time-consuming to have to add if you have to do it for every single keyframe and to do animation that goes beyond the usual flat Flash symbol pushing style. So in the next movie, we're going to do some facial acting and make the character really show some emotions.
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.