4-State Button

Hey! A working Example!

Creating sophisticated buttons with "rollover" and "on-click" effects is an absolute dream in Fireworks4. You can use the full range of image editing tools available through the toolbar to create your ideal button "on-the-fly" inside the button editor, or even use an existing graphic saved on your hard drive. Literally ANYTHING can be turned into a button - let your imagination run wild (or use an image created from following one of my "button tutorials"!). Obviously, you can only create single "stand-alone" buttons using the Button Editor, but once it's done, creating a "nav-bar" is a simple matter of copying/pasting the required number of buttons onto a canvas or "interface" (but that's a whole other tutorial!). So, let's get buttoning!

Creating your button

We'll start with a blank canvas, so:

Open a new file, 100x100pixels, white canvas

Click INSERT>NEW BUTTON. The Button Editor opens up, with 5 labelled "tabs" showing the 4 possible "button states" (i.e. UP, OVER, DOWN, OVER WHILE DOWN) and ACTIVE AREA (these states will be explained as we go through the tutorial).

"UP" STATE

The UP state of your button is simply what it will look like while it is sitting on your page, waiting for some form of user interaction (like mouse rolling over or clicking). So, put your artistic skills to good use and create your basic button! (See Basic Buttons Tutorial if you need a refresher on how to do this!). When you are happy with your creation, it's time to move on to the next stage by clicking the OVER tab.

"OVER" STATE

As the name suggests, the OVER state is what your button will look like when the mouse cursor passes over it. On clicking the OVER state tab, you are presented with a blank canvas. Don't worry - you don't have to recreate the whole thing! Simply click on the button at the bottom right of the canvas and SHAZZAM! Your creation pops up on the canvas, ready to be edited. Feel free to now edit the fill colour, the text colour, apply a GLOW effect (EFFECTS>SHADOW AND GLOW>GLOW), whatever takes your fancy! When done, move on to the next stage by clicking the DOWN tab.

"DOWN" STATE

O.K., so you can probably guess what this one means? You got it - once clicked, this is what your button will look like on the page. So, as before, click on the button to bring your button onto the canvas and apply whatever changes to the effects/fills or text you consider appropriate for this state. It may be that you want to apply different fill colours, or even to apply a subtle INSET EMBOSS effect (EFFECTS>EMBOSS>INSET EMBOSS) to make the button actually look "pushed in". Try not to get too carried away with yourself! Then, click the OVER WHILE DOWN tab.

"OVER WHILE DOWN" STATE

Here's one I don't normally bother using (you don't HAVE to use all button states!), but it's there, so let's use it! The OVER WHILE DOWN state is ... Yep! What you see if you mouse over a button which has already been clicked! Click on the button and off we go! Apply whatever new effects you wish to occur to the effects/fills or text when the viewer mouses over a button which is already in it's DOWN state. And, generally speaking, you're done! Except for the ACTIVE AREA tab.

"ACTIVE AREA"

Once you have created your beautiful button, with it's many magnificent rollover states, the only thing left to consider is the ACTIVE AREA. In a nutshell, the active area defines just how close to your button the mouse cursor has to be to trigger the rollover/click events. By default, Fireworks will automatically create a "slice" for the button which includes the full extent of any effects/text you applied to the graphic (worth taking note of this, if you have applied any GLOW effects, as the Glow obviously extends BEYOND the edges of the graphic you see in the UP state!). You can, of course, tell it to do otherwise by de-selecting that option. Although, I have yet to find a good reason for doing that!

If you wish to extend/shrink the active area, you can do so by dragging on the blue handles at the corners of the slice, but beware! This may seriously affect the performance of your beautifully crafted rollover states, or may even affect the performance of nearby buttons etc. on the same page! More on this topic in my Basic Navbar tutorial.

You're now ready to Rock 'n Roll! You can "demo" your button by using the Play buttons at the bottom left of the Editor window, or simply close the Editor (Click the "X", dummy!) and your button will be inserted into the canvas ready for Saving/Exporting. Have fun!