How to make a menu with gel buttons encased in metal in Flash 8 professional — part 2

2. Creating the gel buttons

2.1. Press Ctrl+S to save your work! Now, you can delete the menu background from the stage since it is safely stored in the Library as a MovieClip symbol.

2.2. Select the Rectangle tool (R) again. In the Property inspector, make the following selections:

1. Select black as the Stroke color (see 1 below).
2. Enter 1 in the stroke thickness field next to the stroke color square, and the line type will automatically become Solid (maybe it was solid from before already, but it doesn't really matter).
3. Make sure that the Stroke hinting option is checked (see 2 below). This option enables you to have smooth corners, without any blurred pixels.
4. Select any color for the fill.

2.3. Go over to the Tools panel and on its bottom you'll find the options for the Rectangle tool. Click the Set Corner Radius option.

In the window that opens up, enter 10 as the value for the radius of the rectangle's corners. Click OK.

2.4. Draw an elongated rectangle, like the one in the image below. It isn't exactly possible to match the desired dimensions on the first try, so enter them in the Property inspector — make sure that both the outline and the fill of the rectangle are selected before doing that. Then, set the width to 113 pixels and the height to 29 pixels.

2.5. Unselect the rectangle by clicking outside it with the Selection tool (V).

2.6. Go to the Color Mixer panel and select the fill color and then the linear fill type, exactly as you did before in step 1.6. Now remove all the color squares (which have probably stayed here from before) in the gradient strip between the leftmost and rightmost ones (in fact you even can't remove them, at least two color squares must stay for you to have a gradient). You can do that by simply clicking on a color square and dragging it down until it disappears.

2.7. Set the colors for the gradient as the screenshot below shows you.

2.8. Now, in the same way that you did with the menu background before, use the Paint Bucket tool (K) to fill the rounded rectangle with a vertical gradient fill (by using the Shift key and your mouse).

2.9. Select the rectangle, both the fill and the outline with the Selection tool (V).

2.10. Select Modify > Convert to Symbol. Call the new symbol gel menu button and make sure to select Button as type of symbol this time, not a MovieClip! Click OK.

2.11. Still using the Selection tool (V), double-click on the Button on the stage to enter inside it.

2.12. Once inside the Button symbol, call the first layer background, then make a new layer and call it stroke.

2.13. Using the Selection tool (V) double-click on the stroke (outline) of the rectangle to select it.

2.14. Select Edit > Cut to cut the stroke off the rectangle.

2.15. Lock the background layer and select the first keyframe in the stroke layer.

2.16. Select Edit > Paste in Place and the stroke will be pasted on the exact same position that it was occupying a moment before, albeit on a different layer.

Why is this done? Because the stroke has to be above all the other button's elements (gradient background, shine, etc) for the button to look good. Also, you will apply the bevel filter effect to this button later and it will look much more realistic with the stroke on its own layer.

2.17. Create two new layers between the existing ones. Call the first white overlay and the second shine. Lock all the layers except the background layer.

2.18. Click on the rounded rectangle in the background layer with the Selection tool (V) to select it.

2.19. Select Edit > Copy to copy the rectangle. Do NOT select the Cut option, because you are only copying it now, not cutting it!

2.20. Lock the background layer, unlock the white overlay layer and click on its first keyframe to select it.

2.21. Select Edit > Paste in Place to paste the rounded rectangle here, in the white overlay layer, exactly on the same spot as its counterpart is occupying in the layer below it.

Now don't click anywhere, so that the newly pasted rounded rectangle stays selected. You will make a white overlay out of it, without having to use the Paint Bucket tool. This is going to be very easy.

2.22. Just go over to the Color Mixer panel and do the following:

1. Set both color squares to white (#FFFFFF).
2. Set the Alpha (transparency) of the left one to 0%, and to 60% of the right one.

See how different is your menu button now? It looks much smoother!

NOTE Why was this step taken, you may ask? You may well have created a gradient like that in the first place, right? Well, if your button symbol is composed of many separate elements, you have a greater degree of control over its appearance. You can choose to make a MovieClip symbol out of any of the elements and apply different filter effects to them. Also, you can choose to show some elements only in particular button states (rollover, clicked, etc). Play around and experiment and see what's best for your website.

2.23. Select the white overlay shape and copy it (Edit > Copy).

2.24. Lock the white overlay layer and unlock the shine layer. Click the first keyframe in the shine layer to select it and select Edit > Paste in Place.

2.25. Click on the newly pasted shape in the shine layer and go to the Property inspector. Change the width and height of the shape to 104 pixels and 10 pixels, respectively.

2.26. Now select the shine shape on the stage again, and use your arrow keys to move it so that it is positioned in the middle of your button horizontally and a few pixels from its top.

2.27. With the shine still selected, go once more to the Color Mixer. Both color squares should still be set to white, but the first one should have its Alpha set to 100%, while the second one to 0%. After that, drag them on the gradient strip so that they are positioned as in the screenshot below.

Here it is — your gel menu button with all of its graphical elements. The only thing that remains to be done is the button label — the text that tells your users where the button will take them, once it is clicked.

2.28. Lock the shine layer.

2.29. Make a new layer above it and call it label.

2.30. Select the Text tool (T) and go over to the Property inspector. Select these options:

1. Set the type to Static text.
2. Select a font you like.
3. Select an appropriate size in relation to the font and the button.
4. Select white for color (and check in the Color Mixer that its Alpha is set to 100%).
5. Select the left alignment.
6. Select the readability option in the rendering menu.
7. Unselect the Selectable option. This option is reserved for text on your Flash website that you want to make selectable for your users.

2.31. Click somewhere over the button area and type LINKS, for example. Press Esc when you're done to exit the text field. Use your arrow keys to position it inside the button, so that it is nicely aligned.

You may want to place the label layer below the shine, so that the shining effects goes over the button label. Try out different things to see what you get :-)!

2.32. Click on the Scene 1 link above the layers to return to the main stage.

Well, the menu button is complete now! Go over to the next page to see how to combine the button with the metal menu background!