Introduction to Fireworks - Disjointed Rollovers or Swap Images In

Introduction to Fireworks - Disjointed Rollovers or Swap Images
In this tutorial we are going to look at one of the more complicated
interaction tools/functions that can be applied in Fireworks. We do
not recommend this tutorial if you have not looked at Image maps
and Buttons previously. First of all download the working files that
accompany this tutorial, unzip them and then go to File > Open...
Locate the file disjointed.png from where ever you
unzipped it to and click Ok
Your file should look like this. We have chosen something simply to show you the
technique. The project here is to create an interactive mini game for children.
They rollover the images and the text or word appears in the empty box above
them. When the child rolls off the image the box becomes empty once again.
You will notice we have started you off by creating all the objects apart from the text
and we have 1 Frame in the Frame palette to start.
First of all we need to create the text on separate Frames. Go to the Frame palette,
click on the Frame menu shown and select 'Duplicate Frame' from options listed.
We will create just one of the button functions in this tutorial,
you can have a go at adding the rest later, so create 1 duplicated
frame in the Duplicate Frame box and click Ok
We now have 2 identical frames, click on them both to make
sure they are identical then move on.
Text tool
In Frame 2 click on the text tool and add some text over the empty
box. This will be used to create the illusion of text appearing when
we start adding behaviours. If you are completing the rest of the
image interactions now, each image needs a separate frame and
different text on each.
As you can see Frame 1 has no text in the empty box, this will act as the
Up state of the interaction or the Idle state. Frame 2 has the text from
button 1 - the rabbits.
Click on the Slice tool from the Web tools options and click and drag a box
over the empty box and over the rabbits picture. The picture will act as the
button - the empty slice will be the clever bit.
Slice tool
Once the slices are created we need the Behaviours palette
again - go to Window and select Behaviours
The Behaviours palette will open automatically. Click on the Pointer
tool from the Select tools at the top left of page. Click the slice floating
over the rabbits picture onc, and move up to the Behaviours
palette. Click on the + icon and choose Swap Image from the drop
down menu. Then move on.
This will open the Swap Image box, you should notice that the
selected slice floating over the rabbits picture is highlighted in the
window as a blue square.
We need to do two things here, firstly select the long block, representing the
empty bar on our image, it should go blue, then move down to the Frame no.:
drop down box and select Frame 2 . If you remember, this is where our text
appears in the empty box. Now click OK.
You should notice a line of text has appeared in the Behaviours palette which
says something like; Events, OnMouseOver, Actions, Swap Image. As well
as this, your slice sitting over the rabbits image has a curved line leaving the
centre and linking to the empty bar slice. Move on.
Hide Slices tool
We now need to test the interaction. To get a better look click on the Hide
Slices tool. The behaviours are not removed but the slices that the end user
doesn't see are removed from view. The icon next to it - Show Slices, will bring
them back in to view.
Preview option
To test, click on the Preview option at the top. Used for
optimising this is also used for testing behaviours in real time.
Rollover the rabbits image and the text should appear in the
empty box. Move off the rabbits picture and the box should
become empty once again.
Now go to File > Save to save the development
or build file as a PNG.
Then File > Export... This will open the Export box. Remember
to save the HTML first and then the images in a subfolder;
images. If you need more help refer to the buttons tutorial for a
description of this process.
this is a picture of some rabbits
Open your browser and locate the Fireworks created HTML page by going to
File > Open , click on the file and click OK. You should then see your
interactive game in the browser window ready to be opened in Dreamweaver
or uploaded to your web server. This is the end of this tutorial, please select another.