You can completely sidestep both the Frame and Behavior Panel if you create your Buttons as New Symbols. Select "Insert/Button" from the Menu or create a New Symbol by way of the Library Panel. Creating a New Symbol will cause the Symbol Properties dialog box to appear. This time, instead of making a New Symbol, you want to create a New Button.  {Click} on the "Button" radio button to change the type of symbol you are creating.

(Figure 13.13)

A Button Editing Window should appear on your screen.

(Figure 13.14)

You can create and edit content in this window in the same way that you would in any other Document Window.  The major difference between this Window and others can be found in the five tabs across its top.

(Figure13.15)

The first four tabs correspond to frames in your Frames Panel.  The Up Tab is the equivalent of Frame 1, the Over Tab is the equivalent of Frame 2 and so on. 

There is an example of a button in the folder for unit 13. The file is called "buttonexample.png" and MUST be imported into the Library of a document. Create a new document and add 4 frames so you can see the all of the button states. Select "Edit Symbol" from the Library’s Pop Out Menu and the Button Editing Window will appear with the example file in it.

(Figure 13.16)

{Click} on the Over Tab to see the content of that frame. Other than the fact that the graphic is yellow it is exactly the same in appearance and position as the one used for the button’s Up State. It is very easy to create separate button states based on one graphic using the Button Editing Window. In the bottom right hand corner of the window you will see a "Copy Up Graphic" button.

(Figure 13.17)

{Clicking} on this button will paste the previous state’s graphic into the current state. The graphic can then be edited in any way you wish.  This is much easier than cutting, pasting and repositioning graphics.  The "Copy Up Graphic" Button does it all for you. 

{Click} on the "Down" tab and use the "Copy Up Graphic" button to use the Over state as the basis for your new state. Make the background color of the rectangle red and change the color of the text and the outline to white. If you wanted to change the text of the button you could check the Onion Skinning checkbox and use it to position your text.

If you {Click}on the Active Area Tab, Fireworks will create a Slice Object for your button.The created Slice Object will match the size of the largest graphic you are using for your button states.

You can also add links to your buttons while editing the Active Area. {Click}on the "Link Wizard" button at the bottom right hand corner of the Button Editing Window.

(Figure 13.18)

The Link Wizard dialog box will appear.

(Figure 13.19)

The options in this panel should be familiar to you. They are exactly the same as the ones you use to link a Hotspot. Create a link for your button and {Click} "OK".

Our button should now have an Up State, an Over State, a Down State, and a link.  Close the Button Editing Window to finish editing the button. Now all you need to do is drag and drop the button into a document and it will already have a Slice Object over it and it’s multiple states will appear in the Frames Panel. If you need to use the button in other documents you can export it from the current document and import it into the their Symbol Library.

Creating Buttons as Library Symbols is much easier than going through the process of creating them with the Behaviors Panel. You can create, edit, link, and export your buttons in half the time it would take using any other method.