Flash 8: Projects for Learning Animation and Interactivity (OReilly Digital Studio)

1.4. Creating Reusable Graphics

You may find that you need to use a graphic several times in one movie, whether it's a box, a logo, or a character. To avoid adding substantially to the file size of the finished project as a result, use symbols.

A symbol is a reusable asset that resides in a Library in every Flash document (see the sidebar "The Library"). When a symbol is dragged from the Library to the Stage, the on-Stage element is called an instance of that symbol. This is because the element is not removed from the Library. Instead, the instance references, or points to, the Library symbol. Multiple instances can be spawned from a single symbol, without significantly increasing file size. On-Stage changes (such as adjustments to width, height, rotation, opacity, etc.) can be made to individual instances of a symbol, and the original symbol will remain intact. However, if persistent changes are made to the symbol in the Library, all instances derived from that symbol will be affected.

Think of symbols this way: a symbol is analogous to an actor in a movie. Each instance of that symbol is analogous to a character played by the actor. The actor can play multiple characters in the movie, simply by changing costume or make-up. However, if the actor is replaced with another actor, all of the characters will also be changed.

This discussion is focused on reusability and file optimization, but in nearly every remaining chapter of this book, you will see that symbols are central to Flash development. Most notably, they are the building blocks within every Flash file that can be controlled by ActionScript. You'll learn more about that throughout this book. For now, take a look at how to create and use symbols.

1.4.1. Creating Symbols

It's time to create a reusable box symbol that you can use in your designs:

1. Create a new, blank document using File New.

2. Select the Rectangle tool, and in the Properties panel set the stroke weight to 1, the stroke color to dark gray, and the fill color to light gray.

3. Draw a square box and then select both the fill and stroke for the box by double-clicking the fill with the Selection tool.

4. Choose Modify Convert to Symbol (F8). This opens the Convert to Symbol dialog box, shown in Figure 1-13. In the Name field, type the word box.

5. For the Behavior type, choose Graphic. A graphic symbol is typically thought of as a type of animation that can be played in three ways without requiring any ActionScript: using the Properties panel, you can set a graphic symbol to loop, play once, or display a specific frame. Because they require no ActionScript, using graphics is a convenient way to start learning about symbols.

   ---

   Note: If you create a graphic symbol with an animation inside it, the symbol must span the same number of frames in the main timeline that the graphic itself contains. For example, if a graphic symbol contains a 10-frame animation, the graphic must span 10 frames in the main timeline. If the symbol spans only five frames in the main timeline, the animation inside the graphic will only play to its midpoint.

   ---

6. Click OK to close the dialog box. You should see a blue line around the box you just drew. This indicates that the art is no longer a shape. In this case, it is now a symbol.

It's important to understand that a grouped image is not the same as a symbol. A grouped image is raw graphic data on the Stage, whereas a symbol is the defined blueprint for one or more instances of the same asset. If you made a copy of a group, you would literally be copying the vector data required to draw that group and, therefore, measurably increasing the file size. If you made a copy of a symbol instance, on the other hand, you would essentially be creating another reference to the single symbol residing in the Library. As you'll see next, the duplicated instance contributes negligibly to the size of your file.

1.4.2. Reusing Symbols

Now that you have a symbol, you can reuse it as many times as you want without re-creating the drawing or adding significantly to the file size of the project:

1. Currently, you have a single instance of a graphic symbol on the Stage. To begin, test your movie using the Control Test Movie menu option. This will publish your file to a SWF and open it in a Preview window so you can check your progress. Right now, you just have a box sitting there doing nothing.

2. With the Preview window open, choose View Bandwidth Profiler. This utility, seen in Figure 1-15, shows you how much bandwidth your movie is using at any given time and can help you optimize your files. The third line down displays the file size of your movie. It should say something close to "0 KB (120 B)", but this may vary slightly. This means your movie is approximately 1/10th of 1 KB (kilobyte). That's very small, which is good because a smaller file size means that less time will be spent waiting for your file to download.

   Figure 1-15. The Bandwidth Profiler

3. Close the Preview window. Now it's time to see how much the file size will be augmented by several additional instances of the symbol.

4. Drag the box symbol from the Library 10 more times. (It doesn't matter what your file looks like, as you are only testing file size in this exercise.)

5. Test the movie again (using Control Test Movie). In the test case from which this exercise was derived, the movie size read "0 KB (190 B)," indicating that increasing the number of on-Stage symbol instances by 10 times added only 70 bytes to the file size. In fact, because of economies of scale you would need to add approximately 400 on-Stage instances of the symbol before the file grew larger than even 1 KB!

6. Close this file, but don't bother saving it. You won't need it again.

   ---

   Note: You should try to memorize the shortcut key for Test Movie mode (Ctrl-Enter on Windows or Cmd-Return on Mac), as you'll use it frequently.

   ---

1.4.3. What's Next?

You may notice that many Flash terms and concepts, such as "the Stage" and "movie," were borrowed from the film industry. Using a filmmaking metaphor can help you grasp many Flash concepts. For example, much like in a film, anything that appears on the Stage appears in the finished movie. A graphic that resides off-Stage is not seen in the final movie unless it moves onto the Stage at some point. To help cement this analogy, think about what other aspects of Flash development might be similar to filmmaking. (Hint: Look back over the section on symbols and instances.)

If you want to experiment some more before moving on to the next chapter, try editing the two stars you created earlier. To edit drawing objects, use the same technique you used for editing groups. Double-click each star, and the rest of the Stage will dim, allowing you to focus on editing the drawing object in place. Experiment by selecting the star, clicking on the fill color swatch, and changing the white fill's Alpha value to 50% in the pop-up color palette.

Next, try cutting a star out of the background by breaking it apart, selecting it, and deleting it. (By breaking apart the drawing object, you're allowing it to merge with the underlying background shape.) Finally, try something totally new: finish off the Hendrix poster image by adding some text with the Text tool.

With your new knowledge of the basic drawing tools in Flash, you can start drawing everything from cartoon characters and backgrounds to logos and layoutsso get to it! This book is all about playing around, so have some fun.

In the next chapter, you'll learn how to make creating Flash magic quicker and easier by customizing your workspace. You'll focus on:

• How to create your own panel layout

• How to change document settings

• Several ways to align objects on the Stage

• How to automate simple production tasks