Flash Explained

Learn Flash easily.

How to make a menu with gel buttons encased in metal

October 26th, 2008 | Author: Luka | Category: Menus & Interfaces


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.

Blocking out the outline color for the rectangle tool.

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

Object Drawing and Snapping to Objects are unselected.

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

A flat-colored green rectangle created in Flash.

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.

Adjusting the size of the rectangle shape.

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:

The rectangle with new dimensions.

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).

Selecting the linear gradient fill.

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.

Adding a new color to a linear gradient in Flash.

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).

The color hex code box in the color mixer panel.

Assign the following colors to the 8 squares:

The hexadecimal color values for the metal gradient effect.

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.

Filling up the rectangle with the linear gradient fill.

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.

The creation of a symbol in Flash.

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.

The menu background being stretched.

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

Top of page

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.

Selecting the colors, stroke thickness and other options for the rectangle tool.

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.

The corner radius setting for the Rectangle tool in Flash.

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

Setting the radius of the rectangle corners in Flash.

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.

The rectangle with rounded corners and its dimensions.

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.

The orange gradient fill, with color values of #A40F0F and #E76007.

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).

The rounded rectangle filled with an orange gradient.

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.

Making a Button symbol in Flash.

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.

Adding a new layer inside the Button symbol in Flash.

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

Selecting the rectangle's outline.

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.

Locking a layer and selecting a keyframe in a layer in Flash.

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.

There are four layers inside the Button symbol.

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.

Selecting the working layer in Flash.

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.

Modifying the color and alpha values for the gradient.

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

The Button before and after the application of the white overlay.

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.

The shine shape for the menu button.

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.

The shine shape is now positioned correctly inside the menu button.

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.

Adjusting the white gradient for the shine.

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.

The gel menu button with all the graphical elements in place.

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.

Selecting the text options for the button symbol's label.

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.

The label inside the Button symbol.

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.

Returning to the main stage in Flash.

Well, the menu button is complete now! Continue to the next section to see how to combine the button with the metal menu!

Top of page

3. Applying the bevel filter effect to the gel button and placing it on the metal menu background

3.1 You may remove the button symbol from the stage now, because you've got it stored in the Library.

3.2 Name the first layer on the main scene menu background.

Naming the first layer in Flash.

3.3 Open the Library by selecting Window > Library.

3.4 Click on the metal menu background symbol inside the Library and drag it out onto the stage. You may want to stretch it out a little bit with the Free Transform tool (Q) so that it spans the whole stage.

The website menu background is in place now.

3.5 Lock the menu background layer and make a new layer above it and call it menu buttons.

Adding a second layer to the main scene.

3.6 Click and drag out the gel menu button symbol from the Library onto the stage. Position it over the metal menu background, so that it is distanced about 5 pixels from the background's upper edge.

The menu button placed over the website menu's metal background.

3.7 While the button is still selected, go to the Property inspector and select this:

  1. Click on the Filters tab.
  2. Click the plus icon and select the Bevel filter from the menu.
  3. The selected filter effect will appear in the panel,along with its options.

Selecting the Bevel filter for the button symbol.

3.8 Select these options for the Bevel filter effect:

  1. Enter 0 for both Blur options.
  2. Enter 96% for the Strength option.
  3. Select High quality rendering.
  4. Select black for Shadow color and white for Highlight color.
  5. Enter 220 as the angle.
  6. Enter 1 for the Distance option.
  7. Leave the Knockout option unchecked.
  8. Select Outer as Type.

The Bevel effect options.

3.9 See a preview of your SWF movie by selecting Control > Test Movie.

The website menu with inset buttons is now complete.

And voila! Here's your metallic menu with the inset gel button! It looks cool! And it was easy to make, wasn't it? You may want to try to reposition the button vertically to see if you can make it look even more realistic and merged with the menu background.

OK, you have the button now, but how to make other buttons for the menu without too much work? Easily! Just follow the next section.

Top of page

4. Creating the remaining menu buttons

4.1 Go over to the Library. Right-click on the gel menu button symbol and select Duplicate from the menu that will show up.

4.2 In the Duplicate Symbol window that appears, change the button symbol's name to gel menu button 2. Leave the Type option set to Button. Click OK.

Naming the new duplicated symbol.

4.3 And there you are — you have two gel buttons in the Library now, that are completely identical. To change the new button's label, just double-click on it inside the Library and you will access it. Change the text label and you have the second menu button.

All you have to do now is place it next to the first button. Also, try changing the background of your document to black, the metallic website menu will look even cooler!

The metallic website menu with beveled gel buttons on a black background.

I To see how to create a website in Flash that can be navigated with this menu, check out my menus & interfaces tutorials section. There are many easy lessons to be found there which will teach you have to create a navigation system for your Flash website!

Download the source file for this lesson

Be Sociable, Share!

Comments

Submit a comment

  • harpreet kaur Nov 1, 2008 at 7:54 am

    very interesting & beautiful

  • jerichoxd Dec 11, 2008 at 8:11 am

    nice tutorial really loved it….and easily done !

  • ravi Jan 23, 2009 at 4:03 am

    nice

  • wow! very interesting, I like a tutorial method.will this method also works on Macromedia Flash MX? I want also know other important part of the websites. Thank You so much for your kind for us.

  • […] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Wednesday, July 1st, 2009 at 7:28 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

You must log in to post a comment.