Home / Articles / Adobe Creative Suite / Using Symbols and the Library in Flash MX

Using Symbols and the Library in Flash MX

Chapter Description

In this sample chapter, you'll learn to use Flash MX's symbols, libraries, and the Movie Explorer to manage your movies and keep them small, fast, and organized. You will also learn how to use and how to import bitmaps.

Editing symbols and groups

When you edit a symbol, every instance of that symbol is updated including instances added to the stage in the main movie and instances that are nested inside of other symbols. Similarly, you can make changes to groups. However, if you make copies of the group, and edit one of the copies, only the copy you edit will be changed. You will find it very useful to turn anything you plan to use more than once in a movie into a symbol.

In the next exercise you will edit a symbol and a group. Make sure you have zoo11.fla open before you continue.

1) Double-click the instance of the Bitmap Animation symbol on the stage.

Figure 32

When you double-click on the instance of the Bitmap Animation symbol, Flash switches to symbol-editing mode. You can tell you're in symbol-editing mode because the symbol's name appears in the information bar under the timeline. When you open a symbol in symbol-editing mode, you can edit the original symbol. Any changes you make in the original symbol will be reflected in every instance of that symbol used in the movie.

When you open a symbol in symbol-editing mode, by double-clicking, the symbol appears in the context of the elements on the stage. The other elements on the stage are dimmed, indicating that they are not currently being edited. This editing mode is useful because it lets you see how your changes will look in the context of the other elements.

There are other ways to open a symbol in symbol-editing mode. From the Library panel, you can select a symbol, click the Options menu control and choose Edit. You can also right-click (Windows) or Control+click on the symbol, either on the stage or in the Library panel, and choose Edit. If you want to work within the Library, you can even double-click on the icon to the left of the symbol's name, or the graphic at the top of the Library panel, to open the symbol in symbol-editing mode. There are other ways to open the symbol and as you explore Flash you will undoubtedly find more.

You should notice that the layer name is Layer 1. Don't let that confuse you—the time spent naming all of your layers has not been wasted. This Layer 1 refers to the single layer inside of the Bitmap Animation symbol. Movie clips, graphic symbols, and buttons have their own timelines, complete with Layers.

2) Locate the frog.jpg bitmap in the library and drag an instance of it onto the stage. Use the Property inspector to position it at X: 280 and Y: 20. Add an instance of the fish.jpg bitmap and position it at X: 420 and Y: 0.

Figure 33

When you add the frog.jpg and fish.jpg bitmaps to the Bitmap Animation you can see how they will affect the main movie.

3) Click the Scene 1 icon.

Figure 34

Clicking the Scene 1 icon takes you back to the main movie. The Scene 1 icon is on the left of the symbol's name in the information bar under the timeline. You can also click the Back button in the information bar to go back to the main timeline, or you can choose Edit > Edit Document to return to the main movie.

4) Right-click or Control+click on the Background layer and choose Lock Others.

Figure 35

When you choose the Lock Others option all of the layers except the Background layer are locked. This is important, because you don't want to mess up anything on the stage, and you don't want to accidentally edit something other than the contents of the Background layer.

When you double-click on a layer, an icon labeled Group appears, indicating that you are editing a group. You can now edit any part of the group without disturbing the rest of the movie.

5) Choose Edit > Select All. Hold the Shift key down and click on the white rectangle to deselect it.

Figure 36

Just as you can select multiple items by holding the shift key down and clicking on each element, you can deselect an element by keeping the shift key down and clicking on the element. You want to select everything except the white rectangle in the center right now, and it's much easier to shift-click than to click on everything except the white rectangle.

6) Choose Edit > Cut. Click the Scene 1 icon.

Figure 37

The Cut command copies whatever you have selected to the clipboard, and then removes it from the screen. You should end up with just the white rectangle on the stage—that's going to be the background now.

When you click the Scene 1 icon, you are returned to the main movie—remember there are other ways to go to the main menu, so you can use whatever method you like.

7) Add a new layer named Frame above the Main Page Bitmaps layer. Choose Edit > Paste in Place.

Figure 38

Make sure the new Frame layer goes above the Main Page Bitmaps layer, but below the Logo and Panda layers. When you choose the Paste in Place command, whatever is currently in the clipboard (i.e. the stuff you cut in the last step), is pasted onto the stage in the same position it was copied from originally. The Paste command, which is also found in the Edit menu, pastes whatever is in the clipboard onto the center of the currently displayed area. So if you've moved the stage around, the Paste command will give you a very different result from Paste in Place.

When you paste the graphics that you cut from the group in the Background layer, they should overlap the right and left [sides/edges] of the Bitmap Animation symbol. If for some reason the graphics do not overlap, make sure the Frame layer is above the Main Page Bitmaps layer.


The shortcut key for the Paste in Place command is Control+Shift+V (Windows) or Command+Shift+V.

8) Save the file as zoo12.fla.

It's almost time to start animating! Before you do, make sure you save your movie. In the next exercise, you'll pick up a few tips for keeping track of where everything in the movie is located. Then, in the next lesson, you will start adding animation to your movie.

7. Using the movie expolorer | Next Section Previous Section