6.1. Drawing a Cartoon Character The first thing you need for your cartoon character is a body. Since this character will serve as a mascot for this book, you'll make his body from a box and then add a face and legs. In doing so, you'll see how the configuration options for the tools you will use affect the outcome of each drawn part. In more complex situations you might sketch some character prototypes on paper and create a storyboard for the animation, but for this simple task you will focus strictly on how to use Flash. 6.1.1. Starting with the Body Start by creating the body for the character. Later, you'll add other elements and create a background image for Box Guy to walk in front of for a short distance. First, you have to create a document and configure your tools: Create a new Flash document and save it as box_guy.fla in the 06 folder. Change the Stage dimensions to 550 x 200. Select the Rectangle tool by pressing R (no modifier key necessary). In the Rectangle tool's Options area (in the context-sensitive lower portion of the Tools panel), select Object Drawing mode, as seen in Figure 6-1, if it is not already selected. You will practice with both drawing modes in this exercise. Figure 6-1. The Rectangle tool's Object Drawing mode option In the Properties panel, set the Rectangle tool's stroke color to dark gray, set the stroke weight to 1, and choose Solid for the stroke style. Choose square caps and a miter join, as seen in Figure 6-2. For the fill color, choose a lighter gray. Now that you've got the Rectangle tool configured, draw a box. On the Stage, hold down the Shift key and draw a rectangle. The Shift key helps by constraining your drawing into a perfect square. Because you're in Object Drawing mode, the square has effectively been "pre-grouped," so it won't interact with any other shapes. Figure 6-2. The Properties panel, showing the Rectangle tool's Cap and Join settings If the square is not still selected, activate the Selection tool by pressing V. Then resize the square to 80 x 80 pixels using the Properties panel.
Like most men, Box Guy could use some depth if he's going to appeal to the other Box People out there. Draw another square and turn him into a cube, again using Object Drawing mode: Alt-drag (Win) or Option-drag (Mac) the square to duplicate it. Position the copy a little bit above and to the right of the first square but overlapping it, as shown in the first grouping of Figure 6-3. Because you used Object Drawing mode, you are free to move the second square around, deselecting it if necessary, without concern about the two shapes affecting each other. Once you are satisfied with the position of the second square, select both squares and choose Modify Break Apart (Ctrl/Cmd-B). Now the two shapes will interact and can be connected with additional lines. For the next lines you draw, you will use Merge Drawing mode. Select the Line tool. In the Line tool options in the bottom of the Tools panel, be sure that Object Drawing mode is disabled and Snap to Objects is enabled. Use the Line tool to draw a connecting line from the upper-left corner of the first square to the upper-left corner of the second square. You should see the cursor snap into position at the corner of the underlying square. Next, draw connecting lines from the lower-left and lower-right corners of the top square to their corresponding corners in the lower square. The result is shown in the second grouping of Figure 6-3. Figure 6-3. Build a box from scratch
Your drawing now looks almost like a cube, but the incomplete left and bottom sides cause this work in progress to fall short of a three-dimensional box. Fortunately, the interaction of the shapes you've drawn will work in your favor and make this easy to correct: Select the remaining top horizontal line of the first box. Be sure not to double-click, which would select the entire stroke. With only the small horizontal segment selected, delete it. With the same care, select the remaining vertical line on the right side of the first box and delete it as well. The result is shown in the third grouping of Figure 6-3. Select the Paint Bucket tool and confirm that the previous light gray fill color is still selected. If not, select it now. (If you don't recall which color you chose, you can use the Eyedropper tool to pick the color from your drawing.) Add the fill color to the white areas that remain in the top left and lower right of the drawing. If the fills don't get applied, choose Close Medium Gaps or Close Large Gaps from the Paint Bucket tool options in the Tools panel and try to apply them again. Select the fill area that represents the bottom of the box and change its color to dark gray. The box now looks as if its bottom is shaded because of overhead lighting, as shown in the last grouping of Figure 6-3.
Now you have a body for your cartoon mascot. Soon, you'll add a face and legs, but the legs should appear to emerge from the bottom of the box. You can place items closer to the foreground or background (called z-positioning or the stacking order) using layers. Separate the front and back of the box, convert them to symbols, and put them in separate layers: Double-click the fill area of the box in front to select its fill and stroke. Convert it to a graphic symbol by choosing Modify Convert to Symbol (F8) and setting the Behavior type to Graphic. (Youll use the same procedure for creating other graphic symbols.) Name the symbol front of box. Shift-select the remaining fills and strokes of the cube and convert them to a graphic symbol called back of box. Choose Edit Cut (or press Ctrl/Cmd-X) to cut the Add a new layer to the timeline and drag it underneath Layer 1. Choose Edit Paste in Place (Ctrl/Cmd-Shift-V) to paste the Rename the top layer front of box and the bottom layer back of box. Save your work.
Soon, you'll draw legs in a layer between the front of box and back of box layers, so that the legs appear to emerge from the bottom of the box. First, however, give the character a face. 6.1.2. Adding a Face In this section, you'll create a face using several movie clips in separate layers. You'll use separate movie clips for each eye and the mouth. To add the face to the character: Add a new layer to the timeline, above the others, and name it face. Doing this first ensures that when you create the eyes and the mouth, they'll be in the face layer. Create an oval for an eye. Select the Oval tool from the Tools panel and position the tool just above and to the left of the center of the box (where an eye might be). Draw a vertical oval about 20 pixels tall, and make sure the fill and stroke colors are both dark gray. | For Instance | You learned earlier how to create instances on the Stage from symbols in the Library. Symbol names, which are assigned in the Symbol Properties dialog when creating a symbol, are primarily used to identify items in the Library. Instance names, which are assigned via the Properties panel, are used to identify symbols on the Stage so they can be controlled via ActionScript. Some Flash elements, such as graphic symbols, can't be given instance names. This is because they cannot be controlled with ActionScript. Any ActionScript intended to access or control movie clips, buttons, text fields, components, or similar objects won't work unless you first assign the target items instance names. Using the Flash interface, you can easily assign an instance name to an applicable object at authoring time. Select the object on the Stage and enter the instance name on the left side of the Properties panel, where you will typically see the placeholder text "<Instance Name>," or an empty field. Using ActionScript, names can also be assigned to relevant symbol instances created from a Library symbol at runtime. For example, using ActionScript, you might dynamically create 20 balloon instances from a single balloon Library symbol. In this case, the new instance names can be specified at the time the symbol instances are created. You can use any names you like for instances, as long as they follow a few simple rules. An instance name must be one word, cannot have spaces, should not start with a number, and should not already exist in the ActionScript lexicon. If multiple-word names are desired, it's common to use underscores (_) between words. Another popular alternative is so-called camelCase, also known as mixed-Case or interCaps, in which the first word is lowercase and subsequent words are given initial capital letters. Not all instances must be named. If, for example, ActionScript does not refer to an instance, you might not bother naming it. It's important to understand the difference between symbol names and instance names, although Flash documentation (including this book) often glosses over this difference in the interest of readability. This book uses font conventions to distinguish between the two types of name: throughout the book, when named objects are discussed, Library symbol names are shown in italics and instance names are shown in fixed-width text. For example, if the book refers to the back of box instance, you should understand that it is technically an unnamed, on-Stage instance of the symbol named back of box in the Library. If it refers to box_guy_mc, you should know that this refers to a named instance of the box_guy_mc move clip symbol. |
Convert the oval to a symbol and name it eye_mc. Instead of creating a graphic symbol, however, choose Movie Clip for the Behavior type in the Convert to Symbol dialog box. In just a minute, you'll enhance the eye_mc movie clip symbol to make the eyes blink independently of the animation on the main timeline. Alt-drag (Win) or Option-drag (Mac) the eye_mc instance to the right, to create a second instance. Take advantage of Flash's drawing tools to create the smile. Draw a straight line using the Line tool, and then switch to the Selection tool. Click once on an empty area of the Stage to be sure the grim mouth is not selected. Next, click on the middle of the line and drag it down. A natural arc will form to create the smile, as shown in Figure 6-4. Figure 6-4. Drawing the mouth (left) and the finished face of the box character (right) Use the same technique to create dimples at each end of the smile. Arrange the finished smile and two eyes to make a face. Select the two eyes and mouth, and position them over the front of box instance to give the character its face. With the two eyes and mouth still selected, convert them to a movie clip symbol, and name it face_mc. You want to group them together into one symbol so they can be positioned as one entity. (Frankly, you could use Modify Group instead of creating a symbol if your only goal was to group them together. However, creating a symbol gives you the ability to control the Save your work.
In order for the eyes to blink, face_mc must be a movie clip, not a graphic symbol. Adding the _mc suffix to the end of movie clip symbol names makes them easier to identify in the Library; however, the symbol's type is typically determined by the setting in the Symbol Property dialog box at the time of creation, and not by the name's suffix. Our character is starting to get a personality, but there's still plenty to be done. 6.1.3. Animating the Eyes To bring your cartoon character to life, you need to give him some human characteristics, such as blinking eyes. As alluded to earlier, movie clips come in handy here because they allow the eyes to move independently of the remainder of the character. Thus, Box Guy can walk and blink at the same time, or he can just blink like a proverbial deer in the headlights. 6.1.4. Using movie clips to create independent animations A movie clip acts like a movie within a movie. Each movie clip symbol has its own timeline, and movie clip instances play independently of the main timeline. So, if you create a 25-frame animation in a movie clip symbol's timeline and place an instance of the symbol on the Stage, it will play even if the main timeline is stopped. You need the character's eyes to blink regardless of what is going on in the rest of the animation, so use a movie clip to create a blinking eye animation: Double-click the face_mc symbol, and then double-click on one of the eye_mc instances. This lets you edit its symbol in place. Make sure you're editing the correct symbol by checking the Edit bar, which should say Scene 1, face_mc, eye_mc. (If the Edit bar says Scene 1, face_mc, the first double-click opened the face_mc symbol for editing; double-click again on an eye_mc instance to edit the eye_mc symbol.) Notice that the movie clip symbol has its own timeline and can contain one or more layers. Select frame 32 of the eye_mc clip's timeline and press F5 to add a frame. (Here, the term "eye_mc clip" is used for brevity, but it is technically an on-Stage clip instance of the eye_mc movie clip symbol from the Library. Did you notice the difference, and were you able to discern its meaning in context?) | Movie Clips | Movie clip symbols are the worker bees of the Flash world. You'll use them in almost every Flash project. A movie clip instance (or simply clip for short) is typically derived from a movie clip symbol in the Library. The symbol can be created from something already on the Stage, using the Modify Convert to Symbol command, or created from scratch, using Insert New Symbol (Ctrl/Cmd-F8). A movie clip symbol has its own layers and timeline, just like the main movie. It can contain vectors, bitmaps, sounds, or even other symbols, including button, graphic, and other movie clip symbols. The term Placing multiple elements within a movie clip is not the same as grouping (which can be achieved by selecting multiple objects on the Stage and choosing Modify Group). Grouped objectssuch as multiple shapes or the fill and stroke for a single shapedo not have their own timelines, and they cannot be targeted through ActionScript. This distinction will become clearer as you learn more about movie clips, but for now, assume that for maximum efficiency, any asset you expect to reuse should be converted to a symbol. nested clips (i.e., clips arranged within other clips, creating a hierarchy) via ActionScript. |
Add a new keyframe at frame 30. At frame 30, select and delete the fill within the oval. Then, select and delete most of the stroke, leaving only a curved line at the bottom, as shown in Figure 6-5. This makes the eye appear closed, which is part of the blink sequence. Figure 6-5. The closed eye for the blinking animation Press Enter/Return to watch the animation. When the playhead reaches frame 30, the eye animation closes for two frames, then stops. Return to Scene 1 by clicking Scene 1 in the Edit bar, and choose Control Test Movie or press Ctrl-Enter (Win) or Cmd-Return (Mac) to see the animation. Save your work.
There is only one frame in the main timeline, but the blinking eye animation takes place in the eye_mc clip's timeline. The eye_mc clipsremember, there are two instances of the eye_mc clip symbol in Layer 1 of the face_mc symbol's timelineplay in their entirety and then loop. So, no matter what the rest of the character is doing in the animation, the eyes continue to blink. This separation of character parts makes movie clips very useful for animators. Once the parts of a character have been created, they can be reused whenever necessary, and they can be manipulated independently, so the eyes or mouth can animate independently of the legs. This allows you to combine them in different ways, for much more variation without a lot of extra work. For example, if animating a dog, you might use one movie clip to create a wagging tail and a second clip for the dog's legs moving. You might then turn the whole dog into a movie clip that can be controlled independently of the dog's owner (another clip) on the Stage. Next, you'll draw legs for your character and animate them so you can make him walk across the Stage. 6.1.5. Drawing the Legs So far, Box Guy is a bit of a bore. All he does is sit there and blink. You want him to walk across the Stage, so you need to give him some legs. Here, you'll create a walk cycle (i.e., a series of character positions that, when played in sequence, makes the character appear to walk): Insert a layer between the front of box and back of box layers, and name the new layer legs. Activate the Pencil tool, and choose Smooth in the Tools panel's Options section. Instead of the default behavior of straightening the lines you draw, Flash will now smooth them. | Walk Cycles | This exercise demonstrates a very simple walk cycle in which Box Guy's legs move in two successive positions. A more realistic walk cycle might include swinging a character's arms or adding a bounce to its steps. Other animation cycles could be developed to show the character moving at different speeds. A horse's run, for example, is not simply a faster version of its walk. Also, consider these cycles from different angles, allowing the character to walk or run to the left, right, foreground, and background. As a character moves from the foreground to the background, its size should change relative to its distance from the viewer. Observe both the physical world and existing cartoons to find animation cycles to imitate. An important part of creating cartoons is making sure a character walks and moves in a way that is appropriate. For example, a giraffe, which generally has very long legs, covers much more ground in a single walk cycle than a squirrel, so if using the two side by side, you might animate the squirrel running as fast as it can while the giraffe walks slowly beside the squirrel. The important part is that you don't have the character covering too much (or too little) ground in each part of its walk cycle. If the walk cycle covers too little ground compared to how far you move the character across the Stage, the character appears to slide across the Stage instead of walking. Likewise, if the walk cycle covers too much ground, the character appears to slip in place, like an ice skater with no traction. Another thing to watch for is walk cycle "stutter." When the first and last frames of a walk cycle are identical, the cycle can appear to stutter, or stall, for a fraction of a second. This is demonstrated in the bouncing ball files in the "Realistic Motion" discussion in Chapter 3, and it's something you'll practice avoiding with Box Guy later on. As a simple example, think of a cycle of letters: "a, b, c, b, a." If you looped this sequence, like a walk cycle, the last "a" would be followed by the first "a," and it would read "a, b, c, b, a, a, b, c, b, a." To avoid this, make sure the last keyframe of a walk cycle doesn't match the first. If you've tweened the animation, it is common to delete the last keyframe or alter it a bit so animation appears to be just short of completion in its final frame. The loop will then look more natural. Using the letter metaphor again, the new sequence would be: "a, b, c, b." When looped, the sequence would read: "a, b, c, b, a, b, c, b." After a little experimentation, you'll see that creating good-looking walk cycles can be difficult and time-consuming. There are lots of tricks to reduce the number of positions in a walk cycle, which reduces both the time required of the animator and the movie's download size. For example, you can flip the character (by selecting the object and choosing Modify Transform Flip Horizontal) to create a walk cycle in the opposite direction. You can also make the character hop slightly so that it doesnt appear to slide across the floor inappropriately. For details on these and additional animation tips, pick up a copy of Sham Bhangal's Flash Hacks (O'Reilly). |
Somewhere on the Stage, in the legs layer, draw a leg with a foot similar to what you see in Figure 6-6, and convert it to a graphic symbol. If you prefer, you can open box_guy_complete.fla, located in the 06 folder, and copy and paste the drawing inside the leg symbol. (To enter Edit mode for the symbol, double-click on the symbol icon in the Library.) Alt-drag (Win) or Option-drag (Mac) to duplicate the leg (we want him to walk, not hop, so he'll need two legs). Shift-select both legs and convert them to a graphic symbol named legs. Then position the legs instance underneath the front of box instance so the legs appear to emerge from the bottom of the cube, as shown in Figure 6-6. Figure 6-6. Box Guy's legs appear to emerge from the bottom of the cube Save your work.
To see your mascot in action, you'll make him move from one spot on the Stage to another and stop. Start by turning him into a movie clip symbol, which makes it easier to control him using the timeline or ActionScript: If you wish, save a backup of your file. Select all the parts of the character and convert them into a movie clip symbol named box_guy_mc. Three of the four layers in the timeline are now empty, because all of the parts contained in those layers are now part of a single symbol in one layer. Delete the empty layers and rename the remaining layer box_guy. Soon, you'll use ActionScript to control the instance of the box_guy_mc symbol, so you must give it an instance name. Assign this clip the instance name box_guy_mc in the Properties panel.
Note: ActionScript can't control a movie clip instance unless it is first given an instance name, as discussed in the "For Instance" sidebar, earlier in this chapter.
You want the character to move across the Stage from left to right. You do this by placing him at different positions in the starting and ending keyframes and then tweening the animation: There is always a keyframe in frame 1, so you'll use that as the starting point for the animation. Select frame 1 and then drag the box_guy_mc clip off the Stage to the left. Insert a keyframe at frame 60. In frame 60, drag box_guy_mc to the right side of the Stage. Select any frame in the box_guy layer, before the keyframe at frame 60, and choose Motion from the Tween drop-down list in the Properties panel. This causes Flash to tween the character from the starting position to the ending position. Save your work and test the movie (Control Test Movie).
6.1.6. Making Him Walk Okayso you saw that coming, right? The character blinks and slides from the left side of the Stage to the right, but his legs don't move and the animation loops back to the beginning. It's easy to fix both problems: Close the Test Movie mode's Preview window and double-click on the box_guy_mc clip to edit the box_guy_mc symbol in place. Select the instance of the legs symbol, which is nested inside the box_guy_mc symbol. You converted the legs to a graphic symbol earlier, but now you want to animate them, so you need to change the symbol type of legs to Movie Clip. You could break apart the symbol and create a new one, but there is an easier way to accomplish your goal that also won't contribute to file size by creating a new symbol. In the Properties panel, choose Movie Clip from the Symbol Behavior drop-down list. This allows the symbol instance to behave as a movie clip. Assign legs_mc as the instance name for the legs symbol. Open the Library (Ctrl/Cmd-L or F11), select the legs symbol, and click the Information icon in the lower-left corner, shown in Figure 6-7, to open the Symbol Properties dialog box. Figure 6-7. Click the Information icon in the Library to open the Symbol Properties dialog box
Note: Even though you changed the Behavior type of the instance on the Stage in step 3, you must also change the original symbol's Behavior type for it to truly become a movie clip. Setting different Behavior types for Library symbols and their on-Stage instances can become confusing, but it can also be very handy. For example, if you have a graphic instance on the Stage that you'd like to reposition via ActionScript, you can simply change the Behavior type of the instance to Movie Clip and assign it an instance name.
In the dialog box, change the legs symbol's Behavior type from Graphic to Movie Clip, rename the symbol legs_mc (to help identify it as a movie clip in the Library and to keep names consistent for easy cross-referencing), and click OK to close the dialog box. The symbol is now a movie clip.
To finish up, you must animate the legs in their own timeline to create the walking action: Double-click on the legs_mc instance to edit the legs_mc symbol in place. The Edit bar indicates you are now editing Scene 1, box_guy, legs_mc. In other words, you are editing the legs_mc movie clip symbol, an instance of which is located inside the box_guy_mc movie clip symbol, an instance of which is, in turn, located in the main timeline. That is, editing a movie clip in place edits the original symbol, not the on-Stage instance of the clip.
Note: Remember, when a symbol is placed on the Stage, Flash creates a reference, called an instance, to its Library counterpart. However, double-clicking the instance edits the original symbol from which it is derived. Therefore, every other instance derived from this symbol will also reflect any changes you make.
Shift-select both legs and choose Modify Timeline Distribute to Layers to place the legs in individual layers. Delete Activate the Free Transform tool from the Tools panel, and select the back leg. Eight handles appear around the bounding box of the leg, as shown in Figure 6-8. Move the cursor over the top corner handle and, when the cursor appears as a rotating arrow, click and drag to rotate the leg until it's in a starting position that looks natural for walking. The Free Transform tool can also be used to skew and resize an object on the Stage, which you'll read more about later. Figure 6-8. The Free Transform tool displays handles used to rotate, skew, or resize an object on the Stage With the back leg still selected with the Free Transform tool, move the center circle, or anchor point, to the top of the leg. When you rotate the leg again in a moment, it will rotate around its anchor point, like a construction-paper puppet with limbs held together by brass connectors at the joints. Repeat steps 3 and 4 for the front leg. Insert keyframes in both layers at frame 5 and frame 10. The legs need to rotate from frame 1 to frame 5, and then return to their starting position at frame 10. Adding the ending keyframe ensures that the leg positions at frames 1 and 10 match, because a new keyframe always inherits what is in the previous keyframe. Leaving frames 1 and 10 as they are makes your animation loop seamlessly. Select frame 5 in the back_leg layer and use the Free Transform tool to rotate the leg again. (You may need to first reposition the anchor point in the leg graphic, because you've added keyframes since you first set the anchor point.) This time, rotate it so it appears to move from being the trailing foot to the lead foot. Conversely, rotate the front leg in the front_leg layer so the foot goes from being the lead foot to the trailing foot (again, you may need to first reposition the anchor point). This alternation of the feet will provide the illusion of walking. Create a motion tween in both layers, from frame 1 to frame 5 and then from frame 5 to frame 10. To select multiple frame spans, select a frame in one of the frame spans, then press Ctrl (Win) or Cmd (Mac) and select a frame in each of the other frame spans. Then choose Motion from the Tween drop-down list in the Properties panel to apply a motion tween to every frame span at once. The timeline should match Figure 6-9.
Save your work and test the movie. Figure 6-9. The timeline for legs_mc
Note: As discussed in the "Walk Cycles" sidebar, when the first and last frames of a walk cycle are identical, the cycle can appear to "stutter" for a fraction of a second. To avoid this stutter effect, alter the last keyframe of a walk cycle so it appears to be just short of completion. In the previous exercise, add a new keyframe in frame 9 of each of the legs, and delete each frame 10. Alternately, you could rotate the leg in keyframe 10 back a smidge in the direction it was swinging from, to give the character a stylish gait.
6.1.7. Making Him Stop Things are starting to look good, but the animation in the main timeline is automatically looping, causing Box Guy to suddenly jump from the right side of the Stage back to the left side, where he started. Just like in Chapter 3, you need to add a stop() action to stop the main timeline: Close the Preview window and return to Scene 1 (using the Edit bar). Add a new layer to the main timeline and name it actions. Remember, it's a good practice to keep all ActionScript in its own layer so it's easy to find. Add a keyframe to frame 60 in the actions layer. Open the Actions panel (Window Development Panels Actions or F9). In the Script pane of the Actions panel, add the command stop(); in frame 60. This causes the main timeline to stop animating once frame 60 is reached. Save your work and test the movie.
Now the character walks his way from the left side of the Stage to the right side in a fluid motion, and then stops. However, even though Box Guy stops, his legs seem to have minds of their own. In fact, the movie clip for the blinking eyes and the clip for the legs both continue to play even though the main timeline is stopped. This reveals an important fact: when you stop or play a clip via ActionScript, nested clips do not automatically stop or play at the same time. That is, a parent clip and its nested clip have timelines that play independently. Next, you'll use ActionScript to stop Box Guy's legs from moving. You'll leave the eyes blinking periodically, for realism. |