|
Creating 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! 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.
. 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 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
.
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
-
Click on the slice for the first button
Then go to Insert> Behavior.
-
Next click on the '+' button and click
on Swap Image (Image 2(b))
-
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) |
-
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
-
Under slicing you need to choose 'Use slice
objects'
-
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.
|
