Animations and Interaction - Animating the Spearman and the Buffalo

(Page 11 of 11 )

 

To begin, create all the parts of the spearman. Each part should be transformed into a Graphic symbol. Given the simplicity of the character, the upper arms double as the thighs, and the forearms are used as the calves. The following inventory is a guide:

• Torso and head

• Spear

• Thigh/upper arm

• Forearm/calf

---

Okay Now, In Together and Out Together - An important positioning tip to remember about the movement of four-legged animals is that the legs on each side are opposite one another and of the legs on the opposite side. That is, when the left foreleg is outward away from the center of the body, the hind leg is also outward. At the time that the two left legs are outward, the right legs are inward. (In the second and third photographs in the bottom row in Figure 4.4 near the beginning of the chapter, you can see this clearly.) This phenomenon varies with the speed that the animal is moving, and although you can clearly see the positions of the buffalo's legs in the drawings in Figure 4.36, the buffalo in Muybridge's photos is not quite as cooperative in positioning his legs.

---

A simple trick is to use a 4-point line for the thigh/upper arm and a 3-point line for the calf/forearm. After turning all the drawings into Graphic symbols, use the Free Transform tool to position the center points at the joint locations.

Once all the body parts and the spear are made, use the layers and folders in the order shown in Figure 4.37.

Figure 4.37 - The layers, folders, and tweens for the spearman.

Note the center points of the spearman character in Figure 4.37. The only center point not used is the spear, which retains its original position in the center of the spear line.

Use the following steps to complete the spearman animated character:

1. Add 24 frames to all the layers so that each layer has a total of 25 frames.

2. Beginning in Frame 1, use Figure 4.35 as a guide to position the parts. Only a single part is placed in each layer. Once the character is positioned in Frame 1, add keyframes in Frames 25, 18, 15, 10, and 5, in that order. In this way, you will have the beginning figure in all the frames.

3. Frames 1, 10, and 25 use the same positions for the body, so you can leave those alone except for Frame 25, where you place the spear about 300 pixels from the spearman character at about a 45-degree angle in the "ground." (No buffaloes were harmed in the production of this movie.)

4. In the other frames, use the sequence shown in Figure 4.35, remembering that the first and third positions are identical.

5. Add motion tweens to all layers in Frames 1, 5, 10, 15, and 18.

Once you have completed placing the character parts where they belong and set motion tweens in their places, test the movie by following these steps:

1. To create a movie clip for this character, select all the layers and frames and then right-click (Control-click on the Mac) any of the selected frames to bring up the context menu. Select Copy Frames.

2. Select Insert, New Symbol from the main menu and then select Movie Clip for the behavior and SpearMan for the name in the Symbol dialog box.

3. In the symbol-editing Timeline, click the first frame and then right-click (Control-click on the Mac) the frame to bring up the context menu. Select Paste Frames. All the frames, folders, and positioned elements will appear in the movie clip's Timeline.

4. Exit the Symbol Editor and open a new document. Open the Library panel and drag a copy of the SpearMan movie clip to the Stage. Test the movie to see if it works correctly. If it does, save the movie and prepare to create the buffalo movie clip.

---

It's Only an Illustration: Don't Do This Without an Adult Present - The preceding process is a little convoluted, and it's included simply to show you how to copy and paste frames and layers into another Timeline.

---

Animating the Buffalo

Creating the parts is a little different for the buffalo. You will use the same document in which the SpearMan movie clip has been placed on the Stage. First, use the following parts inventory to get started:

• Torso, head, and tail

• Front shoulder

• Front foreleg

• Upper hind and leg

• Hind hoof and foreleg

Unlike the simple petroglyph character of spearman, creating the buffalo takes a different tack:

1. First draw or trace the buffalo. Then use the Oval tool with no fill to draw circles in the front shoulder area and rear hind area. The center of these circles come to be the pivot points for the legs.

2. Divide the buffalo drawing into the parts detailed in the preceding bulleted list and turn all the drawings into Graphic symbols.

3. Because the buffalo is to be made as a movie clip, press Ctrl+F8 (Cmd+F8 on the Mac) to open the Create New Symbol dialog box, select Movie Clip for the behavior, and name it BufRun.

4. Using Figure 4.38 as a guide, create the folders and layers. Each layer should only contain a single buffalo part, with the layer name indicating which part belongs in the layer.

Figure 4.38 - The BufRun movie clip layers.

Now complete the buffalo movie clip:

1. Add 12 frames to all the layers so that each layer has a total of 13 frames.

2. Beginning in Frame 1, refer to Figure 4.39 as a guide to position the buffalo parts. Only a single part is placed in each layer. Once the character is positioned in Frame 1, add keyframes in Frames 13, 10, 7, and 4, in that order. This way, you will have the beginning figure in all the frames.

3. Frames 1 and 13 use the same positions for the body, so you do not need to change the positions in Frame 13. Likewise, Frames 5 and 10 are identical. When you've completed Frame 5, copy and paste all the layers in Frame 5 to Frame 10.

4. Once all the positions are set in the keyframes, place motion tweens in all the keyframes except the last one (Frame 13).

The buffalo is easier to animate than spearman because its body is in fewer positions. Also, the keyframes are closer together to move the buffalo's legs faster, giving it a more urgent trot.

Figure 4.39 - The buffalo's running positions.

Bringing the Parts Together

The rest of the movie is pretty simple once you have the two main movie clips built. Here are the steps to follow:

1. First, set the Stage size to 600x200, which is a bit big for a banner ad, but given the size and resolution of contemporary monitors, it's not overwhelming.

2. As shown in Figure 4.40, use four layers, named Actions, Text, Spear Man, and Buffalo. Drag an instance of each movie clip onto the Stage, placing each in the appropriately labeled layer. Use the positions shown in Figure 4.40 as a guide.

3. Once you have the initial Stage set up and the layers inserted, create frames out to Frame 35 for all layers.

Figure 4.40 - Initial positions of the movie clips.

Now use the following steps to finish up the movie:

1. Give the spearman movie clip the instance name spearMan_mc, and give the buffalo movie clip the instance name buf_mc.

2. Click the first frame of the Actions panel and place the following script in the Actions panel:

   stop();
   spearMan_mc.stop();
   buf_mc.stop(); buf_mc.onPress = function() {
   this.play();
   spearMan_mc.play();
   play();
   };
   buf_mc.onEnterFrame = function() {
   if (this.buf_mc._x<200) {
   this.stop(); _level0.stop();
   }
   };
   
   The script addresses both the movie clips and the main Timeline, and to completely stop a movie, each movie clip must be addressed separately.
   

3. In the Text layer, place a 32-point message using a static text field. (Use any message you like.) At the bottom of the banner, tell the user to click the buffalo to start the action.

4. Add a keyframe to Frame 2 of the Text layer. Select the keyframe and delete the instructions at the bottom of the banner. Add a keyframe to Frame 35. Remove the beginning message and add an ending message. (Use any message you want or the one shown later on, in Figure 4.42).

5. In the Spear Man layer, on which only the spearMan_mc instance should be placed, add a keyframe in Frame 30. Add another keyframe in Frame 26. Using the Free Transform tool, drag the center point of the movie clip to the middle of the spear thrower's body, and in Frame 30 place the spearMan_mc instance at the top of the banner and invert it, still using the Free Transform tool. Only a small portion of the top of the movie clip should be visible in the upper-left corner of the Stage. Add motion tweens in Frames 1 and 26. Finally, add a blank keyframe in Frame 31. This will make spearman disappear from the Stage. Figure 4.41 shows the position of spearman in mid-tween between Frames 26 and 30.

6. In the Buffalo layer, with the buf_mc instance on the Stage, add a keyframe in the last frame. Move the buffalo movie clip to the far right side of the Stage, as shown in Figure 4.42.

   In Figure 4.42, you'll see a keyframe in Frame 26. This was placed there while repositioning the spearman movie clip, but it's unnecessary.

Figure 4.41 - Spearman being tweened and rotated upward.

 

Figure 4.42 - The final position of the buffalo movie clip.

---

Note: Buffalo Size Does Matter! - The script stops the movie when buf_mc moves to less than position 200 on the Stage. Results will vary depending on the size of the buffalo movie clip. If the movie doesn't stop, try adjusting the value to 200.

---

At this point, your banner ad should be complete. Use the test movie to see whether it works as expected. If it doesn't, make adjustments to either the movie clips or the main Timeline. Figure 4.43 shows how the banner ad appears shortly after the spear has been thrown and just before the spearman gets bounced off the Stage.

Figure 4.43 - The banner ad in the middle of the animated action.

What's Next?

This chapter has shown one of the key features of Flash—the ability to create animations. The banner ad only took up a little over 13KB of memory (14KB on disk). The amount and quality of animation possible with Flash provides the designer and developer with more flexibility in creating Web pages and sites because it adds the dimension of interactivity and animation.

In the next chapter, this discussion is continued as the full power of movie clips is examined further. Among other topics is a full discussion of the new MovieClip class, along with its many properties and methods. Although this chapter has explored the many documents you can create using movie clips, the next chapter takes it to the next level of functionality in Flash Pro.

In Brief

• Flash uses the same basic concepts of animation as traditional animation created without computers.

• Vector graphics help to make smooth animation because they're not distorted when changed in size, as are bitmapped graphics.

• The Timeline in Flash can be treated exactly like the Timeline in a Film Editor.

• Masks are used to show the viewer-selected portions of underlying layers.

• The new Timeline effects make it very simple to create complex animations.

• All the traditional animation methods can be applied in Flash to create realistic animated motions of people, animals, and other things.

This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today. Buy this book now.

 

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: Animations and Interaction

>>> Be the FIRST to comment on this article!