Banner for Disjointed Rollovers Tutorial


Button OnePart of Disjointed Rollover that contains the Swap Image area
Button Two
Button Three
Button Four

 


Part 1 - Simple Rollovers
Page 1

Learning how to do a Simple Rollover is a prerequisite to mastering the Disjointed Rollover. Using numbered objects makes it easier to follow the many steps that are taken in the rollover process.The tutorial design has small buttons numbered 1 through 4 and a large Circle that functions as the swap image area numbered to correspond with the Button that sets off the rollover action. Roll over the buttons to preview. Button 1 changes color but does not swap an image.

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

Steps Covered on this Page:
Page setup | Draw and Fill Object with Color | Add Effects |Typing in Text | Alignment

Fill wells open when you click on arrow next to bucket or brush

1> In Fireworks go to File>new and fill in the settings for your new page. I like to start with the size I am designing my entire page in so I get a feel for proportion. When it is finished, it can be trimmed for exporting by going to Modify>Trim Canvas. This began as a 760 x 450 pixels with a white canvas at 72 dpi.


2> Click on Shape Tool (See Tips page for Tool Tips to see about Shape Tool options) and draw a circle. With the circle is selected (See Tips for illustration of a blue line around object when selected and no line or red when you roll over it if it is not selected) go to the fill well with the bucket icon and select a color (we used #3300FF). The well with the bucket icon changes the inside color of an object. The one with the brush icon above it changes the stoke or line color. Go to Window>Stroke to bring up a Stroke settings box if you want to change the thickness of the line (the line on our circles should be set at 1although this one is thicker so it shows up better in the tutorial. In the Stoke Dialog Box, there is a slider that goes up or down to change the stroke size or you can type the stoke size into the Field Box.

Fly out menu arrow that will open list



3> Open Effects (Window>Effects). Select Button object and click on the down arrow in Effects to open options list.
Selections from the Effects fly out menu lists with  this tutorial choice distinguished in blue

4> From Options List scroll to Bevel and Emboss>select Inner Bevel and the settings box opens. After the tutorial, come back to Effects because it is a great area to play in. You will find many Effects like Drop Shadows, Blurs, Adjust Colors. Definitely explore these Dialog Boxes that offer different settings. Simply select your object and apply different Effects to your hearts desire.

to top of page

Effects settings for button

5> Use the settings to the left in image. (The settings are as follows going left to right, top to bottom) 4, 65%, color well is black, 4, Offset is at 0). Later play using your own choices.

The Text cursor appears in your workspace  and ndicating that the Text Tool is active.

 

6> Click on the Text/Type Tool and click anywhere in your workspace. A Text Editor Box (shown below) will open and you will see the type cursor (in left image) appear on the workspace.

Text Editor Box with settings

7> Type the number 1. Settings are as seen in left image: Thehits (but any other similar font will do), font size 12, Bold, (AV) 0%, 100%, (A) 111%. Leave other options at the default settings. Click Apply/OK. Notice that if your Text Editor Box is not covering your workspace area, you can observe the changes as you do them. Notice, too, that the object must be selected inside the Text Editor Box also.
From main menu bar, go to Modify>Align fly our menu choices     

8> Alignment is a major tool used in designing web pages. Fireworks makes it easy although it may take practice to remember which alignment choice does what. I recommend memorizing learning the shortcut keys for the alignment options you use most. If you forget, go to Modify>Align>click on fly out arrow to access the menu for this list.

Now, the Circle Button and the number should both be selected (image 1). Click Ctrl+Alt+2 to center vertically (image 2). Now Click Ctrl+Alt+5 to center them horizontally (image 3) Now, the 1 is perfectly centered inside the circular button. This, of course, works with any two objects selected together as illustrated in the example below.

    Square and circle first drawn and not aligned Square and circle aligned horizontally   Square and circle aligned horizontally and vertically

Example of using two shapes and the same alignments as above.
Image one is orignial drawing. Select both original objects (image one...Note: objects are not selected only so you can see the movement better. Otherwise they should look like the circle with the one in it above)and Ctrl+Alt+2 and the circle centers vertically (image two). With both objects still selected click Ctrl+Alt+5 and the fi
nal image appears with the circle centered horizontally.
to top of page

Four buttons demonstrating the duplicating process  

9> Copy three more buttons onto the workspace by holding down the ALT+press and hold down Mouse. It is like you are pulling the new copy out of the original. Repeat for each button.

The Alt+press and hold down Mouse as you drag a duplicate object from the original one may take a bit of practice but is worth the effort in the time it will save in future projects. If you despise it, take heart, as there are more ways of duplicating object/objects. For example, select the object, Ctrl+C. Then click off the object anywhere and Ctrl+V to paste it. For certain tasks like copying objects to Frames or Layers, this method is preferred. If the object is copied onto the same frame or layer, the new object is pasted directly on top of the object you copied. It is selected so it can be moved off the original and onto a clear part of your workspace.

Of course, everything is always available through the main menu bar. For example, select your object and go to the menu bar>Edit>Copy. Click on your workspace and go back to the menu bar>Edit>Paste. If you can't see the duplicate, it was probably pasted on top of the original so you must move it off and to a clean workspace area. There is no right way for any of this. As long as you can make your deadline, any way is the right way!

 

Four buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating processFour buttons demonstrating the duplicating process
In Fireworks, duplication using Alt+press mouse and hold and drag object down is a fast technique for copying as many times as you want. You can select one object or many objects. Practice this technique and you'll start to love it.
Steps Covered on this Page:
Page setup | Draw and Fill Object with Color | Add Effects |Typing in Text | Alignment | Back to Top
 

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

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