Understanding Symbols

You can think of a symbol in Flash as a container that holds your visual content. What makes symbols different than other visual contentsuch as shapes on the stage and even groups of shapes that you have createdis that they can be given a name and stored in the library for future use. They can be reused. You can even nest one symbol inside another symbol. The library itself is simply a list of all of the available reusable content in your movie: symbols.

So, making something you can reuse is pretty interesting, but there's more: When you reuse the symbols in the library, you don't increase the file size of your exported .swf. Okay, you do increase the file size by approximately .0012 bytes each time you reuse a library symbol in your movie, but that's not significant, so really go after using them as often as you can.

To understand how this works is pretty simple when you know that the symbols stored in the library are called master symbols. When you use those symbols out on the stage in your Flash document, they are called symbol instances. The instances on the stage are actually just copies of the original master symbol in your document's library. That's why using multiple copies of the same symbol doesn't increase the file size.

In the overall sense of how a Flash document functions, it's also helpful to realize that the main timeline of your Flash document is the biggest container of all because it holds references for all the symbols, other internal assets, animations, and programming for your entire Flash movie. I like to think of the Flash document main timeline (and the .swf it creates) as the mother ship of all symbols.

While you're thinking of symbols as containers, one more concept will be useful as you explore using symbols in Flash documents: You can open up that container and make changes to what's inside. This is called editing a master symbol and all changes that are done while editing the symbol are reflected out to the instances of that symbol that you have on the stage. There are different types of symbols in Flash, and they each have different things happening on the inside. The following sections explore the different types of symbols you can create.

Symbol Types

Creating a symbol is fairly simple, but you need to understand all your options. With this understanding of when and why to use different symbol types, you'll make better choices as you prepare your Flash documents for animation.

Graphic Symbols

Graphic symbols are the most basic type of symbol used to store the visual elements that are reused in illustrations and animations. Their functionality, beyond grouping shapes or animations with a name, is limited. For instance, you cannot access a graphic symbol instance with ActionScript, nor can you apply the new filters available in Flash 8 to a graphic symbol. This makes graphic symbols most useful for storing pieces of your illustrations so that you can animate them on the timeline.

When you go inside your graphic master symbol you can see a timeline that looks exactly like the regular timeline. It is, however, a different timeline. Above the timeline, you can see the name of your symbol listed. This indicates which timeline is open for editing, on the stage (see Figure 10.1). Any animations that you put on this timeline are always "slaved" to the main timeline. This means that although you've created the animation inside the symbol, it plays on the main timeline as if it was built there. This enables you to compress many layered animations into a single symbol, which helps keep things tidy. It also enables you to store not only static symbols inside a graphic but also animations that you might want to reuse as well. This will become an exciting concept as you explore how to animate later in this chapter.

Figure 10.1. The symbol currently open for editing is indicated above the timeline.

Graphic symbols can be nested inside other graphic symbols, and also in any of the other types of symbols. For example, you may have a background of trees for your animation. Creating a single leaf symbol, and arranging many copies of it within a tree symbol, will save considerable file size in the final project.

Movie Clip Symbols

Movie clip symbols are also useful for storing your visual elements. But, unlike graphic symbols, they can be controlled with ActionScript. Each instance on the stage can be given its own name. This instance name is different from the master symbol name in the library and enables ActionScript to talk directly to that particular instance. The ability to be controlled by ActionScript is also the reason that things like the new filter effects work with this type of symbol.

Inside a movie clip master symbol is a timeline like the one on the main timeline. What makes this timeline different from the graphic symbol's timeline is that any animation you place in this timeline plays independently of the main timeline. This means that if the main timeline were stopped, any animation on this timeline would continue playing independently of what is happening on that main timeline. You control a movie clip timeline the same way you would a main timeline animation. You also can set up the movieclip to respond to user input, such as a mouse click.

Movie clips can be nested inside each other or in any of the other symbol types. They can contain timeline elements of their own that operate independently of the main timeline. Figure 10.2 shows the timeline of a movie clip on the stage. Above the timeline, there is a special icon to indicate that this is a movie clip symbol's timeline.

Figure 10.2. A movie clip symbol is indicated with an icon above the timeline.

Button Symbols

Button symbols are made specifically to let the user interact with your Flash movie. They have a specialized internal timeline consisting of four frames: Up, Over, Down, and Hit. The first three frames (Up, Over, and Down) hold the visual elements that appear when the user's mouse interacts with the button. These frames are called button states. So, although this is still a timeline inside the button symbol, it changes visuals only when the particular type of interaction takes place rather than playing in a linear way as the main timeline and other symbols do.

The Hit frame always contains a shape that indicates the "hot spot" for the button. Any filled shape in this frame is used to tell the button when to display the Over and Down frame visual elements. It's crucial that you always use a filled shape in this frame so that the button can be easily selected. If you have an unfilled shape, such as some text, the button is going to appear to flicker as the user moves the mouse across the filled and unfilled portions of the text. The solution is to simply place a filled rectangle that is larger than the text in the Hit frame. The rectangle is not displayed on the stage, but is available for the user's mouse to interact with.

Button timelines can have layers and contain instances of graphic and movie clip symbols. Figure 10.3 shows the timeline of a simple button.