Creating Roll-Over Effects an a Pop-Up Menu
using Fireworks MX 2004

Prerequisites:
Basic understanding of HTML, graphics and the Internet.

In this tutorial you will learn how to create a simple navigation bar using Fireworks. You will also learn how to add JavaScript behaviors to create rollover effects and a drop down menu. This tutorial is divided into four lessons:

• Using Fireworks MX Drawing Tools to Create a Button
• Creating button symbol in Fireworks
• Duplicating symbols to create multiple buttons
• Using the Pop-Up Menu Behavior in Fireworks MX

Lesson 1: Using Fireworks Drawing Tools to Create a Button

1. Open Fireworks MX.
   
2. Select File > New from the top menu.
   
3. Set the canvas size to 500 pixels X 100 pixels
   
4. Save this file as Navigation.
   (This file can be saved anywhere on your computer, however it is best to create a directory (New Folder) to store the files you will work with in this tutorial).
   
5. Make sure the toolbar is open. It should be displayed on the left side of the screen. If it is not, select Window > Tools from the top menu.
   
6. Select the rectangle tool from the tool bar.

7. Select any Fill Color and Stroke Color you would like to use for your button from the bottom of the toolbar.

8. Draw a rectangle on the canvas.( Once the rectangle tool is selected, when you move the cursor to the canvas, your cursor will look like a small cross hair. Click and drag your mouse to 'draw' a rectangle.)

9. Switch back to your pointer tool .
   HINT: Unlike some graphic programs, once you draw a shape on the screen you must switch back to the pointer tool in order to modify that shape. If you try to click on the screen without doing this, you will end up drawing multiple rectangles on the screen. The shortcut to switch back to the pointer tool isto click the letter V on your keyboard.

10. Click once on the rectangle you drew to select it.

11. Use the Properties panel to set the width of your button to 84 and the height to 21 pixels.Set the x and y position each to 0. If you do not see the properties panel, go to Windows > Properties and be sure this option is checked.
    *Press Enter after typing the last digit to be sure the information is applied.

You can also adjust the fill color and line color using the Properties panel.

Add the Triangle
The next step will be to draw the triangle for the button

12. Select the Polygon Tool from the Tools panel. This is located the same place on the toolbar as the rectangle tool.
    
    
    
13. In the Properties panel, set the following properties:
    • Shape: Polygon
    • Sides: 3

14. Select a fill color that contrasts with the color of your rectangle.
    
15. Draw the polygon on the stage so it is placed right over the rectangle similar to the image below.

*Once the triangle is drawn you may use the pointer tool to adjust it’s position.

Adding Text
The next step is to add the text for this button.

16. Select the text tool ()from the tool bar.

17. Use the Properties panel to set the text font, size and color. Be sure to select a color that allows the user clearly see the text over the button background.
    
    
    

18. Click once with the text tool on top of the rectangle button you drew earlier and type Home as the button label.

19. Use the pointer tool to reposition the text over the button as desired.

 

Lesson II: Converting a Graphic to a Button Symbol

1. Once your button looks the way you would like, select each piece – the background rectangle, the triangle and text. To do this you can drag your mouse across the screen so it passes through each object, or hold down the Shift key and select each item separately.

2. Select Modify > Symbol > Convert to Symbol (F8) from the top menu to convert the graphic into a symbol.

3. Give the symbol the name btnHome and set the type to Button.
   
   

4. Click OK to save the changes.

5. You will see a green highlight over your button. This is called a slice. A slice in Fireworks is used to cut larger graphics into smaller pieces. Each of these peices (or slices) can be optimized and exported as an individual file. The slice also contains HTML code for the graphic including things like the image name, alternative text tag and other properties.
   
   
   
6. Double click on the green slice area.
   Note: Be careful NOT to click on the circle in the center of the slice. Only double-click on the solid green area of the slice.
   
7. You are now inside of the button editing mode. From here, you can create button states. Button states are used to control what the button will look like when the user interacts with the button - for example, it may change color when the user rolls the mouse over the button. Tabs along the top of the screen represet each button state.

Tab	Description
Up	They way the button will appear when the user first enters the page and when the mouse is not interacting with the button.
Over	The way the button will appear when the user rolls the mouse over the button
Down	The way the button will appear after it is clicked
Over While Down	The way the button will appear when the mouse is held down as it passes over the button.
Active Area	The active area sets the size of the sliced area. This is automatically created to fit the size of your button.
NOTE: The Down and Over While Down states will not be used in this tutorial.

8. We have already created the buttons up state. To alter what the button will look like when the user rolls the mouse over the button, click once on the tab labeled Over.
   
9. Click on the button that reads Copy Up Graphic. This will create a copy of your original grahic.
   NOTE: Be careful not to move this image. Generally a roll-over effect the button will change in appearance but not in size or position.
   
   
   
10. Click anywhere in the empty area of the stage so that nothing is selected.
    
11. Select the triangle graphic by clicking it once.
    
12. Change the fill color of the triangle using either the toolbar or the properties panel.
    
13. Select the text for the button.
    
14. Change the fill color of the text using either the toolbar or the properties panel.
    
15. This is what your button will look like when the user rolls the mouse over the button.
    
16. Click the Done button at the bottom of the button editor to save your changes.
    
    
    
17. This will return you to the navigation page.
    
18. To preview your work, click the Preview tab at the top of navigation file.
    
    
    
19. Roll your mouse over the home button to see your rollover effect.
    NOTE: You may notice a light overlay color on the preview of you button. To remove this, go to the top menu and make sure that View > Slice Overlay is unchecked.
    
20. Return to the document by clicking the Original tab at the top to the left of the preview button.
    
21. You have your first button! The second step is duplicating this button to create the Services and Contact Us buttons.

Lesson III: Duplicating a Symbol

1. All symbols, including buttons, are stored inside of a panel called the Library. To open the library, select Window > Library from the top menu.
   
   
2. Currently you should have one button created called btnHome. To duplicate this button, first click once to select it in the library (it will be highlighted in blue as in the image above once selected).
   
3. Click the options button in the top right of the assets panel.
   
   
4. Select Duplicate from the options menu.
   
5. You will see a duplicate button created named btnHome 1.
   
   
   
6. Double-click on the btnHome 1 symbol to open its properties.
7. Change the name to btnServices.
8. Click the Edit button. This will open the button editor for the new services button. THe only thing to change is the text for this button.
9. Double click on the text that reads Home and change it to Services.
10. Click anywhere on the stage.
11. You should get a pop-up box asking if you want to update the text in the other button states. Click YES. This wil change the text in both the up and over states of the button.
12. Click Done.
13. Drag a copy of the btnServices button from the library onto the stage.
    Note: You may use the arrow keys on the keyboard to move the button slightly.
14. Place the services button directly next to the home button. Your navigation bar should look similar to the image below:
    
    
    
15. Repeat steps 2-14 to create a third button. CHange the name to btnContact and change the text on the button to read Contact Us.
    
16. Your navigation bar should look similar to the image below:
    
    
    
17. Congratulations! You have your navigation bar. Save your file.

Lesson IV: Using the Pop-Up Menu Behavior in Fireworks MX 2004.

In addition to rollover buttons, you also see pop-up menus. These type of menus come in handy when you want the user to quickly choose from a list of options, without ‘cluttering’ the page with too many options. To see an example of a basic drop down menu, roll your mouse over the Services button below:

In this lesson we will create a simple drop down menu on the services button similar to the one above.

1. Open the navigation file if it is not already open.

2. Click once on the mouse over the center of the services button slice ().

3. Select Add Pop-Up Window from the drop down list.

4. Within the Pop-Up Menu properties panel, double-click on the first row under the Text column.

5. Type the text Classroom Training. This will be the text displayed to the user as the first item in the menu.

6. Tab to the Link column of the first row. Type the text http://www.goADSI.com/education/
   This is the web address the user will go to if they click on the Web Development link in the drop down menu.

7. Tab to the Target column of the first row. Select the option _blank.
   The target option allows you to select where the above link will open. If this column is left blank the link will automatically open and replace the page the user is currently on.The options are as follows:

Target	Description
_blank	Opens the file in a sepearte new window.
_self	This is the default target which will replace the current page with the page being linked too.
_parent	This is reserved for use when working with frames and is not used in this tutorial.
_top	This is reserved for use when working with frames and is not used in this tutorial.

Note: _blank is usually used when you are sending the user to a website that is not part of your own. This way, the user may click through the website they were directed to in one window, while keeping your website open in another. When they close one window, your organizations website will still be open in the background.

8. Click the plus (+) key at the top of the menu to add another option.

9. Add two more drop down items for Web Development and Online Learning. Set the properties for each option as listed below:

Text	Link	Target
Classroom Training	http://www.goADSI.com/education/	_blank
Web Development	http://www.goADSI.com/services/	_blank
Certification	http://www.macromedia.com/certification/	_blank

Your menu should look similar to the image below:

10. Click the tab labeled Appearance.

11. In this menu, you may set the design of your pop-up menu. You can choose HTML or images to display your menu options. (For larger pop-up menus, it is best to use HTML. HTML menu’s download faster because they use background and text colors rather than actual images)

12. Select HTML as the menu type.

13. Select Vertical Menu from the menu drop down options.

14. Select the Font, Size and colors as you desire.
    You will see a sample menu at the bottom of the screen to give you an idea of what your menu options will look like to the user. For consistency you may want to use the same background colors for the pop-up as you did for the actual button.

15. Once you select the colors and layout for your pop-up menu, click the Position tab.

16. Select where you would like the menu to pop-up in relation to the button itself. For this excersice we want the menu to pop up below the button. Select the menu positon to the bottom of the slice.

17. Click the done button at the bottom of the screen.
    You will notice a small blue outline of where your menu will be. Pop-Up menus require additional JavaScript that can not be displayed using the preview option. To preview a pop-up menu, you must test your file on the browser. To do this, follow the steps below:

18. Save your file.

19. Select File > Preview in Browser > select the browser you would like to preview the file in.

20. This will display your menu on the browser as the user will see it. Roll your mouse over the Services button to view the pop-up menu.

Congratulations!
You’ve got a navigation bar!

Combining the HTML editing power of Dreamweaver MX and the robust, web graphic design capabilities of Fireworks MX is the best way to create efficient, attractive websites. To learn more about using Fireworks and other Macromedia programs, sign-up for training today! We offer certified instruction at affordable prices with additional back-to-school discounts for classes offered in September and October. Sign-up for two classes and you will even receive a $50 discount! So don’t wait – sign up today!