NZMac.com - Supporting the New Zealand Mac community

1.

Open Fireworks MX and create a new document (Apple+N) 100 pixels wide by 40 pixels deep.

Fireworks has a new arrangement of tools with the tool palette divided into Select, Bitmap, Vector, Web, Colours and View.

2.

Click and hold on the Rectangle tool in the Vector section of the toolbar to get the Rounded Rectangle tool. Drag out a shape in your new document and select a style from the style palette - I chose style 11 to get a smoothly shaped blue button.

3.

Click on the type tool in the Vector section of the tool palette and type 'Button Text', sizing it in the Property Inspector to fit, and colouring it ditto to suit your tastes.

4.

Make the artwork into a 'button symbol' by selecting all (Apple+A) then choosing Symbol>Convert to Symbol from the Modify menu. A dialogue box appears.

5.

Call the new symbol 'Button1', make sure 'Button' is checked and OK the dialogue box. Notice the changes to the appearance of your artwork - a slice has appeared over the button graphic and to the left of the slice a shortcut icon has appeared, indicating that the selection in your workspace is an instance of the the symbol you created.

6.

The symbol itself now being safely ensconced in the Symbol palette, as you can see by checking your Library palette (if it's not visible, choose Library from the Window menu or click the Assets' panel expander arrow). When you change this or any other symbol, any symbol in your document changes to suit.

7.

Now we can create different states for this button, making it interactive. Double click the symbol in the Library palette circled above in 6, or double click directly over the button symbol in your artwork (although not over the crossed circle icon). This opens the Button Editor.

8.

Click the Over tab. You'll notice that the white central inspection area contains no graphic, so click the Copy Up Graphic button to copy your button graphic to Over layer you are creating. Voila, it appears. (The first four are button states, the last - Active Area - allows you to manipulate the 'hot', and 'swap', area of the button. Now you can work quickly to create the interactivity of your button.)

9.

Select the rectangle behind the text, making sure you haven't selected the text (you can check this in the layers panel).

Choose a darker colour from the Fill Colour box of the Properties Inspector, visually verifying that your rectangle changes hue accordingly.

10.

Click the Down tab; notice that the elongated button at bottom right now reads 'Copy Over Graphic'. Click this to bring the graphic from the Over tab to this layer, which represents the appearance of your button after a user has clicked it in a web browser. You can leave this as is, change the colour of the text or, again, change the colour of the rectangle. I elected to change the text colour to 0033FF.

Click Done to save your changes (noting that you can add even more complexity for multi-button navigation bars by clicking the Over While Down button to set a state for a button already depressed to further react to mouse rollovers).

11.

You can cycle back through by booting the Button Editor again to edit any of the states you set.

Now, this is good As you'd expect from software built especially for the web, you can preview the results in several ways: directly by hitting the Preview tab near the top right of the document window, or by pressing the stylised yellow icon at top right, you can boot directly into the rest of the Suite applications or preview the button in your two main browsers of choice.

You can also preview the file as a thumbnail directly in the Library - click the Play arrow in the Library panel to see the states and changes you have set as a thumbnail.