TechNote (Archived)

Basic Fireworks Rollovers

Learning how to generate JavaScript rollovers in Fireworks 2 is simple. The key is to learn a very simple rollover and build on that knowledge for more complex effects.

A Simple Rollover with One Button

A very simple rollover button is shown below. Rolling the mouse over the "Up" image (button) will switch the image to the "over" button. Try it.

Getting Started

First, view the Layers panel and make sure that Layer 1 is not shared across Frames. Layer sharing in Fireworks is indicated by a little "filmstrip" icon inside a pair of arrows just to the right of the layer name. Once you've checked for this, disregard the layers panel for awhile. The layers panel will not be used in this simple example. As you gain experience the layers panel will become a great organizational aid. (The most common mistake first time users make is focusing on the layers panel.)

To create this simple one state rollover do the following:

Create a new Fireworks document, 160 x 100 with a black canvas color. The work area should look similar to the image below. It's important in this example to concentrate on the Frames panel, because the Frames panel handles the bulk of the work when creating JavaScript rollovers.
Creating Frame 1, the UP state
Now create the actual images for the button. Remember, everything you see in FRAME 1 will be the 'Up' state of the button. So when you first browse the page, the button will show you the contents of Frame 1.
Note: If you choose to open an image file such as a Photoshop document in Fireworks the Layers may be shared. Check for layer sharing and turn it off if necessary by selecting the shared layer and then clicking on the Options pop-up arrow at the upper right of the panel. Remove the checkmark (Windows) or Bullet (Macintosh) from the Layer Sharing option in the menu that comes up.
Creating Frame 2, the OVER state
An exact copy of Frame 1 will be created for Frame 2, which is the"Over" state of the button. The image on Frame 2 is what you see when you move your mouse over the button area. It's easiest to use"Duplicate Frame" here because it maintains the exact position and attributes of the elements. For this example, all elements are recreated in both frames and are not shared.
To create Frame 2 insert one Frame after the current frame.
After completing Step 4, the work area will look similar to the example. Notice that Frame 1 is in blue, which means it's the active frame. So any editing would happen on Frame 1.

To make Frame 2 active for drawing and editing, click the name 'Frame 2'.

At this point Frame 1 and Frame 2 are identical. Frame 2 will be changed in the next step to be visually different so it looks like a "rollover".
Making Frame 2 a unique image
To make the Over state (Frame 2) different from the Up state (Frame 1) change the text to read "over" and add an embossed effect. With Frame 2 active double-click on the text to open the text editor and type the word "OVER" in all caps. Close the text editor. (The text is center aligned in this example so it stays in the same place as before.) Then apply the embossed effect to the text using the settings shown below in the Effect panel.
Adding Slices
The rollover is almost done. At this point there are different images in Frame 1 and Frame 2. The next steps include drawing a Slice Object over the button, assigning a URL , and assigning the action that occurs when the mouse is moved over the image in Frame 1 and it changes to the image in Frame 2.

The first step is to draw a Slice object using the Slice Tool on top of the image (button).

Select the slice tool from the Toolbox.

Draw a slice which covers the complete image (button). The green object is the slice. When you draw the slice, the Object panel will automatically open for you to set up to set up some URL information about that slice.
Setting up the URL
URL information is important. Without assigning a URL to the slice nothing would happen when you click the button! Buttons with rollovers are usually designed to navigate to another URL or page. For this simple example only the URL setting will be changed and leave the other settings at the defaults.

Select the field where it says "No URL" and type in a URL of a Web page to go to when you click on this button. After typing the URL press RETURN.

In a more complex button navigation with many buttons and URLs, you can create libraries of URLs. Now the slice object is in place over the button and a URL assigned to the slice object.

Next there is a very important step to do before this button can be exported. It is assigning the action (Behavior).
Setting up the Behavior
Select the slice and choose Window > Behavior. Click the plus (+) button in the Behavior panel and select Simple Rollover.

In the Simple Rollover window Do NOT check the options for the 3rd or 4th frames. In this example there are only two frames (Frame 1 the Up state and Frame 2 the Over State).

Note: In Fireworks 3 there is no Down (Frame 3) or OverDown (Frame 4) state in the Simple Rollover Behavior. This is because these functions have been moved to the Button Editor. For more information on using the Button Editor in Fireworks 3, seeUsing the Button Editor in Fireworks 3 (TechNote 14302).

Click Okay and now the Behavior window shows the Event (onMouseOver) and the Action (Simple Rollover) as shown in the example below.

The button now has a slice object over it, an assigned URL, and the Simple Rollover Action with the onMouseOver Event. It is now ready for export.
Setting up the Export:
Choose File > Export. The Export Preview window is shown below. The area marked by the red square is the only part of the Export Preview window used in this simple lesson.
Portion of Export Preview Dialog (Red box area )

This area sets the type of file for exporting. There is a detailed explanation of all these items in the Fireworks documentation.

For this lesson, choose the following settings as shown in the example:
GIF format with an adaptive palette of 128 colors. (For this example anything under 128 colors resulted in poor image quality.)

The preview window on the right shows a "live" preview of any changes you make to the format or palette.

Now that File Format is set, click the Next button.
Clicking the Next button closes the Export Preview dialog and opens the actual Export dialog. The highlighted area of the window is discussed below.
- The Base Name of the file:
  Fireworks uses the file name of your GIF as the base name for all the other information it needs to do the rollover. So this name is important. Use all lower case letters with no spaces between words. The underscore is used instead of a space as shown in the example.
- Slicing (None, Use Slice Objects, Slice Along Guides)
  Use Slice Objects is used here because a Slice Object was drawn over the button and most important the Simple Rollover Behavior was assigned to the Slice Object.
  A rollover is actually an HTML "Table" with some special instructions. What actually happens when you roll the mouse over that area is that the JavaScript commands tell your browser to update the table cell you're rolling over with a DIFFERENT GIF file.
- What Style are you exporting to?
  Choose a style that matches the HTML layout tool you use.
- What Location are you exporting to?
  To keep this lesson simple use the default same directory. This keeps the HTML file and the images it links to in the same folder.
  When Fireworks exports this file it is automatically generating many files. There will be an HTML file containing a table and all the individual files that make up each row and column of the table for the rollover.
  
  Some people like to keep their images in the same folder as the HTML file that is created. Some like them in a subfolder named"images".
  
  In the construction of a Web Site, the organization of files and folders make is easier to keep track of the files uploaded to a server.
Click Save (Windows) Export (Macintosh).
Open the HTML file (the file name used for Base Name with the added".htm") in a Browser and try the rollover.