Designing Swap Images in Fireworks

Step 1

Create the following layers.
structure - The common elements for the page are put in this layer.
links - This layer consists of the links. In this tutorial the rollover buttons i.e. image 1, image 2 and image 3 are placed in this layer. (position it exactly the way you want it.)
rollovers - This is a duplicate copy of the links layer with the button and text color changed for the rollover effect.
swap - The first swap image is placed in this layer. (position it in the exact place)
Step 2
Goto the Frames window, you can see a single frame named 'Frame 1'. Select this and drag the mouse to 'Duplicate Frame ' at the bottom of the panel. A duplicated 'Frame 2' is created.

Step 3

Select 'Frame 2', you'll notice that it has the similar contents of frame1. Make sure you have selected the swap layer and you are in frame 2, now you have to delete only the image and paste in the second image. Position it in the same place as the previous image, do not drag and position the image as it might not be the exact position, instead, give the same x and y position (in the properties window) of the first image.

Step 4

Repeat Step 3. (Duplicate the frames and insert the images) Finally there has to be 4 frames. In this tutorial 4 swap images were used, a default image will be displayed when the browser opens and when you rollover the three links, three different swap images will be displayed.

Step 5

Now for the rollover effect. Select 'Frame 1', goto layers panel, close the eye for 'rollover' layer and the links layer should have the eye open. Next select 'Frame 2', goto layers panel, close the eye for 'links' layer and the rollover layer should have the eye open.

Step 6

The next step is to slice up the images as seen in the image below. Slice the images and name it appropriately for easy reference.

Step 7

Right click on the first rollover slice (Image 1), from the popup menu select 'Add Simple Rollover Behavior' as in the image below. Repeat this step for the next two rollovers buttons. Now we've finished with the rollovers.

Step 8

The next step is to link the swap images. Go back to the first rollover slice, click on it, you will see a small circle in the center of the slice (see in the image below), move the mouse pointer over it and you will notice a hand icon, click on it, the icon changes to a folded fist and a blue line appears (as seen in the image below, circled in red), drag this line to the swap image slice. What you're doing now is, linking the rollover to the swap image. The Swap Image window opens as seen in the image below, select the frame which has the image you want to link to and click on OK. Repeat these steps for the next two rollovers. In this tutorial, the rollover 'Image 1' is linked to Frame 2, 'Image 2' -> Frame 3 and 'Image 3' -> Frame 4.

Step 9
Now, in the layers panel remove the eye in the web layer and preview the file.

Step 10

The last step is to export the entire file. Fireworks will automatically convert the swaps to javascript and html. You don't have do any programming, its automatically done for you when you export the file. This is why you'll love Fireworks. You just need to focus on design and Fireworks takes care of all the boring programming for you. Sorry I got carried away with the wonders of Fireworks. Ok, when you export the file see that you give settings as in the screen shot below.

Fireworks will export a .htm file to the directory you have specified (along with the images). Browse the .htm file from IE or Netscape and you'll see your swap images working beautifully.

Posted in Fireworks