At this point you've created the default state of the button, the Up state. You'll develop the Over state of the button in the following task. The Over state appears when the mouse is hovering over the button.
The Over state will have the same look and feel as the Up statethe differences will lie in the size of the circles and the additional bitmap image you'll import to fill the inner circle. Your goal is to maintain consistency for the overall navigation system, while introducing a different look to make the Over state stand out.
1.
| Open red_onion.png in Lesson 2's Start folder.
|
You'll use this stock photograph to create a mask. As you learned in Lesson 1, the outline of a mask is the frame through which you see the bitmap image. When the mouse is hovering over the button on the Jade Valley Web site (the Over state), you want the photo of the red onion to be revealed. This makes the navigation system of the site more interesting, and gives visitors a sense of the types of products Jade Valley offers.
2.
| Select the Ellipse tool in the Tools panel. Use the Property inspector to set the Stroke and the Fill to none. Holding down the Shift key, draw a small circle on top of the onion photograph that fits within the confines of the photo.
|
After you've converted the circle to a mask, neither the stroke nor the fill color of the circle will be visible. Setting both stroke and fill to none makes it easier to see what you're doing.
The circle's path will eventually cover exactly the area you want to reveal; thus it is only the outline of the circle that matters. When the effect is finished, the onion photo in a circle will replace the Up state's plain smaller circle when the mouse rolls over the button.
3.
| With the circle still selected, use the Property inspector to change the W, H, X, and Y coordinates to 36, 36, 1, and 1, respectively.
|
In the previous task, you created the nutrition button's Up state by drawing two circles and aligning them using the Align panel. The masked onion will need to fit into the inner circle, so you'll need to resize the masking circle.
4.
| Switch to the Pointer tool. Holding down the Shift key, select both the circle and the red onion photo. Choose Modify > Mask > Group as Mask. In the Layers panel, click the mask (right-hand) thumbnail in the mask layer. In the Property inspector, set the Mask type to Path Outline (not Grayscale).
|
The circle now reveals the red onion photo wherever it overlaps the photo.
The Path Outline setting instructs Fireworks to disregard the stroke and fill of the circle and refer only to the outline of the shape itself. In effect, the masking object crops the masked object. Use the alternative setting, Grayscale, when you want to blend two objects together in a mask, rather than using one to crop the other.
5.
| From the main menu, choose Select > Deselect. In the Property inspector, press the Fit Canvas button. Then save red_onion.png and close the file.
|
This makes the circled onion mask fit perfectly on the canvas without any extra space.
6.
| Return to button.png and double-click the Up state of the button you created earlier to open the Button Symbol editor. Click the Over tab to access the button Over state's development environment.
|
In the Button Symbol editor, the Document window shows the button canvas, which is blank as soon as you choose the Over tab. The crosshair symbol you see denotes the center of the button.
7.
| Click the Copy Up Graphic button.
|
Because most button states are variations of button Up, the Copy Up Graphic button is a convenient way to automatically copy the button Up state and place it into the Over state's canvas in the same position.
Next, you need to modify the Over state to distinguish it from the Up state.
8.
| Select the outer circle and use the Property inspector to change the W, H, X, and Y coordinates to 42, 42, 21, and 21, respectively. Then select the inner circle and use the Property inspector to change the W, H, X, and Y coordinates to 36, 36, 18, and 18, respectively.
|
The Over state needs to be slightly different from the Up state, so you'll enlarge it in this step to make room for the onion mask you created earlier.
9.
| Choose File > Import to import red_onion.png. After the file is on the canvas (denoted by the L-shaped cursor), place the red onion mask inside the inner circle.
|
Note
You can use the arrow keys on your keyboard or the X and Y settings of the Property inspector to help you precisely position the mask.
Now that the red onion mask is placed inside the inner circle, the red onion is revealed in the inner circle when the mouse hovers over the button.
10.
| Select the Type tool in the Tools panel and change the color of the button label, NUTRITION, to blue-green (#009966). Click Done to close the Button Symbol editor.
|
Changing the button's color will further distinguish the Over state from the Up state.
You have successfully created the button's Up and Over states.
11.
| In button.png, click the Preview tab at the top of the Document window, and roll the cursor over the button to preview both the Up and Over states. Then save button.png and close the file.
|
The Preview tab provides a quick and easy way to preview your work throughout the development process.
Tip
Another, more reliable, way to test Fireworks documents is to press F12. Fireworks generates a temporary Web page complete with all the necessary graphics and JavaScript, enabling you test the page in an actual browser.
![[View full size image]](/image/library/english/13887_046fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_046fig02_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_047fig01_alt.jpg){kind=link}
![[View full size image]](/image/library/english/13887_048fig01_alt.jpg){kind=link}