This chapter provides a quick review of animation basics and the fundamentals of tweening then discusses vector graphic vs. bitmap graphics, working the Timeline and Timeline effects, masking layers and coordinating animated parts. (Chapter 4 from the book, Macromedia Flash MX Professional 2004 by Bill Sanders, Sams, 2004, ISBN 0672326051.)
Animations and Interaction - Choosing Positions for a Figure (Page 10 of 11 )
A simple set of drawings is employed to test the animation. Like the proverb stating that a journey of a thousand miles begins with a single step, animating starts with a walk. A step has three parts. The first keyframe has the beginning position, the next keyframe is the "crossover" frame where one leg crosses over the other, and the third is the ending position where the step has been completed. Figure 4.32 shows the three basic positions.
The next step simply reverses the two ending positions, and the crossover frame shows the opposite leg crossing over.
When doing multiple positioning of different parts, use the guides and rulers to help keep the parts where they belong. Then, as the figure is tweened from one set of positions to another, it keeps a coherent appearance. The walking movements don't move the body—only the limbs. Therefore, a vertical guide helps to keep the head and torso horizontally aligned regardless of the angle at which the limbs have been positioned. Likewise, the horizontal guideline assists in positioning the arms and legs in different keyframes. Figure 4.33 shows the figure in the initial position with the guidelines in place. (Also note the different body parts with their center points positioned at the joints and the symbols in the Library panel.)
Figure 4.32 - A single step.
Figure 4.33 - Guides around the figure.
Copying and Pasting Frames
One of the timesaving features of Flash Pro is the ability to copy frames and paste them in another set of frames. A full step, for example, begins and ends with the figure in the same position. Rather than repositioning all the parts, you can copy and paste one set of positions in a different set of blank keyframes.
To copy and paste frames, follow these steps:
Select the frames and, with the pointer in one of the selected frames, right-click (Control-click on the Mac) the mouse to open the context menu.
Select Copy Frames from the menu.
To paste the frames and their contents, place the mouse pointer in a set of blank keyframes equivalent to the frames copied. (If you have 11 keyframes copied, you'll need 11 blank keyframes to paste the copied frames.) Figure 4.34 shows the keyframes in the first frame being copied.
Figure 4.34 - Copying frames.
You can use the copy/paste frames method to save time when creating a moving object made up of several coordinated parts. In the next section, you'll see how to copy frames to place the contents of the main Timeline into a movie clip.
Project: Animating an Advertisement
The following Flash banner ad begins with the premise that static graphics are primitive, and using styles from cave drawings, that point is displayed. The animated characters in the banner are a hunter, drawn in the petroglyph style, and a buffalo, rendered after a cave drawing. Both could have been drawn using the rectangular torso common in petroglyphs. However, both cave drawings and outdoor petroglyphs seem to provide far better detail to the animals than to humans, so the buffalo looks a lot more like a primitive bison than the spearman looks human. Nevertheless, both are primitive enough to get across the initial point that something in the banner, including the Smudger LET font, is primitive.
The scene shows a man with a spear facing a big buffalo, with the top line
Primitive Static Graphics?
presented in 32-point font. Then, at the bottom in a clear 10-point message in parentheses is the invitation:
(Click the buffalo for some action)
The bottom message uses Verdana font for its clarity on the Web. When the user clicks the buffalo movie clip, its legs begin moving as it runs toward the hunter, who then throws a spear at the buffalo. The buffalo collides with the hunter, who is then thrown in the air and off the Stage. The buffalo then stops near the edge of the banner. The final message at the top of the banner is
Next time, try Sandlight!
in the same 32-point Smudger LET font as the initial banner message. Slightly below the center is the Sandlight Productions URL using all-lowercase Smudger LET 32-point font. The URL is set to the _blank option in the Target drop-down menu next to the link window where the URL goes. Remember that the user has come to the site to see its goods and services. Through the use of the _blank option, the client's site in the banner ad comes up as a separate page, making it easy for the user to get back to his or her site of interest.
If the user clicks the buffalo again, the original banner appears. However, nothing in the banner animates unless the user wants it to. In this way, the user/potential client has at the very worst a neutral opinion of the services offered. If the user chooses to click the buffalo to start the animation process or the URL, he or she is never taken away from the site he or she came to visit in the first place.
How to Drive Viewers Nuts Using Bad Banners - Before starting on an animated banner ad for the Web, you should be aware that creating banner ads must be done judiciously with an eye to not alienating the user. A banner ad can be as annoying as a telemarketer at dinnertime. Therefore, before creating one for a client, you need to think it through. This often involves discussing effective online ads with your client. If your client wants a leaping, pouncing ad that will drive the viewer to a click off the page, you have to provide the client with alternatives and explanations why a wiser course of action would achieve the desired effect.
First, no matter how clever your banner ad, after people have seen it do its dance once or twice, they don't care to see it again. Second, motion, even a small motion, draws the user's eye to the advertisement. Because users visit pages for the content they contain, banner ads are always treated as uninvited guests unless they deal with the specific content at the site. Any distracting (or attention-getting) movement should be subtle and then quit. Better yet, movement should be controlled by the user. Then if you pique the user's interest, you can let him or her decide to fire off your little show.
Because multiple animated characters are to be used in the banner ad, two movie clips will be used to prevent having a maze of layers on the main Timeline. So, to begin, both animated characters are created as movie clips. As with the example of the animated walk, the animations need to be broken down into basic parts. Using photographs from Muybridge, the basic shapes are planned. Figure 4.35 shows the petroglyph-like spearman's key positions above the corresponding positions of a man throwing a spear for Muybridge's movement studies.
Figure 4.35 - The animated character and photos of the spear throw.
The animation requires four positions (in the five images, the first and third are the same).
The buffalo requires positioning as well. Figure 4.36 shows the three positions for the running (or trotting) buffalo. Again, Muybridge's photo studies provide the position guide.
Figure 4.36 - The buffalo's running positions.
This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today.
Flash 
Getting to Know Flash Pro
