Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in June, 2009.

In this tutorial we'll create a quad run cycle. The animation will be created using simple lines. Along the way we'll cover a bit of work flow and animation theory, then near the end we'll use Motion Tween and ActionScript to move the animal across the screen.

Final Animation Preview

Let's take a look at the final animation we're aiming for:

Step 1: Decision Time

First decide what you want to animate (since different animals move in different ways). I'm going to animate a generic feline, so it'll move in a similar to a lion, cheetah, tiger, etc.

Step 2: References

I often study references if I don't know how the subject moves.

Here are some sites/books that I used:

• BBC Motion Gallery
• YouTube
• Getty Images
• Animals in Motion
• How to Draw Animals

Step 3: Anatomy

It's helpful to understand the anatomy of the animal, this way you can better visualize what is actually moving underneath the skin.

Here are a few books on animal anatomy:

• Animal Anatomy for Artists: The Elements of Form
• An Atlas of Animal Anatomy for Artists
• How to Draw Animals

Step 4: Drawing

Once you've spent enough time analyzing and studying the references, it's time to do some drawing. I normally prefer to do some planning on paper first, though some people prefer to go straight onto the computer and start animating. It doesn't really matter which method you choose, just as long as it works for you.

By the way, you don't have to be a great artist to draw. Simple lines are good enough, as long as you can understand your own drawings. Usually I'll draw the important poses that I'd like to see in the animation.

Step 5: Flash

Let's get started in Flash...

1. Create a new .fla document.
2. Set the dimensions to 560 x 400px.
3. Set the stage color to black since I'll be drawing in white.

Change the dimensions and colors to suit your needs.

Step 6: Layer It Up

Create the following layers:

• actions
• animal
• ground

Then lock the "actions" layer since it'll only contain ActionScript code.

Step 7: Frames Per Second (fps)

The fps for web animation varies quite a bit. All the way from 4 ~ 48fps. I'll be animating at 24fps.

Here are some other standards...

• PAL - 25fps
• NTSC - 30fps
• Film - 24fps

To alter the fps, simply change it at the bottom of the timeline, or go to Modify > Document.

Step 8: Frame by Frame

There are many ways to animate in Flash, however I'll animate in a more traditional style whereby I'll draw each pose of the animation. I'll be using the "Pencil Tool" to draw. For the "Pencil Mode", I've selected the "Smooth" setting which means Flash will smooth out the lines as I draw.

Step 9: Ground

First select the "ground" layer and draw a straight line to represent the ground. Then lock the layer. The ground has a white (#FFFFFF) stroke colour and a stroke weight of 3.

Step 10: Poses

Go into the "animal" layer and start drawing the important poses. Generally they are the contacts and extreme poses. For the animal poses I've used a stroke weight of 5. Now, if you had planned this out in advance, you can simply redraw it all in Flash. If you want, you can also scan in your drawings and trace over them.

Note: You may want to look a steps 15 ~ 21 before you start animating.

Here are the poses I've drawn so far.

To extend the amount of frames for the "ground" layer, right-click the fourth frame and select "Insert Frame". This works even if the layer is "locked".

The small black dot on each frame indicates a "Keyframe" in Flash. To create a keyframe, right-click a frame and select "Insert Keyframe" or go to Insert > Timeline > Keyframe.

Step 11: Refining the Pose

It's highly likely that you'll want to make changes after drawing a pose. Simply select the "Selection Tool" then and move the mouse close to the line you want to modify. When the icon on the bottom right of the mouse changes to a "curve", click and drag the line.

Step 12: Timing

Once you're happy with your main poses, you can start to play around with the timing. If you test your movie now, it'll be too fast. Insert a few frames between the poses and play around with the timing. To add a frame, right-click a frame and select "Insert Frame" or go to Insert > Timeline > Frame.

Step 13: More Poses

Now let's add more poses in between.

Note: Feel free to readjust the timing in order to get the animation working as a whole.

Step 14: Even More Poses

We can even make it smoother by adding more inbetweens.

Step 15: Onion Skin

When animating, I find it useful to use the "Onion Skin" and "Onion Skin Outlines". These tools can show the contents for a range of frames, before and after the current frame. You can also increase or decrease the number of frames by dragging the circles on each end.

Step 16: Tips

Some of you may find animation easy while others may not. I've therefore provided some tips which will hopefully help you in the process.

• Volume: One of the main things to be aware of when animating is that the volume should remain the same. The animal can squash and stretch as long as the volume is maintained.
• Force and WEIGHT: When animating, always try to feel where the force and weight is travelling. Think about where the weight is at. Where is it coming from? Where is it travelling to?
• Up and Down: From studying the references, I've noticed that the faster an animal moves, the less up-and-down movement it has. The same applies to their tail.
• Planting feet: One other thing I noticed from the reference is the foot pattern. The feet usually plant in circular order. For example, let's say the first foot that plants on the ground is front-left (1). Then these would be the two possible orders...
  CCW
  1. front-left foot
  2. back-left foot
  3. back-right foot
  4. front-right foot
  CW
  1. front-left foot
  2. front-right foot
  3. back-right foot
  4. back-left foot

Step 17: Sliding Feet

Generally, animation cycles move at a constant speed. Thus when animating the legs, make sure that the difference between the distance of each foot (between the frames) are approximately the same. If not, the feet may look like they're sliding.

Step 18: Converting into Movie Clip

Now let's move the animation cycle across the screen. First, though, we'll need to convert the frames into a "Movie Clip". To convert frames on the main timeline to a Movie Clip:

1. Select all the frames from the "animal" layer.
2. Right-click and select "Copy Frames".
3. Go to Insert > New Symbol...
4. Name it "animal run cycle" and make sure the type is "Movie Clip".
5. Click OK.

You should now be on the "animal run cycle" timeline. Right-click the first frame and select "Paste Frames".

Now go back to the main timeline by clicking the scene name (beneath the timeline). Then clear all the frames on the "animal" layer and drag "animal run cycle" from the library onto the stage.

Step 19: Motion Tween

Using Motion Tween we can move the animal across the stage so it seems like it's running across the screen. The distance you want to move for each frame should be equal to the difference between the position for the planted foot (between the frames).

We'll refer to the "difference" as "dX". Here is a formula which finds the "number of frames" given that you know the initial and final positions.

numberOfFrames = (finalXPosition - initialXPosition) ÷ dX

Here's an example:

An animal has an initial position at -50, a dX value of 11.5 and a final position at 610. Thus the amount of frames between its initial position and final position is...

= (610 - -50) ÷ 11.5

= 660 / 11.5

= 57 frames (rounded to the nearest integer)

To create Motion Tween:

1. Select the "animal" layer.
2. Right-click the first frame and select > "Create Motion Tween".
3. Select the first frame and move the animal to its initial position.
4. Right-click frame 58 and select "Insert Frame".
5. Select frame 58 and move the animal to its final position.

Note: The actual final frame is 58 since the initial frame is 1 - the number of frames between the initial and final frame is 57.

Result:

Step 20: ActionScript

It's easier to move the animal using ActionScript since you don't need to worry about the formula and all you need to know is dX.

First make sure you have an instance of the "animal run cycle" on the stage. If not, go to the library panel and drag one out. Give it an instance name "animal_mc", then move the animal off screen to the left. Then select frame 1 in the "Action" panel and add the following code:

AS3:

var dX:Number = 11.5;

// Adds an enterFrame to "animal_mc".
animal_mc.addEventListener(Event.ENTER_FRAME, moveAnimal, false, 0, true);

// enterFrame function for "animal_mc".
function moveAnimal(evt:Event):void  {
	
	// The animal's x position increases by dX.
	evt.target.x += dX;
		
	// Move the animal back to the left when it moves off screen.
	if(evt.target.x > stage.stageWidth + evt.target.width)  {
		evt.target.x = -evt.target.width;
	}
}

AS2:

var dX:Number = 11.5;

// Adds an enterFrame to "animal_mc".
animal_mc.onEnterFrame = function()  {
	
	// The animal's x position increases by dX.
	this._x += dX;
	
	// Move the animal back to the left when it moves off screen.
	if(this._x > Stage.width + this._width)  {
		this._x = -this._width;
	}
}

Result:

Step 21: The Other Direction

Let's say that you wanted the animal to move the other way (right to left). Select "animal_mc" and go to Modify > Transform > Flip Horizontal.

Here is the new ActionScript code:

AS3:

var dX:Number = 11.5;

// Adds an enterFrame to "animal_mc".
animal_mc.addEventListener(Event.ENTER_FRAME, moveAnimal, false, 0, true);

// enterFrame function for "animal_mc".
function moveAnimal(evt:Event):void  {
	
	// The animal's x position decreases by dX.
	evt.target.x -= dX;
		
	// Move the animal back to the right when it moves off screen.
	if(evt.target.x < -evt.target.width)  {
		evt.target.x = stage.stageWidth + evt.target.width;
	}
}

AS2:

var dX:Number = 11.5;

// Adds an enterFrame to "animal_mc".
animal_mc.onEnterFrame = function()  {
	
	// The animal's x position decreases by dX.
	this._x -= dX;
	
	// Move the animal back to the right when it moves off screen.
	if(this._x < -this._width)  {
		this._x = Stage.width + this._width;
	}
}

Result:

Final Word

Thank you for reading this tutorial and I hope you have fun animating!