Using Buttons

---

The following are the four different states of a button:

• Up — The default appearance of the button as first seen by the user.

• Over — The way the button looks when the user passes the mouse pointer over it. The Over state alerts users that this button is "hot," meaning that it leads to another page when clicked.

• Down — The appearance of the button after it has been clicked, which often appears as if the button has been pressed down. In Macromedia Fireworks, you can set the Down state to be active on the page the user is clicking to and designate the button as the current page (it's the default setting).

• Over While Down — The appearance of the Down state button when the mouse pointer moves over it.

The quick-and-easy way to add multiple states to a button is to use the Button Editor (which is described in the next section). The Button Editor is designed to help you make up to four different states of the same button in one location. Using it is the easiest, fastest, and most efficient way to make multiple-state buttons.

Most Web navigation buttons use JavaScript to power their interactivity. Using the Button Editor, you can build these buttons without knowledge of JavaScript. Fireworks MX generates the necessary JavaScript code for you automatically. You can choose to produce from two to four states for a button, and easily change the appearance of each state. Any button produced with the Button Editor is automatically a Symbol. When you want more than one of a button, simply drag another Instance onto the canvas from the Library.

Another important feature of the Button Editor is that when you alter the text on the Up state button, the text is automatically updated for the other states as well, eliminating the need to change the text on all four buttons.

Using the Button Editor

When you make a button using the Button Editor, the behaviors for the different states of the buttons are automatically added according to the choices you make. The JavaScript for the buttons is exported with the button.

The following are the steps involved in creating and modifying a button with the Button Editor:

1.  Habitat Alert site   Open the  btn_quiz.png file.

2. Double-click the instance (a copy of a symbol) of the button. An instance is indicated by the arrow in the lower-left corner. The Button Editor opens. Figure 20-1 shows your button in the Button Editor.

   
   Figure 20-1: The instance of the button symbol opened for editing in the Button Editor

   The Button Editor has several different tabs. When you click one, Fireworks gives you a description of what the corresponding state does. The Up state tab should be the active one, if it isn't, click it to open it.

   New Feature 

   If you've already used Fireworks, you will notice an extra button: Import a Button. Click it. Figure 20-2 shows the Import Symbols: Buttons dialog box. These are the buttons found in the button library, which ships with Macromedia Fireworks MX. These symbols can also be accessed by choosing Edit ® Libraries ® Buttons. It is possible to add buttons you design into the Button Library later in this chapter.

   
   Figure 20-2: The Import Symbols dialog box for buttons

3. To center your button, select the button. Open the Align panel if it isn't already (Window ® Align). Click the To Canvas button. (It's orange when selected.) In the Align area click the Align horizontal center and Align vertical center icons.

   Notice the button is centered under the cross (+) symbol. Buttons have registration points, which are the center of the button for alignment purposes. The cross serves as the button registration point, the point where each state of the button will be aligned.

Note 

When you are in the Button Editor, open the Frames panel (Frames and History panel group) and notice that four frames are present, one for each available state of your button. Now look in the Layers panel. Notice that a slice has been added to the Web layer. All this happened automatically.

To add text in the Up state:

1. Select the Text tool and type the text you want on the button. Remember that the text is fully editable and can easily be changed later.

2. Type Home. Use any font and size that looks good on your button. We used Lithos Regular and a size of 14 for this example.

   New Feature 

   In previous versions of Fireworks, adding text at this point would mean a new symbol would be generated every time you altered the text. Not so anymore. Enter text for one of your buttons. Add effects and color change as you desire for every state of the button.

3. Click and drag to visually align your text.

   Note 

   You can use the Center Text function, but be aware that the text is centered only in its text box not to the object. To center the text you can use the Pointer tool to place it visually, or you can draw a text box using the Text tool around the clear area; then type the text. Using this method, when you click the Center icon, the text is centered.

Follow these steps to alter the Over state:

1. Click the Over tab.

2. Click the Copy Up Graphic button to put a copy of the Up state in the Over state's editing box.

   Tip 

   For any of the button states, you can import a button, draw a unique button, or drag a button from another document, instead of using the Copy Graphic Up/Over/Down button. Be sure to keep the images the same size and center for a smooth rollover.

3. Select the button and ungroup it (either use the icon in the Modify toolbar or press Shift+Control+G (Shift+Command+G)). Now you can change the fill for the Over state.

4. For this button you won't change the text for the rollover, just the little star in the square. Click the star and change the Stroke to a color of #CC0000. Regroup the button.

5. Leave the Include Nav Bar Down State option checked.

   Note 

   A common rollover effect is to add a stroke, glow, or a Live Effect. Be sure the button, or text if you have any, is selected so that the effects are added. The great part is that when you change the text on the symbol later, the effects are automatically applied to the new text!

To alter the Down state, follow these steps:

1. Click the Down tab.

2. Click the Copy Over Graphic button.

3. Make any changes to the appearance you require. For the Habitat Alert button we are making, use these values: choose a color of #B08B00 for the star; change the fill of the small rectangle to #CC0000.

   Tip 

   If you want to see all the buttons at one time, click the Onion Skinning check box.

   If you want to assign an Over While Down state to the button, which isn't as widely used as the other three states, click its tab, click the Copy Down Graphic button, and make your changes. No changes were made for the Habitat Alert button.

4. Click the Active Area button to see a slice added to your document automatically. The Active Area is set to Automatic by default and generates a slice large enough to cover all the button states. There is one slice for all four-button states; you can change the size of the slice by dragging the slice points.

   New Feature 

   In previous versions of Fireworks there was a Link Wizard in the Button Editor. It's been removed and you now can easily add links and alt text right into the Property inspector.

5. Click the Done button when you are finished with all the states of the button. An instance of the button is automatically placed in your document, indicated by the little arrow in the corner.

6. Save this file as  btn_quiz.png. Since this image will be used in the Habitat Alert site it is being saved in the following folder: habitat_alert_final/ designfiles/Fireworks.

To add more buttons to your document, drag them from the Library panel (in the Asset panel group) by clicking and dragging either the button symbol or the name of the symbol onto your document. Alternatively you can Alt+click and drag (Option+click and drag) a new copy of the instance. Figure 20-3 shows the symbol in the Library panel.

Figure 20-3: The button symbol added to the Library panel

You can easily preview your new button by clicking on the Preview tab in your document window, pass your mouse over the button and click on the button to see the different states. Figure 20-4 shows the preview tab selected and the rollover effect.

Figure 20-4: The rollover state of the image as seen in Preview

 Flash MX   This button's PNG file can be imported into Flash where the text can be changed. It will maintain it's texture and the rollover effects in Flash.

Using symbols, instances, and libraries

Symbols are automatically generated when you use the Button Editor. A button symbol encapsulates up to four different button states and moves as a unit. You can convert any object into a symbol. If you have a custom button designed, you can make it into a symbol, to use over and over, as you'll see later in this chapter. There are three types of symbols in Fireworks.

• Graphic symbols — Basically any object you'd like to use multiple times.

• Button symbols — Graphics intended for use as a button with two or more states. Button symbols are generated in the Button editor, which also automatically applies a slice.

• Animation symbols — Contain all the frames and timing of an animation. A completed animation including links is contained in the symbol.

Symbols are editable. When you make a symbol it is stored in the Library panel (in the Assets panel group) and an instance is placed on the canvas. An instance is a copy of a symbol.

Button Facts

Buttons have some common characteristics and abilities. This is a handy list of button features.

• You can make a graphic or text object into a button.

• You can convert a graphic or a text object into a button.

• You can import buttons from the Button library or from others.

• You can make one button symbol and drag instances of that symbol from the Library.

• To edit a symbol you simply double-click an instance on the canvas or the Library to open the Button Editor. You can also change its properties in the Property inspector.

• You can edit the Text on a Button without affecting other instances of the same symbol. This also does not break the link to the original symbol. Symbol color, effects, and so on can all be edited and filter down through all instances.

• You can edit the URL and target without affecting other instances of the symbol.

Once you have a library of symbols, you can drag additional instances of them from the Library panel (Window ® Library) onto your canvas. The "child" Instance maintains a link to the "parent" Symbol. An instance is marked with a dotted box and corner arrow.

In most cases, double-clicking an instance opens the appropriate editor and changes are made globally to all instances. However, there are some techniques you can apply to an individual instance that do not affect the symbol. You may use the transform tools or alter the opacity on individual instances. You may also add effects on an instance-to-instance basis.

There are two types of libraries. The default library is generated when you first convert an object into a symbol, and it includes the symbols. The library is saved with the document. When you re-open the document, the library is available for that document only. You may easily export a set of symbols from the library for use in other documents, or even save them into the libraries that are accessible in any document in Fireworks.

The following are the steps involved in exporting symbols from the library:

1. Open the Library panel.

2. Click the down arrow to access the Library Options menu. Choose Export Symbols.

3. Select the symbols you want to export. If you want them all, choose Select All. If you want several in a row, Shift+click. For non-contiguous selections, press Control+Click (Option+Click) on the desired symbols. When you are done, click the Export button.

4. Name your library and choose where to save it, then click Save.

Tip 

For libraries you think you may use often, save them or move them to the Fireworks Library folder, which is in Macromedia\Fireworks MX\Configurations\Libraries (for Windows 2000, your location may vary). By placing your file here, it can be accessed by choosing Edit ® Libraries submenu. Any new libraries you export into the libraries folder will be available the next time you start Fireworks.

To import a library:

1. Open the Library panel.

2. Access the Library Options menu and choose Import Symbols.

3. Locate the saved library and choose Open.

4. The Import Symbols dialog box opens with the list of symbols in the library. Choose one or more and click the Import button.

Making a button symbol

It's easy to make a button directly in the Button Editor or convert an existing button into a button symbol and edit it in the Button Editor. As stated earlier, a button symbol encapsulates up to four different button states and moves as a unit. Instead of spending lots of time reproducing similar buttons, you simply have to place a symbol onto your canvas and edit the text and link.

I find it easier to design my button first. So in this exercise you will convert a button graphic into a button symbol.

On the CD-ROM 

The starting and finished buttons ( quiz.png,  btn_quiz.png) are in the chapter20_exercise folder on the CD-ROM.

1. Navigate to the CD ROM chapter20_exercise folder and open the  quiz.png file.

2. To convert this graphic into a symbol:

   1. Choose Select ® Select All.

      Caution 

      If you don't select all the objects, only the part that is selected will be converted to a symbol.

   2. Click on Modify ® Symbol ® Convert to Symbol.

   3. In the Symbol Properties dialog, select Button as the Type, and click OK.

      Note 

      As soon as your button is converted to a symbol, it is placed in the Library (Assets panel group).

3. You can save this file now as  btn_quiz.png. Save it in the  habitat_alert_start\designfiles\Fireworks folder if you copied it to your hard drive. Otherwise a copy is in the  habitat_alert_final folder.

Editing button symbols

Editing the buttons you have made is quite simple. There are multiple parts of a button, which can be edited as follows.

To edit the text:

1. Select the text you want to edit.

2. In the Property inspector you can change the Text, add a Link, and enter Alt text.

   Note 

   This works only if the button symbol has text on it.

To change the button characteristic:

1. Double-click to open the Button Editor.

2. Click the tab for the state or states you'd like to alter and make your changes.

3. Close the Button Editor when you are done.

   Note 

   When you edit an original symbol, if it's been used in other documents, you can update all instances simultaneously by choosing Update from the Library pop-up menu (F11). If you try to edit an imported symbol, a warning will open telling you that an edit will break the link to the original symbol.

When you edit an instance of a button, it breaks the link with the original object, allowing you to make changes in the new document without affecting any documents containing the original symbol. To update an imported button, open the Library pop-up menu in the Library panel and choose Update.

In Fireworks MX, you can now also edit the active area, which is really the slice directly in the document. Be sure the Show Slices and Hotspots view is turned on. You can drag the red lines to the size you need.

You could still edit the Active Area via the Symbol editor but it's so much easier to do it in the document itself. This technique however will change the slice size of all instances in the document.

Tip 

To change the slice of individual instances you'll need to make a copy of the symbol. In the Library panel click on the Library Options pop-up menu and click on Duplicate. You can now change the slice or any other part of the new symbol. It's no longer attached to the original however.

Adding a button to the button library

As promised, you will now learn how to add your own special buttons to the button library that ships with Fireworks MX. You can even make your own custom named libraries if you'd like.

1. Open  btn_quiz.png from the chapter20_exercise folder on the CD-ROM, or use your own button.

2. You need to open the file that contains the library of button symbols that is included in Fireworks. The location of the file will depend on your operating system. Locate your Macromedia Fireworks MX program files and locate the Libraries folder (it's FireworksMX ® Configurations ® Libraries on Windows 2000).

   1. In this folder you'll find Buttons.png. Select it and Open.

   2. A dialog may open asking you to Change Fonts or Maintain Appearance. Click on Maintain Appearance.

   Notice in the Layers panel how each button in the library is its own object but all the buttons are in one document (Figure 20-5). Don't be intimidated by all the slices you see. You can click on the Hide Hotspots and Slices icon in the Tools panel if you'd like.

   
   Figure 20-5: The buttons library as seen in your document and in the Layers panel

3. Select your button in the Library panel and drag an instance of the button and drop it onto the open Button Library.

4. Center the button by using the Align panel.

   In the Library panel you'll see your button added (Figure 20-6).

   
   Figure 20-6: The new button added to the buttons library

5. To give the button a descriptive name, double-click the button name in the Library panel (mine said symbol) and change it. I named mine goldbutton.

6. Save the file.

---