|
|
In traditional animation, characters were first inked in as outlines and then filled with color and shading. Coloring was the most tedious and time-consuming job of all: endless thousands of cels to be hand painted and dried. Most often, armies of low-paid workers in faraway lands did it. But with Flash it's a snap! That's because of Flash's wonderful (and sometimes mysterious) gap-jumping fill tool, the Paint Bucket. With Flash, you never run out of paint, and it dries instantly — a real timesaver to be sure!
Here's a coloring timesaver that you can use for yourself within Flash: Use a fully colored model of your character at the start of a cycle or scene. This will serve as a color model and will be discarded when the cycle or shot is finished. It's very important to keep a model sheet, which is an archive of color models — finished, fully colored characters — to maintain consistent color across the span of the project. (It's also quite useful at the start of future projects.)
Although Flash has the capability to save color sets, it's still difficult to remember which yellow was used on a certain area of the character, especially when there are ten different yellows in the palette. Making such a color mistake — even a slight shade off — will cause unsightly flicker on playback. The Eyedropper tool makes no mistakes. So, to develop good animation habits, start a model sheet. When you begin a scene, copy the appropriate color model and paste it into the cycle, setting it off to the side of the active art in the first frame (if needed, ungroup it). Acquire the color that you need with the Eyedropper tool and then set about the business of filling.
When filling, we've found that the most efficient method is to go through the entire cycle with one color, filling all objects of that color. Then go back to the beginning and sweep through again, doing the next color. This method saves you the tedium of continually having to change the Paint Bucket's color, and also minimizes the possibility of mistakes. If some places fill while others don't, you'll probably need to adjust the Paint Bucket Gap size modifier.
| Tip |
The Find and Replace feature in Flash makes it easy to do a global swap if you decide that orange would really be a better color than red (or whatever suits your fancy). With your project file open, choose Edit ð Find and Replace (Ctrl+F or z+F), then use the controls to search the entire document or individual scenes for a color and set the color you want to use instead. Flash does the rest! |
There are times when the gaps in a line are not visible but the Paint Bucket tool just won't work. In this case, keep looking because the gaps are there. If it just doesn't work, no matter how much you zoom in and click with the Paint Bucket tool, you may need to zoom in and use the Selection tool to close the gap by adjusting a stroke. In a situation in which it's not aesthetically pleasing to do that, use the Brush tool (set to the same fill color and to paint fills only) to fill the gaps manually. Perhaps this would be the case on a head and neck that you don't want connected to the body (remember we discussed the advantages of animating the head separately earlier). You would use the Brush tool to paint a stroke of fill connecting the inked lines and then fill the larger areas with the Paint Bucket tool.
A good way to speed up the coloring process is to allocate one of the mouse buttons (if you have a programmable mouse) to perform the keyboard shortcut for step forward advancing (which is the > key). If you have a pressure-sensitive graphics tablet, you can allocate a button on the pen to do the same. With a setup like this, you can leave the cursor in pretty much the same place and click-fill, click-advance, click-fill, click-advance, and so on.
Another problem that's easily solved is the process of filling areas with white. If you're like most people, you most likely work on the default background color of white, which makes it impossible to distinguish when filling white areas. In this case, it's helpful to create a very light color that you don't plan to use in the final art, something like a light pink. While coloring, temporarily change the background color in the Property inspector or in the Movie Properties dialog box (Modify ð Document) to the substitute color for the background of the entire movie. This makes it much easier to see what you're doing when using white as a fill color for objects such as eyeballs, teeth, and clouds. Then, when you're done coloring, you can set the background color back to white.
 |
Flash Character Design Strategies, by Sandro Corsaro
Flash offers a cheaper, faster, and more malleable approach to creating animation than anything in the history of animation. While traditional animation production can be unforgiving, the Flash authoring environment offers animators a variety of starting points in fulfilling their visions. Many creative types who are experienced with Flash can delve into projects with simple thumbnail sketches or even with just concepts in their heads. Purists, and developers working with larger teams, generally prefer the traditional storyboard route. Whether it is intended for Web or broadcast, creating an efficient Flash animation begins and ends with the strategy of your initial design. That design can be on paper, in Flash, or even in your head. What is crucial is that on some level, there is a clear and concise plan in the design. For the purposes of this tutorial, I will show you two simple examples involving design strategy.
By now you should be familiar with the concept of breaking elements into reusable parts or pieces. For Web purposes, this keeps the file small and saves the artist production time. This systemized approach to animation is the evolution of limited animation — the cut out system that hasn't changed since it was first applied by Hanna-Barbera for television shows such as The Flintstones and Scooby Doo. When Fred would talk, his mouth would be on one layer, while his head and body would be on another. If Fred tilted his head during a rant, his mouth and head would tilt during the animation, while his upper body would be held. Why do you think all those great Hanna-Barbera characters always had some sort of accessory (like a tie or necklace) around their necks? This design strategy was effective even with a constrained budget because it allowed for maximum animation with minimal artwork.
Today, Flash has the potential to revolutionize the production process by building on the animation techniques used in the past. Just like the traditional cel method, inactive Flash layers can be "held" while action layers continue with additional frames of movement. The newest feature of this evolution is that symbols, unlike old-school painted cels, can be flipped, stretched, and squashed without having to redraw the artwork. A traditional painted animation cel of a left arm could not be reused for the right arm. On the simplest level, appendages can be flipped, rotated, and scaled to complete character designs. The model sheet I created in Flash of Da Boss (shown in Figure 14-10) is an example of effective reuse of artwork.
| On the CD-ROM |
To see the animated Flash version of the model sheet for Da Boss, open modelSheet.swf from the S_Corsaro subfolder in the ch14 folder on the CD-ROM. |
The script called for this character to be constantly pacing his office. When I designed the character, I broke him into three distinct parts, each with its own animation. The first part was the combed-over hair. I kept it as a separate piece from the head, so it could undulate up and down as he paced. This provides a nice secondary action to his walk. Although the hair is a small detail, without the initial planning, attempting to add it later in the animation process would have proven frustrating and time-consuming. The second animation was the inertia of the heavy upper body. As Da Boss walked, his body needed to convey a sense of weight and power. Utilizing the animation principle of stretch and squash, the symbol of his upper body cycles through various shapes in conjunction with his walk.
The final and most dynamic component of the character's movement is the leg cycle taking place on the layer underneath his upper body. Only one leg has actually been drawn — the other is offset and placed on a lower layer to create a looped walk. As the legs move into each keyframe, the first two elements I described previously are adjusted to create the secondary animation. On the low points of the walk, his weight squashes down, while his hair holds (or pauses) for a momentary beat. A progression of movement follows in the next few keyframes to get to the inverse position of this low point.
Besides the basic model movement, a turnaround was also needed for the animators to work with this character. Obviously, some of the views can be flipped, but what about the front and back? Copy and paste your front view to create your back view. Build on your finished artwork to create the new artwork. Figure 14-11 illustrates how the front view of the Da Boss was modified to create the back view. Unlike the traditional animation process, which travels in distinct and separate stages from point A to B to C, think of Flash animation as a more integrated progression as point A becomes B, which transforms into C. Always try to build on your work, rather than start from scratch each time you need a new movement or character.
Perhaps the most convincing example of the benefits of strategizing your design can be understood by referring to Figure 14-12. These were three different characters intended to be used for broadcast purposes, but the actual animation only had to be created once.
| On the CD-ROM |
To see how the motion is actually reused in the example shown in Figure 14-12, open reuseWalk.swf from the S_Corsaro subfolder in the ch14 folder on the CD-ROM. |
Because of the strategy involved in the original character design, I was able to transform him into the other two characters, reusing both his Graphic symbols and the actual animation. By tweaking the timing of one leg on the run cycle, and obviously making some other artistic changes, the skateboarder character was created from the same artwork as the character running to catch a bus.
Flash is a very sophisticated authoring environment for animation, but, nonetheless, there is no substitute for knowledge of motion. To create truly compelling and intriguing animation in any genre, you must understand the scientific fundamentals of this art. The best place to learn about the principles of animation is in the daily environment around you. Observe the way things move; then strategize how to translate that movement efficiently using the tools available in Flash.
|
|
|