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

In this easy lesson made for Flash 8 professional I will explain to you how to create a cool website menu, with gel buttons, that are encased (inset) in a metal background. You will, among other things, learn the following Flash techniques:

• How to use the linear gradient fill option to create a realistic metal background for your website menu,
• How to create great looking gel buttons, with a nice gradient fill, a white shine and overlay to make them look more realistic,
• How to apply the Bevel filter available in Flash 8 professional to have that great inset effect that will make the buttons seem encased in the metal menu background,
• How to easily create multiple menu buttons from a single button symbol, and more.

You can see the live Flash example of the menu that you are going to learn to make below.

1. Creating the metal background for the menu

1.1. Open a new Flash document (File > New > Flash Document). Save it immediately so that you can just press Ctrl+S later, whenever you wish to save your progress.

1.2. Select the Rectangle tool (R). Go to the Colors part of the Tools panel and block out the outline (stroke) color. Do it like this (see image below):

1. Click on the pencil icon to select the outline color.
2. Click on the No color icon to block it.
3. Choose any flat color you like for the fill color.

In the Options area below the colors, make sure that both the Object Drawing (1) and Snap to Objects (2) options are turned off.

1.3. Click and drag on the stage with your mouse to create a rectangle. Any size will do.

1.4. Select the Selection tool (V) and click on the rectangle to select it. Go to the Property inspector and enter the new dimensions for the rectangle: its width should be 300 pixels and its height 44 pixels.

Note that the height is important, because the menu background should be of a sufficient size to accommodate the buttons. The width isn't that important, because as you'll see later, the menu background will be stretchable, and you will be able to resize it to fit any number of buttons, which is cool! After you adjusted the dimensions of your rectangle, it should look like this:

1.5. Click on any empty part of the stage to unselect the rectangle.

1.6. Go to the Color Mixer panel (situated at the top right corner of your Flash workspace). Click on the paint bucket icon to select the fill color (see 1 below) and then select the Linear option in the Type menu (2).

1.7. Still in the same panel, go over to the gradient strip in the lower portion of the panel. Add a new color to the gradient, like this:

1. Bring your cursor between the two little color squares, anywhere between them and below the gradient strip.
2. A plus (+) sign will appear next to your cursor, meaning that Flash is ready to add a new color to the gradient.
3. Click and the new color square will appear.

1.8. Following the same exact procedure, add 5 more squares so that you have a total of 8 color squares. You will now assign a different color to each one of them. You can do that by clicking on a square and then entering the appropriate hex color code in the box above the gradient strip (see below).

Assign the following colors to the 8 squares:

Also, you should place the squares as you see them in the image above, to be able to have the shiny metal effect for your menu. You can place the squares in their exact positions very easily: just click a square and drag it to the left or right.

1.9. Select the Paint Bucket tool (K). Make a great vertical linear gradient fill like this:

1. Bring your cursor to the very top of the rectangle on the stage.
2. Press and hold Shift and click with your mouse and start dragging it down.
3. Once you have reached the bottom edge of your rectangle, release the mouse button.

Ain't that a beautiful gradient? It looks exactly like a metal bar. Cool! Let me show you now how you can use and re-use this menu background with any number of menu buttons.

1.10. Click on the menu background with the Selection tool (V) to select it.

1.11. Select Modify > Convert to Symbol. In the window that will show up, select:

1. Movie clip as type of symbol,
2. Call it metal menu background and
3. Select the upper left point for the registration point (this one is optional, it makes positioning of the menu via ActionScript easier, if you ever choose to do that — this won't be done in this lesson).
4. Click OK.

What's so good about having the menu background transformed into a MovieClip symbol? You can use it as many time as you like (even copy it from one Flash document to another) and manipulate it more easily, without having to worry about messing it up, if it were a simple shape.

Look this: try stretching it with the Free Transform tool (Q) and you'll see that it doesn't change if you make it more wider. If you stretch it in the vertical direction, it probably won't look so good, because it won't look as realistic, shiny metal menu background any more. But, if you only change its width, it will still look excellent.

Cool! As you can see, that was really easy to create. Let me show you now how to make those cool gel buttons.