DES 461 Multimedia II :: International Academy of Design & Technology

Week 4: Animating a Character

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.

Flash CS5 walk cycle - contact

Recoil

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

Flash CS5 walk cycle - recoil

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.

Flash CS5 walk cycle - passing

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.

Flash CS5 walk cycle - high point

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.

Flash CS5 walk cycle - contact

Recoil

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

Flash CS5 walk cycle - recoil

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.

Flash CS5 walk cycle - passing

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. 

Flash CS5 walk cycle - high point

All Eight Poses in Sequence

Flash CS5 walk cycle - all 8 poses

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.

Flash CS5 walk cycle character body parts - head and body

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.

Flash CS5 walk cycle character body parts - closest arm

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.

Flash CS5 walk cycle character body parts - farthest arm

Thigh

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

Flash CS5 walk cycle character body parts - thigh/upper leg

Calf

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

Flash CS5 walk cycle character body parts - calf/lower leg

Heel

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

Flash CS5 walk cycle character body parts - heel

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.

Flash CS5 walk cycle character body parts - toe

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:

Flash CS5 walk cycle body parts in Library

All Parts Overlapping

Flash CS5 walk cycle body 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:

Flash CS5 walk cycle body parts layers

  1. 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.

Flash CS5 walk cycle body parts collected

  1. 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

Flash CS5 walk cycle centers of rotation

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

Flash CS5 walk cycle assembling body parts
Keyframe 1: Pose 1-Contact

  1. 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.

Flash CS5 walk cycle guideline for feet

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

Flash CS5 walk cycle label keyframes

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

Flash CS5 walk cycle keyframes for recoil pose

  1. 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.

Flash CS5 walk cycle pose two recoil
Keyframe 10: Pose 2-Recoil

  1. 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.

Flash CS5 walk cycle pose three passing
Keyframe 20: Pose 3-Passing

  1. 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.

Flash CS5 walk cycle pose four high point
Keyframe 30: Pose 4-High Point

  1. 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.

Flash CS5 walk cycle pose five contact
Keyframe 40: Pose 5-Contact

Flash CS5 walk cycle pose six recoil
Keyframe 50: Pose 6-Recoil

Flash CS5 walk cycle pose seven passing
Keyframe 60: Pose 7-Passing

Flash CS5 walk cycle pose eight high point
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:

Flash CS5 walk cycle timeline

  1. 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.

Flash CS5 walk cycle moviclip keyframes

  1. Drag the playhead to frame 3 and click on the character on the stage with the Selection tool.
  2. 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.

Flash CS5 walk cycle movieclip looping single frame

  1. 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
  2. Repeat for the remaining keyframes like this:
Keyframe Looping: First Frame Pose on Stage
7 30 4-high point
9 40 5-contact
11 50 6-recoil
13 60 7-passing
15 70 8-high point
  1. 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.)
  2. 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.

Flash CS5 walk cycle slower pace on timeline

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.

Flash CS5 walk cycle 4-second motion tween

  1. Create a new layer below this one and name it Background.
  2. Put an appropriate background image on this layer. I used a photo of bamboo.
  3. On the Background layer, insert a frame (F5) at frame 96.
  4. Drag the playhead to frame 1. Move your character just off the left side of the stage.
  5. 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.

Flash CS5 walk cycle move across stage

  1. 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

Portal go to Portal

Upload the following by midnight of the first class day of next week:

Week Assignment File Name Points
4 Walk Cycle walk-cycle.fla 55

Assignment Details

Walk Cycle

Complete the exercise to the left listed under Exercise: Create a Walk Cycle.