MAKING ROLLOVER BUTTONS IN FIREWORKS v3 & V4

3-9-2001

In this exercise we will create a set of buttons in Fireworks and apply Javascript Rollover Behaviours to them, then exporting the GIFS and a HTML page

Here is one I whipped up earlier.. (Will open in new window)

IN FIREWORKS: Create a NEW DOCUMENT 150wide X 200high - BG transparent

Make sure Rulers are turned ON under VIEW > RULERS

Divide the canvas into four buttons using three horizontal guides each 50 pixels apart Use the INFO Palette to guide you in making exact placements and measurements.
Draw a rectangle to cover each of the four button areas - choose a fill colour but no stroke colour
Select all four buttons and apply an effect to them - try an inner raised bevel with a smooth edge around 10 high

Lock layer one and create a new layer

On layer two type in text for the first button only
Duplicate this text and move it down exactly 50 pixels using the SHIFT and DOWN keys - Double click to edit and change the words for second button
Duplicate and move it down for the third button - change text then duplicate and move down for fourth button - change text

Unlock Layer One and SAVE your file

DUPLICATE FRAME ONE (NOT LAYER ONE) - It does not matter which layer you have selected. We have now made an identical copy of Frame One - Frame two will be modified as the Rollover state of the buttons - Frame One will be the Normal state.

On Frame two - choose all the rectangles and modify the raised bevel to be INSET
Also on Frame two - select all the text and add a drop shadow effect. This gives us the look for the two states of the rollover buttons.
SAVE your file.

SLICING THE IMAGE

Using the SLICE TOOL draw a box around each of the four buttons - make sure they reach the edges and that there are no spaces between the "slices"
Note that if you used guides to define the areas initially, the slice tool "snaps" to guides

Select the first slice and go to the OBJECT PALETTE - set some ALT text and name the slice - do this by unchecking "Auto-Name" and typing in the box - this will be the file name of that slice so use lowercase with no spaces.
NEXT go to the BEHAVIOURS PALETTE and add a SIMPLE ROLLOVER behaviour
Then go to the OPTIMIZE PALETTE and set the slice as a GIF with 16 or 32 colours

REPEAT THIS PROCESS with the other three buttons

SAVE.. NOTE: Fireworks versions 3 and 4 vary considerably on the final steps - here are instructions for both.

FIREWORKS VERSION 3:

Go to FILE > EXPORT Create a new project folder and INSIDE THAT create a folder called "images"
SLICING - choose "use slice objects"
HTML STYLE - choose "generic" or other
Under HTML SETTINGS - UNCHECK the box that says export undefined slices
Under LOCATION - if you are set to export to the IMAGES folder then choose "One level up" - this will save the HTML file outside the images folder

CLICK EXPORT Open HTML file in Internet Explorer to preview.

FIREWORKS VERSION 4:

Go to FILE > EXPORT - Create a new project folder if necessary
SAVE AS > Choose HTML and images
HTML > Export HTML file
SLICES > Choose Export Slices
Make sure the INCLUDE AREAS WTHOUT SLICES radio button is NOT checked
MAKE SURE the PUT IMAGES IN SUBFOLDER radio button is checked

Under the OPTIONS menu - choose TABLE and ensure the choice is set to SINGLE TABLE NO SPACERS

Go OK and then....

CLICK EXPORT Open HTML file in Internet Explorer and Marvel!

Here is one I whipped up earlier.. (will open in new window)