Creating the driver’s run cycle

A run cycle (or walk cycle) is a loop of a stationary character performing running (or walking) movements. That cycle can then be played while the character is in motion. In Chapter 3 you’ll learn how to make your character run at varying speeds using ActionScript.

The ﬁrst step is to create a rough animatic sketch of the run cycle to use as a guide. You can draw your own animatic sketch or use the one provided in the Chapter 2/assets folder on the CD (Figure 2.83).

Figure 2.83 Frames from the sample animatic of the run cycle.

Chapter 2 Character Animation

To create the animatic in Flash:

1. Open your driver.ﬂa document and save it as driver_run_cycle.fla.

2. Double-click your driver instance on the Stage to edit the symbol.

3. Select frame 12 on every layer and extend the frames (F5) on those layers. You’re aiming for a 12-frame

run cycle.

4. Create a new layer at the top to house your animatic and name it rough.

5. Turn on the Onion Skin feature in the Timeline so that you’ll be able to see the adjacent frames for reference

as you draw. You can adjust the bracket-like Onion Skin handles at the top of the Timeline to control how many forward or backward frames appear.

6. Use the Brush tool to sketch how you imagine the driver might run frame by frame. Add a keyframe (F6

or F7 for a blank keyframe) for each frame as you go. You can use the Chapter 2/

7. After using the ﬁrst frame as a reference for position, assets/rough_animatic.fla file you may want to hide all layers except the rough layer,

as a guide, or you can copy the so you can focus on the animatic. frames and paste them into your driver_run_cycle.fla file.

8. As you keyframe each pose, play back the animation (Return/Enter) to make sure the drawings move the

way you want them to. Continue to make any adjustments necessary. The key here is to animate the character running in place as if it is on a treadmill. This way you can place all the keyframes in a symbol and control the speed and direction of the character using either a Motion Tween or ActionScript.

When you’re satisﬁed with how your animatic moves, you can apply the corresponding adjustments to the driver character.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

1. Show the layers containing the driver’s body parts. Double-click on the little color swatch to the right of

the layer name (“rough”) to open the Layer Properties panel (Figure 2.84).

Figure 2.84 Double-click on the outline toggle to open the Layer Properties panel.

Set the Outline color to red and make sure the “View layer as outlines” check box is selected (Figure 2.85).

Figure 2.85 The Layer Properties panel allows you to change the outline color of a layer.

2. Ensure that your animatic overlaps the character on all

12 frames, and then hide all layers except for the rough and arm layers.

Chapter 2 Character Animation

3. Using the outline of the rough animatic as a guide, rotate and position the arm symbol on each frame, add-

ing all 12 keyframes (F6) as you progress (Figure 2.86).

4. If you want to go the extra mile on this character, you’ll need to draw a few different arms as needed. There

will be some frames where the arm might need to be slightly more bent at the elbow, and in other frames you may need a new arm that is in a slightly different perspective (Figure 2.87).

Figure 2.86 Rotate the arm to match the rough animatic.

Figure 2.87

A new, slimmer drawing of the

arm was created to match the animatic.

You can also simply use the single arm symbol and then rely on the Free Transform tool to skew the perspective, but often it doesn’t accomplish the same level of realism. In most cases, each drawing you make of the arm can be reused in other frames and will only require some rotation and repositioning.

You may have to draw new arms on some frames that have a slight bend to them and a little more foreshort-

Figure 2.88

A more bent and

ening (Figure 2.88).

foreshortened arm.

On other frames, the arm will need to be bent even more and positioned further back on the body (Figure 2.89).

Figure 2.89 An arm that is bent and pulled back.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

When you’ve completed keyframing the arm layer and you’re happy with the resulting motion, you can begin animating the legs.

1. The leg is animated in much the same way as the arm. Hide the arm layer, and unhide the front leg layer.

2. Use the rough animatic as a guide to position and draw (when necessary) each new keyframe so that the front

leg is rendered appropriately (Figure 2.90).

Figure 2.90 The front leg is rotated to match the animatic.

3. Similar to the arms, you may want to redraw some of the frames to match the animatic more accurately. The

leg in this frame is descending downward toward the ground (Figure 2.91).

Figure 2.91

A redrawn front leg.

Chapter 2 Character Animation

4. When the leg is fully against the ground, you may want to redraw its bottom edge ﬂat and wide to suggest

weight (Figure 2.92).

Figure 2.92 The flattened bottom of the foot suggests weight.

5. When the leg is starting to come up off the ground, you can emphasize this by drawing a bend so that the toe is

still in contact with the ground while the heel is curved upward (Figure 2.93).

Figure 2.93 The foot drawn as though the heel were lifting off the ground.

6. When the foot is completely off the ground, you can reuse the original leg shape (Figure 2.94).

Figure 2.94 The leg returns appropriately to its original shape as the foot leaves the ground.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

7. Bend the knee as the foot starts to move forward

(Figure 2.95).

Figure 2.95 The knee is bent as the leg begins to move forward.

8. You can curve the arch of the heel as the leg is still moving forward to emphasize an upward direction

(Figure 2.96).

Figure 2.96 The shape of the foot can indicate the direction in which the leg is traveling.

9. As the leg continues to move forward, you may want to rotate it so that the toe is pointing more forward in the

direction of the run cycle (Figure 2.97).

Figure 2.97 The toe begins to point forward in the direction of the motion.

Chapter 2 Character Animation

10. Straighten the leg out just before it begins its descent toward the ground again (Figure 2.98).

Figure 2.98 The leg is straighten- ing out to touch the ground again.

Continue to hone the front leg until you’re satisﬁed with the resulting animation.

In the following steps, you will nest your arm and leg animations in new symbols. Nesting these animated parts can allow for the layering of animations inside other animations to produce very sophisticated results. Once you nest the arm and leg animations in new symbols, you will easily

be able to animate both symbols as single objects.

1. Select all the frames in the front leg layer, Ctrl-click/ right-click, and select Cut Frames (Figure 2.99).

Figure 2.99 Cut all the frames of your animated leg.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

2. In the Library panel, select New Symbol from the menu in the top-right corner (Figure 2.100).

Figure 2.100 Create a new symbol from the Library panel.

3. In the Create New Symbol panel, enter a descriptive name (e.g., leg_ani) and select Graphic from the Type

menu (Figure 2.101).

Figure 2.101 The Create New Symbol dialog box.

4. Ctrl-click/right-click on frame 1 of this new symbol and select Paste Frames (Figure 2.102).

Figure 2.102 Select Paste Frames from the context menu.

5. Repeat steps 1–4 for the arm animation.

Chapter 2 Character Animation

6. With both the arm and leg animations nested in their own symbols, drag the new animated symbols back

into the original (arm and front leg) layers within the driver symbol and position them appropriately on the character’s body. As individual symbols, the arm and leg animations are now much easier to animate (Figure 2.103).

Figure 2.103 Position the nested animations to match the rough outlines.

7. Ctrl-click/right-click on the back leg symbol and select Swap Symbol. In the Swap Symbol dialog box, select

the animated leg symbol and click OK. The updated instance should retain the rotation, scaling, and tint that you added previously.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

8. Set the First (frame) value in the Properties panel to 7 (and the Options to Loop) so that the back leg motion

complements the front leg (i.e., they are six frames apart in a 12-frame loop).

9. Using the rough animatic as your guide, animate the driver’s body by positioning and rotating his symbols on

new keyframes to match the poses, just as you did with the arm and leg (Figure 2.104).

10. Match the head to the animatic positions as well, adding keyframes when needed (Figure 2.105).

11. Continue to make further adjustments as needed. When you adjust one piece, it may force you to adjust

another piece to match (Figure 2.106).

12. Once you’ve ﬁnished animating the driver’s compo- nent parts, return to the main Timeline and save your

document. This document will be used later to animate

Figure 2.104 Scale, rotate, and position the body to

the driver dynamically.

match the animatic.

Figure 2.105 Scale, rotate, and position the head to Figure 2.106 Continue to make adjustments using match the animatic.

the Free Transform tool.

Chapter 2 Character Animation

You’ll now animate your driver’s run using a Motion Tween.

1. Save a new copy of your document as driver_animation.fla.

2. Move the driver instance to the right edge of the Stage, Ctrl-click/right-click on the instance, and choose

Create Motion Tween.

3. With the playhead on the last frame of the tween, move the driver to the left edge of the Stage.

4. In the Properties panel, change the Instance behav- ior to Graphic and press Return/Enter to preview

your animation to see the driver run across the Stage (Figure 2.107).

If you want your character to run left to right, turn your character around by choosing Modify > Transform > Flip Horizontally before adding a tween.

Figure 2.107 The driver runs across the main Timeline using a Motion Tween.

Adjust the frame duration of the driver layer as needed to match the tween speed with the driver’s run cycle.

Congratulations! You have a fully animated character! Now that you know how to rig and animate your character by hand, let’s look at inverse kinematics.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Creating the driver’s run cycle