Animating a Walk

Probably one of the first things a Flash beginner would like to do is animate a walk or run. Although it might seem easy, it's not necessarily so. In fact, a beginner may find it exceptionally hard to do and it may be a huge discouragement for them. So, a question arises: what makes animating a walk so tricky? Well, I think that it is largely the fact that many beginners tend to make two basic mistakes:

• moving two legs at a time while one of the feet of a character should stand still on the ground. Even the slightest motion of the wrong foot can result in the whole animation looking funny
• making too many frames; often it's better to make a few "logical" and high-quality frames than many poor-quality ones
  
   

Another issue is deciding what kind of walk or run it will be. I differentiate two kinds:

• cycle
• frame-by-frame

Before you start animating your character, you have to decide which of the two techniques to use. Basically, if there's a pattern to the way a character is moving, there's no need to draw all the frames separately, and it is the cycle technique that should be implemented.

However, let's assume that a character first goes right, jumps up, and then turns left. In such case, it is advisable that you use the second, frame-by-frame technique.

Let's have a closer look at both techniques.

Walk cycle

How to create it:

1. First of all, create a new Flash document (Ctrl + n).

2. We now have to draw a character. I created a black little man myself, which is, I think, the easiest character to animate.

3. Next, convert the character to a Movieclip ( press F8 and choose Movieclip in Type). It's worth mentioning that a Movieclip is one of the three symbols that are available in Flash. The other two are a Button and Graphic, but let's not concentrate on them.

4. So, once you create a Movieclip, click twice on it. This will result in "getting inside" it. When you're inside, you'll find that there is actually a Timeline in there. Now, this is where we're going to make our walk cycle. I won't delve into how to create each frame of the cycle because for one thing, you can have a look at the fla. that I enclose at the end of the tutorial, and for another it's not that hard. I'm sure you can do that!




However, you should remember that the character should not move forward or backward ( ie. change it's coorinates) at all in the cycle. What I mean by that is, only the bodyparts of our character (like arms and legs) should change as though he was walking. Horizontal movement of our character will be applied with a tween later on.


If you don't feel like creating a cycle from scratch, you can download it below in the table entitled "FLA".

Once we've created a cycle inside a Movieclip, we have two ways to receive a true walk: motion tweening (see: tweening) or actionscipt-driven moving. Most often you'll find people using tweening. Tweening is one of the features Flash is so famous for and no wonder why: it enables users in create awesome animations in a short time. So let's make a motion tween, shall we?

1. First off, once again make sure the walk cycle you've created doesn't change either its x or y coordinate.

2. Next, give it an instance name "walking". We use instance name to sort of "talk" to a given object.

[ type "walking" in the <instance name> white field ]

3. Click on some 20-50-th frame and press F6 to make a Keyframe there. You should now see a big gray gap extending from the first frame to the point where you made a Keyframe. Before we apply tween, we need to change the x coordinate of the copied object. I think it a good idea to increase it by some 200 px.

[ you can set x coordinate numerically in the Properties Window ]

4. Finally, create the motion tween by right-clicking on any of the frames between the two objects. A drop-down menu will appear where you should choose the first option (Create Motion Tween).

5. Test movie (press Ctrl + Enter or go to Control->Test Movie). Our character should now be walking across the scene as showed above.

OK, let's discuss the ActionScipt method.

This way is usually more realistic, however it is more time-consuming. What you have to do is place a small piece of code moving a character by a given number of pixels:

_root.walking._x = _root.walking._x + 1.5;

Why is it better? First of all, you have the control over how fast an object moves on each frame. Sometimes it will be 1 pixel, sometimes as many as 3 pixels. Another advantage is that you can easily control the coordinates of the object. For example, let's assume that we don't want our character to go beyond the stage. We can programme that by saying that if the character's x coordinate is, say, more than 450, it immediately gets back to 0.

Here's how you can receive the above described effect in ActionScript:

onClipEvent(enterFrame){

if (_root.walking._x>450){

_root.walking._x=0;

}

}

Frame-by-frame walk (run)

As I've already mentioned, you should animate frame-by-frame whenever there's no pattern in the way a character moves. In other words, use it when your character does some quick, unexpected movements. The obvious drawback of frame-by-frame animation is how time-consuming it most often is, even if you deal with a short scene.

I remember that I once made a short animation in which my character jumped over a river. Although it was really short ( it only lasted for about two seconds), it took loads of time to complete as each of the frames was different, plus the character that I animated was rather complicated.

To close this tutorial, you should know that all in all animating a walk is a difficult task and requires lots of time to practice. But as the time goes by it will only get better and finally you will laugh at your initial trials. Good luck!

For a better understanding I enclose FLA files.

Also, feel free to have a look at other tutorials at lashf.

Have a nice day