So far we’ve used Behaviors to create buttons that roll themselves over.

Fireworks also gives you the ability to create sophisticated image swaps known as Disjointed Rollovers. Using this type of rollover you can click on a button and  swap a graphic located in another part of your document. This is exactly the same as the traditional "Swap Image" except for the fact that the content being swapped sits under a different Slice Object than the button that is triggering the function. 

Let’s look at an example of a Disjointed Rollover. You should find a file called "rollover.png" in the exercises folder for Unit 13.  Open the file and select your Behaviors, Library, and Frames Panels.  Preview the document by pressing the [F12] key to see how it works. Rolling over the buttons triggers a swap image that occurs in a separate part of the document. 

(Figure13.20)

If you look in your Library Panel you will see that the three buttons used in the document are actually symbols that have been dragged and dropped in the document. They all have a simple rollover applied to them.  Recall that simple rollovers utilize frames 1 and 2 for their content.

Select your Frames Panel and take a look at the content in each frame. The button Up states sit in Frame 1 and the Over states sit in Frame 2.  The buttons sit on top of a green vertical bar that runs down the left hand side of the Document Window. Remember that the Behavior Panel uses the content of individual frames to create rollovers. If you want the bar to appear in every button state you’ll have to either cut and paste it into every frame that the buttons sit in or share the layer in which the bar is situated.  If you check your Layers Panel you’ll see that the "side bar" layer has a "Share Layer" Icon beside it.

(Figure 13.21)

You can share a layer by selecting the option from the Layers Panel Pop Out Menu. Sharing an individual layer will place the content of that layer in each and every frame that your document has. You will want to share any layer that contains background content.  If you don’t share it you will end up with conspicuous white boxes around your button every time you roll it over.

If you check Frames 2, 3, and 4 you will see that each one has an individual polygon situated in it.  Use the Frame Panel’s Onion Markers to reveal the content of Frames 2, 3, and 4. If you click on the Web Layer Icon in your Toolbox you’ll find that all three of the polygons are covered by one Slice Object. The Slice Object was created by multiple selecting the polygons and selecting Insert/Slice from the Menu. Recall that this is a quick and easy way to insert a Slice Object that fits your content perfectly.

Lets take a look at how a disjointed rollover works.  Bring your Behaviors Panel to the fore and select the button labeled "Circle".  Two Behaviors have been attached to this button, a Simple Rollover that rolls over the button itself, and a Swap Image that causes the image of the circle to appear.  Select the Swap Image Behavior from the list.

(Figure 13.22)

Open the Behavior Panels Pop Out Menu and select "Edit" from the list. 

(Figure 13.23)

The Swap Image Dialog Box will appear.  The only difference between this type of rollover and the standard rollover that we created earlier in the unit is the Slice Object we choose to swap images in.  The circle button resides in the Slice Object labeled "rollover_r02_c2" and the circle object resides in the Slice Object labeled "rollover_r08_c4".   The button is supposed to swap the content of Slice Object "rollover_r08_c4" so that slice has been selected.  You’ll know it’s been selected because it is highlighted in blue in both the Slice Object list and the visual layout to the right of it.  The circle object is situated in Frame 2 so it has been selected as well. 

Close this dialog box and select the "Triangle" button in your Document Window. 

(Figure 13.24)

We have a triangle object sitting on Frame 4 but we don’t have a Behavior attached to the Triangle Button that we want roll it over. Open you Behaviors Panel and {Click} on the Add Behavior button.  We want to add a Swap Image so select if from the list.  The Swap Image dialog box will appear.  We want the button to trigger a rollover in the "rollover_r08_c4" slice so we’ll have to either select it from the list or click on the slice in the visual layout. 

(Figure 13.25 (a) Slice Listing        (b) Slice Layout )

The triangle object sits on Frame 4 so we’ll want to select it from the "Frame No." drop down menu.