Banner for Disjointed Rollovers Tutorial
button 1 Disjointed Rollover swap image area
button 2
button3
button 4

Intro | Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources

 
Part 1  - Simple Rollover
Page 2

Steps Covered on this Page:
Buttons 2,3,4 | Marquee Selecting | Alignment | Add Frame and Copy Buttons onto Frame 2 | Adding New Effects on Objects on Frame 2 | Example of How Fireworks Automatically Adds Slices | Example of Custom Slicing

Image of Text Editor

10> Double Click number 1 in the second circle to open Text Editor Box and type 2 in place of the one>OK. Repeat for next circle and replace 1 with 3>OK, then do the fourth and replace 1 with 4>OK.





 Image of buttons 1 through 4  showing grouping

11> Marquee select (sweep over circle with Pointer Tool so it will select both the circle and the letter) the first circle and Ctrl+G to group them. Now the button and the corresponding number will move as one object until they are ungrouped (Ctrl+U). Repeat for button two, three, and four.

 

  Image of Align fly out menu list

12>The buttons can now be aligned easily using the Fireworks alignment options. Position the top button where you want it and the bottom. This will align the buttons inbetween as the top and bottom being fixed guides. Select all of the Buttons and Ctrl+Alt+9 to evenly space the buttons from top to bottom. Then Ctrl+Alt+1 to align all Buttons to the left. As you can see if you go to Modify>Align>click on arrow for fly out menu, you have other options of alignment. Play, play, play to get familiar with what they do.

 

Image of Alignment fly out menu list

Your Buttons should be looking like these.

 Image of how buttons look when aligned properly  
to top of page

Image of Frames fly out menu list

 


Image of Add Frames Settings Box that open when you click on the Add Frames from the fly out menu list

13> Now for the fun stuff. All this prep and we are ready to get into the meat of our Simple Rollovers. Go to Windows>Frames to open Frames Dialog Box. Click on Fly Out arrow to Click on Add Frames.

 

 

In the Add Frames Dialog Box, leave the defaults set at 1 and After current frame as illustrated to the left. Click OK and the new frame will be there as shown below.

Image of how Frames should look after adding frame 2

Image of buttons and frames to show how to copy all buttons onto Frame 2

14> Marquee Select all Buttons on Frame 1 and hit Ctrl+C to copy. Click on frame 2 and Ctrl+V to paste and the Buttons will now be on frame 2 as well as frame 1.

 

 

 

 

to top of page

Image of ungrouping  Buttons so the numbers can be changed to yellow independent of the Blue Button

15> Click on Frame 2. Marquee Select buttons on Frame 2 and Ctrl+U to Ungroup them so you can select the numbers without selecting the circles to change the color of the numbers to yellow without changing the Blue Button. Once the Buttons are ungrouped, Ctrl+Shift to select each Number on each Button on Frame 2 as illustrated to the left and open the Fill well to select bright Yellow. Click back on Workspace to apply.

 How the objects are sliced if we let Fireworks do it automatically  
Fireworks Auto Slicing

16> Get ready for Custom Slicing. Left is an example of how Fireworks automatically slices your design . Compare this with the illustration of Custom Slicing below. Custom Slicing gives you smaller files and more control.

Image of Custom Slicing to compare with the Fireworks Slicing in the image above it
Custom Slicing

17> Custom Slicing simplifies everything.

 

 

 

Steps Covered on this Page:
Buttons 2,3,4 | Marquee Selecting | Alignment | Add Frame and Copy Buttons onto Frame 2 | Adding New Effects on Objects on Frame 2 | Example of How Fireworks Automatically Slices | Example of Custom SlicingBack to Top   


Intro | Tips | 1 | 2 | 3 | 4 | 5 | 6 | Sharpie Sheet | Resources
To Sharpie SheetBack to Page 1To Page 3To Sharpie SheetTo Sharpie Sheet
Revised 05.08.01
Contact Ginny LeBleu

Copyright 2001 © Ginny LeBleu
URL: http://www.digitalartbeat.com/websites/report/index.htm