Animating a Walk

Motion Control Tutorials

Free Web Tutorials from Galil, The World Leader
in Motion Control
www.GaliLmc.com

Walking in the Alps

Mountain top walking experiences Alpine Walking
and Hiking
www.alpseurope.com

Find a Fire-Walk near you

Learn all about what is possible when you
believe!
Firewalking.com

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

TIP
If you're animating a cartoony character, you might need to use the squash and stretch animation
principle..

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
 [The above example shows a small black man walking. The action is
predictable, hence I used the cycle method ]

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.

TIP
If you don't know how to draw in Flash effectively, see this tutorial.

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;

QUICK EXPLANATION
onClipEvent(enterFrame) - tells Flash to repeat everything within the curly brackets with frequency
equivalent to fps (frames per second)

if (_root.walking._x>450){ - if the x cordinate exceeds 450, then...

_root.walking._x=0; ... - the object's x cordinate is set to 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