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.
Our in-place walk cycle is now complete, looking good and it's time to reposition that walk and show you what it looks like, how we use it. So let's open up our file number 12 in Exercise Files > Chapter 6. So now we are in the outer. We have been doing a lot of hard work of course on the inner clip. Now we work on the outer clip. This is the one that we'll be repositioning on the stage. So let's select that and in the Properties panel, let's hide our little color area here. Click on this.
We want this to behave as a graphic and we want it to loop. Be sure your first frame is set to frame 1 and some little housekeeping there. Let's make him using the Free Transform tool, holding down the Shift key, and make him smaller and then now we need to just add some frames to the timeline. I'm hitting F5 to just extend the timeline a bit. Let's go out to about 150 frames, and now if we hit Play, he will just loop in place. So we want this guy to move across the screen.
So I'm going to put a second keyframe, F6 out here, and let's just drag it across. And let's create a classic tween and see how that works. So now he is moving across the stage. Now I'm going to zoom in a little bit so we can see the detail a bit better than that and if you watch his feet, you'll notice that they are sliding. It's like he's on ice or a glass or something and that's simply because the second key is too close. So we need to move it further this way.
The other problem that you would have is that you would move too far. So for example if I am using the numeric and Shift key now, let me zoom out. Now he's sliding across the screen like he is again wearing skates or something. So the issue becomes to just basically find the magic position. There'll be one perfect position at which the feet are planted. So what I like to do, you're making the changes to this keyframes, so let's keep this keyframe in view and let's zoom in closer and then we just use our backwards and forwards keys on the timeline and you can see we are still going forward a little bit, so that means that this key is a little bit too far forward.
So I am just going to bring that back. It's getting much closer. It's very subtle and it comes down to how picky you are, what your demands are. Now that's looking pretty solid, okay. Now try to frame him a little better, so we can seem reasonably close for the whole duration and we watch the feet, make sure the feet aren't sliding. At this point you'll be able to detect, if there are any errors in the animation, you will see them here and we covered this in a previous section.
If there are mistakes, it means that you're spacing on the feet are possibly inaccurate. So if you find that your feet are working for a few frames and then there's a sudden glitch and one of the feet slides backwards or forwards... I'll cover this one more time because it is important. Take your foot, whatever foot is giving you the problem, and we make a temporary layer above the foot and select the Line tool and we draw a vertical line over the heel position and we do this over each frame, the in-betweens as well as the keys.
I am going to go in a little tighter. It doesn't have to be a million percent accurate, but this will be close enough to give you an idea and this way you can tell that the spacing of your feet is completely accurate and we did this in the earlier course already. So this should be still the same. I don't think we changed anything, but at this point here the heel is peeling off the ground. So if you are worried, you could follow the front of the foot rather than the heel and that's maintaining a similar distance between these strokes.
So if you feel that there is a problem or one of your heel points is off, then you know what the correct position of the heel and the other tool that I've used that's really great for this part of the process is to use the Align tool. Click off Align to stage and you can make these points mathematically precise by using the Align Distribute horizontal center tool and you can work to a very high degree of accuracy in this. So that's the process you use if you've gotten to this stage and your feet are doing something unpleasant. So that would be the diagnosis.
Let me zoom out again, back to the stage. There is one thing I am seeing here and that's on the lift off. If we watch the-- see that rear foot here? There is a slide there, see that? The reason being is that our inner symbol has two contact poses. Our start position and our stop position are the same. So what's happening is this is playing twice. So we're seeing the same frame happen twice and it shouldn't be doing that.
There is one way of fixing this, which is to make another keyframe here and just delete our contact pose. Now we have a perfect cycle. Each frame only appears once. We don't have any duplicate contact. So let's see if that works. Sliding has not been removed. Of course, now that there's one last frame. It may or may not have affected the precise positioning of our feet. So let's have a look at that. And also we have a little glitch happening now because I think we are on the wrong frame number; we removed a frame.
So let's click on this fellow. He is in now frame 23. Oops! Let me clear that and this one is calling on frame 21, so that should be 24. So again if you make these little alterations and tweaks and you start seeing strange things happening, the other thing you could do is simply delete this keyframe and make a new one, just repeat the process, but I like to do the mathematical solution rather than that. It gives me more control. Now we're fine. The feet are locked.
There is no sliding and there is another possible solution, which I think we should discuss. The only thing I dislike about this is that it destroys your second contact position. You can always create it by pulling it back over here and then you've restored your end pose, because this should be the same as this. That's that. So as long as you know to create this keyframe before your second contact and as long as you know how to restore that deleted contact, should you need to change any of the internal animation, you should be in a great position.
So one last look before we wind up the chapter. Our happy fellow has had lot of coffee and I think he's perfectly jointed and happy to move onto the next chapter. So hope to see you there.
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.