UBB.Developers Forums Announcements Announcements U-Zine Articles Fireworks Tutorial by Bookie

Animating Buttons in Fireworks By: Bookie



The in depth tutorial will explain how to create basic buttons and animation in fireworks. It includes all the details required to create good looking buttons in my eyes. Hope it helps everyone.

Step 1 - Making a New Document
First we'll start out by making the basic layout of a button, open up Fireworks, and select "New" from the dropdown list under File. A screen will come up which prompts you to enter the perimiters for your button, use the options in the image below.



Width: 88 pixels
Height: 31 pixels
Resolution: 72
Canvas Color: White (or the color you want your image background to be.

Step 2 - Creating the Rectangle
You should now have a small window open with a white rectangle in it. Start out by creating a black border for the image, do this by selecting the rectangle tool, and dragging it so you get the blue looking rectangle around your entire image.



After you have the rectangle made give it a one pixel stroke by selecting the colors from the colors docker on the main toolbar. If you dont see the main toolbar you can activate it by going to Window > Tools.



NOTE: If you border is bigger than one pixel you can easily modify it by opening the Stroke docker (Window > Stroke) and setting it to one pixel with a 1-Pixel hard stroke. Also if your rectangle doesn't cover the entire area, select the main arrow tool, select one corner at a time and move it pixel by pixel until it covers the entire area.

Step 3 - Creating a Background for Your Button
Now to make our button look even better we need a sleek background. We don't want to make the background to bright or too colorful because that will result in it taking away from the message we want the button to shout out, we will be doing a basic linear fill. First if you dont already hack the Fill docker open, do so. (Window > Fill). Now select the rectangle. Now on the fill docker, click on the dropdown menu which says "Solid". Go down the menu until you find ""Linear" and select it.



You will now have a fill that goes from black to white, horizontally... ugly.. So what you want to do is make it colors that will look good! Settle down, we still need to do a little something first. With the rectangle selected, select the black pointer from the tools menu, you will see what looks like a circle, connected to a square by a line.



What we want to do is first, drag the circle to the top of the image, and then drag the square to the bottom of the image so that they are verticle. So that it looks something similar to below.



Now that we have our vertical linear fill, we can now change the colors, I have a recent obsession with dark green so thats what ill be using, if you wish to use otherwise by all means go for it. To change the colors go back to the fill docker with the rectangle selected, and click on the little edit button. This will bring up a new window with to little squares on it, to change the colors click on the square and select your desired color. For this image I used #669999 and #447777.



When your colors have been set push enter and you should get something similar to the image below.



Great now that we have the base part done we can get on the... ANIMATION!!!

Step 4 - Animating Your Button!
There are pretty much 4 basic moves in button animating, the slide in/out, and the fade in/out. It doesnt sound like much but these 4 simple animating techniques can do so much. I even got some examples for ya below.



We'll start off with the fading in, and fading out. Now there is two ways to do this. You can do it the hard, time consuming, choppy, ugly way, or the easy clean fun hands free no work way. The first way it to take the image/text you want to fade, and create, oh, say about ten duplicate frames. Then frame by frame change the opacity by 10% each time, this is how I used to do it until I found a much, much better way. There is an addon command which you can get for fireworks, called animate opacity, you can pick it up at Project
Fireworks, or download it here. Just place everything in the zip file into your commands folder in fireworks. I'm not going to go in depth on how to do the fade the first way, but I will teach you how to use the command. First what we need to do is create some text, you need a good font that will look good when in the lower sized fonts. (they have some great ones at Cuba Dust). Now create the text you would like to fade in. Do this by selecting the text tool in the tool bar (The big A). Then click somehwere in your image, a new window pops up, check the image below to see what everything means.



When your finished with setting the font size/color and the text push ok. Then adjust the text where you want it on the image, and give it a black border. Next, go to commands and select animateopacity (See above if you do not have). A prompt window will come up asking how many frames you want it to be, the more frames the smoother it will be, but the bigger the file will be. Between 5-10 frames usually works for me. Set how many frames you want and push OK. Another screen will pop up asking the start opacty. To fade in set the opacity to 0, to fade out set the opacity to 100, then push OK. Another screen comes up asking the end opacity. To fade in put 100, to fade out put 0. It will then create the necessary frames for you. BUT, you are not done your fade yet. Open up the frames docker (window > frames) And you will see a list of frames, select #2 and you will see that there is no background. Dont panic, you will need to put the background onto ever frame after fram #1. AAAAH!! Dont panic, theres an easy way to do it. 1. Go to the first fram, Select the background and push Ctrl+C to copy it. 2. Goto the second frame, Push Ctrl+V to paste. Once you do that then your background will appear on that frame. 3. Now you need to send it to the back. Do that by pushing the combination of Ctrl+Shift+Down. Repeat steps 2 and 3 to all of your frames. You will then have successfully done a fade!

NOTE: Fades can be used on any images/text that you wish to do them on, but over using fades can cause your images size to get very large, so be aware when creating buttons with fades.

Now we have slides, slides are rather easy to creat and don't take much work. First you need to select the text/image that you would like to slide, and in frame one, set it so the side so you all you can see is the blue outline. Then open up the frames docker and in it select the first frame, once you have doen that drag the first frame on to the new frame icon (). This will create a duplicate frame. On frame #2 select the image you want to slide and move them about 15 pixels towards the image. (The more pixels you move it the faster the slide will be). Continue duplicating frames and moving the image until the object is in desired position. And that is all for the slide.

Step 5 - Making It All Make Sense
There are two crucial elements of making a button, first the graphics and colors must fit and look good, and second, the animation must be thorough, clean, and put together well. When creating a button it is also important to make it short, to both be a smaller file, and so the people viewing it don't lose interest. When finalizing the animation be sure you dont have a fade in, then at the end just cut to the first frame, you need to make it look that there is no begining to it, and no end so it flows and doesn't look choppy. Well thats about it, I never knew it took so much effort to create such a small button until I wrote this. Hope this helps everyone and if not, there's always the graphics forum.