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

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.

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.

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

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.

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.

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.

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

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.

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!

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

If you have found this tutorial useful, please consider donating to support lukamaras.com.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!