Creating Button Rollover Effects in Fireworks

By xcdjy | Fireworks 8 | Beginner

This tutorial will show you how to create a simple rollover button effect in Fireworks which you can use in any HTML page. Fireworks is capable of designing web pages and buttons easily and this tutorial will teach you one of the methods for creating nice interactive buttons for your website without any programming skills. This is a beginner tutorial that does not require any prerequisites.

This is a fancy example similar to what we will create by the end of this tutorial.

 

Fireworks creates rollover buttons by joining two frames with a simple behavior attached to an image slice. This tutorial will teach you how to do this easily.

This tutorial is divided into the following short sections:

  1. Preparation
  2. Drawing the First Frame (Up State)
  3. Drawing the Second Frame (Over State)
  4. Adding the Behavior
  5. Exporting the Button

Preparation

Before starting Fireworks, I suggest that you create a new folder to put all the documents which we will end up with at the end of the tutorial. I created a folder named Buttons for this tutorial.

Launch Fireworks and create a new document by going through File>New. Set the width to 300px, the height to 100px, and the background color to White. Click on OK and you should get a simple white canvas.

Fireworks Button - Canvas Setup Fireworks Buttons - Blank Canvas

Our file is now ready. We will draw our first frame next.

Drawing the First Frame (Up State)

Our button is going to have two states, the up state and the over state, the up state is the normal look of the button when the mouse is not over it. We are going to have a simple rectangle with some text on it as our button up state.

Grab the Rectangle Tool and draw a simple rectangle. Select the shape you just drew using the arrow pointer then access the Properties panel and set the rectangle's width to 200px, the height to 50px, its x position to 50, its y position to 25 and the Fill Color to red (#FF0000).

Fireworks Buttons - Rectangle Properties

If you cannot find the Rectangle Tool you might have to click and hold the first shape icon that appears under the Vector section of the Toolbar and select the Rectangle Tool from there.
Rectangle Tool - Fireworks

We will create the button label now, select the Text Tool (the one with the A symbol), click on the body of the canvas and then type HOME in capital letters. Access the Properties panel then and set the Font to Arial, the Font Size to 30, the Font Color to White, tand hen look for the little box with a pencil next, click on it and then select the white box with a line through to disable the stroke color for the text.

Fireworks Buttons - Text Properties

Creating the Second Frame (Over State)

We finished the up state of our button and now we will create the over state, this is how the button will look when the mouse is over it. It is possible to have ANYTHING you want in the over state, but to simplify things for this tutorial, we are going to have the same thing but just in a different color.

We need to have another frame to put our over state in. Open up the Frames and History panel (usually found on the right side of the screen). Click on options button on the top right corner of the pane and select Duplicate Frame.

Duplicate Frame - Fireworks

You should now end up with two frames on the panel as shown in the image below.

Fireworks Frames Panel

We are going to edit the color of the rectangle for this second frame, so make sure that the second frame is selected, then select the red rectangle and change its color to green (#00FF00).

Adding the Behavior

To make our little Fireworks project interactive we need to make use of slices and behaviors. A slice is a division of the document which can be treated as an interactive object or as an independent body with unique export settings. A behavior on the other hand is an Action or an interactive behavior which can be set from a special behavior panel. We are going to use these two to make our images act like a button.

Make sure that the rectangle is still selected then go through Edit>Insert>Rectangular Slice. This should insert a slice that looks like this:

Fireworks Slice Inserted

Select the slice you just created then go through Window>Behaviors - this should open up the Behaviors Panel. Click on the plus sign + and select Simple Rollover as shown below:

Fireworks Behaviour Panel

You can now preview the behavior to see if you have done this properly. To do so simply check the Preview tab found above the canvas. The color of the rectangle should change when you hover the mouse over it.

To actually make your button link to another page, you will need to select the slice, access the Properties panel and then put your link in the link field!

Exporting your Button as part of an HTML page

You have the rollover button ready in Fireworks, but exporting it as part of an HTML page requires a little bit more work. This next step is extremely important: You must access the Optimize Panel (if not visible go through Window>Optimize) then use the second drop down menu to select GIF as the export format and NOT ANIMATED GIF.

Fireworks Optimize

The final step to create the HTML page is go through File>Export, then navigate you way to the folder you created at the start of the tutorial and save your file as button, use the drop down menu to select HTML and Images as the Export Format, and make sure that Export HTML File and Export Slices options are selected for the two lower drop down menus. Click on Export to generate your files now!

Fireworks Export Settings

You may optionally wish to save your Fireworks document as a PNG to be able to update your document later. To do this you can go through File>Save. You can check your button now by closing Fireworks and going to the buttons folder your created earlier. You should check the HTML file to view the button!

 

It is possible to create more creative buttons by adding extra objects and effects on each of the first frame and the second frame. Experiment with these to make your own super cool buttons!

This concludes our tutorial, I hope that you learnt something new from it. Feel free to post at the Oman3D Forum if you have any questions or comments.

- End of Tutorial