Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
So let's continue with our character's head turn scene. So, let's open it and we'll pick up where we left off, character_head_turn_05, and we will double-click on this file and we're in. So, as you saw from the last time, we had some nice stuff happening but also some icky things have to be fixed. So let's do that. So, the anticipation is working out the level of the body. Don't worry so about the head right now, and here's the point at which the head turns and the overshoot and the settle.
Now, this is a very crude overshoot that I did. I was just trying to block it in and this isn't a bad way for you to work. Don't try to make him perfect in your first pass. Block in the gross movements first, and we can fine-tune later on. That's the beauty of Flash. So, let's do that. So we're going from this down position into the overshoot and then the settle, and the one thing I'm noticing is that I would like him on this position here to travel forward to the right a little more. He's going straight up and then down to the right.
So let's try to give him more of an arc. So let's select the upper body and we can maybe move these arms slightly differently too, and if this doesn't work, we can play with multiple poses here. It's a bit softer already. And then, also imagine the arms, as he goes into the squish pose, the arms are going to flare out a bit and then as he moves up to the high point, a number of things can happen. Depending on the character, we can pull the arms in a little bit. You can see ready that's giving us a more hinged feel and bear in mind, this is without even any kind of shape tweening on the arms.
These are just flat symbols that aren't even doing much. They will, but even without doing it a lot, they've already starting to feel reasonably alive. So, let's go in and fix some other little things. I notice this head turns from here to here. It seems to pop a little bit. Now, we're going to fix a lot of business on the internal head, but let's fix the gross mistakes first. Notice the hair on the side of his head is sliding all over the place. Let's pull that in. better. And of course, the legs are separating from the feet.
So we can fix that pretty easily too. There's a couple of ways we can fix that. We can fix that internally through shape tweening. We can also fix it externally through motion tweening, or we can use both depending on which we think is most lifelike and the most believable. But people are well used to seeing Flash symbols being scaled and tweened. So I like to do shape tweening if I can. So, we already have our key set here and our end key should be also keyed. So let's set shape tweening to go here all the way, and we'll do the same on this one.
We need to match tweening all the way through here. Okay, so let's go back and we'll do the right leg first and now I'm going to use FrameEDIT in and that's our question mark key. So let's just pull these points and if a leg or a body part is stretching, we expect it to lose a little bit of volume. So let's pull in these points a little bit and it'll make it much nicer. It's much more bouncy, more natural feel.
So I'm not going to worry too much about the placement. I'm going to actually move these feet as well. So, hold down the Alt or Option key to skew. Bery subtle. This does not have to be a huge move, but just enough to feel that the character's heels are coming a little bit off the ground. I think we can push a little more than that. If you do it too much, it'll feel really fake. So this is the question of just enough, like salt. Just a little bit is nice and a lot is not.
So, let's do the same thing for this foot. It'll feel like it's pivoting from here. I'm going to skew back and I'm holding down the Alt or Option key. If I don't, it does this and that's not what we want. Okay, and now I'm going to alter the shape of the keyframe. Again the same keyframe, I'm working on frame 25 inside frame 25 and if I work on the wrong one, then bad things happen. So, when you're working like this, be sure you're working on the right keyframe and also be sure that your outer symbol is named correctly. If it's not, bad things will happen too.
It's just a question of being conscious. As you move your keys around, if I was to grab this stack and move them over to one, but this still says frame 25. I have to go in and make it 26. There's a lot of housekeeping involved in this style of animation. So let's check that. It's working. It's not going crazy. Now let's play the whole thing. Great! Now we're getting a little feel of lift on the feet. Excellent! Now there's still things we can do to add or plus the scene.
The arms are stiff. They're not really doing any thing. So let's have some fun with them. Let's just look at the right arm. So, as he's doing this, it'll be great if we make that arm bend a little bit. So let's go into that and again, we need to remember that we've got all these elements that we need to work together. So, the other thing that we have is this little wrist fellow here that I added when I was fixing the rig. That should probably be symbolized so we can motion tween him a little more easily. So, I'm going to add him as a symbol, and that'll be arm right wrist, and make sure he's pivoted properly. Great! And now we just keyframe all of these and these are all going to be shape tweening.
So we'll just make them all shape tween. Get in back to see how we're going with this. As the character goes down here, we can imagine maybe the elbow bending a little bit more out this way. So, I'm using frameEDIT in so that I go into the right frame. Let's do that. Nice! So, let's see if we even notice that. Sometimes these things don't read. I think that is reading. It's subtle. Now we go popping into this frame. I'm just checking.
It says frame number 16 that matches with this frame here. So now if we go up to this high point, I would expect the arm to straighten out. Let's now see if we can straighten them. Ah. Here's our old friend, crazy tween. So, before I add shape hints, save again, and now we're going to add some shape hints, Modify > Shape > Add Shape Hint. And I think the last time we did this, I think something like this might be good. Let's just add the A to the shoulder. Yes, it's improved.
It's a little bit better, and I'm using Ctrl+Shift+H to add more. Nice! So, at this point, it's still not perfect. There's still tiny little problems there, but it's not worth worrying about. This thing is going to move so fast, no one's going to notice. If you really care, you can add later on but at this point, let's get the big things working first. So, I'm going to add a couple more points to help this finish properly. You will also notice, if you're more into the principles of animation, I'm not putting any slow-ins are slow-outs.
Don't even think of adding them at this point. We just get this guy moving first and we get the big things working before we worry about small stuff. Every time I add tweening or easing in and easing out or slowing in and slowing out here, I always end up changing it 50 times. There really is no point unless you are completely locked into the physical movement. In most cases, we can leave that to until the very last. So anyway, here we go, we straighten the arm here and then I think the arm should bend a little more by the time he gets to this point. Let's go back in here and see if we can straighten this a bit more, And that doesn't break.
Sometimes our hands move with this when we do that, sometimes they break. So I think we're okay. And this is the problem for me. There's just a bit of a pop here. So, I'm going to try to line that up a little better. And I think we're losing a little volume on that arm, so I'm going to stretch it a bit. It's feeling a little slow. I said earlier that this will be a fast action, but it's feeling quite slow for some reason.
I'm going to ultimately speed this up. It's still feeling a little floaty for my taste. The other thing we can do that will be nice, actually we might be able to delete a lot of these frames. So let me just try this. This is an experiment. Insert > Classic Tween. Much better, yes. We only need to do that extra key for the head, because nothing else is turning. One of the great principles of animation is called the systematic breaking of limbs or joints.
For example, we've got most of these limbs on the same angle. That's not how we work in real life. In real life, our limbs constantly fold from one direction to another and good animators know that you can really give the illusion of fluidity and life by breaking joints and one of the cool things about this style of animation is that we can do that. I'm going to keep it pretty subtle here. Okay, let's see what that looks like. So that's not too bad. So, I'm going to fold this arm in a little bit, so that it feels a little more natural.
So we see the joint break from one direction to the other. Nice, if I could find an excuse to do it for the other arm too. Okay, I notice that also the tuft of hair at the back of his head has disappeared. So, this is where outline mode is great. We can see how that mistake that probably happened when I deleted these keys. Towards the end, but somehow I got lost over here.
So, I'm going to move it over. And I think we'll just copy it here, Ctrl+C, copy it back into there, Modify > Transform > Flip Horizontal. I think we should add another key here, because this one is going to pop from one side to the other. So, I'm going to clone this keyframe here, bring it over, and now let's look at the head and color again. That's great! So, I think this is what I would definitely classify as the broad pass of the animation of this character now finished.
There's definitely a lot of things we have to tighten up, but this is satisfactory in the sense that we're not seeing an error between the feet and legs. We're not seeing gross defects or errors. The next step will be to go into the head symbol and to make the head work, to make the eyes blink on the down move, and help the head tilt to really settle the action. So that we don't want a head symbol that's just been flopped horizontally which is what will be done on a cheap production. Now, we're not going to do to that. We're going to make it a very interesting head turn.
So, we'll do that in the next lesson.
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.