Designing Swap Images in Fireworks

Learn just how easy it is to create swap images in Fireworks. Swap images are fun, easy to design, and go a long way in making a site look attractive. Visitors also find this interactive and interesting. Fireworks makes it very easy to design web sites using swap images. Learn just how easy it right now! Examples of sites with swap images are www.illycollectioncups.com, Business Template 3, Business Template 1. Rollover the links to view the swaps. In this tutorial you will get step by step instructions on how to design web sites using swap images. Screen shots have been added for each of the steps so you'll find it really easy to follow. The only requirement is that you must have Fireworks - the best web design tool! Let's get started right away!

This tutorial is going to teach you how create the swap images found on the top right of the page. Notice on rolling over each of the buttons you have a rollover and also an image swap. This is exactly what you will learn.

Step 1: Design all the swaps and also your rollover buttons. Position the graphics exactly the way you want it. Now here's what's important - Put all the separate swap images in different layers. You could probably put the common elements in the first layer, the rollover images in the second layer and the swap images in separate layers after that. This is very important as we will be using frames.

These are the layers we have used:
Structure - The common elements of the swaps are put in this layer.
Rollovers - The down state of the rollovers
Swap 1 - Swap Image 1
Swap 2 - Swap Image 2
Swap 3 - Swap Image 3

Step 2: Once you have put all your swaps in separate layers you need to put them into frames. Each of your swaps should come in a different frame. So here's what you need to do. Make the same number of frames as you have swap images. In this case there will be 3 frames because there are 3 swaps. Now in frame 1 you need to make sure only the layers 'structure and swap1' are open. Similarly in Frame 2 you need to open only layers 'structure and swap2'. Basically each Frame will have a unique swap image and all the common elements. The only thing you need to remember is that if you also want simple rollovers, you need to make sure that layer is open in Frame 2. Fireworks take the images in Frame 2 for a simple rollover.

Take a look at the screen shots below to see what your frames should look like. In the second screen shot notice that the layer 'rollovers' is also open. This shows the down state of the rollovers. It must be placed in Frame 2.

Image 1(a)	Image 1(b)

Step 3: The next step is to slice up the images. Slice the images and name it appropriately for easy reference. To the right you can see the way I have sliced up the images. Make sure the swap has only one slice.

Step 4: Now comes the fun part. Watch just how easy it is to create rollovers and swap images in Fireworks.
To create swap images or rollovers you need to use a feature called 'Behaviors' found in Fireworks.

Here are the steps:

Click on the slice for the first button Then go to Insert> Behavior. Next click on the '+' button and click on Simple Rollover (Image 2(a)) Click on OK (Note: make sure your rollover buttons are in Frame 2) Repeat the process for all the buttons

Now for the swap images

1. Click on the slice for the first button Then go to Insert> Behavior.
2. Next click on the '+' button and click on Swap Image (Image 2(b))
   
   
   
3. You will see a window like the one below (Image 2(c)). You need to choose the swap image and the frame number. In this case the slice name is called swap so I choose swap and as it is the first button I choose Frame 1 (The first swap is in Frame 1)
   

   Image 3(c)

4. Repeat the process for all the buttons

By the end of it your behavior palette for each of the buttons should look like this:

Image 4(a)

Each sliced button should have 2 behaviors: Simple Rollover Swap Image Make sure your behavior palette has both the behaviors

Step 5: 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 there are two things you need to remember to do

1. Under slicing you need to choose 'Use slice objects'
2. Under HTML style choose Dreamweaver 2.0 (or 3.0)

Take a look at the screen shot below for reference.

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.

So concentrate on designing great swap images (you could also do multiple swaps and try out the different rollovers) and leave the rest to Fireworks. Another idea for swap images can be seen in Business Template 1. Another website we have designed with swap images is www.illycollectioncups.com. We can design swap images with rollover images for your website for only $75 (for up to 8 pictures)! Contact us today for details!