Introduction to Fireworks - Creating Rollover Buttons ... · Introduction to Fireworks - Creating Rollover Buttons During this tutorial we are going to look at creating the most commonly

Introduction to Fireworks - Creating Rollover Buttons

During this tutorial we are going to look at creating the most commonly asked for web page element, a Rollover Button. From a technique that used to take a day to create with the programming involved to a 10 minute process with Fireworks and no programming in sight...First download the working files that accompany this tutorial, then go to File > Open...

Locate the file you have just downloaded, remember to unzip it, click on the file and click Open.

To create a Rollover button we need to have 2 Frames as shown here to represent the different States of a button. In this case the Up or un-activated state is displayed as Frame 1 and the Down or activated state is shown in Frame 2. Similarly to the animated gif technique, we have created a button and duplicated the frame, changing Frame 2 to indicate the button action in a graphical way.

Returning to the 1st Frame move over to the Tool bar and down to the Web tools. We have already looked at the Hotspot tool in the image map tutorial, this time we are going to look at the Slice tool which works almost identically to the Hotspot tool but allows us to add more interactive content to our projects. The Slice tools allows us to add complex JavaScript programming to our work without doing anything, well not very much. Click on the Slice tool to continue.

Web tools

Slice tool

With the Slice tool selected click and drag to draw a rectangle which covers the button completely as shown. It should create a green / turquoise block over your button.This is a development or Web Layer element, and not visible to our eventual users but it allows us to add interactive programming over the location of the button. You will also notice in doing this that we activate the Web Layer in the Layers palette. This is just a guide again to tell us we can now add programming if we wish.

We can now add some interactive JavaScript programming. This is much easier than it sounds. We need to open a new palette, called the Click on on Window > Behaviours.

Don't worry if this floats without a home you don't use it enough to warrant it staying on screen permanently. Use it and then close it down, there is enough on screen at any one time anyway.

Click on the black arrow or Pointer tool from the Selection tools and click on the greeny / turquoise slice once then move over to the Behaviours palette. Click and hold the + icon to bring up the Behaviours options select Simple Rollover and let go.

To indicate your success at this stage the Behaviours palette will list the option you just selected. It should say something like; Events, OnMouseOver, Actions, Simple Rollover . By doing this you have programmed a previously complex task which used to take a day to do about 5 years ago.

Now close down the Behaviours palette by clicking on the red cross to the top right of the palette. We have finished programming now.

To allow us to see the actions of our button as our audience will see it, click once on the Hide Slices tool. This will not remove the programming or the slice, but hide them from view as they can obscure the image a little and prevent full testing before exporting to the Internet. Should you want to reposition the slice or add more then the Show Slices tool is next to it.

Hide Slice tool

Show Slice tool

Move into the Preview Window option as discussed in the Optimise tutorial. As well as optimising, the Preview Option offers a test bed for your programming. Rolling over the button area should activate the programming if it has been successful as shown here.

If successful, we need to save a development version of the button so we can change / update it without having to recreate it. Go to File > Save to write over the original file or File > Save As.., to create a new file. This creates the PNG format. Not web ready, but all the intricacies are saved to be re-worked later if need be. Our advice is to always save development or build files as they are also known. It will save you time in the future if updates or spelling mistakes need rectifying.

Now we are ready to Export our button to be used in a web page. You will see in a moment how the Behaviour palette saved us a lot of time. Go to File > Export...

This saving process is a little fiddily so be careful here. The Behaviours palette and Slices allowed us to add programming to our button. Because of this, Fireworks will create the web page for us place the button onto the page and add the programming around it ready for the addition of links etc in Dreamweaver. This means that rather than just choosing the location of the button we have to save a web page as well. Firstly Fireworks saves the web page. If you are creating a website from scratch we suggest going through the first tutorial in the Dreamweaver collection otherwise locate the HTML folder and give your web page a useful name.

Next we need to save the images. Click the check box Put images in subfolder and then click on the Browse... button.

Navigate to the images folder in the Select Folder box and when you have found it click the Select "images" button. You will be returned to the window behind, click Save and Fireworks will create one web page complete with programming and 2 button images indicating the up and down motion of the button in the images folder. That is the whole sequence and may take a few goes to really get it right.

Open your web browser and go to File > Open . Locate the HTML web page saved along with the images and click OK to open it. This is the completed Rollover button. Just to scare yourself go to View > Source (if you are using Internet Explorer), this is the programming you have done as well. This web page can now be opened in Dreamweaver or any other web page creation package for further customisation or to add links, now select another option.

Close this window by clicking on the cross to go back to Fireworks.