Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Flash Professional CS5: Character Animation, Dermot O' Connor explains the process of character animation in Flash, using nested symbols and motion and shape tweening to create believable characters. The course covers the process from start to finish, from rigging a character to creating a walk cycle animation. Along the way, Dermot demonstrates techniques such as animating eye blinks, head turns, and mouth movements during dialogue. Exercise files accompany the course.
Let's get started and we're going to finish this head turn. So if you go into your exercise folder, Chapter 4 - head turn, and it's file number 07. And let's double-click on our guy on the stage and let's get rid of those thumbnails. I don't want to look at them anymore. So we're going to add some finesse to the head turn. So let's look at what we've got. So first thing that comes out, the character starts to look from left to right. He really should blink on the down point, so let's do that. That's an easy one to add.
So don't forget we have the little nose at the top. That will help us position the blink. I'll double-click on the eye. Now as you can see we already have the blink in there, just on the wrong frame. So let's grab this, hold down the Alt+ Opt key, just drag the entire blink over by one frame, and let go. And then we can just drag this over to where you'd like the closed eye to be. And I like to get rid of the tween at the beginning. I don't need that in there.
This is our blink for open, close, to open, so that should work. That should repeat that on the other eye, same process. So here we go, and that'll look even better in context on the outer clip. Great! Other things we can do just to help to fine-tune this is add a little bit of tilt information to the head,. So for example, in this down position and actually here is a good point. We can push this a little more, just a bit more, not too crazy.
Let's un-padlock all these, and the same thing on this one. Trying to make that transition as smooth as we can. That's the tricky one. But it's moving into this down- tilted the head position to this one. So let's click on that head and I'm going to use frameEDIT in, and that's -- remember that is kind of moving down a bit. So let's move some of his body parts down and his face parts.
You'll be surprised by how subtle the overall effect will be and hopefully it'll help save this from the awful Flash-y effect that we're just snapping the head from one side to the other. Don't forget, these eyebrows can be shape tweened, and the more we can push them the better. People I think don't really expect to see aggressive shape tweening on this kind of animation. And don't forget, this point here it's actually the forehead. That's where the joint happens to the eyebrow, so that will really be important.
That looks great, so there we go. I'm going to skew this a little bit, and can't really go too crazy with it, but there we go. So try to stay on model. That's your big problem here. Keeping these characters on model. So push them as far as you can, without making them look like somebody else. Bringing this hair down. It's kind of important too. Or selling this drop. As you can see now this ghastly gap has been opened up. Working with this hair mask as a symbol, I think it's going to cause us problems.
So what I am going to do is break it apart and shape tween it instead. So let's hide that here so we can see the issue that we've got to worry about. So I'm going to break the first one apart, and that's Ctrl+B. As you can see it's gone live now. Same there. Now we see these little black dots. That's Flash saying, "Oops, something wrong." So let's remove the tween. That making a shape tween and then there is a solid arrow, so we're good. So the down position for the upper hair will be more like this.
So let's pull this down and let's go into outline, so we can grab our points a little more effectively. See if that works. That is beautiful, look at that. Let's see the same for the other side. And again the familiar black dots, so remove that bad tween and insert a shape tween, and then we bring that down, join that point.
Make sure these two are snapped together. And let's go solid on that again and make that solid again. And often, too, wiggly is happening. That's nice, so let's check the first part of that. That's much better, pop to here. So the same thing here, very important this one too. That's the head tilted down. And I'm using again the Shift and the Arrow keys.
It looks almost funky, but you often could be amazed when you see how difficult it is to notice how broad this motion is on the outer symbol. Let me bring the chin in a little bit, and again don't forget this point here is connecting to the eyebrow. Make sure that works. The in-between is great. Nice! Okay, it looks like a huge forward here. Let's get rid of that. So we'll go to outline on this upper one, and we also break apart this symbol and this symbol.
They're both correct. And the others too, here and here. Let's remove that bad tween and make it a shape tween. So on that down position here, I'm going to actually take the forelock and pull this one down quite a bit. Again, see how much we think we can cheat, lock that again, and then let's start pulling the hairline. And now I want to go into outline to select this point here.
Oops, let's take Snap off. It's being unruley again. Okay, see if that works, great. No need to shape tween anything. That's always a bonus. So now we are going to go into the outer turn. Great! There is one last little detail we can add. I think that will help. We're going onto a down position on the head here, snapped to here and up. But on here I'm going to actually push this up pose a little more. You can see from here to here it's not really changing very much, so I'm going to take that head, just tilt it a little bit.
Free Transform, it's great little tool. frameEDIT into this. This should be our up point and that will be the tilt that we want to face to be up. So that's keyframe, because our end position, this is really our end position. So let's go into here. I'm going to tilt up. Mostly the near eye, I think maybe. Everything you do to help sell the range of motion. I'm going to bring that nose up a bit. And oops, I've locked that forelock and I'm going to push that up as well. Again Free Transforming all the way, and let's bring those eyebrows up on the inside.
And also this line here join to there. And make sure everything is shape tweening. This is the one where you might have problems, but no. I'm getting tired of using keys through this Insert, so as you saw in the earlier class we created our own tweens and you can continue to use these if you prefer. But I'm going to use these commands, which I have mapped to the numeric keypad, so let's do that. That's tween out 50, shape tween, motion tween and shape tween. As you can see this is faster.
Let's see what that looks like. Now it's especially going to slow and we're really starting to feel that. One final detail, is I really want people to notice those eyebrows. This is the high point of the eyebrows. Let's see if we can just yank them up a little. Nice! Giving a little change of expression, just a little reaction like, oh, what's that? That's great.
And you can push this further. Don't by any stretch think this is as far as you can go with this, and I'd advise you to play with it and see how far you can take it, but that's as far as I can take it, time permitting. In the next chapter we'll take these very same principles and we're going to apply them to a walk cycle. I'll show you how to do that in Chapter 5.
There are currently no FAQs about Flash Professional CS5: Character Animation.
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.