Drawing the driver’s torso

The creation of the torso will begin in the same fashion as the previous elements.

1. Hide your head layer, and create a new layer above it named body.

2. Use the Rectangle tool to draw a shape with a blue ﬁll (#0066CC) and no stroke that approximates the

driver’s body (Figure 2.50).

Figure 2.50 This rectangle will form the driver’s body.

3. Use the Selection tool to pull each corner so that the rectangle more accurately resembles the size and shape

of the body in the sketch (Figure 2.51).

Figure 2.51 The adjusted body shape.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

4. Pull the sides to create curves that resemble the body in the sketch (Figures 2.52 and 2.53).

Figure 2.52 Adjust the curves one at a time.

Figure 2.53 Continue adjusting the curves until the shape matches the original sketch.

5. Draw a second rectangle with a light blue ﬁll color (#58A3ED) inside the body shape. This will be the shirt

collar (Figure 2.54).

Figure 2.54 The light blue rectangle will form the shirt collar.

Chapter 2 Character Animation

6. With the Snap feature selected, use the Selection tool to snap the corner points of the collar shape to

the corner points of the shirt shape. Bending the top edge of the collar shape will help make this easier (Figure 2.55).

Figure 2.55 Use the Selection tool to reshape the collar.

7. Continue bending edges, and use the Paint Bucket tool, if necessary, to ﬁll in the top of the collar (Figure 2.56).

Figure 2.56 The collar is flush with the top of the torso.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

8. Bend the left edge of the collar shape inward so that it appears as though the collar is sitting on top of the

shirt (Figure 2.57).

Figure 2.57 The completed collar.

9. To create the pants, use the Selection tool to select the bottom third of the body shape (Figure 2.58).

Figure 2.58 Use the Selection tool to drag a rectangular selection at the bottom third of the torso.

Chapter 2 Character Animation

10. With this area still selected, select a dark gray (#333333) ﬁll color from the Properties panel (Figure 2.59).

Figure 2.59 The driver’s pants now sport a sepa- rate color.

11. Deselect all (Command+Shift+A/Ctrl+Shift+A), and then use the Selection tool to bend the shape where

the two colors meet at the waist. This will suggest some volume to his torso (Figure 2.60).

Figure 2.60 The adjusted waistline.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

12. Use the Ink Bottle tool to apply a dark blue (#004D9B) stroke to the shirt and a black (#000000) stroke to the

pants. If necessary, select your stroke with the Selection tool and use the Properties panel to adjust its thickness (Figure 2.61).

Figure 2.61 You can adjust the width of the stroke in the Properties panel.

13. Add a dark blue stroke around the collar as well (Figure 2.62).

Figure 2.62 The driver’s torso and pants outlines are now complete.

Chapter 2 Character Animation

14. Select the contents of the body layer and convert them to a single Graphic symbol (F8) named driver_body.

15. Show your head layer and reposition the body and head as necessary. The collar should be slightly wider than

the head symbol to ensure that when the head moves, it remains behind the body symbol (Figure 2.63).

Figure 2.63 The driver’s collar is slightly wider than his face.

16. Save your document. Now that you have the head and the body, only the extrem-

ities remain.

Drawing the driver’s limbs

A character’s arms and legs are essential to creating the illusion that the character is walking or running. Thus, the corresponding artwork will require a bit of extra detail.

1. Hide the head and body layers to reveal the sketch underneath. Create a new layer named arm.

2. Use the Brush tool with a dark blue ﬁll (#004D9B) to draw the outline of the sleeve (Figure 2.64).

Figure 2.64 The outline of the sleeve drawn with the Brush tool.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

3. Use the Brush tool with a dark skin ﬁll (#BE984C) to draw the outline of the hand (Figure 2.65).

Figure 2.65 The outline of the hand drawn with the Brush tool.

4. Switch to the light blue ﬁll color (#0066CC) and draw a shoulder to close the sleeve (Figure 2.66).

Figure 2.66 Gaps are removed along the outline of the shape in order to add the fill.

5. Use the Paint Bucket tool with the same blue color to ﬁll the sleeve. Then use the Paint Bucket tool with

the lighter skin color (#FFCC66) to ﬁll the hand. Normally, when designing a char-

(Figure 2.67).

acter, you might draw the arms in a

relatively relaxed position. However, because this driver will be running,

Figure 2.67 The completed arm. the character has been designed to

be in a running pose from the start.

6. Select the entire arm and convert it to a symbol named driver_arm.

Chapter 2 Character Animation

You’ll now create the two legs using a single symbol. The driver’s leg and foot will be drawn as one object. In many cases the leg and foot are broken down into three parts: upper leg, lower leg, and foot (or shoe). This character is somewhat simple because his only tasks are to stand still and run.

1. Lock and hide the arm layer, and create a new layer above it named front leg.

2. Draw a rectangle with a dark gray ﬁll (#333333) and no stroke to begin the leg shape (Figure 2.68).

Figure 2.68 The leg starts with a simple rectangle.

3. Using the Selection tool, pull the corners of the shape until it roughly resembles the shape in the sketch

(Figure 2.69).

Figure 2.69 Adjust the shape using the Selection tool.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

4. Continue using the Selection tool to pull the edges of the shape to create contours that closely match the leg

in the sketch (Figure 2.70).

Figure 2.70 The contoured leg shape.

5. Draw a second, smaller rectangle for the foot (Figure 2.71).

Figure 2.71 The smaller rectangle will form the foot.

6. With the Snap feature on, use the Selection tool to snap the corner points to the leg and bend the edges to

create the contours and curves that resemble the sketch (Figure 2.72).

Figure 2.72 Use the Selection tool to reshape the foot.

7. Use the Ink Bottle tool to add a black stroke to the completed shape (Figure 2.73).

Chapter 2 Character Animation

Figure 2.73 The completed leg artwork.

8. Convert the entire leg to a Graphic symbol (F8) named driver_leg. Instead of drawing a second leg, you’ll reuse

the symbol you just created.

9. Copy your leg instance (Command+C/Ctrl+C), and create a new layer named back leg below the body layer.

Paste (Command+V/Ctrl+V) the leg into your new layer and lock the front leg layer.

10. Use the Free Transform tool to rotate and position the back leg; you may want to make it slightly smaller to

suggest perspective (Figure 2.74).

Figure 2.74 The back leg in position.

11. In the Properties panel, in the Style menu under Color Effect, select Tint. Apply black as the tint color with a

Tint value of about 33% (Figure 2.75). This will darken the second leg slightly, pushing it back as if in shadow (Figure 2.76).

Figure 2.75 Apply a tint via the Prop- erties panel.

Figure 2.76 The back leg with the tint applied.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Now you want to encapsulate your entire character (head, hat, eyes, mustache, hair, etc.) into a single symbol that can

be moved and scaled as one object.

1. Select all of your frames (including the one on the sketch layer), Ctrl-click/right-click, and choose Cut

Frames.

2. Choose Insert > New Symbol, and create a new Movie Clip symbol named driver.

3. Inside your new symbol, Ctrl-click/right-click on the ﬁrst frame, and choose Paste Frames. All your layers

should be intact (Figure 2.77).

Figure 2.77 All the driver’s layers are now inside the driver symbol.

4. Create a new layer just above the sketch layer named shadow.

Chapter 2 Character Animation

5. Use the Oval tool with a black ﬁll (no stroke) mixed with about 20% Alpha transparency to draw ﬂattened oval.

6. Select the oval and convert it to a symbol named driver_shadow (Figure 2.78).

7. You can now hide your sketch layer, because you no longer need it, and return to the main Timeline by

Figure 2.78 The shadow adds an extra

clicking Scene 1 at the top-left corner of your screen.

bit of realism to the character.

8. Create a new layer named driver, and drag an instance of the driver symbol from the Library onto the Stage.

Delete all layers on your main Timeline except for the driver layer.

9. Save your document. Congratulations! The driver character is complete and

ready for animation (Figure 2.79).

Figure 2.79 The final character, composed of individual symbols, is ready for animation.

Now that you’re almost rolling, let’s get that character prepped for animation.

Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques

Drawing the driver’s torso