A great way to illustrate the inner workings of a pre-packaged Fireworks Behavior is to tear apart a file that uses one.  If you check the folder for "unit013" you will find a graphic file labeled "behavior.png."  Open this file in Fireworks and preview it to see how it works.

(Figure 13.3)

This is a very simple document.  It contains one slice object, two grouped vector objects, two layers (in addition to the Web Layer), two frames, and a Swap Image Behavior. Check the various related panels to confirm this.

For this example the graphics have been placed on two separate layers to keep the content organized.  You can easily distribute the vector content of one layer across multiple frames.  Vector objects, as you know, can be stacked on a single layer.  If you wanted you could, on a single layer, use one rectangular vector to create six buttons with differing text labels and distribute each one of them to their own frame.  Layers do not play an important roll in the creation of basic rollovers.

(Figure 13.4)

If you select your Frames Panel and click on the two frames listed in it you will see the two graphics in the document.  There should be an "Up Image" graphic and an "Over Image" graphic. 

(Figure 13.5)

Frames play an integral part in the creation of rollovers. A JavaScript Rollover replaces one graphic with another.  The Up Image is the graphic that you see when the document is first displayed and, is therefore, placed in the first frame.  The Over Image is the graphic that replaces the Up Image and is placed in the second frame.  When the document is exported Fireworks uses the content in the first frame to create the HTML document the viewer will see when they first visit the page.  The content in the rest of the frames is used for rollover states and animation.  

You designate the areas of your document that you want to swap by placing a Slice Object over them.  In this case the "Up Image" was selected and a Slice Object was inserted by selecting "Insert/Slice" from the Menu. This way the Slice Object fits the graphic perfectly and there’s no need to use the Slice Tools at all.

Select the Behavior Properties button at the bottom of your Behavior Panel to get a better idea of how Slice Objects and Frames work together to create rollovers.  The Swap Image dialog box appears;

(Figure 13.6)

The top two windows in the dialog box allow you to pick the Slice Object that will have the rollover applied to it. You can select it from either the written list or the visual layout in the Document Window. This document contains a single Slice Object so selecting is relatively straightforward.  You’ll notice the naming convention for the slice mirrors that for the graphics that will be exported by Fireworks.

You can select the frame that you want Fireworks to take the swapped image from by {Clicking} on the Radio Button labeled "Frame No" and picking a number from the drop down menu. If the document contained 3 frames you would have the choice of picking either Frame 2 or 3. If it contained 10 frames you’d have 2 through 10 to choose from. You’ll never see more frames in the list than do exist in your document.  If you’ve created your rollover image in a program other than Fireworks you can {Click} on the Image File Radio Button and navigate your way to its location.

(Figure 13.7)

The Check Boxes at the bottom of the Swap Image dialog box will add additional JavaScript functions to the exported document if they’re selected. The first option creates a preload for our swap images.  A preload places our all of the documents graphics into the user’s cache when they first arrive at the page. If this option wasn’t selected the rollover images wouldn’t load until the user moved their cursor over the button for the first time. In this case, the graphic takes a few seconds to load and the viewer would experience a definite pause before the rollover occurred for the first time. This, at the very least, is unprofessional.Always preload your images. 

The second option will restore the original image once the user moves their cursor off the button.  Check this box if you want your button to return to its original state.  Don’t check it if you want the swapped image to remain.

The steps that went into the creation of the sample document constitute a basic overview of the way in which Fireworks creates rollovers. Armed with this knowledge you can create any number of different rollover effects. If you remember that rollover effects are dependent on Slice Objects and Frame Content then you are well on your way to creating animated buttons.

Lets take a look at some of the other ways that you can create rollovers.