Basic 2-State Navbar

A working demo of a 2State-button Navbar!

Whether you are using simple buttons (see Basic Buttons tutorial) or multi-state buttons (see 4State-buttons tutorial), creating an effective navbar in Fireworks4 is as simple as nailing together a couple of lumps of plywood! And it won't fall apart unless you pull it apart! At their simplest, navbars need only be a collection of graphical objects which function as hyperlinks (when clicked) to get your viewer to other sections of your glorious website. Whether that's a collection of circles, boxes, pictures of your cat etc. it will not matter - if they can click it, it will do the job! But, of course, you won't settle for that. Oh, no! You want flashing lights, colour shifts, glowing bits... and so on. Couldn't be easier! Read on...

Creating your Navbar

This tutorial will show you step-by-step how to produce the 2State-button Navbar above. I call it "2State" because I have only created effects for the "Up" and "Over" states of interaction. The "Down" and "Over While Down" states (See 4State-Button tutorial for a full explanation) I'll leave to you - if you need them! So - on with the show!

Open a new canvas, 200x400. Click INSERT>NEW BUTTON. The Button Editor opens. At this point, you can use any of the drawing tools to create your button on the Editor canvas and apply whatever fills and effects you wish for this initial state (the state). Or, you can paste an existing image onto the canvas (having firstly copied it to the clipboard!). For this tutorial, select the Rectangle tool and draw a 100x15 rectangle on the Editor canvas. Centre this on the canvas by clicking COMMANDS>DOCUMENT>CENTRE IN DOCUMENT. Click on the paint bucket tool and select your fill colour. Now click EFFECT>SHADOW AND GLOW>INNER GLOW and apply the settings shown below.

Next, click on the text tool and type the required text label (with appropriate font settings) for your first navbar button into the Editor panel.

Centre the text block in the canvas (as with the button above), then click the tab at the top of the Editor panel.

Click the button and a copy of your button will appear on the canvas. Double-Click the text block in the button, and apply the new setting for the text colour. Click on the button to select it, then click on the small i in the Effects panel window next to INNER GLOW. Re-set the glow settings to those shown below.

Close the Button Editor by clicking on the X in the top-right corner and the button (with a green "slice" overlaying it) will appear on your canvas. Move the button to it's final location in the canvas (top left corner) by click/dragging it. Try to avoid clicking on the white circle which appears in the centre of the graphic, as this is used to set "Behaviours" (such as rollovers, swap images etc.) and that is a whole other tutorial! When you have it positioned, press and hold ALT key, then click/drag the button. A copy (or "instance") will be automatically created. Position this copy where you wish, then repeat the step to create another 4 buttons, positioned as you wish.

The next stage is to set the correct text labels for the remaining buttons. There are two ways of doing this. You can either:

Double-Click the 2nd button and the Button Editor will re-open. Tell it that you only wish to change the "Current" button. Double-Click the text block in the centre of the button and change the text in the Text Editor to your required label ("Links" in my example). Answer YES to the "Change text in other states" question, then close the Button Editor.

Or, even easier:

Click to highlight the button you wish to edit. Open the "Object" panel and type the new label into the "Button Text" box. Answer "Current" to the question which pops up when you click the next button.

It's worth noting at this point that WHICHEVER method you choose, you will break the links between the "instances" of the button which allow multiple-button amendments at the same time. So any future changes will HAVE to be done one button at a time! It's a small price to pay!

Repeat chosen step for all of the remaining buttons' text entries. The next step is to "tidy up" the arrangement, if necessary, by selecting all of the buttons (EDIT>SELECT ALL) and applying the MODIFY>ALIGN options where appropriate. Finally, "trim" your canvas to fit snugly around the navbar (MODIFY>CANVAS>TRIM CANVAS), then save your file before exporting it!

You should now have a navbar just like the one at the top of this page! Preview it in your browser with F12. Pretty cool, eh?