The Library

First, let's download and open up Lesson 3's Flash file FlashMX03a.fla. Recall from Lesson 1 that the Flash Library stores and organizes all of your movie's symbols as well as any imported files such as sounds or bitmap images. When you create a new symbol or import a graphic or sound, it's automatically stored in the Library for reuse within your Flash movie.

Symbols

Symbols are the building blocks of Flash. You greatly reduce the file size and download time of your Flash movie with the use of symbols. Any element -- imported bitmap, sound, or original vector art -- must be converted to a symbol for reuse in your movie. Converting and grouping your images and animations into symbols also enables you to use Flash's ActionScript capabilities. (We'll get to ActionScripts, which may only be written to symbol instances, in Lesson 4.).

You create an instance of a symbol when you drag a symbol from the Library and drop it on the Stage. An instance of a symbol is a representation of one symbol in a movie, stored in the Library, but each instance can be individually named, scripted, or manipulated independently. You can even nest a symbol instance inside of another symbol or movie clip. Editing a symbol in the Library affects every instance of that symbol used within a movie, but if you apply changes to an instance of a symbol, only that instance changes.

Each symbol has its own Timeline, Stage and layers, like a Flash movie. There are four kinds of symbol behaviors: buttons, graphics, movie clips, and, new to Flash MX, components. We'll go deeper into movie clips and components in Lesson 5. In this lesson, we'll concentrate on sounds and on graphic and button symbols, and their instances.

graphic symbols

A graphic symbol is a static image (vector art, or imported GIF or JPG) that, when saved as a symbol, can be used repeatedly in a movie. Using graphic symbols doesn't add to your movie's file size because as symbols these instances are only rendered once. Importing large bitmap graphics, on the other hand, definitely adds to your movie size, even if you break up the image and only use a small portion as a symbol, because Flash retains the original image's information in the Library. If you plan to play your movie on the Web, it's best to reduce your image's bit depth in a program such as PhotoShop or ImageReady before you import it into Flash.

import a bitmap

To import a bitmap to the Stage and convert it into a graphic symbol, follow these steps:

1. Select File > Import, or simply press Command+R (Mac) or Ctrl+R (Windows).
2. In the Import dialog box, browse to your file, select it, and then click Open. Your bitmap appears on the Stage. Notice that it also automatically appears in the Library with a bitmap icon.
3. Click the bitmap on the Stage to select it.
4. Select Insert > Convert to Symbol or press F8.
5. In the Convert to Symbol dialog box, shown in Figure 3-1, type a name for your symbol, choose Graphic for its behavior, and click OK.

Figure 3-1: The Convert to Symbol dialog box.

TIP
To quickly turn an image on your Stage into a symbol, select the image and press F8.

create original graphic symbols

To create an original graphic symbol, follow these steps:

1. On the Stage, use one (or as many as you want) of Flash MX's draw or paint tools to create original art. It can be a logo, icon, cartoon, or any other graphical element. Make it as many layers as you like.
2. Marquis-select (click and drag around) the entire symbol to select it. Make sure you've got every layer you want, either by shift-selecting all the frames, or by using Edit Multiple Frames.
3. Select Insert > Convert to Symbol or press F8.
4. The Convert to Symbol dialog box appears. Type in a name for your symbol, choose Graphic from the Behavior radio buttons, and click OK.

If you're creating a button or other element to which you'll need to write interaction, make sure to click the Export for ActionScript box under Linkage. We cover ActionScript in Lesson 4.

Alternatively, you can start drawing a new symbol in the Library and drag it to the Stage whenever you're ready for it. Here's how:

1. From the main menu, select Insert > New Symbol, or press Command+F8 (Mac) or Ctrl+F8 (Windows).
2. In the Create New Symbol dialog box, shown in Figure 3-2, type a name for your new symbol, choose Graphic from the Behavior radio buttons, and click OK. (Remember, if you're creating a button or other element to which you'll need to write interaction, click the Export for ActionScript box under Linkage.)

Figure 3-2: The Create New Symbol dialog box.

3. Flash automatically takes you to the Edit Symbol window. You can now edit the symbol. Use the draw or paint tools to create original art, and make it as many layers as you like.
4. Make sure to group all the elements on each layer to save on file size. Select each layer and press Command+G (Mac) or Ctrl+G (Windows) to group everything on that layer. (You can also group between layers, but that's not as practical if you need to go back and re-edit your symbol.)
5. Press Command+E (Mac) or Ctrl+E (Windows) to switch from the Edit Symbol view back to the Edit Document (Stage) view.

Button Symbols

Buttons, the linchpin of interactivity, are a very important part of building a Flash MX (or any) Web site. Highly interactive button symbols that a user can click or roll over provide a lot of bang for the buck. A first-rate navigation system is imperative for a good user experience. So let's talk about how to build and use buttons in Flash.

Buttons automatically have four labeled frames. Instead of frames 1, 2, 3, and 4, a button's frames are labeled Up, Over, Down, and Hit. These labels (or states) correspond to where the user's mouse is positioned over the object. In other words, the user's action on a button determines which view of the button is played. This sounds more complicated than it is.

You can choose whatever shape you want, as long as it's filled in, but the Hit state defaults to a square or rectangle on the Stage, measuring your button's active hit area in width and height.

Let's take a look at a button example from one of Flash MX's built-in libraries. Open the Flash file FlashMX03a.fla and follow these steps:

1. Open the Buttons.fla Library by choosing Window > Common Libraries > Buttons.
2. From the Circle buttons folder, double click it to open it and select Circle with Arrow, as shown in Figure 3-3.

Figure 3-3: Select Circle with arrow.

3. Drag the button symbol from the Library window and drop it on the Stage. Close the Buttons Library. (Notice that the Circle with arrow button symbol is now in Lesson_03a's Library.)
4. Select the Circle button symbol on the Stage and press Command+E (Mac) or Ctrl+E (Windows) to jump to the Edit Symbol mode, as shown in Figure 3-4.

Figure 3-4: Edit Symbol mode.

Note the Up, Over, Down and Hit state frames, and the three different layers. Take a good look at each layer by hiding the other layers and playing each frame state, and then view them all together again. You can open up this Library anytime and study how the various buttons are built, giving yourself valuable insight into building your own highly interactive buttons.

Let's drop a sound into the Down state of this button to really bump up the interactivity and create a richer user experience:

1. While still in the Edit Symbol view for the Circle button, add a layer on the top (Insert > Layer), double-click the layer name, and name it Sound.
2. Put a blank keyframe in the Down frame of your Sound layer by clicking in the frame and pressing F7.
3. Open the Sounds.fla Library by choosing Window > Common Libraries > Sounds.
4. Click a Sound symbol, as shown in Figure 3-5, and when its thumbnail appears in the Library window, click the little button with the Play arrow next to the thumbnail to hear the sound. Choose a sound you'd like for your button's Down click, and then drag and drop it onto the Sound layer's Down keyframe.

Figure 3-5: The Sound.fla library.

5. Press Command+E (Mac) or Ctrl+E (Windows) to jump back to the Stage view.
6. Make sure Control > Enable Simple Buttons is checked.
7. Place your mouse over the button and note its Over state. Click the button, and note its Down state and sound.
8. Save your Flash movie, and name it Lesson_03b.fla

Sound

Just as with graphic files, once you import a sound into Flash, it exists in the Library and can be used as often as you want. You can import a variety of sound formats, including WAV, AIFF, MP3, and Sound Designer II files. Once imported, you can compress sounds via the Sound Properties dialog box.

TIP
When importing sounds using File > Import or by pressing Command+R (Mac) or Ctrl+R (Windows), choose All Sound Formats from the Show pop-up menu in the Import dialog box and you can easily see just importable sound files.

It's important to compress sounds because digital sound files can be quite large. The bigger the sound file, the slower your Flash movie's playback and/or download time. Flash lets you compress individual sounds via the Sound Properties dialog box, or you can choose a default setting for all your sounds when you publish your movie via Publishing settings.

When publishing, you have two options:

We'll cover Publishing settings in Lesson 6.

Here's how to compress an individual sound:

1. From the Sounds Library, click the sound file to select it. In the lower left-hand corner of the Library, click the Properties icon.
2. The Sound Properties dialog box opens, as shown in Figure 3-6. Under Export Settings, click the Compression pop-up menu and choose MP3.

Figure 3-6: Sound Properties dialog box.

3. Preprocessing, Bit Rate, and Quality options appear. For Web playback of music, set the Bit Rate to 16 kpbs (kilobits per second) and Quality to Best. Your settings are displayed below the Quality menu along with the file's size percentage compared to the original file size.
4. Click the Test button. If you compress a sound too much, you lose in quality what you gain in file size, and the sound may become unusable. Always test your sound compression settings.
5. After testing (and perhaps adjusting your settings), click OK to save your settings.

You can drag and drop sounds from the Library as we did in earlier with our button, but for better control of sounds, you need to use some simple ActionScript and the Sound Object.

moving on

We covered a lot in this lesson, so you have the opportunity to do some work on your own in two assignments. The first shows you how to start a navigation bar in Flash; the second shows you how to add music to your movie. When you've finished the assignments, test yourself with the quiz. Give yourself a break, and then head on to Lesson 4.

Assignment 1: Navigation Bar

Take the Circle with Arrow button with sound that we made in this lesson and build the foundation of a navigation bar for a fictitious company's Web site. This interactive navigation bar will have buttons, sounds, and a background.

1. Open FlashMX03b.fla.
   
2. Set up keyframes representing different sections of the Web site. Begin by adding a layer above the layer containing your button and name it actions. In this layer, we'll name all of our keyframes. (In Lesson 4, we'll add actions to this layer.)
   
3. Add a blank keyframe (click the frame and press F7) to the following frames and name them as indicated:

4. With the structure in place, you're ready to add some identifying names for the buttons we'll use. Lock the actions layer, and click to the layer containing your button. Double-click the layer name and rename it buttons. Make sure the buttons layer has the same number of frames as the actions layer by clicking in frame 49 of the buttons layer and adding frames (press F5).
   
5. Choose the Text tool and pick a font and color you like. To the left of the button, type a name for our company -- let's call it Acme Interactive. (We'll correspond this button to the start keyframe of our movie in Lesson 4.)
   
6. Align the text and the button using the Align panel (Window > Align, or Command+K or Ctrl+K) by selecting both objects on the Stage and clicking the button with the icons representing Align vertical center. (If you're not sure which button this is, just hover your mouse over each button in the palette and check the tool tips.)
   
7. Now we want to duplicate the button and label for each section. Marquis-select (click and drag around) the button and label and press Command+D or Ctrl+D to duplicate them both. You now have a duplicate of each selected item.
   
8. Using the arrow keys on your keyboard, or holding down the Shift key along with the arrow keys, move your duplicate, lining it up under the original. With your Text tool, click the duplicated text and replace the text with the words About Us for our second section. Deselect the text by clicking anywhere on the Stage, and then switch to the Arrow tool.
   
9. Repeat this duplication process (Steps 6-8) for the remaining three sections, using the appropriate text for each: Clients, Services, and Contact Us, as shown in Figure 3-7.

Figure 3-7: Buttons and their text labels in the buttons layer.

10. Save your movie (Command+S or Ctrl+S).
    
11. Ready to add a simple background to your buttons to create a navigation bar? Lock your buttons layer, and directly underneath it, add a new layer named button bg.
    
12. Choose the Rectangle tool from the Toolbox, and under Options, give it a 6-point, rounded edge. Make the stroke and fill colors any color you want, keeping in mind a good contrast for your text's readability. Select your shape and group it (Command+G or Ctrl+G). Lock the layer.
    
13. Save your movie. It should look similar to Figure 3-8.

Figure 3-8: A simple graphical background on its own layer creates a navigation bar for our buttons.

Assignment 2: Music

This assignment shows you how to add music to your movie. Open FlashMX03a.fla.

1. Import a sound file into your movie's Library using File > Import to Library. Compress the sound via the Sound Properties as you did in this lesson.
   
2. Create a new layer named sound, and put a keyframe in frame 2 of your sound layer. With the keyframe still selected, launch the Actions window (F9), choose Objects > Movie > Sound > new Sound to create a new sound object.
   
3. In the Expression text field, new Sound() appears. Place your cursor at the beginning of the field and type a name for your sound (call it music) and an equal sign (=). This is the process of assigning a variable name to an object. (We'll get to ActionScript writing in Lesson 4.) Your script should now look like this:

4. Select Objects > Movie > Sound > Methods, and double-click attachSound in the left column. In the Object field, type the word music. In the Parameters field, type the name of the sound file exactly as it appears in the Library, the file's Library idName. Place the file's name in quotation marks because we are referencing a file, not a variable name. The second line of your script should now read:

5. Now that we have a new sound object and we've attached a sound file to it, all we need to do is script the sound to play. Select Objects > Movie > Sound > Methods, and double-click start in the left column. In the Object field, type the word music.
   
6. In the Parameters field, you have two settings. To offset the playback of your music, type a number for the seconds you'd like the sound to wait. We want our music to play right away, so type 0 for this parameter, and then type a comma (,). The next parameter sets how many times you want our sound to loop. Type in the number 5 for five loops. The last line of your script should look like this:

Your final script should resemble what's shown in Figure 3-9.

Figure 3-9: The Actions panel, including our sound scripts.

6. To make sure your sound doesn't play over itself when a user hits the start button to replay your movie, place a stopAllSounds script in frame 1 of your actions layer. Do this by clicking in the keyframe and choosing Actions > Movie Control > stopAllSounds.
   
7. Save your movie

   

Quiz

Question 1
Which of the following is true of symbols? (Check all that apply.)
A) Using symbols reduces file size by rendering images once.
B) Symbols can be motion tweened.
C) Symbols from one movie can be used in other movies.

Question 2
Which of the following is not a type of symbol?
A) Sound
B) Graphic
C) Bitmap
D) Button

Question 3
The Hit frame of a button symbol specifies the ______________.
A) area that activates the button
B) sound of the button
C) button action
D) button function

Question 4
Where must sounds be placed when used on the Stage?
A) On any empty frame
B) On a keyframe
C) On a button
D) On its own layer

Question 5
How do you add a sound to your movie without placing it on the Stage? (Hint: Did you do the second assignment for this lesson?)
A) Place the sound in a button.
B) Use Flash's built-in Common Libraries.
C) Use the Sound Properties window.
D) Use the ActionScript Sound Object.