7.1. Symbols and Instances Copying and pasting is the most obvious way to reuse something you've created, but while that time-honored technique saves time , it doesn't save space . Say, for example, you need to show a swarm of cockroaches in the Flash advertisement you're creating for New and Improved Roach-B-Gone. You draw a single cockroach, then copy and paste it a hundred times. Congratulations: You've got yourself a hundred cockroachesand one massive Flash document. Instead, you should take that first cockroach and save it in Flash as a symbol . Symbols help keep your animation's finished file size down to a bare minimum. When you create a symbol, Flash stores the information for the symbol, or master copy, in your document as usual. But every time you create a copy (an instance ) of that symbol, all Flash adds to your file is the little bit of information it needs to keep track of where you positioned that particular instance. Then, to create the illusion of a swarm, you drag a hundred instances of the symbol onto the Stage (and a hundred more for each frame of the animated sequence showing the swarm). Instead of swelling your document with all the kilobytes it would take to draw thousands of individual roaches in your running animation, all Flash has to do is increase your file size by the kilobytes it takes to draw one roach (plus a little extra, for the thousands of instances pointing to the one "real" roach). You can even vary the roach instances a little for variety and realism (so important in a pesticide ad) by changing their color , position, size, and even their skew. If symbols offered only file optimization, they'd be well worth using. But symbols give you two additional benefits: -
Consistency . By definition, all the instances of a symbol look pretty much the same. You can change certain instance characteristicscolor and position on the Stage, for examplebut you can't redraw them; Flash simply doesn't allow it. (You can't turn a roach into a ladybug, for example.) For situations where you really need basic consistency among objects, symbols help save you from yourself. -
Instantaneous update . You can change an instance without affecting any other instances or the symbol itself. (You can turn one roach light brown, for example, without affecting any of the dark brown roaches.) But when you edit the symbol, Flash automatically updates all the instances of that symbol. So, for example, say you create a symbol showing the packaging for Roach-B-Gone. You use dozens and dozens of instances of the symbol throughout your animation, and then your boss tells you the marketing team has redesigned the packaging. If you'd used copy-and-paste to create all those boxes of Roach-B-Gone, you'd have to find and change each one manually. But with symbols, all you need to do is change the symbol. Flash automatically takes care of updating all the symbol's instances for you. -
Nesting . Symbols can contain other symbols. Sticking symbols inside other symbols is called nesting symbols, and it's a great way to create unique, complex-looking images for a fraction of the file size you'd need to create them individually. Flash lets you create three different types of symbols: graphic symbols, movie clip symbols, and button symbols. As you see in Figure 7-1, Flash stores all three types of symbols in the Library. Figure 7-1. The Library is your one-stop shop for symbols; from this panel, you can create symbols, edit them, and drag instances of them onto the Stage. Note the icons and descriptions that tell you each symbol's typegraphic, button, or movie clip. If you don't see the Library panel, select Window, and then turn on the checkbox next to Library. To display all the information in the Library panel, move your cursor over the bottom-right corner of the panel until your cursor turns into a diagonal two-headed arrow; then drag to resize the panel. 
Note: The button symbol is nothing more than a specialized form of the movie clip symbol. For example, you can add an instance of a movie clip symbol to a single frame in a button symbol to create a button that plays an animation when you mouse over it. You'll learn how to add this kind of interactivity to your animations in Part 3.
7.1.1. Graphic Symbols You can tell Flash to turn everything from a simple shape (such as a circle or a line) to a complex drawing (such as a butterfly) into a symbol. You can nest graphic symbols. For example, you can combine circle and lines symbols to create a nested butterfly symbol (Figure 7-2). A graphic symbol isn't even limited to a static drawing. You can save a series of frames as a multiframe graphic symbol that you can add to other animations.
Note: Another kind of symbol that contains multiple frames is a movie clip symbol (Section 7.1.2.4). But there are two big differences between the two, as described in the box on Section 7.1.1.
Flash gives you two different options for creating a graphic symbol: -
You can create a regular image on the Stage and then convert it to a graphic symbol . This is the best approach for those times when you're drawing an image (or a multiframe animated scene) and suddenly realize it's so good that you want to reuse it. Figure 7-2. If you're really serious about paring down the size of your animation file, consider nesting your symbols. Here, a couple of basic graphic symbols (double_ half_circle and orange_black_circle) combine to form a more complex graphic symbol (bright_ butterfly). Flash allows you to flip, resize, and recolor symbol instances, so you can create surprisingly different effects using just a few basic shapesall while keeping your animation's file size as small as possible.  FREQUENTLY ASKED QUESTION
Multiframe Graphic Symbol vs. Movie Clip | | A movie clip symbol is a series of frames, but a graphic symbol can have multiple frames, too. So what's the difference between the two? Leave it to the Flash development team (the people who let you add motion to a shape tween and manipulate shapes with a motion tween) to refer to a multiframe animation clip as a graphic symbol (instead of a movie clip symbol). The truth is, there are two big differences between a multiframe graphic symbol and a movie clip. -
A multiframe graphic symbol has to match the animation to which you add it, frame for frame . For example, if you add a 15-frame graphic symbol to an animation containing 20 frames, you're essentially replacing 15 of your original frames, similar to a straight cut-and-paste operation (but without all the file size overhead associated with a real cut-and-paste operation). A movie clip symbol, on the other hand, does not have to match the animation you add it to frame by frame because movie clips have their own Timelines . So if you add that same 15-frame movie clip symbol to your original 20-frame animation, you're replacing only one frame, not 15. Here's another way to look at it: If you put a 25-frame graphic symbol onto a 10-frame Timeline, only the first 10 frames of the multiframe graphic symbol play. But if you put a 25-frame movie clip onto a 10-frame Timeline, the movie clip plays all 25 frames and then some. (It'll loop until it encounters either a keyframe or an ActionScript statement telling it to stop playing.) -
A multiframe graphic symbol can't include sound or interactivity; a movie clip symbol can . Movie clip symbols take up just one frame in the main Timeline, so you can drop instances of them into button symbols and other movie clip symbols to create interactive nested symbols. Because they're not tied frame-for-frame to the animation you drop them into, they're able to hang fire while your animation plays and spring into action only when an audience member clicks them. Chapters 8 and 10 show you how to add sounds and ActionScript actions to your symbols, respectively. |
-
You can create your symbol from scratch using Flash's symbol editing mode . If you know going in that you want to create a reusable image or series of frames, it's just as easy to create it in symbol editing mode as it is to create it on your main animation's Stage and Timelineand you get to save the conversion step. The following sections show you both approaches. 7.1.1.1. Converting an existing image to a graphic symbol If you've already got an image on the Stage that you'd like to turn into a symbol, you're in luck: The process is quick and painless. To convert an existing image on the Stage to a graphic symbol: -
On the Stage, select the image (or images) you want to convert . Flash's selection tools are described on Section 5.1. Converting a grouped or editable image into a graphic symbol is quick and easy. Figure 7-3 shows three separate images selected that, all together, form a star. Figure 7-3. Don't worry about clicking one of the little squares you see to specify a new registration point for your symbol; clicking them is only useful if you'll be working extensively with ActionScript and need to specify registration point other than the perfectly serviceable 0,0.  -
Select Modify  Convert to Symbol . The "Convert to Symbol" dialog box in Figure 7-4 appears. -
In the Name text box, type a name for your symbol . Because you'll be creating a bunch of instances of this copy over the course of the next several hours, days, or weeks (and because you may end up with dozens of symbols before you're finished with your animation), you want a unique, short, descriptive name. -
Turn on the radio button next to Graphic and then click OK . Flash creates the new graphic symbol, places it into the Library, and automatically replaces the selected image on the Stage with a selected instance of the symbol (Figure 7-4). Notice the instance's single bounding box (the original three images in this example had three). UP TO SPEED
Registration Point vs. Center Point | | Flash associates two different points with each symbol you create: a center point and a registration point. They both define the symbol's position, but in quite different ways. Here's the scoop: -
The symbol's center point is the little circle Flash displays in the center of the symbol. Flash uses the symbol's center point when you transform a symbolfor example, when you rotate it. You can change the center point while you're in transform mode (which you do by selecting the symbol on the Stage and then clicking the Free Transform tool) by dragging it; double-clicking tells Flash to put it back the way it was, dead center. -
The symbol's registration point appears as a little cross on the symbol. The registration point is the set of coordinates Flash uses to refer internally to an instance of a symbol. For example, say you plan to use ActionScript (Chapter 9) to make a symbol move automatically when your audience clicks a button. To tell Flash where you want it to reposition the symbol, you must give it (in your ActionScript) the coordinates of where to move the symbol's registration point. Flash assumes a registration point of 0,0 (which translates to " upper-left corner") unless you tell it otherwise , either by clicking a square in the Convert to Symbol dialog box or by dragging your symbol on the Stage in Symbol Editing mode so that the little cross appears somewhere other than the upper-left corner of the symbol. -
The upshot: Unless you're planning to write some heavy-duty ActionScript code that refers to the symbol's position, you don't have to think twice about the registration point. Let Flash put it in the upper-left corner and leave it there.  |
Figure 7-4. You can tell that Flash has converted your image on the Stage to an instance of the newly created symbol two ways: the cross in the upper-left corner of the instance (the instance's registration point) and the little round circle (the instance's center point). Flash uses the center point if you decide to transform the instance, as described in Chapter 5. You'll learn more about these points in the box above. 
Tip: If you're already poking around the Library panel, you can create a new graphic symbol quickly by clicking the Library panel's New Symbol button (Figure 7-1) or by clicking the Library panel's Options menu and then, from the pop-up menu that appears, selecting New Symbol. Either way tells Flash to display the Create New Symbol dialog box.
7.1.1.2. Creating a graphic symbol in symbol editing mode If you want to create a symbol from scratch without going through the conversion step described above you can use Flash's symbol editorthe same symbol editor you use to edit, or modify, your symbols. To create a graphic symbol in symbol editing mode: -
Make sure you have nothing on the Stage selected by choosing Edit Deselect All . You want to make sure nothing is selected because you don't want to accidentally convert an existing image to a symbol. If Edit Deselect All is grayed out, youre good to gonothing on your Stage is selected. -
Select Insert New Symbol . The Create New Symbol dialog box shown in Figure 7-5 (top) appears. -
In the Name text box, type a name for your symbol . Shoot for unique, short, and descriptive. -
Turn on the radio button next to Graphic, and then click OK . Flash displays the symbol editing workspace shown in Figure 7-5 (bottom). The symbol editing workspace looks very much like an animation workspace, even down to the color of the animation Stage. The key differences to look for that tell you you're in symbol editing mode: The name of the symbol you're currently editing appears in the Edit bar. To see the Edit bar, select Window Toolbars, and then turn on the checkbox next to Edit Bar. A cross (the registration point for the symbol you're about to create) appears in the middle of the symbol editing Stage. Technically, you can position your symbol anywhere you like with respect to the registration point. But if you don't have a good reason for doing otherwise, go ahead and center your symbol over the registration point. (See the box on Section 7.1.1.1 for more details on the registration point.) The Back arrow and current scene icons in the Edit bar (Figure 7-5, bottom) appear clickable, or active. -
On the symbol editing Stage, create a graphic symbol . Figure 7-5. Top: You use the same Create Symbol dialog box to create a symbol from scratch as you do to convert an existing image to a symbol.
Bottom: Here, you see the symbol editing workspace, which looks deceptively similar to the regular animation workspace. The only way you know you're in symbol editing mode is the ladybug icon in the Edit bar and the cross in the middle of the symbol editing Stage (not shown here).  You can use Flash's drawing tools, instances of other symbols, or even an imported image (Chapter 8), just as you can on the main Stage. As you draw, Flash displays a thumbnail version of your symbol in the Library preview window (Figure 7-6). Note that the use count is zero. (A use count is the number of instances of this particular symbol that have been dragged onto the main animation Stage. To tell Flash to keep a running total, click the Library's Options menu and then, from the pop-up menu that appears, turn on the checkbok next to Keep Use Counts Updated.) Figure 7-6. The ladybug symbol here has just been finished, so it's not surprising that the Library's showing a use count of 0. You don't have to center your symbol directly over the registration point as shown here, but if you don't have a good reason to do otherwise, centering is a choice you won't regret later.  -
When you're finished creating your symbol, head to the Edit bar, and then click the Back arrow or select Edit Document . Flash returns you to your main animation workspace.
7.1.1.3. Using a graphic symbol (creating an instance of a graphic symbol) After you've created a symbol, you use it by creating an instance of that symbol, and then placing the instance somewhere in your animation. You can easily create a symbol, as the steps below demonstrate . To create an instance of a graphic symbol: -
Make sure the Library panel containing the graphic symbol you want is visible. If it isn't, select Window and turn on the checkbox next to Library . Flash displays the Library panel. -
On the Timeline, click to select the keyframe and layer where you want to put the instance . Flash highlights the selected keyframe. -
In the Library panel, click the name of the symbol you want to use . A thumbnail version of the symbol appears in the Library's preview window. -
Drag the thumbnail onto the Stage (Figure 7-7 ). Flash creates an instance of the symbol and places it on the Stage. You can transform or recolor this instance, as shown in the following section, without affecting any other instances or the symbol itself.
Tip: You can always convert an instance of a graphic symbol back into an editable image. You lose the file optimization benefits that an instance gives you, but on the other hand, you get to rework the graphic using Flash's drawing and painting tools. To convert an instance of a graphic symbol back into an editable image, first select the instance; then choose Modify Break Apart. If your instance contains nested instances, you need to choose Modify Break Apart once for each level of nested instance to convert the entire symbol into editable pixels.
7.1.1.4. Editing an instance of a graphic symbol The whole point of graphic symbols is to help you reuse images (and to help Flash keep down file size while you're doing it). So it should come as no surprise that you can't completely rework the instances you create. You can't, for example, create an instance of a ladybug, erase it, draw a toad in its place, and expect Flash to consider that toad an instance of the ladybug symbol. But while you can't use Flash's drawing and painting tools to change your instance, you can change certain characteristics of an instance, including color, transparency, tint, and brightness, which you change using the Property Inspector; and scale, rotation, and skew using the Properties and Transform panels.
Note: When you transform or recolor an instance, only that instance changes; the other instances you've added to your animation aren't affected, and neither is the symbol itself. If you want to change multiple instances en masse, you need to edit the symbol itself (Section 7.1.1.5).
You can also edit an instance by swapping one instance of a graphic symbol for another. Say, for example, that you've created a nature backdrop using multiple instances of three symbols: a tree, a bush, and a flower. If you decide you'd rather replace a few trees with bushes, Flash gives you a quick and easy way to do that, as shown in the following steps: -
On the Stage, select the instance you want to replace . Flash redisplays the Property Inspector to show instance- related properties. (If you don't see the Property Inspector, choose Window Properties Properties to display it.) -
In the Swap Symbol dialog box, click to select the symbol with which you'd like to replace the original. When you finish, click OK . On the Stage, Flash replaces the selected instance with an instance of the symbol you chose in the Swap Symbol dialog box. 7.1.1.5. Editing a graphic symbol Recoloring or transforming an instance changes only that instance, but editing a symbol changes every single instance of that symbol, immediately, wherever you've placed them in your animation. The good news about editing symbols, of course, is that it can save you a boatload of time. Say you've added hundreds of instances of your company's logo to your animation and the brass decides to redo the logo. Instead of the mind-numbing chore of slogging through your animation finding and changing each instance by hand, all you have to do is edit one little imageyour logo symbol. The minute you do, Flash automatically ripples your changes out to each and every instance of that symbol. The bad news, of course, is that you might edit a symbol by mistake, thinking you're editing an instance instead (Section 7.1.1.4). Editing a symbol is for keeps. You can select Edit Undo if you realize your mistake in time, but once you close your Flash document and Flash erases your Undo history, its all over but the crying: You're stuck with your edited symbol, for better or for worse .
Tip: If the thought of editing a symbol makes you leerysay you've got 500 instances of your symbol scattered around your animation and you don't want to have to redraw it if you goof up the edit jobplay it safe and make a duplicate of the symbol before you edit it. In the Library panel, click the Options menu. Then, from the pop-up menu that appears, select Duplicate. When you do, Flash displays the Duplicate Symbol window, which lets you give your backup copy a unique, descriptive name (like logo_backup).
UP TO SPEED
Exchanging Symbols Between Documents | | Flash puts all the symbols you create in a Flash documentas well as all the bitmaps, sound files, and other goodies you import into that documentinto the Library panel, which you display by choosing Window Library. Technically speaking, the stuff you put in the Library is good only for that Flash document or project (unlike the Common Libraries, which you access by choosing Window Common Libraries, and which always list the same pre-installed files, no matter which document you have open ). But you can pull a symbol from one document's library and put it into another by copying and pasting. To do so: -
Open the two documents between which you want to exchange symbols (File Open). -
Library), and then choose the document from the drop-down list in the Library panel. -
Above the Timeline, click the tab displaying the name of the other document. -
In the new document, click to select the keyframe where you want to paste the symbol. -
Choose Edit Paste in Center. Flash pastes a copy of the other documents symbol on the Stage.  To open a document's library without having to open the document itself: Select File Import Open External Library, choose the document whose symbols you want to copy, and then click Open. When you do, Flash opens the documents Library (but not the document). |
Flash gives you two ways to edit symbols: in place, and in a new window. This option's right up there with the most confusing features the Flash design team has ever come up with. As you can see in Figure 7-9, mixing the symbol editing mode with the appearance of the main Stage makes it incredibly easy to assume you're changing an instance of a symbol (instead of the symbol itself) with frustrating results.
Note: One man's meat is another man's poison . If you absolutely have to see your symbol in context (surrounded by all the other stuff on the Stage) to be able to edit it properly, editing in place is just what you want.
Figure 7-9. It's hard to tell that the large ladybug (the one that's not grayed out) is a symbol and not just an instance of a symbol. (Your one clue: the symbol name ladybug Flash displays above the timeline.) Editing a symbol when you mean to edit an instance can have pretty serious consequences, so if you find yourself second-guessing, stick to editing in a new window, as described below. 
Double-clicking a symbol on the Stage and selecting Edit Edit in Place (from the main menu or from the pop-up menu that appears when you right-click an instance on the Stage) all tell Flash that you want to edit in place. Figure 7-10. When you edit your symbol in its very own window, there's no ambiguity: You know you're editing a symbol (and not merely an instance). You edit a symbol using the same tools and panels you use to edit any other image. As you make your changes, Flash automatically updates the symbol in the Library, as well as all the instances of that symbol, wherever they may be in your Flash document 
To tell Flash you want to edit a symbol in a new window, do any of the following (in the Library panel): -
Double-click the symbol, either in the list or in the preview window. -
Select a symbol from the list and then click the Options menu. From the pop-up menu that appears, choose Edit. -
Right-click a symbol in the list. From the pop-up menu that appears, choose Edit. -
On the Stage: -
Select Edit Edit Symbols. -
Select an instance of the symbol and then choose Edit Edit Selected. -
Right-click an instance of the symbol and then, from the pop-up menu that appears, choose Edit or Edit in New Window. -
In the Edit Bar (Window Toolbars Edit Bar), click Edit Symbols (the icon that looks like a jumble of shapes. No matter which method you chooseediting in place or editing in a new windowyou get out of symbol editing mode and return to the main Stage the same way: by selecting Edit Document. 7.1.1.6. Deleting a graphic symbol You can delete the graphic symbols you create. Just remember that when you do, Flash automatically deletes all the instances of that symbol , wherever you've placed them in that document. To delete a graphic symbol: -
In the Library panel, click to select the graphic symbol you want to delete . Flash highlights the selected symbol's name and type. -
Right-click the graphic symbol icon and then, from the pop-up menu that appears, choose Delete . Flash removes the graphic symbol from the Library panel. It also removes all the instances of that symbol from your animation. 7.1.2. Multiframe Graphic Symbols Multiframe graphic symbols are a kind of hybrid symbol halfway between single-frame graphic symbols and movie clip symbols. Multiframe graphic symbols can't contain sounds or actions the way movie clip symbols can, but they can contain multiple frames (which regular single-frame graphic symbols can't). Much like a standard copy-and-paste operation, multiframe graphic symbols must be tied frame-for-frame to the animation in which you place them, as you see in the following section. 7.1.2.1. Creating a multiframe graphic symbol Flash gives you the same two options for creating multiframe graphics symbols as it does for single-frame graphic symbols: You can create a series of frames as usual and then convert it into a reusable symbol, or you can use Flash's editing mode to create a multiframe graphic symbol from scratch and save yourself the conversion step. This section demonstrates both approaches. To convert a series of frames to a multiframe graphic symbol: -
On the Timeline, select the frames you want to convert . You can easily select a series when you click at one end of the series and then Shift-click at the other end. Flash automatically selects all the frames in between. -
Choose Edit Timeline Copy Frames (or press Ctrl+Alt+C in Windows, or Option- -C on the Mac). Then choose Insert New Symbol . The Create New Symbol dialog box appears. -
In the Create New Symbol dialog box, turn on the Graphic radio button. Type a short, descriptive name for your symbol, and then click OK . The name of your symbol appears in the Library panel and in the Edit bar above your Stage to let you know you're in symbol editing mode. In addition, Flash replaces your animation Stage with the symbol editing Stage. You can recognize the symbol editing Stage by the cross (your symbol's registration point) that appears in the middle of the symbol editing Stage. -
In the symbol Timeline, click to select the first keyframe (Frame 1 ). Flash highlights the selected keyframe. -
Select Edit Timeline Paste Frames . Flash pastes the copied frames in the symbol's Timeline. The Library panel's preview window shows you the contents of your new symbol's first keyframe (along with a mini-controller, as shown in Figure 7-11). -
Preview your symbol by clicking the mini-controller's Play button . Flash runs a thumbnail version of the symbol in the preview window. -
Get out of symbol editing mode by choosing Edit Edit Document . Flash hides the symbol editing Stage and returns you to your main animation's Stage and Timeline. Figure 7-11. Get into the habit of previewing your multiframe graphic symbols in the Library before you add instances of each symbol to your animation. If you do, you'll save the hassle that can result from incorporating instances of a symbol that doesn't run properly. To preview your symbol, click the Play button as shown. Flash displays the contents of each frame of your symbol, one after the other, in the Preview window. 
To create a multiframe graphic symbol from scratch in symbol editing mode, follow the steps you see on Section 7.1.1.2 ("Creating a Graphic Symbol in Symbol Editing Mode"), adding the content for as many frames as you need in step 5. 7.1.2.2. Creating an instance of a multiframe graphic symbol Creating an instance of a multiframe graphic symbol is like creating an instance of a movie clip symbol, but it's not identical. Because multiframe graphic symbols (unlike movie clip symbols) need to be tied frame-for-frame to your main animation, you need to make sure you have room in your main animation for your multiframe graphic symbol. The following steps show you how. To create an instance of a multiframe graphic symbol: -
In your main animation, click to select the keyframe where you want to place an instance of a multiframe graphic symbol . Only keyframes can contain new content (see Section 3.1.1 for the skinny on keyframes). So if you try to place a symbol in a regular frame, Flash "backs up" and places your symbol in the keyframe immediately preceding the selected frame anyway. -
Make sure you have exactly as many frames after the selected keyframe as you need for this instance . If you're creating an instance of a symbol that contains 10 frames, make sure 10 frames exist after the selected keyframe. If the symbol contains 20 frames, make sure 20 frames exist. To add frames after your selected keyframe, choose Insert Timeline Frame (or press F5) once for each frame you want to add.
-
In the Library, click to select the multiframe graphic symbol of which you want to create an instance . You can either click the symbol's icon from the list or click the symbol's thumbnail in the preview window. The Library lists the Type of both single and multiframe graphics the sameGraphicbut you can always tell a multiframe graphic by the mini-controller that appears along with the symbol's content in the Library's preview window. -
Drag the symbol to the Stage . Flash creates an instance of the symbol and places it in the keyframe you selected in step 1. As you see in Figure 7-12, Flash colors your frames a nice solid gray to let you know they now contain content. But Flash doesn't display the individual keyframes of your instance in your main Timeline. (By the same token, if your symbol contains multiple layers , you don't see those on your main Timeline, either. This visual simplification is one of the benefits of using symbols, as opposed to just copying and pasting frames.) To preview your instance, select Control Test Movie.
Note: You can also test an instance of a multiframe graphic symbol by choosing Control Play, or by dragging the playhead on the main Timeline.
7.1.2.3. Editing an instance of a multiframe graphic symbol If you need the flexibility to change each keyframe of a multiframe graphic instance individually, you're out of luck. Flash allows you to change the contents of the first keyframe of your instance, just the way you can an instance of a single-frame graphic (Section 7.1.1.2). But Flash automatically applies those changes to the contents of every keyframe in your instance. Skew the frog in your first keyframe and turn it blue, for example, and every image in every frame of your instance appears skewed and blue. 7.1.2.4. Editing a multiframe graphic symbol You edit a multiframe graphic symbol the same way you edit a single-frame graphic symbol: by switching to symbol editing mode (Section 7.1.1.2). In both cases, Flash immediately applies the changes you make to the symbol to all the instances of that symbol. 7.1.2.5. Deleting a multiframe graphic symbol You delete a multiframe graphic symbol the same way you delete any other symbol in Flash: through the Library panel. Just remember that when you delete a symbol, Flash automatically deletes all the instances of that symbol , wherever you've placed them. To delete a graphic symbol: -
In the Library panel, click to select the graphic symbol you want to delete . Flash highlights the selected symbol's name and type. -
Right-click the graphic symbol icon and then, from the pop-up menu that appears, choose Delete . Flash removes the graphic symbol from the Library panel. It also removes all the instances of that symbol from your animation. 7.1.3. Movie Clip Symbols A movie clip symbol (Figure 7-13) is a reusable, self-contained chunk of animation you can drop into a single frame in another animation. Unlike multiframe graphic symbols, you can add sounds (Chapter 8) and actions (Chapter 9) to movie clip symbols. Also unlike multiframe graphic symbols, movie clip symbols run independently from the animations to which you add them. So movie clips give you the opportunity to create nonsequential effects such as repeating, or looping , scenes, as well as interactive graphicsfor example, buttons , checkboxes, and clickable images that tell Flash to display something different, depending on what your audience clicks. As you see in the following section, movie clip symbols have their very own Timelines, so an instance of a movie clip symbol always takes up just one frame in the animation to which you add it, no matter how many frames the movie clip actually contains. Figure 7-13. When you select a movie clip symbol in the Library, the Library panel's preview window shows you the first frame of the symbol, as well as a mini-controller you can use to play (and stop) the movie clip right there in the Library before you go to all the trouble of dragging an instance of the movie clip to the Stage. (You see this same mini-controller when you select a multiframe graphic in the Library.) 
7.1.3.1. Creating a movie clip symbol Creating a movie clip symbol in Flash is similar to creating a multiframe graphic symbol (Section 7.1.1.6). You can either create a series of frames (including sounds and actions, if you like) and convert it into a movie clip symbol, or you can use Flash's editing mode to create a movie clip symbol from scratch and save yourself the conversion step. In fact, as the following steps show, only one minor but important difference exists between creating a multiframe graphic symbol and creating a movie clip symbol, and that's turning on a radio button in step 4.
Warning: Modify Convert to Symbol works only when youre converting an image to a single-frame graphic symbol; it doesn't let you convert a series of frames into a movie clip symbol. But if you try it, Flash won't give you an error. Instead, it'll chug along happily, pretending it's creating a movie clip symbol. But in reality, the symbol you create this way contains just one framethe last keyframe in your series.
To convert a series of existing frames to a movie clip symbol: -
On the Timeline, select the frames you want to convert . It's easy to select a series of frames. Click at one end of the series, and then Shift-click at the end of the series. Flash automatically selects all the frames in between. If your frames contain layers, make sure you select all the layers in each frame. -
Choose Edit Timeline Copy Frames (or press Ctrl+Alt+C on Windows, or Option- -C on Mac ). -
Choose Insert New Symbol . The Create New Symbol dialog box appears. -
In the Create New Symbol dialog box, make sure the Movie Clip radio button is turned on . If it's not, click to select it. -
Type a name for your movie clip symbol and then click OK . The name of your movie clip symbol appears in the Library panel and in the Edit bar above your Stage, to let you know you're in symbol editing mode. Another tip-off that you're in symbol editing mode is the cross, or registration point, that appears in the middle of the symbol editing Stage. -
In the symbol Timeline, click to select the first keyframe (Frame 1 ). Flash highlights the selected keyframe. -
Select Edit Timeline Paste Frames . Flash pastes the copied frames onto the symbol's Timeline and displays the first keyframe of the new symbol (along with a mini-controller) in the Library panel's preview window. -
In the Library panel, preview your symbol by clicking the mini-controller's Play button . Flash runs a thumbnail version of the movie clip symbol in the preview window. -
Get out of symbol editing mode by choosing Edit Edit Document . Flash returns you to the workspace and your main animation. To create a movie clip symbol from scratch in symbol editing mode, follow the steps on Section 7.1.1.2 ("Creating a Graphic Symbol in Symbol Editing Mode"), adding the content for as many frames as you need in step 5. 7.1.3.2. Creating an instance of a movie clip symbol Because movie clip symbols have their own timelines, they're completely self-contained. You don't have to worry about matching your movie clip symbol to your main animation's Timeline the way you do with a multiframe graphic symbol (Section 7.1.2.1); movie clip instances live on a single frame in your main animation, no matter how many frames the instances themselves contain. As a matter of fact, as you see next, creating an instance of a movie clip symbol is as easy as dragging and dropping. To create an instance of a movie clip symbol: -
In your main animation, click to select the keyframe where you want to place an instance of a multiframe graphic symbol . Only keyframes can contain new content. So if you try to place a symbol in a regular frame, Flash "backs up" and places your symbol in the keyframe immediately preceding the selected frame anyway. -
In the Library, click to select the movie clip symbol of which you want to create an instance . You can either click the symbol's icon from the list or click the symbol's thumbnail in the preview window. -
Drag the symbol to the Stage . Flash creates an instance of the symbol and places it in the keyframe you selected in step 1, as shown in Figure 7-14. -
To preview your instance, select Control Test Movie . You'll notice that even if you turn looping off in the Control panel (which you do by selecting Control and then, from the pop-up menu that appears, turning off the checkbox next to Loop) your movie clip instance continues to loop. The movie clip behaves this way because it's running on its own Timeline (not the Timeline Flash associates with your main animation). One way to tell Flash to stop looping your movie clip instance is to add a keyframe (blank or otherwise) to your Timeline after the keyframe that contains your movie clip instance.
Note: Flash automatically loops the movie clip instance (plays it over and over again) until it encounters the next keyframe on the Timeline, or until it encounters an ActionScript statement that tells it to stop (such as stop() or goToAndStop() ). You see an example of controlling playback with ActionScript in Chapter 10.
7.1.3.3. Editing a movie clip symbol You edit a movie clip symbol the same way you edit a single-frame graphic symbol: by switching to symbol editing mode (Section 7.1.1.2). In both cases, Flash immediately applies your changes to all the instances of that symbol. 7.1.3.4. Editing an instance of a movie clip symbol Similar to multiframe graphic symbols, Flash lets you change the contents of the first keyframe of your movie clip instance, just the way you can an instance of a single-frame graphic (Section 7.1.1.5). But Flash automatically applies those changes to the contents of every frame in your instance. So, for example, if you apply a sepia tint to the first keyframe, your entire movie clip instance looks old-timey. If you're running Flash Professional, you can also apply filters (Section 7.1.4.1) to movie clip instances, including buttons. (Button symbols, as discussed on Section 7.1.4, are nothing more than specialized movie clip symbols.) Figure 7-14. Dragging a movie clip symbol from the Library to the Stage tells Flash to create an instance of the symbol. No matter how many frames (or layers) your movie clip instance contains, it takes up only one frame on your animation (circled), which makes movie clips perfect for creating animated buttons. 
DESIGN TIME
Reuse Deluxe: Repurposing Symbols | | When you think about it, it's the simple, classic shapes you use most often in drawing. Sure, it's great to have a sun, flower, or cockroach symbol hanging around in the Library, but it's the ovals, wedges, and sweeps that you find yourself coming back to again and again. And because Flash lets you resize, reposition, and recolor each instance, you can create radically different drawings using the same handful of simply shaped graphic symbols. You optimize the size of your finished animation, and, as a bonus, you get to focus on design at the graphic element level. (Even accomplished animators can find fresh ideas by limiting themselves to a handful of shapes.) Expand and flip a raindrop symbol and add a tail, for example, and you've got yourself a whale .  |
7.1.4. Button Symbols The easiest way to make your animation interactive is to add a button someone can click at runtime to perform a task, such as replaying your entire animation, choosing which of several scenes to play, loading a Web page, and so on. To make creating a button easy, Flash offers button symbols. A button symbol is a specialized form of movie clip symbol (Figure 7-15) that contains four frames: -
Up . In this frame, you draw the button as you want it to appear before your audience mouses over it. -
Over . In this frame, you draw the button as you want it to appear after your audience mouses over it. -
Down . In this frame, you draw the button as you want it to appear when your audience clicks it. -
Hit . In this frame, you draw the active, or "clickable," area of your button. In most cases, you want the active area to be identical to the button itself. But in other casesfor example, if you want to create a bullseye-shaped button that responds only when your audience clicks the tiny red dot in the centeryou draw that center dot here, in the fourth frame (the Hit frame). Of course, you can always create your own interactive button from scratch and save it as a movie clip symbol (Section 7.1.2.4). But the better way to go is to create a button symbol. When you do, Flash automatically gives you the four Up, Over, Down, and Hit framesall you have to do is plug in your drawings and go. As you see in the following section, Flash also gives you a handful of built-in graphic effects, called filters , which you can apply to your buttons to get professional-looking results.
Note: To get your button to actually do something when someone clicks itto display a different section of the Timeline, for example, or some dynamic textyou need to tie a snippet of ActionScript code to your button. Chapter 11 shows you how.
Figure 7-15. Because button symbols are nothing more than specialized movie clip symbols, you see the same mini-controller in the Library's preview window when you click a button symbol as you see when you select a movie clip or multiframe graphic symbol. Clicking Play cycles through the button symbol's four frames, so you get to see how the button looks: 1) before a cursor mouses over it, 2) after a cursor mouses over it, 3) after a cursor mouses over the active (clickable) portion of the button, and 4) when a mouse actually clicks the active portion. When you create a button symbol, Flash spots you the four frames; all you have to do is customize them, as shown in the following sections. 
7.1.4.1. Creating a button symbol When you create a button symbol, you start out basically as if you're creating any graphic symbol from scratch (Section 7.1.1), but since button symbols have those four possible states, you can create up to four different graphics. When you choose Button in the New Symbol dialog box, Flash gives you a separate frame to hold each drawing so that you won't get confused. In this example, you'll create a round, red button that turns yellow when your audience mouses over it and green when your audience clicks it. -
Click Insert New Symbol . The Create New Symbol dialog box appears. -
In the Name text box, type bullseye . Make sure the radio button next to Button is turned on. Then click OK . When you create a new button symbol, Flash gives you four named frames (Figure 7-16). It's up to you which frames you want to modify, but at the very least, you need to add a drawing to the Up frame, to show the button before it's clicked. For a more sophisticated button, you'll also add a drawing to the Over frame (as shown below) to let someone know when his mouse is over the button.
Tip: Flash comes with a blue million button symbols already spiffed up and ready for you to drop into your animations. So before you get too carried away drawing your own button, choose Window Common Libraries Buttons to see if Flash already has a button symbol that fits your bill. (You still have to add ActionScript code to the prebuilt button symbol to tell Flash what you want it to do when your audience clicks your button, of course; Flash isnt a mind reader. Find out how in Chapter 11, Section 7.1.1.5.)
Figure 7-16. Flash pops you into symbol editing mode. In the symbol's Timeline, you see four named frames: Up, Over, Down, and Hit.  -
Draw your button as you want it to appear initially by using the Oval tool to add a red circle to the first keyframe (the Up frame ). Center your circle as much as possible on the registration point (the cross) on the symbol editing Stage. When you finish, your workspace should look similar to the one in Figure 7-17. Figure 7-17. Your button doesn't have to look like a button; it can be an image, a shape, a lineanything you like. But most people are used to circular buttons, so a circle's a good place to start. Notice that as you create your image, Flash automatically updates the Library's preview window.  -
Right-click Frame 2 (the Over frame) and then, from the pop-up menu that appears, select Insert Keyframe . Flash displays a hollow circle in Frame 2 to let you know you've successfully added a keyframe. On the Stage, you see a copy of the button you drew in Frame 1. -
Here's how you make the button change when a cursor passes over it: On the Stage, select the circle. In the Property Inspector, click the Fill Color icon; then, from the color picker that appears, choose a yellow swatch . Flash recolors the circle yellow. If you don't see the Property Inspector, select Window Properties and then, from the pop-up menu that appears, turn on the checkbox next to Properties. If you still dont see it, make sure you've selected the circle on the Stage. -
Right-click Frame 3 (the Down frame) and then, from the pop-up menu that appears, select Insert Keyframe . Flash displays a hollow circle in Frame 3 to let you know you've successfully added a keyframe (and, therefore, can change the content of the frame). -
Here's how you draw the button as you want it to appear when a cursor clicks it: Select the button. In the Property Inspector, click the Fill Color icon once again; then, from the color picker that appears, choose a green swatch . Flash recolors the circle green. -
Right-click Frame 4 (the Hit frame) and then, from the pop-up menu that appears, select Insert Keyframe . Flash displays a hollow circle in Frame 4 to let you know you've successfully added another keyframe. As you can see on the Stage, Flash assumes you want the entire button to respond to a mouse clickand in a lot of cases, that's exactly what you do want. But you can make the clickable portion of your button smaller or larger. To do so: -
On the Stage, click the circle to select it. Then choose Window Transform to display the Transform panel . In the Transform panel, type 50 into the Width and Height boxes, and then press Return. Figure 7-18 shows you a scaled-down circle that should look similar to the one you see on your workspace. Figure 7-18. Normally, you want to draw the same size shape in the Hit frame as you do in the other frames so that the entire button responds to mouse clicks. Drawing a smaller (or even different-shaped) image for the Hit frame allows you to create more sophisticated buttons: clickable images, for example, or invisible buttons that let the content of your frame itself appear to respond to mouse clicks (see the box on Section 7.1.4.3). Here, the clickable portion of the button is exactly half the size of the visible portion.  -
Return to your animation by choosing Edit Document . Flash hides your symbol editing workspace and displays your animation workspace. 7.1.4.2. Using a button symbol (creating an instance of a button symbol) To create an instance of a button symbol: -
Click to select the first keyframe (Frame 1) in your animation . Flash highlights the selected frame. -
In the Library panel's preview window, drag your button symbol's thumbnail onto the Stage . On the Stage, Flash creates an instance of the button symbol and surrounds it with a selection box. -
Test your button instance. To do so, choose Control Test Movie . A red circle appears in the middle of the test window (Figure 7-19). FREQUENTLY ASKED QUESTION
Oddly Shaped (and Invisible) Buttons | | Why would I want to make my Hit frame smaller than the button itself? Won't that just make it harder for people to click? One popular situation in which you might want to make the hit frame smaller than the button itself (as shown in Figure 7-18) is when you're creating a hotspot. For example, say you're creating an interactive Web-based game for kids . On the Stage, you've drawn several different animals: a pig, a duck, and a lamb. The audio file you've attached to your animation tells the player which specific part of each animal to click: the duck's bill, for instance, or the pig's tail. In this case, you want to limit the clickable portion of the image to the bill (or tail). A situation in which you might consider making the hit frame larger than the button is when you want to give your audience a larger target. Instead of making someone center her cursor precisely over a teeny-tiny button, for example, you can let her click as soon as her cursor comes anywhere close to the button. (Obviously, this strategy works best when you have only a few buttons on the Stage and they're not near each other.) Finally, you can create invisible fill-only buttons by applying an Alpha value of zero percent to your button's fill in the Up, Over, and Down states. (If your button contains a line, you need to erase it, since Flash doesn't let you apply an Alpha value of zero percent to a line.) Invisible buttons are useful if, for example, you plan to give discounts to site visitors who've read your paper catalog (and thus know that they can get a discount by clicking the unmarked bottom portion of your order form). |
Tip: To test your button instance on the Stage, select Control Enable Simple Buttons. When you do, your button responds to mouse movement and clicking right there on the Stage.
In the test window, drag your mouse over the red circle . When your mouse nears the center of the red circle, your arrow cursor turns into a pointing finger, and the red circle turns yellow. -
With your pointing-finger cursor, click the yellow circle . The yellow circle turns green.
Note: Chapter 11 shows you how to add an action to your button so that clicking it does something useful.
7.1.4.3. Editing an instance of a button symbol You can't change the individual frames of your button instance individually. But Flash does let you apply the same changes to all the frames of your button instance. Section 7.1.4.1 shows you the steps you can take to apply color, transparency, and transforms to your button instances. (The steps are identical to those you take to edit a single-frame graphic instance.) But you can also apply filters , or visual effects, to your buttons. Filters can turn even a plain oval button into something that looks like you spent hours tweaking it. Figure 7-19. Top: Whatever you drew in Frame 1 (the Up frame) appears first.
Middle: As soon as a cursor moves into the area defined in Frame 4 (the Hit frame), Flash changes the cursor's shape to show it's over an active (clickable) button and displays the contents of Frame 2 (the Over frame).
Bottom: Clicking the active button displays the contents of Frame 3 (the Down frame). The animation contains only a button, but because a button instance is just another graphic element, you can place it on top of an image or symbol to create a more sophisticated effect. 
Note: Filters aren't just for buttons. You can also apply filters to text blocks (Chapter 5, Section 5.3) and movie clip instances.
To apply a filter to a button instance: -
On the Stage, select the button instance . Flash draws a blue selection box around the instance. -
In the Property Inspector, click the Filters tab . You can also display the Filters panel when you choose Window Properties, and then, from the pop-up menu that appears, turn on the checkbox next to Filters. Either way, the Filters panel appears. -
Drop Shadow . Displays a shadow on the right and bottom edges of the button. Blur . Redraws the surface of the button so that it appears soft and blurred. Glow . Redraws just the outline of the button so that it appears soft. Bevel . Applies brightness and shadow on opposite sides of the button to create a 3-D effect. Gradient Glow . Similar to Glow (above), but lets you specify bands of different colors (instead of just one color). Gradient Bevel . Similar to Bevel (above), but lets you choose bands of different colors for the brightness and shadow. Adjust Color . Lets you individually adjust the brightness, contrast, saturation, and hue of your button. -
From the menu, select Glow . A red glowing effect appears around your button, and the Filter panel displays the Glow properties (Figure 7-22). -
Click the down arrow next to Blur X and then drag the slider to 40 . On the Stage, the glow diffuses. -
Click the Shadow Color icon and then, from the color picker that appears, click the black swatch . On the Stage, the glow turns from red to black, yielding a subtle 3-D effect. -
Test your newly edited button by selecting Control Test Movie . In the test window that appears, you see your button with the Glow effect applied. -
In the test window, drag your mouse over your button . Flash applies filters to the entire instance (not just the contents of the keyframe to which you apply them), so the Glow effect remains even when you mouse over the button. Figure 7-21. With filters, you can quickly make a button instance look both unique and spiffy. Flash lets you change the properties of your filtersfor example, you can change the size of a blur or the color of a drop shadowso the drop shadow you apply to one instance doesn't have to look the same as the drop shadow you apply to another instance of the same symbol. 
Figure 7-22. When you apply a Glow filter to a button, you can change the horizontal and vertical width of the glow (Blur X and Blur Y), the density of the blur (Strength), and how far out the blur extends (Quality). You can also choose a different color for your blur or apply a Knockout effect (which leaves the blur but erases the button) or Inner Glow (which erases the blur and then uses the blur color to repaint the surface of the button). 
To remove a filter you've applied: In the Filter panel, select the filter you want to remove, and then click the Remove Filter icon (the sign).
Tip: Applying a filter isn't an either/or proposition. You can add multiple filters to the same instance to create different effects: For example, you can add both a Glow and a Drop Shadow. Flash applies filters in top-down order, so adding a Glow and a Drop Shadow yields a different result than adding a Drop Shadow and then a Glow. (To change the order of your filters, simply drag them to reposition them in the Filter panel.) You can even add the same filter more than once to compound the effect.
7.1.4.4. Editing a button symbol You edit a multiframe graphic symbol the same way you edit a single-frame graphic symbol: by switching to symbol editing mode (Section 7.1.1.2). In both cases, Flash immediately applies the changes you make to the button symbol itself, as well as all the instances of that button symbol. DESIGN TIME
Organizing Your Symbols | | If you do a lot of work in Flash, chances are you're going to create a lot of symbols. But in Flash as in life, if you can't see what you've already got, you're apt to recreate it, or else go withoutboth of which lose you the benefits of reuse that you're using symbols for in the first place. The answer? Organize your symbols into folders. Flash lets you create folders inside the Library. You can use these folders to organize your symbols. For example, you might want to keep all your movie clip symbols in one folder, all your graphic symbols in another, and so on. Or you might want to keep all the symbols related to a composite drawing (such as a cartoon character or a corporate logo) in a separate folder. Use whatever organization makes sense to you; you can always reorganize your files and folders later. To create a folder in the Library: -
In the Library, click the Options menu. From the pop-up menu that appears, choose New Folder. A folder named untitled folder 1 appears in the Library beneath your symbols. -
Click the folder name, and then replace it by typing in a new, more meaningful name, such as logo, spaceman , or intro_scene . -
Drag all the logo-related symbols into the logo folder, all the spaceman-related symbols into the spaceman folder, and so on. If you need more levels of organization, you can place folders inside folders.  |
|
