Student Showcase

We will take a look at any of your new work which is ready to share for My Illustration.

Midterm Project Overview

Discuss the Midterm Project, which is due at midnight of the first class session in week 6.

The Walk Cycle

A walk cycle is an animation in which a two-legged character is shown walking in profile. It is typically accomplished with eight drawings of the character, in eight poses. There are four basic poses. The first four are when the right arm is swinging back and the right leg is forward. The second four are essentially the same except the left arm is swinging back and the left leg is forward.

Here is an in-depth break-down of the way the body is positioned during the key poses:

Angry Animator: walk cycle

The Eight Keyframes

The following body positions should form the eight keyframes for your walking movieclip. Then your movieclip can be moved from left to right across the stage at the appropriate pace.

Contact

Right arm and left leg forward. Left arm and right leg back. Head at medium height as both feet are in contact with the ground and the legs are straight.

Recoil

Right arm and left leg forward. Left arm and right leg back. Head at low height as knees bend.

Passing

Arms alongside body, passing each other. Right foot is up, knee bent. Head at medium point as the left leg is straight and directly under body, foot flat on floor.

High Point

Right arm and left leg back. Left arm and right leg forward. Head at highest point because the left leg is straight, and while it is not directly under the body, the heel is off the ground.

Contact

Right arm and left leg back. Left arm and right leg forward. Head at medium height as both feet are in contact with the ground and the legs are straight.

Recoil

Right arm and left leg back. Left arm and right leg forward. Head at low height as knees bend.

Passing

Arms alongside body, passing each other. Left foot is up, knee bent. Head at medium point as the right leg is straight and directly under body, foot flat on floor.

High Point

Right arm and left leg forward. Left arm and right leg back. Head at highest point because the right leg is straight, and while it is not directly under the body, the heel is off the ground. 

All Eight Poses in Sequence

Exercise: Create a Walk Cycle

Create a new Flash file and save it as walk-cycle.fla. Make sure that the frame rate is 24fps. We will be making a complex animation in which symbols are nested inside of symbols and everything is brought together to the stage in Scene 1. Create your own character—do not simply recreate my panda.

Building the Character Parts

To make the character articulate, you will need to create the following body parts and save each as a graphic symbol. I recommend drawing each of these on a seperate layer so that it is easier to convert each into a separate symbol:

Head and Body

The head and body will move up and down but not move independently of each other.

Closest Arm

We will see the entire length of arm from shoulder to fingers. Give it a slight bend at the elbow, like you would liekly have when walking. On the closest arm, we would see the back of the hand.

Farthest Arm

We will see the entire length of arm from shoulder to fingers. Give it a slight bend at the elbow, like you would liekly have when walking. On the farthest arm, we would see the inside of the hand, inlcuding the thumb wrapping over the fingers.

Thigh

The upper leg from hip to knee. It would need to extend down far down enough to overlap the calf at the knee.

Calf

The lower leg from knee to ankle. It would need to extend far down enough to overlap the heel at the ankle.

Heel

The back half of the foot, overlapping the calf at the ankle and overlapping the toe at the midpoint of the foot.

Toe

The front half of the foot, including the ball of the foot and toes. It would need to overlap the heel at the midpoint of the foot.

Library

Here's what my library looked like after I created these symbols and put the symbols together in a folder. Once you have everything saved to the Library, clear your stage of contents and delete all but one layer in Scene 1:

All Parts Overlapping

Assembling the Character

1. Create a new graphic symbol (Insert > New Symbol...) and name it walking. this will serve as a sort of repository or mini-library for all of the eight poses. Inside the walking symbol editing mode, create the following folders and layers in the Timeline panel:

2. On the appropriate layers, drag out the various body parts. There will be only one instance of the head/body and each of the arms. There will be two instances each of the thigh, calf, heel, and toe.

3. Use the Free Transform tool to move the center of rotation for each symbol instance to the location at which it will hinge with other parts:
   1. head/body: at shoulder
   2. each arm: at shoulder
   3. each thigh: at hip
   4. each calf: at knee
   5. each heel: at ankle
   6. each toe: at center of foot

4. Move the character's body parts into position for pose 1: contact.

Keyframe 1: Pose 1-Contact

5. It's very important that the character's feet always come into contact with the ground along the same horizontal line. For this reason, it's a good idea to put a guideline in place:
   1. View > Rulers
   2. Drag a guide down from the horizontal rule above the stage.
   3. Align the guide with the bottoms of your character's feet.
   4. Use the guide when moving the feet into new positions. Any foot that touched the ground should sit right on top of the guide.

Creating the Seven Other Poses

1. Still in the walking symbol, in the Labels layer, place keyframes (F6) at frames 10, 20, 30, 40, 50, 60, and 70. Create a regular frame (F5) at frame 80.
2. In the Properties panel, label each keyframe as listed below. It's OK that we are repeating label names, because we won't be using any ActionScript in this animation. This just helps you stay organized:
   1. 1 - contact
   2. 10 - recoil
   3. 20 - passing
   4. 30 - high point
   5. 40 - contact
   6. 50 - recoil
   7. 60 - passing
   8. 70 - high point

3. Select frame 10 for all of the layers except Labels, and insert a keyframe there.

4. Move the character's body parts into pose two (recoil) using the Free Transform tool.
   1. Move the head/body, the arms, and the thighs down slightly. Take a look at the head's position in relation to the crosshair. Make sure not to move the head/body left or right, only up or down.
   2. Rotate the arms to the next position around their centers of rotation. The arms don't change much between contact and recoil.
   3. Rotate the thighs around their centers of rotation.
   4. Move each calf so that it overlaps its respective thigh again, and then rotate it to its new angle.
   5. Move each heel so that it overlaps its respective calf again, and then rotate it to its new angle. Make sure the fathest heel sits on your guideline.
   6. Move each toe so that it overlaps its respective heel again, and then rotate it to its new angle. Make sure both toes sit on the guideline.

Keyframe 10: Pose 2-Recoil

5. Select frame 20 for all of the layers except Labels, and insert a keyframe there. Move the character into pose three (passing.) The head needs to move back up a bit. Make sure the farthest heel and toe sit on the guideline.

Keyframe 20: Pose 3-Passing

6. Select frame 30 for all of the layers except Labels, and insert a keyframe there. Move the character into pose four (high point.) The head needs to move up a bit more. make sure the farthest toe sits on the guideline.

Keyframe 30: Pose 4-High Point

7. Repeat this pattern for frames 40, 50, 60, and 70. Poses 5-8 are essentially the same as for 1-4, except that the arms and legs are in inverse positions.

Keyframe 40: Pose 5-Contact

Keyframe 50: Pose 6-Recoil

Keyframe 60: Pose 7-Passing

Keyframe 70: Pose 8-High Point

When you are done creating the walking movieclip, the Timeline panel should resemble this one. It will not include any tweens:

8. Return to Scene 1.

Animating the Poses

1. Create another new movieclip (Insert > New Symbol...) and name it walk cycle.
2. Inside the walk cycle symbol editing mode, drag an instance of the walking symbol out onto the stage.
3. On the single layer in the Timeline, create keyframes (F6) at frames 3, 5, 7, 9, 11, 13, and 15. Create a regular frame (F5) at frame 16. We will not be creating any tweens in this movieclip either.

4. Drag the playhead to frame 3 and click on the character on the stage with the Selection tool.
5. In the Properties panel, open up the Looping section. Set Options to Single Frame and First to 10. This will make the character on the stage jump to the 10th frame within the walking symbol, resulting in pose 2-recoil.

6. Drag the playhead to frame 5, and set the looping for the symbol instance to single frame, frame 20. This results in pose 3-passing
7. Repeat for the remaining keyframes like this:

8. Return to Scene 1. Drag an instance of the walk cycle movieclip out onto the stage and name the single layer character (or whatever your character is called.)
9. Test your movie.

The 16-frame timeline in the walk cycle movieclip creates a single walk cycle and takes .6 seconds, then loops. This is a brisk pace.

If you want the character to walk more slowly, set your keyframes at 1, 4, 7, 10, 13, 16, 19, and 22 instead (with an extra regular frame at 24), so your walk would last a full second.

Moving the Character across the Stage

At this point, you have a character which is moving in place like it is on a treadmill. Let's let him or her go somewhere.

1. Right-click on frame 1 of the character layer and create a motion tween.
2. Drag the right edge of the motion tween out to frame 96. This will mean the movie will last 4 seconds.

3. Create a new layer below this one and name it Background.
4. Put an appropriate background image on this layer. I used a photo of bamboo.
5. On the Background layer, insert a frame (F5) at frame 96.
6. Drag the playhead to frame 1. Move your character just off the left side of the stage.
7. Drag the playhead to frame 96. Move your character just off the right side of the stage. Hold the Shift key while dragging, so that the character stays in a straight horizontal line.

8. Test your movie.

In mine, I motion tweened the background image inside its own movieclip, so that it moved left as the panda moved right. I had to make sure to use an image that has a seamless transition between the right and left edges, so that there is no visible jump as the movie loops.

Download

You may download my Flash file here if you like:

Walking Panda