Part One: Simple Rollover
Set page dimensions (File>New Document) Page 1
Open Frames Window (Window>Frame)
With Frame 1selected, draw button on workspace (Can be any shape...need not be like tutorial)
Modify Button using Effects (Window>Effects) and color (Fill Well and Stoke Fill Well)
Double Click on Type Tool and type in 1 (with other designs, type in longest button name (Text Tool A in Toolbox)
Position text on Button
Modify Text using Fill and Effects (Window>Effects, Fill, etc.)
Marquee select all (Using Pointer Tool)
Duplicate three more buttons (Select both the button and text, Alt+hold mouse and drag to copy)
Double Click in text block to type in correct Button name for 2, 3, and 4 Page 2
Align text for each Button (Modify>Align)
Align Buttons to Left or Right and Distribute Heights (Modify>Align)
Add second Frame in Frames Window
Ctrl+A to select all>Ctrl+C to copy
With Frame 2 selected, paste (Ctrl+V) Buttons onto Frame 2
With Frame 2 still selected, make changes to buttons and text on Frame 2 (change Fill, Effects, whatever)
Open Objects Window (Window>Object)
With Slice Tool, cover each Button equally with a slice (just eyeball it...slice tool is intuitive) Page 3
Select slice on Button 1
In Objects Box, uncheck Auto-name slices and rename the slice buttonone (lower case, no spaces needed)
Fill in Alt Field box with Alt tag, Button 1
Repeat Object process for Button Slices 2, 3, and 4
Return to workspace and be certain you are on Frame 1
Open Behaviors Window (Window>Behavior)
Select all Buttons (Ctrl+A)
Click on + in Behaviors and click on simple rollover from the fly out menu list
Turn off slices and Preview


back to top

Part Two: Disjointed Rollover

Please be advised that the lines on this tutorial design are optional. They make the process
   a little more complex and if they hang you up, leave them out until
   you get more familiar with how this all works. Page 3
Return to Frame 1 and in workspace, draw a line and duplicate 3 times
Draw large Circle (the object where the swap will take place)
Align and arrange lines to Circle
In the Frames Window, click on arrow to open fly out menu>select add frames>enter 2 Page 4
You should now have 4 Frames showing in the Frames Window
Return to workspace and Double click in Type Tool to open Text window
Type number 1
Click back into workspace and position number onto large circle
Manually Align the number where you want it on the large circle
Because of the lines, you must copy everything onto each Frame
   If there were no lines, the buttons would only have to be on Frames l and 2
As you know, you already have the four small Buttons on Frames 1 and 2
Using the Marquee, select the lines and circle from Frame 1 and Ctrl+c
Select Frame 2 and Ctrl+V to paste. This is where it may be tricky because some of the lines
   may not be in front or behind the smaller buttons as they should. Sorry, but you may have to
   play a little to get them in order.
Once Frame two is under control, return to Frame 1 and Ctrl+A to select everything
Go to Frame 3 and Ctrl+V
Go to Frame 4 and Ctrl+V
Go to Frame 2 and correct the typed number 1 to 2
Go to Frame 3 and correct the typed number 1 to 3
Go to Frame 4 and correct the typed number 1 to 4
Return to Frame 1 and with it selected go to workspace and click on Slice Tool
With Slice Tool, add one large slice to cover the rest of the design (all together, you will have five slices.
    One on each button and one one the large swap circle.Page 5
In Objects Window uncheck the auto-name and rename your slice something like swapshapearea so you can easily identify it. Use lower case with no     spaces. Add Alt tag in the Alt field box
Return to workspace and open Behaviors Window (Window>Behaviors or F8)
With Slices On and showing, Click on Button one>click on the + in Behaviors>select Swap Image so the Swap Image Dialog Box opens
In the Swap Image Dialog box Click on the Swapshapearea in the Puzzle window (notice that when you
   have selected the right area, the name will be swapshapearea in the list on in the small window to the right.
Go to the Frame No.: field box and click on the arrow to open fly out menu and select 1>OK because the
   first number stays the same.
Select Button 2 and click on the + sign in Behaviors>swap image>clink in swapshapearea in Puzzle
   >Frame No.: 2>OK
Select Button 3 and repeat except enter 3 from the Frame No.:
Select Button 4 and repeat except enter 4
Preview (Don't forget to Turn Off Slices)

Part Three: Exporting a Disjointed Rollover to From FWs 3 to DW3
For this tutorial, the file name that is being exported is rollover but it can be named anything.Page 6
Before beginning export, in the DW site window make two folders. The first is rollover and inside of it, make another folder named images.
Our goal is to export the rollover.htm file into the rollover folder and export the numerous slice files into the images folder.
Return to Fireworks and your custom sliced page
Modify>Trim canvas to size your page as economically as possible. The Trim Canvas feature cuts all superfluous outer page real estate that
    contains no artwork.
Now you are ready to export. File>Export (Ctrl+Shift+R)
Name your file in Base Name field box (our file name is rollover), select Use Slice Objects in Slicing field box, select whatever version of
   Dreamweaver you are using. (Tutorial uses  Version 3)
In the Location Field Box, click on the Folder icon to the right and click on Custom in the flyout menu. It opens another Dialog box. The important
    thing here is to be sure the folder you want the rollover.htm to go into is selected and showing in the Save In field box and that your file has
    the.htm extension on it. Browse to get to the folder we created earlier that it goes into. Save.
This should throw you back to the original settings/Dialog Box.
Now, it is important that the images folder we created earlier is in the Save in Field box.
If the images folder is not in the Save in field box, browse to it and select it.
Notice that the extension on your file is now rollover.gif. In the Location field box open fly out menu and select One Level Up>Save.
If all goes well, the rollover.htm file should be in the rollover folder and all of the slice images should be in the images folder in Dreamweaver site
    window where your web site folders are located and your site is defined. See the bottom of Page 6 for file illustration.

back to top