Chapter Three. Using Symbols and the Library

Most of the power of Flash comes from its ability to create and manipulate symbols. A symbol is a master object that resides in one place—a panel called the Library—but can generate multiple copies of itself that can be used anywhere in Flash. Symbols offer a variety of advantages:

• Economy. If you have a visible object that’s intended to appear more than once in a Flash movie, you can convert it to a symbol. You can then place any number of instances (copies) of that symbol on the Stage without any significant increase in the movie’s file size.

• Adaptability. Whenever you make a change in a symbol, that change is instantly reflected in all instances of the symbol.

• Flexibility. Every symbol has its own internal timeline. As a result, a symbol doesn’t have to be static—it can be made to move or even to respond to a user’s input.

• Nestability. Symbols can be embedded in other symbols, which can be embedded in still other symbols. By nesting symbols in this way, you can animate complex movements easily—for example, you could embed a symbol of a propeller turning inside a symbol of an airplane flying.

• Scriptability. Two kinds of symbols—buttons and movie clips—can be controlled by ActionScript. Movie clips can even include scripts of their own, allowing them to control other movie clips or the movie that contains them.

This chapter will show you the basics of creating, modifying, and organizing symbols. More advanced use of symbols will be covered in Chapter 4 (“Creating Animation”) and Chapter 10 (“Using Basic ActionScript”).

Converting Objects to Symbols

Any object or group of objects that can appear on the Stage can be made into a symbol. Here’s how to do it:

1. Select one or more objects on the Stage. The selected objects may include paths, text objects, bitmaps, or even other symbols.

2. Choose Modify > Convert to Symbol, or press the F8 key. The Convert to Symbol dialog box appears.

3. Type a name for the symbol into the Name field.

4. Click the radio button for the type of symbol you want to create: a movie clip, button, or graphic. (For the differences between these symbol types, see #27 and #28. If you’re experimenting with symbols for the first time, the simplest choice is Graphic.)

5. Click one of the small squares in the diagram next to the word Registration. The square you click will determine the symbol’s registration point (Figure 22a).

Figure 22a. Click the square corresponding to your preferred location for the symbol’s registration point. Later, when you view the symbol in the Library or in symbol-editing mode, your registration point will be indicated by crosshairs.

Think of the registration point as the handle by which Flash will hold the symbol when it’s in motion (see #38). When you’re in doubt, the center is usually a good choice.

6. Click OK.

You can find the symbol you just created in a panel called the Library. (If the Library isn’t part of your current workspace, choose Window > Library.) When you click the symbol’s name in the Library list, you’ll see the symbol in the viewing pane above the list (Figure 22b).

Figure 22b. Each symbol is listed in the Library next to an icon representing the symbol type. You can click the name of a symbol to see what it looks like.

It’s also possible to create a symbol from scratch, without starting with an object on the Stage. To do so, choose Insert > New Symbol. You’ll see a Create New Symbol dialog box.

When you complete the dialog box and click OK, Flash enters symbol-editing mode (see #24). If you wish, you can create some visual content for the symbol; if you’d rather wait until later, click Scene 1 in the breadcrumb trail to return to normal mode. If you don’t create any content for the symbol, it will still be listed in the Library, but the viewing pane will be blank when you click the symbol’s name.

Technically, Flash allows you to name a symbol whatever you like. In practice, you’ll want to consider these issues when you choose a name:

• Convenience. Symbols listed in the Library can be sorted by name or by type, but it’s much more convenient to have them sorted by name and by type without needing to switch between the two sorting modes. For this reason, many Flash developers like to give each symbol a prefix such as b_ for button symbols, g_ for graphic symbols, and m_ for movie clip symbols. Doing so will cause the buttons, graphics, and movie clips to be gathered in separate groups in the Library’s alphabetical listing.

• Descriptiveness. The more precise your symbol names are, the easier it will be to find the one you want among dozens or hundreds of symbols. If your movie contains graphic symbols of a beagle, a poodle, and a schnauzer, don’t call the symbols g_dog1, g_dog2, and g_dog3. Instead, call them g_dogBeagle, g_dogPoodle, and g_dogSchnauzer. (Beginning all three of them with “dog” will cause them to follow each other in the Library’s alphabetical listing.)

• ActionScript compatibility. If you’re creating an interactive movie, you’ll probably want to control your button and movie clip symbols with ActionScript. In that case, the names of your symbols will have to follow ActionScript’s variable-naming rules. Make sure each symbol name begins with a lowercase letter. Having uppercase letters within a symbol name, as in g_dogBeagle, is fine. Also, make sure your symbol names contain only letters and numbers, with no spaces or punctuation other than an underscore.

Working with Symbols and Instances

When you convert an object to a symbol, as you did in #22, the original object remains on the Stage. Although that object may look exactly as it did originally, it has become something quite different: It’s now an instance of the symbol in the Library.

An instance is a marker that points back to a symbol and tells Flash, “display a picture of that symbol here.” That’s why multiple instances don’t significantly affect file size: The symbol in the Library contains all the information that defines it and therefore takes up space in the file, but each instance contains barely any information other than a pointer to the symbol.

To create additional instances of a symbol, drag the symbol out of the Library and onto the Stage. The symbol itself stays in the Library; what gets dragged is actually an instance (Figure 23a). Another way to create additional instances is to duplicate an instance that’s already on the Stage—by copying and pasting, for example.

Figure 23a. Every time you drag a copy of a symbol out of the Library, you’ve created a new instance of that symbol.

At first, all instances of a symbol look exactly the same as that symbol. It’s possible, however, to change the appearance of an instance (Figure 23b):

• Transformation. By using the Free Transform tool, you can transform an instance in most of the same ways that you would a path: You can rotate it, scale it, or skew it (see #16). If an instance contains only vector paths, you can distort it as well.

• Color effects. When you select an instance on the Stage, a menu labeled Color appears in the Property inspector. You can change the instance’s brightness, tint, or opacity by choosing the appropriate item from the menu (see #25).

Figure 23b. All of these objects are instances of the same symbol. The one at the upper left is unaltered; the others have all been transformed or have had color effects applied.

When you alter an instance, you affect only that instance. The other instances and the symbol in the Library remain unchanged. In contrast, when you edit a symbol, the changes you make are reflected in all instances of that symbol (see #24).

Editing Symbols

There are two ways to edit a symbol. The first is to find the symbol in the Library and double-click either its name in the list or its image in the viewing pane. When you do so, everything on the Stage disappears, and the symbol you’re editing becomes the only visible object. This is a good way to edit if you don’t want to be distracted, but it prevents you from seeing the symbol in context with the other items on the Stage.

The second way to edit a symbol, called editing in place, is to double-click any instance of a symbol on the Stage. Flash goes into a symbol-editing mode that looks just like the group-editing mode described in #17: Everything other than the selected instance is dimmed, and the elements of the symbol become the only objects you can select and edit (Figure 24a). What’s unusual about editing in place is that when you double-click the instance, it temporarily becomes the symbol itself. Any changes you make will affect not only that instance, but also all other instances of the symbol.

Figure 24a. Flash is in editing-in-place mode for a graphic symbol called g_fish, which is inside a movie clip called m_fishbowl. The breadcrumb trail leads back to the original contents of the Stage.

While you’re in symbol-editing mode, using either editing method, you’ll see a small white circle with crosshairs. That circle represents the symbol’s registration point. The crosshairs can’t be moved, but if you want to change the symbol’s registration point, you can drag the contents of the symbol to a different position relative to the crosshairs.

If you have symbols nested within symbols, you can drill down one level at a time by editing the outermost symbol, then double-clicking a symbol embedded in it, and so on. You can return to any earlier level by clicking the appropriate link in the breadcrumb trail (see #17). Clicking the leftmost link, called Scene 1 by default, takes you back to the main Stage and exits symbol-editing mode.

Any changes you make to a symbol affect not only the symbol in the Library, but also all instances, even if they were placed on the Stage before you edited the symbol (Figure 24b).

Figure 24b. Editing a symbol affects all instances of that symbol, even if they’ve been transformed or had color effects applied to them. (To see how these instances have changed, compare this screenshot to Figure 23b.)

Using Symbol Color Effects

Let’s say you want to change the color of one instance of a symbol. You can’t use the Color panel to change its stroke or fill, because an instance isn’t editable. You can’t double-click the instance and change its color in symbol-editing mode, because doing so would change the color of all instances of that symbol.

The solution is to select the instance and look for a menu marked Color at the right side of the Property inspector. From that menu—the Color Styles menu—you can choose the type of color effect you want to apply. Depending on which option you select, a different control (or set of controls) will appear next to the menu. The available options are:

• Brightness. The brightness control is a slider that goes from 100 percent to –100 percent, with 0 as the default. Choosing a positive number brightens the instance; choosing a negative number darkens it.

• Tint. There are several tint controls. The first is a standard Flash color menu that allows you to choose a tint for the instance in the same way you’d choose a color for a stroke or fill (see #9). Below the menu are three sliders—labeled R, G, and B—that allow you to adjust the individual levels of red, green, and blue on a scale ranging from 0 to 255.

None of these tint controls discriminate between strokes and fills. As a result, tinting an instance causes the stroke and fill to appear the same color, even if they had contrasting colors to begin with.

To avoid this, you can use the Tint Amount slider at the right of the color menu. This slider acts as if the tint were a separate object overlaying the instance: If the slider is set to 100 percent, only the tint is visible; if the slider is set to 0 percent, only the unchanged instance is visible. At intermediate settings—such as 50 percent, the default—the tint is treated as if it’s partly transparent, allowing some of the underlying instance to show through. As you lower the tint amount, the original contrast between the stroke and fill colors becomes more apparent, but the tint looks increasingly washed out (Figure 25a).

Figure 25a. The effects of the Tint Amount slider can be seen in these three different views of the same instance. On the left, the tint amount is set to 0 percent, leaving the original instance unchanged. In the center, the tint amount is set to 100 percent, completely covering the instance with a uniform color. On the right, the tint amount is set to 50 percent, allowing the instance to partially show through the tint.

• Alpha. This setting is synonymous with opacity. When the Alpha slider is set to 100 percent (the default), the instance is completely opaque; when it’s set to 0 percent, the instance is completely transparent. If the background behind the instance is white, the effect of lowering the alpha is indistinguishable from raising the brightness.

• Advanced. This option lets you control tint and alpha at the same time. When you choose Advanced from the Color Styles menu, a button labeled Settings appears to the right. Clicking it brings up the Advanced Effect dialog box, which contains two columns of sliders.

In the left column are RGB sliders and an Alpha slider. The Alpha slider works identically to the Alpha slider you saw earlier. The RGB sliders, however, work differently: Instead of making the stroke and fill the same color, they increase or decrease the amount of red, green, and blue by the same percentage, thereby preserving the differences between the stroke and fill colors.

The sliders in the right column modify absolute amounts of red, green, blue, and alpha, in increments ranging from 255 to –255. Because they add the same amount to (or subtract the same amount from) each color, they preserve the differences between stroke and fill colors.

For these reasons, if you use the Color Styles menu to change the color of an instance, you’ll usually get better results with the Advanced option than you would with Tint.

Breaking Apart Instances

As you’ve seen in #23 and #25, there are several techniques for modifying individual instances without changing the original symbol. Those techniques are limited, however. What if you really want to change the appearance of an instance—for example, by cutting a hole in it or changing its shape?

The answer is, you can’t—at least not while the object you want to change is an instance. But it’s possible to break the connection between an instance and a symbol, turning the instance into an independent, editable object. To do so, select the instance and choose Modify > Break Apart (Figure 26).

Figure 26. On the left, an instance of a symbol; on the right, the same instance after being broken apart. The dot screen indicates that it’s now an editable object.

Keep in mind that using the Break Apart command has some negative consequences. When you break apart an instance, any color effects that you’ve applied to it disappear—since color effects work on instances only. Once an instance has been broken apart, it will no longer reflect changes you make to its parent symbol. And, most significantly, breaking apart an instance increases your movie’s file size, since the former instance now contains real information instead of pointing to a symbol in the Library.

Think twice before you break apart an instance, because the process isn’t reversible. Turning an editable object into an instance of an existing symbol isn’t possible, although you can convert the object into a new symbol (see #22).

Creating Button Symbols

When users roll the pointer over a button, they expect it to respond in some way—by getting brighter, for example. This change in a button’s appearance when a user rolls over it is known as a rollover effect.

When users click a button, they expect some feedback showing that their input has been recognized. This feedback may take the form of a sound (such as a beep or click), a change in appearance, or both.

Flash has made it easy to create buttons that provide all of these responses. Here’s the usual procedure for making a functional button:

1. Use the drawing tools to create the button’s normal appearance.

2. Select the paths that constitute the button and choose Modify > Convert to Symbol, or press F8. The Convert to Symbol dialog box appears.

3. Type a name for the button symbol (preferably with a b_ prefix) into the Name field.

4. Under Type, choose Button.

5. Click a square to choose the registration point. For a button, the center is typical.

6. Click OK. The button symbol appears in the Library, and the button on the Stage becomes an instance .

7. Enter symbol-editing mode, either by double-clicking the button symbol in the Library or by double-clicking its instance on the Stage.

You’ll notice that the Timeline changes from its standard layout to a series of four cells labeled Up, Over, Down, and Hit (Figure 27a). The labels Up, Over, and Down refer to three variations, or states, of the button. The Up state is the button’s appearance when the user isn’t interacting with it; the Over state is the way the button looks when the user rolls the pointer over it; and the Down state is the way the button looks when the user is clicking it (Figure 27b).

Figure 27a. This is how the Timeline looks when a button symbol is being edited.

Figure 27b. These examples show how a button might look in each of its three states.

The black dot in the Up cell indicates that the symbol that’s currently on the Stage will represent the Up state of the button.

8. Click in the cell below the Over label. The cell darkens to indicate that it’s selected.

9. Choose Insert > Timeline > Keyframe, or press F6. (To understand what’s happening in this step, see #30.) A black dot appears in the Over cell.

10. Change the button’s appearance to how you’d like it to look in its Over state. (The changes you make won’t affect the button’s appearance in the Up state.)

11. Repeat steps 8 through 10 in the next cell for the button’s Down state. You can ignore the Hit cell for now.

12. Click Scene 1 in the breadcrumb trail above the Stage. Flash exits symbol-editing mode.

13. Choose Control > Enable Simple Buttons. (If the Enable Simple Buttons command already has a check mark next to it, skip this step.)

14. Roll your pointer over the button instance on the Stage. You’ll see it change to its Over state.

15. Click the button instance on the Stage. While your mouse button is depressed, you’ll see the button in its Down state.

While those are the basic steps for making a multistate button, there are other things you might want to do to enhance it. For example:

• Add audio. You can add sounds as well as images to the Over and Down states. To find out how to attach an event sound to a keyframe, see #61.

• Add motion. A button doesn’t have to be static; any or all of its three states can be animated by means of embedded movie clips. To find out how to accomplish this, see #43.

• Add a Hit frame. Some buttons are difficult for a user to click—for example, because they’re too small or irregularly shaped (Figure 27c). You can make the button more user-friendly by giving it a larger or more uniform “hot zone.” To do so, return to editing the button and repeat steps 8 through 10 for the Hit cell. The variation of the button you use for the Hit frame won’t be seen on the Stage, but it determines the size and shape of the clickable area around the button.

Figure 27c. A button’s Up state is on the left, and its Hit frame is shown in the center. The stroke and fill colors don’t matter for the Hit frame; all that matters is the shape of the filled path. That path determines the button’s clickable area, indicated by a dashed line on the right.

Although this button may be attractive and easy to use, it’s still missing one important feature: It doesn’t do anything. To make the button functional, you’ll have to control it with ActionScript, which you’ll find out about in #88.

Comparing Graphic Symbols and Movie Clips

While button symbols are used for a single, specialized purpose, graphic symbols and movie clips have broader applications. Although graphic symbol sounds like something that contains a still image and movie clip sounds like something that contains motion, the truth is that either symbol can have either type of content. The differences lie elsewhere.

If you’re creating a symbol and you don’t know whether to make it a graphic symbol or a movie clip, consider these issues:

• Dependent or independent? Any instance of a graphic symbol is dependent on the pace of the movie it’s placed in. If the symbol contains animation that takes 52 frames to complete, then you’ll probably want the instance to remain on the Stage for 52 frames. If the movie ends before those frames have elapsed, the action in the symbol will be interrupted.

In contrast, a movie clip runs independently of the movie it’s in. As long as a movie clip is on the Stage, its animation will continue, even if the main movie ends (Figure 28a). For that matter, when the action in the movie clip reaches its end, it will start playing over again from the beginning and loop repeatedly—unless you deliberately stop it with ActionScript.

Figure 28a. The rotation of this pinwheel is contained in a movie clip. Even after the animation of the child is over, the pinwheel will continue to turn.

• Passive or interactive? ActionScript can’t control instances of graphic symbols—in fact, it doesn’t even recognize that they’re there. For that reason, graphic symbols are useful mostly for traditional animation, the kind that the user watches but doesn’t interact with.

In contrast, a movie can use ActionScript to control the movie clip instances within it, and any of those instances can use ActionScript to control any of the others. (In fact, many interactive movies are only one frame long. The action takes place not in the Timeline, but in sequential commands issued to movie clips by ActionScript.)

The fact that a movie clip instance can be controlled by ActionScript doesn’t mean it has to be. It’s fine to have a movie clip that simply plays animation.

In a situation where a graphic symbol or a movie clip would serve equally well, it makes sense to go with a graphic symbol since it will take up less space in the SWF file and make fewer demands on the computer’s processor.

Using the Library to Manage Symbols

The Library is more than a repository for symbols; it’s also a place where you can organize, modify, and track symbols. Many of the Library’s features are hidden—either represented by small, unlabeled icons or listed on menus that are not immediately obvious (Figure 29a).

Figure 29a. Some of the Library panel’s less obvious controls are pointed out here.

Let’s look first at the four icons at the bottom of the Library panel. They are, from left to right:

• New Symbol. Clicking this icon brings up the Create New Symbol dialog box (see #22).

• New Folder. Just like the files on your computer’s hard drive, the items in the Flash Library can be sorted into folders. Clicking the New Folder icon creates an empty folder into which you can drag any number of library items, including other folders. To see the folder’s contents, double-click the folder in the Library list; to collapse the folder, double-click it again.

• Properties. When you select any item in the Library (other than a folder), clicking this icon opens a dialog box that lets you modify the item’s properties. The name and contents of the dialog box depend on what type of item you’ve selected. For example, if you’ve selected a symbol, the Symbol Properties dialog box appears; if you’ve selected a sound file, the Sound Properties dialog box appears.

• Delete. You can delete any item in the Library by selecting it and clicking the Delete icon or pressing the Delete key. Be careful, however: If you delete a symbol, all instances of that symbol will vanish from the movie. If you delete a folder, Flash will delete everything contained in the folder without giving you a warning or asking for confirmation.

The two icons to the right of the Library list allow you to widen the Library panel (making all of the columns visible) and to narrow it again (Figure 29b). If the Library panel is docked, clicking the Widen icon not only widens the Library panel, but also widens the dock and all the other panels in it.

Figure 29b. Widening the Library panel reveals previously hidden columns, including Use Count.

The remaining icons allow you to deal with multiple FLA files. If more than one document is open, the panel displays the Library contents of whichever document is in the foreground. To see the contents of another document’s Library, you can select the document’s name from the popup menu above the viewing pane.

The Pin icon to the right of that menu allows you to “pin” the current Library in place—that is, to keep the current document’s contents visible in the Library panel even if you bring a different document to the foreground. Click the icon once to “pin” the Library; click it again to “un-pin” it.

The next icon to the right is the New Library Panel icon, which opens another copy of the current Library in a separate panel. Doing this can be useful if you want to drag items between panels to copy them from one Library to another.

Most of the Library’s other features can be found in the Options menu, which you open by clicking the three-line icon at the upper-right corner of the panel. You can get an almost identical menu by right-clicking (Windows) or control-clicking (Mac) anywhere in the Library panel.

Some of the menu items, such as New Folder and Delete, are alternative ways to access features we’ve already looked at; others, such as Rename and Select Unused Items, are self-explanatory. Two menu items that need special explanation are those that deal with use counts.

Among the features that become visible when you widen the Library panel is a column called Use Count. For each item in the Library, the Use Count column tells you how many instances of that item have been used in the movie. By default, the numbers in this column are refreshed only when you choose Update Use Counts Now from the menu. If you want the use counts to be updated automatically, you can choose Keep Use Counts Updated; however, this option puts a noticeable drag on the program’s performance.