Creating the 'up' state

The first thing to create is the look of the navigation when the buttons are in rest position, we'll just call it the "up" state. We will use the first frame, which Fireworks created automatically when we opened the document, as the container for the up state.

The layers/frame panels are shown in the following screen shot:

Let us now create the text of the five buttons by selecting the text tool from the tool menu. Click in the left portion of the canvas to open a text object. Before you start typing check that the tool settings in the properties inspector are as shown below:

We enter the word "About" and set all the text properties as in the above screen shot:

• Font: Times New Roman
• Size: 16 points
• Color: black
• Alignment: left
• Strong Anti-Alias

After creating the element let's move it to a position 224 pixels from the left and flush to the top. The easiest way to position it on the correct coordinates is to enter the values into the properties inspector. This feature gives us complete control over the positioning of the objects we create in Fireworks.

Instead of using the text tool to create the other four labels we will use a convenient duplication method that Fireworks offers:

Click on the object you want to duplicate, click and hold the left mouse button and press the ALT key on your keyboard. The mouse pointer will turn hollow and you can pull the duplicated object to it's new position.

If you also hold down the SHIFT key the movement of the duplicate will be constrained to horizontal or vertical direction. This way you can be sure that the new object will align in either of the directions.

By double-clicking on the duplicate the text editor will open up and we can change the text to the next item on our list of labels.