Learn
just how easy it is to create swap images in
Fireworks MX® .
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
MX® 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 MX® -
the best web design tool! Let's get started right
away!
This tutorial is going to teach
you how create the swap images similar to those found
at the top of this 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.
You
can use either Dreamweaver or Fireworks MX® to
create an image swap or mouseover effect for
your images or graphics. Here are the steps
for Fireworks MX®:
In
Fireworks MX®
Step
1
Creating the Object to Use an Image Swap
Open
a new window 400px X 200px.
We'll use a button as an example for our image swap.
Create a rectangle to use as our button example.
Step
2 Selecting
the Frames Tab
Select the
FRAMES tab on the on screen dialog box.Back
to top
Step
3 How to Add
a New Frame
Select
the black arrow pointing to the right at the top
of the dialog box (the red circle below). Select
ADD FRAMES. Back
to top
Step
4
Adding a New Frame
Accept
the defaults in the dialog box that appears. Notice
that in the FRAMES toolbox that frame 2 has been
added. Back
to top
Step
5
Duplicating the Image on Frame2
Select Frame 1 in the toolbox.
Select the rectangle image
on the stage and copy it.
Then select Frame 2 in
the toolbox and paste the rectangle image on
the stage. Back
to top
Step
6
Create the Rollover Frame Image Change
Stay in frame
2 and make changes to the image. For our example
we'll change the color. Back
to top
Step
7
Slicing the Image for Export
Select frame 1.
Select the layers
tab.
Select the "web
layer".
Use the slicing tool
to slice the object as shown below. Back
to top
Slicing
tool
Step
8
Creating the JAVAScript Rollover Effect
Select the slice over the
image to make it active.
Select the optins menu
in the white circle in the center of the object
slice.
Select the first option
"Add Simple Rollover Behavior". Back
to top
