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 we've got everything done now but our shoe and we need to bend the shoe and make it a more animatable object so let's open our previous file. That's 15. Double click on the body and let's work on this one because it's starting in the contact post so we would be able to animate the bending of the foot. So, it might just help just to hide the other leg so we can focus on this one. Okay.
So, the thing to bear in mind is that when this foot hits the ground it should stay there and only do the things that we want that to do. That means on this frame here it really shouldn't be sliding through the foot plane and we put that in as a working position really but it's not what we want to have happen. So I am going to show you the reference sketch on our bottom layer. We want the foot to bend, going from on the passing pose, still flat. Moving it to the high point and the contact. It's here and here.
That foot should be beginning to twist and bend into a proper shape, so let's do that. So the first thing I am going to do is get rid of this overall foot position. Let's go back to where the foot was still flat and copy it. So, at this point the foot will be at its maximum flexing before it lifts off on the subsequent key and that leg should be flexing here too. So beginning on this frame and on this one, it will be tweening into this bend foot shape. Don't forget any alterations we make to one foot, we have to make to the other.
We'll do that after we animate this section. The other thing we want to make sure is that any time you work with the nested scene with a timeline inside a timeline you want this to match. So let's make sure that this is on frame 1. The next key as you can see here is on 5, so we click the foot and see an error has crapped in. This happens a lot. So, let's click on the foot. This next one should be frame 9, as the outer timeline is on frame 9, and we are going up by four times. This should be 13.
The next key should be 17, I am looking down here, and then we are at 21. That's correct, 25, slide over, 29, 29, good and 33, 33. Excellent. So, let's go back to our point where we are going to start tweening this. We have two feet. This is the old design that you may remember when we were first rigging. Let's look at the other one.
This is the one that we separate on to three layers for much more easy shape tweening. So let's copy these layers, Ctrl+Alt+C, and we'll copy that artwork into this symbol, so now this is the same as the other. Great. Well let's find the position of the maximum twist for this foot and that is frame number 17. Click in here. I move to frame number 17 and let's set a keyframe. And the bending begins here and we'll snap back to our recoils position here. So, let's make this a little larger, and we discussed this before. Flash really likes to take our points and merge them.
I have a point here that I created and if I tried to select this shape and with the basic Selection tool I can't do it. So, let's go in and recreate that. Very simple. This is how I usually do it. So, just make a new hole in the rig. I just want a single point here between the two that I can use to snap off. So we are going to break the shoe there. It's going to bend at that point. So, there we are, still there. It looks like it won't continue with this curve but I want to have a break right there. You'll see why now.
So, let's just hide the two lower layers and that's where we are going to bend the shoe to match. This is the value of having the outer clip in place with no rotation. You can see the point of transformation, the way it relates to the outer symbol. So, don't worry about that for now. Then the next most important symbol is the large brown area of the shoe. Padlock that off. Let's twist that up so it's inside the lower cuff of the pants.
Oops! Padlock that sole now. Make sure Snap is on so that this corner matches exactly that one or we'll have strange arcs and shapes happen. So, let's put shape tween on right now and see if this works. Very nice and then the last element would be this. A slight little bend and twist on the toe of the shoe, just to make it feel like there some squash and stretch happening.
Now, let's see how this interacts with the outer clip. All right, so let's switch off the other shoe. Not quite all the way there yet but close. So we need to go in to this symbol, maybe stretch it a bit to cover over the gap that's opening up there. Now, some of these in- betweens are looking strange. There may be an error in your frame information, again on your symbol. This is frame 1, this is 5. Let's check these first.
This is frame 9, this is frame 9. Again, I am checking the frame numbers in that Properties panel. Frame 13, frame 13, frame 17, frame 17. Okay, so all our numbers line up. Now here we go. The problem is there should be a shape tween here. So, I am going to add a shape tween there. That's where we are having the pop effect. That's was an oversight from a previous part. Great, a couple of little things now. Just to readjust the pants. Make sure they are nicely centered over the ankle.
Okay, it's looking pretty good, and the thing to watch out for, focusing on this area, and when we start fine tuning this to make sure that the pant leg isn't fluttering too much. When we lift the leg off here, it's sliding a little bit, as we're moving from the high point and from the contact to the recoil. Basically, once the contact pose ends we really should be off the ground without foot. So, there are three different ways we could tackle this.
We can move the other leg up a little higher to lift it clear from the ground. Now, the other thing I would do is the return from the stretch into the recoil, it's quite slow. So, we can make that snappier by pulling this back and then we will recoil from that into that. So seewhat that looks like. So all these tween case that you are seeing here. We can ultimately end up adding secondary keyframes or changing this leg position.
Whatever it takes to snap us out of this stage clean off the ground. That's a lot better already. I wouldn't say that's the final by any stretch but that's gotten rid of that big nasty sliding. So, now we apply the same process to the other foot and don't forget this symbol is wrong. That should be flat. Basically the same as this but with a bend. So we want that same flat foot here and we also want it in its other position here.
Let's see what's the best way of doing this. Wwe can click and eyeball it. I am going to copy it and paste it in place and just slide it back along the line. We want to make sure it's in the same relative position to the foot as these. So, let's make a quick reference layer. I do this a lot. It's a nice way of making sure that we are perfect in our positioning. So, the position of the foot relative to that is this, which tells us we are a little bit off and that'll get rid of our reference layer.
Last step of this part will be just to check our frame number and it's again this is a unique image. It doesn't have any animation in it yet. Let's make sure this is set to frame 1 of the start and frame 5 and all the way through. That should be 21, 25 is here. Little mistakes that crept in along the way. It should be 29 and 33, great.
So, what we will do now is duplicate the animation of this part. I am just going to copy all of these frames and we want this animation to happen in here. Let's move him down to this area, put a little gap between them so we can see the difference. So, on the passing position to the high point to the contact we want the same thing to happen here but on the opposite frames. So not from this passing to this contact but this one. So, let's duplicate them.
Actually, I should hold down the Alt key and keep our original over here in case anything breaks. Let's see if that works. I think we should also duplicate let's see here. Yes, this post should be there too. As we bend on the first frame. Okay, so it's curving and then just slight error in here. There we have an example. If the frame number of your symbol doesn't align with the outer frame number and you are trying to keep everything on the same track.
So you see little pops like that. So, often times to check your numbers. Good, now we are getting there and remember we made a little change here on the recoil position. So, we would, I think, eyeball a similar change here where we drag this up. We lift it off the ground a little faster. It will snap here. That's good. Okay, so that was a bit of work. A little fine tuning. Very hard to avoid.
The feet are usually tricky. As I see a little gap there opening up, and this spot here so we can pull that down. Always be vigilant for the gaps between the layers. It's very common and I think that is the basic walk complete. Now, we proceed to the next phase, which is taking our existing walk cycle and doing what in the good old days was called plussing, adding details and touches that will really enhance and improve it. The first thing I am going to do is move into the head and move the little piece of hair around, try to make it feel like it's reacting to the secondary motion on the hair.
So let's save this file and we will then move on and proceed to the hair.
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.