Using the Button Editor in Fireworks 4 - Part One - Fireworks Tutorial

by Jed Clampett The Button Editor is a convenient and timesaving tool. It's simple to use and has a great deal of flexibility. 1 Open a new file, choose File|New. To open the Button Editor go to the menu bar and select Insert>New Button The first state of the button we'll be working with is the Up state of the button. Up is the position you first see on the Home page before you mouseover or click. The Down position is what is commonly used to depict that you have already clicked the button and are currently on that page. It's also a good idea not to link a down state button, all a link would do is to reload the same page and confuse your visitor.   2 Select one of the drawing tools from the Tools panel. I am using the Rectangle tool. Draw your shape into the Button Editor. 3 If you are new to Fireworks some of the Panel names may be confusing. By default the Optimize Panel is located on the right side of your screen on the top. It contains the Object, Stroke, Fill and Effect tabs as well. Select the Stroke tab. If it happens not to be open you can also open it by going to the menu bar and selecting Window>Stroke Click the Down arrow on the top row, I choose Watercolor. But go ahead and experiment with the different options and see what you like. What's a great feature in Fireworks is that you can see the effect instantly as you click on the choices.  4 Next, click the down arrow next to the color box and select a color. (I choose a green) Select the thickness you'd like. Then play with the tip size and the texture percentage. You can see below what I settled on. But experiment until you get the desired effect, there are a lot of options.       5 Click on the Fill tab and then the Arrow next to where you see Solid below. The image next to it shows all the fill options you have. Click the down arrow next to the color box and choose your desired colors. You can add a texture if you'd like.    6 If your button doesn't look like mine yet, don't worry, you'll see why in this next step. Click the Object panels tab, see the Stroke options below. I numbeedr the options 1,2,3. The images to the right are the result of each option. I choose the center, which applied the stroke to the center of my fill outline.  7 Now we will name our button. Click the Text Tool (The A) and choose your font and color. To make changes to your text, be sure to highlight the text to select it, then change, size, and other font attributes.        8 Now wasn't that easy? 9 Go ahead now and experiment some more. With the same button open, click on the Fill tab and make some changes. Here I changed the Texture to Swish at 59% and the fill to Ripple.  10 Leave the Button Editor open and go to Part Two where you will add the Over State, Down State and Over While Down state of the buttons.   Copyright 2001, Jed Clampett All Rights Reserved