Advanced Rollovers
in Fireworks 3.0
Home > Build
> Software > Fireworks
by
Don Herion
(1) (2)
In
this tutorial, my project will be to create a map with mouse over buttons listing
available rental apartments. There will be a main map of a metropolitan area with
a number of rollover buttons. When you do a mouse over detailed information will
appear about the available property on the right hand column.
Step
1
I started with a map I digitized with my scanner and saved as 'city_map.jpg.'
I then added space to the right of the image using the - Modify - Canvas Size...
- in Fireworks.
 |
| city_map.jpg |
Step 2
I then created several pseudo properties - apartments with some fake info. I gathered
photos from an apartments for rent Web site. I saved these files as .jpg files.
I also created two circle buttons, one blue and one red. These were saved as transparent
.gifs.
Step
3
With my images created I could start creating the advanced rollover
effects. City_map.jpg would be the base image for this project. Double click this
layer and make sure - Share Across Frames - is checked. You will always want to
see this map.
Step 4
My next step was to create
a 'button symbol.' A symbol is something that can be used again and again. When
visitors place their mouse over these buttons the apartment info would appear
in the white canvas on the right.
Go - Insert - New Button.
Give it a name - i.e. Apartment Button. Right click anywhere in the window and
select - Import. Select the red button .gif image and center it. Use you arrow
keys to position it. Now click the 'Over Tab' and import the blue button. Make
sure the 'onion skinning' button is checked. This allows you to see every image
state. Now use your arrow keys to center the blue button over the red. Finally
click the 'Down Tab' and click 'Copy Over Graphic.' This copies the blue button
again. Now close the window. You should see your button in your 'Library' palette.
 |
| Button Symbol |
