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.
So, the next thing we need to do with our walk cycle is to watch the feet. I am going to animate the shoes as we did in the previous animation in Chapter 5. This time we also have the additional issue of the placement of the feet. Because if you remember the last time you were moving across the screen so the feet were planted for us. In this instance, we have to worry about that ourselves and make it work without causing problems. So, let's have a look at this thing and there is our current animation so let's go in again.
The process for here will be pretty much the same as it the last time. I am going to switch off the far foot so we can really concentrate on just one at a time. So we put it up on to the ground, foots begins to rotate. So, I want to remove the rotation, straighten the foot out. Let's bring it down so it lines up with our guideline. And the first frame should be the same as that.
So, I am going to grab this Alt+Option and drag and then make shape tween again and we are going to reset this to frame 1 in the Properties panel here. Okay, so now it's not doing that nice rotation any more. So it does seem to be opening air between the foot and the ankle on the bottom of the leg. So, we are going to end up changing the show. We are going to bend that foot to join here and we may need to alter this transition a little bit.
By this frame here, the foot will be actually off the ground, so I am not worried about this one. So, this is the critical point. Here is the contact pose. This is where we hit the ground for the first time. It begins to rotate and at this point we have to watch the position of the ankle. The key point is that of course the front of that foot and that move by the same increment. There are various ways of doing this. We can edit multiple frames and look at it in outline mode. So let's do that.
Just look at the foot level now. Sometimes this is hard to look at simply because there are so many layers overlapping as you can see. We also need to create some keyframes in here. I just find this impossible. It gives us a rough idea. I think we are okay. These things seem pretty well spaced. But there is a more manual way of doing this so let's do that. So, I am going to make a fresh layer and just select our Line tool and an overlay that's padlocked there beneath.
Go to the contact pose and just draw a line. Make that line a darker color so maybe you can see it better. Great! So back to that contact pose and then for each frame just go through frame at a time on that layer. For each position of the heel just put down a line. And as you can see we've had quirks creep in. Okay, these nicks represent the position of the heel and because these positions, the travel time of the foot is not even, this means that when we play this walk cycle next to a scrolling background it's going to slip relative to that background.
If we move the character across the screen, tweening him from left to right, the feet will slip in. It will be quite noticeable. It doesn't look like a lot but it will. So, let's correct that and there is a probably easy way of doing this. So, let's just select all this little tick marks, we go Window > Align, and make sure that Align to Stage is clicked off, and then we will distribute them around the horizontal center. Flash does a really nice job of giving us our ideal spacing guide.
This is what the foot placement should have been. So, now let's go frame by frame. So this is the contact position and then so we know that there are 3 in-betweens, 1, 2, 3 between each key. So, this is our contact position and let's pick a different color for that. Let's make that red. So solo this. So, these are our keys here. Okay, so this is the contact key.
Of course I need to on padlock that level. I am going to padlock the tick mark level now, so this foot should be, in a perfect world, it will be there and next one is a little bit over so it's there. This one to here and that's our last. So, now when we scrub through we have a completely perfect transition or travel time for every foot. Now, don't delete this level because we are going to use that for the other foot.
And the other thing that we have to do is correct the right leg, because having moved our foot, a lot of the leg frames will be slightly out. So, we can either correct them by changing the outer symbol or the inner tweening. I think the inner tweening will be the easiest of the two. Because we didn't move them drastically. So I am using the frameEdit extension to do this.
Okay, I am not going to bother with this because we are also going to modify the shoe to curve up. But the one thing I might do is just pull that leg in a little bit. Obviously, that's going to bend this way. The leg might bend a little too far out, possibly too far out here too, but I am going to leave that for now because it's our contact position. Okay, let's zoom out a bit. So, that's that. So let's repeat this process very quickly for the left foot and it's important that the left foot travels the same distance as the right, even if that might at a different size or distance. So let's hide that foot there and go to the contact position and have a look at this.
So, they are more or less in the same area so the same tick marks are going to be used. The only difference between of course that this foot is on the upper line whereas the other foot was on the lower line. So I am going to fine tune those positions and start and the stop. Of course, we want to remove the tilt and now we can use these tick marks as well to help. Okay, this will be also be a lift-off frame just after that key so I am going to push that up so we know we are off the ground at this point. So now we can get rid of the tick mark guide level.
Then the other thing we would also have to correct will be the position of the left leg and then right leg I think. Just make sure that we did it. Okay, so I am going to pull in this contact pose, repeat, copy that to here. Of course, change that name just to be consistent. Frame 33, a random number. Okay. So, now our feet are correctly placed for the-- let's just move. Little alterations here.
So, I think that's fine. So we can save out as this. It looks the same as the last one but there is an amazing difference in terms of the reusability and the stability of our walk. So, the next step would be to start curving the shoes and making them bend and flex like they're actually made of leather, not vectors. So let's do that and we'll save this out.
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.