External Libraries are panels that open separately from the main Library panel to provide access to stored assets for files that are not currently open in the Document window. You can open any saved Flash file as an External Library by choosing File

Flash ships with three External Libraries called Common Libraries. These panels hold ready-made elements that you can drag into any document Library (or onto the Stage or Pasteboard in an open Document Window) to use in your own projects. Common Libraries behave exactly like any other External Library. Choose Window

You can open and use the Common Library panels and any other External Library panels as free-floating panels (as shown in Figure 6.1) or you can stack or group them for tabbed access (as shown in Figure 6.2). After you copy assets to one of the document asset lists in the main Library panel (or into any of your project files in the Document window), you can close the External Library and work with the copied symbols without changing the original symbol source.

Figure 6.2. You can organize Common Libraries and External Libraries into panel stacks (left) or tabbed groups (right).

A helpful feature in all Flash CS5 Library panels is a new search field (as shown in Figures 6.1 and 6.2). You will find it right above the asset list marked by a small binocular icon. You can type the name of a specific element or just the first letter of the elements you want to find and sort in the asset list; as you type, Flash shows you all elements that match the information you are entering. For example if you type in b, you might see "flowerButton," "symbol2," "BeamScan," and so on — anything with the letter b in the name. If you typed the full word bu you would see only "flowerButton" in the asset list. This feature can save a lot of time if you are sorting through a complex file with many elements stored in the Library. The search even looks in folders and shows you any matching items.

The source files for the External Libraries that show up in the Common Libraries menu are stored in the Libraries folder of the Configuration folder for Flash CS5.

The Flash Library panel, shown in Figure 6.3, includes a drop-down project menu that lists all currently open files. This is a great space saver that makes it much easier to switch between different document Libraries without having to manage separate floating panels. By default, the Library panel switches views as you tab from one document to another in the Document window, but changing the Library view does not change the Document view — in other words, the Library panel is connected to the Document panel but not the other way around. This makes it easy to access a different Library while maintaining the view of your current file in the Document window.

If you want to keep a Library asset list for one project visible in the Library panel while tabbing to a different project file in the Document window, you can use the handy Pin toggle in the Library panel. Click the tack or pushpin icon to pin or "stick" the current asset list so it won't change when you tab to a new project in the Document window. Don't forget to click the Pin toggle again to turn it off when you want to unstick the Library asset list.

There are times when you may want to see the contents of more than one Library at a time — to compare files or to drag items from one Library to another. Click the New Library Panel button to create a duplicate floating Library panel at any time. You can then use the drop-down menu to switch the project view in one of the Library panels to compare items or to drag the contents of one Library to another. Like External Libraries or other floating panels, Document Library panels can be grouped (for tabbed access), stacked, or floated as individual panels.

You can access elements stored in the Library of any other Flash document (without opening the actual .fla file in the Document window) by choosing File

Figure 6.3. The Flash document Library panel includes a project menu, Pin toggle, and New Library button. As shown, you can use the New Library Panel button to launch a clone panel (right) for the current project view in the main Document Library (left).

You can copy assets from an External or Common Library to a current Document Library by dragging items from the source Library onto the current document Stage, or directly into the Library panel. This also works if you have two documents open, and you want to move assets between the two Libraries. It is also then possible to drag or copy and paste elements directly from one document Stage onto another or drag an item from a source document Stage into a current document's Library.

Note

Open documents are loaded into the tabbed Document window. If you want to view more than one Document Stage at a time, use the Window

The shared Library feature makes it possible to link assets between project files (.fla) during production by using authortime sharing, or to link multiple published movie files (.swf) on the server with runtime sharing. Shared libraries create a more optimized workflow than saving individual copies of assets in multiple documents. You can learn more about linking symbols in your project filesin "Using Authortime Shared Libraries" later in this chapter.

Every Flash document has its own Library panel, which is used to store and organize symbols, sounds, bitmaps, and other assets such as video files. As shown in Figure 6.4, the item highlighted — or selected — in the Sort window is previewed in the Preview window. Each item in the Library has an icon to the left of the name to indicate the asset type. Click any heading to sort the window by Name, Kind (type), Use Count, or Linkage (all headings shown in Figure 6.1).

Figure 6.4. The Document Library (scaled to a narrow view)

If the item selected in the Library is a Button symbol, a Movie Clip, or a sound file with more than one frame on its timeline, a controller appears in the upper-right corner of the Preview window. This Preview Stop/Play controller pops up to facilitate previewing these items. It's equivalent to the Play command in the options menu. As shown in Figure 6.5, the library options popup menu lists a number of features, functions, and controls for organizing and working with items in the Library.

Figure 6.5. The Library panel and the options popup menu

The following commands, found in the Library options menu, enable you to add or modify content stored in your document Library:

Selecting New Symbol, Duplicate, or Properties from the options menu while you have a symbol (Graphic symbol, Button symbol or Movie Clip) selected in the Library list launches the Symbol Properties dialog box, as shown in Figure 6.6. Use this dialog box to change the symbol's name and/or behavior (as a symbol type — Graphic, Button, or Movie Clip).

Figure 6.6. The Symbol Properties dialog box. Note the button for Advanced options — this expands the dialog box to include Linkage and Source information for the selected element.

When your movies start to become complex, you'll find that the Library gets crowded, and it can be hard to find symbols. When this happens, you'll appreciate the capability to create and name folders for your symbols. You can organize your Library folders however you like, but here are a few suggestions for greater productivity:

When you build complex layered structures in your movie — a Movie Clip symbol on the first frame of a Button symbol, with a text symbol on the layer above it, and a sound on the layer above that — the Library doesn't visually track this hierarchy. But you can indicate this: Just put all the associated symbols in a folder with a name that describes the final element. You can also nest folders within other folders. Working with folders in the Library is almost exactly the same as working with folders in the Layers area of the Timeline window, as follows:

The Movie Explorer is a great way of getting a visual overview of the nested relationship of symbols, Movie Clips, and other items within your document. Refer to the end of this chapter for more on the Movie Explorer.

Tip

Flash offers an option to Import to Library that is especially useful when you want to bring in a series of items. Instead of having all the items dumped onto the Stage in your Document window, you can load them directly into the project Library. Select File

When you create graphics directly in Flash, using the shape tools, text tool, or any of the other drawing tools, you produce raw data or primitive shapes. You can copy and paste these elements into any keyframe on the timeline, but they do not appear in the project Library. Each time the element appears, Flash has to read and render all the points, curves, and color information from scratch because the information is not stored in the Library. Even if the shape looks exactly the same on keyframe 10 as it did on keyframe 1, Flash has to do all the work to re-create the shape every time it appears. This quickly bloats the size of the .swf file. Also, because each element is completely independent, if you decide to make any changes, you have to find and edit each appearance of an element manually. This is a daunting task if your project involves animation or nested symbols.

Tip

If you want to convert a raw graphic into a drawing object after it has been created, select the graphic on the Stage and apply the Modify

You create drawing objects by turning the Object Drawing option toggle on in the Tools panel while using any of the drawing or shape tools. (This option is on by default, so if you haven't touched the toggle in the Tools panel, you will find yourself creating drawing objects when you use any of the drawing tools to make graphics.) Drawing objects have some of the characteristics of raw shapes and groups. They can be modified directly on the Stage (without having to click in to Edit mode) but they are self-contained and do not merge with or cut into other graphics on the same layer — unless you apply one of the Combine Objects commands. They can't be motion-tweened and they are not stored in the Library unless they are converted into one of the symbol types. The hybrid characteristics of drawing objects suit some workflows very well, but some graphic artists prefer to work in normal or Non-Object Drawing mode. Drawing objects can be combined seamlessly with raw graphics and symbols, and turning the Object Drawing option on or off does not have any effect on graphics you have already created.

The Oval Primitive and Rectangle Primitive tools provide another way of making basic shapes with the advantage of using controls in the Properties panel that can be changed or reset even after the shapes are drawn. Like drawing objects, shape primitives do not merge with or erase other shapes, but they are not stored in the Library.

One step toward making raw data more manageable is to use groups. By grouping a filled shape with its outline stroke, for example, it becomes easier to select both parts of the shape to move around in your layout. If you added a text element that you also wanted to keep aligned with your artwork, you could add this to the group as well. Groups can be inclusive or cumulative so that you can select multiple elements and create one group (

The important thing to remember about groups, however, is that they are not symbols. Although groups have a similar selection highlight to symbols, you will notice that they don't have a crosshair icon in the center, and that the group information won't appear in your project Library. No matter how careful you are about reusing the same raw data and grouping elements to keep them organized, when it comes to publishing your movie (.swf) or trying to update any single element, you will be no better off than if you had just placed raw elements wildly into your project. Flash still treats each shape and line as a unique element, and the file size grows exponentially each time you add another keyframe containing any of your raw data, even if it is grouped. The best way to use groups in your project is for managing symbols, or to organize elements that you plan to keep together and convert into one symbol.

Imported sound, video, bitmap, or font symbols are stored automatically in the Library to define instances of the asset when it is used in the project. In addition, three basic container symbol types can be created in the Flash authoring environment: Movie Clip symbols, Graphic symbols, and Button symbols, which all have timelines that can hold images, sounds, text, or even other symbols. Although it is possible to make the behavior of a symbol instance different from the behavior of the original symbol, it is generally best to decide how you plan to use a certain element and then assign it the symbol type that is appropriate to both its content and expected use in the project.

To make a decision on what type of symbol to use, it helps to have a clear understanding of the benefits and limitations of each of the symbol types available in Flash. Each symbol type has specific features that are suited to particular kinds of content. Each symbol type is marked with a unique icon in the Library, but what all symbols have in common is that they can be reused within a project as symbol instances, all defined by the original symbol. A Flash project Library may contain any or all of the symbol types in the following sections, all created directly in Flash.

A Flash project Library also stores certain types of imported assets to define instances of the asset when instances are used in the movie. You can place these imported assets into native Flash symbol structures by converting a bitmap into a Graphic symbol or placing a sound inside a Button symbol, for example.

Edit mode opens the Stage and timeline of the selected symbol in the Document window, replacing the view of the current keyframe in the Main Timeline with a view of the first keyframe in the symbol's timeline. To open a symbol in Edit mode, do one of the following:

This method is useful if you're working on two monitors and want to quickly open a new window to edit in while keeping a view of the Main Timeline open and available. On Mac, these two windows are always separate, but you can click either window to switch back and forth. On Windows, you can switch between these windows by choosing from the Window menu.

To edit a symbol in a new window, select an instance on the Stage and right-click (

The advantage of Edit in Place is that, instead of opening the symbol in a separate edit space, you can edit your symbol in context with the surrounding movie. Other elements present on the current keyframe are visible but dimmed slightly and protected from any edits you make on the selected symbol. To edit a symbol in place, do one of the following:

You might not have an instance of your symbol available to select for editing in the Document window, but you can still edit it. Just edit it from the Library. Open your movie's Library with Window

After you edit your symbol, you'll want to go back to the scene in the Main Timeline to make sure that your changes work properly. Just do one of the following:

Each instance of a symbol can have a variety of color effects applied to it. The basic effects are changes of brightness, tint, and alpha (transparency). Tint and alpha changes can also be combined for special effects. To apply color effects to a symbol instance by using the Properties panel:

The options available from the color effect Style menu are as follows:

You don't need to limit yourself to the native behavior of a symbol. For example, there may be times when you want a Movie Clip to have the behavior of a Graphic symbol so that you can preview animation by scrubbing the Timeline. You don't have to go through the extra effort of creating a new symbol — just use the following steps to change the type of the instance as needed:

You may need to replace an instance of one symbol with an instance of another symbol stored in your project Library. Luckily, you don't have to go through and re-create your entire animation to do this — just use the Swap Symbol feature, illustrated in Figure 6.10. This feature only switches the instance of the symbol for an instance of another symbol; all other modifications previously applied to the instance remain the same. Here's how to swap symbols:

Figure 6.10. Use the Swap Symbol dialog box to choose a replacement for a symbol instance without losing any transformations that have already been applied.

The best way to begin creating any graphic element is to first consider the final shape that you need and to try to find the most basic primitive shapes that you can use to build that element. Keep in mind that instances can be scaled, skewed, and adjusted with color effects. Instead of drawing three circles to make a snowman, you would make just one circle and convert that into a symbol so that you could build your snowman from scaled instances of just one symbol stored in the Library. A resourceful animator I know built a Christmas tree by reusing instances of a symbol he had made for a dog's tail in the same animation — a wagging tail and a tree all built from just one Graphic symbol stored in the Library! Raw graphics can be converted into Graphic symbols after they have been drawn, or you can first create a new Graphic symbol and then draw the raw shapes directly inside the Graphic symbol in Edit mode — either way, the end result is a contained visual element that is stored in the Library to define any instances that you need to place in your movie.

To build the simple graphics used in basicButton, you can begin by converting a raw shape into a Graphic symbol:

Tip

You always have the choice of creating artwork on the Main Timeline and then converting it into a symbol or first inserting a new symbol and then creating artwork in the symbol drawing space. Either workflow achieves the same end result. In the plainCircle example, start by selecting Insert

You can now reuse instances of this Graphic symbol in your document in as many places as you need it just by dragging an instance onto the Stage from the Library panel.

Button symbols are similar to Movie Clips that have a special timeline structure linked to mouse states. For a button to take you to a new point on the Main Timeline or to load any other elements, ActionScript must be added to the button instance.

In this example, the button simply works as a structure for an animation that reacts to the mouse. Begin by inserting a new Button symbol:

Figure 6.11. The Edit mode view of the basic Button symbol timeline, with Up, Over, Down, and Hit states defined with instances of the plainCircle Graphic symbol

After you have created some Graphic symbols to define your basicButton, you can now start building some animation to add to it. You can build animation by placing artwork in keyframes on the Main Timeline, but this limits how you can use the animation and can make it difficult to add more elements to your project without disturbing the keyframe structure of the animation. If you need animated elements that can be reused, and quickly moved to different parts of the Main Timeline or placed into a Button symbol timeline, it is best to begin by creating a Movie Clip.

The final step in our example is to add the overAnim Movie Clip to the basicButton symbol. This is the secret to animated Button symbol: By nesting multiframe Movie Clip animations into the single frames assigned to the Up, Over, and Down states of the Button symbol timeline, you can create different animated "reactions" as the mouse rolls over or clicks the button.

You can test your Button symbol with this animation added to see how it is working by pressing

Figure 6.13. The timeline of the Button symbol basicButton with the Movie Clip overAnim placed on the Over keyframe of the outlineAnim layer

Instead of creating an entirely new animation to display on the Over state of our basicButton, you can reuse the overAnim Movie Clip and change its appearance by adding a color effect to the instance.

Test your animated button again (Ctrl+Enter/

Figure 6.15. The finished animated button as it appears in the Up, Over, and Down states

You have seen how symbols are created, nested, and modified, and you are probably realizing that this basic animated Button symbol is only the beginning.

As your symbol structures get more layered and complex, it can be helpful to have some guidance when you are trying to navigate to a specific item in your project or just trying to remember exactly how you organized things as you were building. Although careful use of layer names, frame labels, and symbol names is indispensable, the Movie Explorer (introduced later in this chapter) is a great assistant for finding your way through the structure of any Flash document.

Figure 6.16. The animation as it appears in the three visible button states, Up, Over, and Down, with a diagram of the basic nested elements visible in each state

As shown in Figure 6.20, there are several icon buttons across the top of the Movie Explorer panel. These are called filter buttons, and they have icons representative of their function. Click any button to toggle the display of those elements in your file. Note, however, that the Movie Explorer's display becomes more crowded as you select more buttons, and that it performs more slowly because it has to sift more data. From left to right, the buttons filter the display of the following kinds of content:

Also note the Find field. It enables you to search through all items that currently appear in the Movie Explorer to find specific elements by typing in the name of the symbol, instance, font name, ActionScript string, or frame number.

Below the icons is a window with the display list. Much like Windows Explorer, or the Mac Finder, the Movie Explorer displays items hierarchically, either by individual scene or for all scenes. These listings are expandable, so if you have selected the Text button, an arrow (or on Windows, a plus [+] sign) appears beside the name of any scene that includes text. Clicking the arrow (or plus sign) displays all the selected items included in that scene. This type of visual data display is also referred to as a "tree structure." Clicking a plus sign (or arrow) expands a "branch" of the tree. At the bottom of the display list, a status bar displays the full path for the currently selected item.

In Figure 6.21, the Text filter button has been selected. As shown, clicking the arrow sign beside the Text icon in the display list shows the complete text, including basic font information.

Figure 6.21. The Movie Explorer for the surpriseButton example included on the CD-ROM, with the Text filter button chosen to view text and font information inside the file

The Options menu is accessed by clicking the options triangle in the upper-right corner of the Movie Explorer panel. These commands enable you to control how much detail is shown in the display list and also to perform edits or revisions after you've found the specific items that you want to modify:

You can also access the commands found in the Movie Explorer options menu via the contextual menu.

Select an item in the Movie Explorer and right-click (/

Figure 6.22 shows the contextual menu of the Movie Explorer. Among the most useful commands is the Goto Location option at the top. When you can't find an item (because it's on a masked layer or is invisible), this command can be a lifesaver.

Figure 6.22. The Movie Explorer's contextual menu

When you are planning or looking for ways to improve a project, the Movie Explorer can provide an excellent map to the structure and function of what you've already accomplished. Whenever it's relevant, print out the Movie Explorer; this can function as project documentation for finished work, providing a reference of all scripting and Movie Clip placement. As such, it can make returning to a project months later much easier. It can also facilitate collaboration among developers, whether they share the same studio or need to communicate long distance. Finally, for all the reasons I listed in this chapter, you can also use the Movie Explorer as a tool for both learning and teaching.

Now that you have a handle on working with symbols in one project file, let's go to the next step and see how you can work with symbols in multiple Flash files.