Glass Gel Buttons

You can actually make class buttons that are very attractive and look like you spent hours on them in Photoshop, without opening an adobe program, Just in flash! Here is how....

Part 1: Constructing the glass gel button

1. Open a new movie.

2. Create a new symbol by clicking Insert=>New Symbol and call it glass button, with the properties of a button.

3. Setting up your button

• In your glass button symbol Right click on layer 1 and select rename. Rename it Shadow.
• Right click on the shadow layer and insert a new layer. Rename this layer Gradient.
• Right click on the Gradient layer and insert a new layer. Rename this layer Glare
• Right click on the Glare layer and insert a new layer. Rename this layer Symbol or label

4. Click on the up frame of the gradient layer. Set line color to Black. Select your fill color palette. Open your color mixer (Flash MX) or your fill palette (flash 5) and set the fill to radial gradient. Set the left color to very pale blue, and the right slider to a medium blue. Draw your round button on your screen using the gradient. A chart is below with alternative colors you may want to try.

Button Color	Left slider	Right slider
Blue	#99FFFF	#0000FF
Purple	#FFCCFF	#663399
Pink	#FFD7E6	#CC0099
Red	#FFCCCC	#FF0000
Orange	#FFFF99	#FF6600
Green	#CCFFCC	#01B401

5. Adjust your gradient by selecting the fill transform tool and clicking the middle area of your button. Set the gradient so that the gradient circle is the diameter of your filled circle. Then use the fill transform tool to move the center of the fill gradient to nearly the bottom of the circle.
6. Making the shadow

Right click on your gradient layer and select Copy frames from the list with your left mouse button.  Lock the Gradient Layer. Turn off the visibility on the gradient layer. Click on frame one of the shadow layer.

Right click on the Shadow layer frame 1.
Select Paste Frames with your left mouse button.

Click edit => Select all. Click Modify=>Shape=> Convert Lines to fill.  Set the fill color to black with an alpha of 50%

Click Modify=>Shape=> Soften Fill Edges.

• Distance = 10
• Number of steps = 10
• Direction = Expand

Turn your gradient layer on by clicking the eye column in the gradient layer. Click your arrow tool and use the arrows on your keyboard to nudge the shadows down till the top of the shadow barely shows over the top.

Lock your Shadow

7. Creating the Glare

Click on up Frame  of the Glare layer. Select your oval tool. Set the line color to no line color. Set the fill color to Radial Gradient. On the gradient bar set the left gradient to pure white, alpha = 100. On the right hand side, set the gradient to white, but alpha = 0%

Draw an oval over the top third of the circle, extending out to the edge of the shadow.

Use your Fill transform tool to elongate and flatten the oval gradient in width and move the center down towards the bottom of the oval. 

8. Mouse over effects

For the glass button we will keep it simple and make it appear like the button is pressing down when you mouse over.

Click on the Glare layer on the Hit frame. Then hit F5 to extend the frames. Do the same to the gradient layer. Do not do this to the shadow layer.
 

9. Creating Additional Colors for your library file

1. Right click on your glass button in the library and select Duplicate. Name the duplicate Purple Glass button. Open the Purple glass button symbol by double clicking the symbol in the library. Unlock the Gradient layer,  making sure the glare and shadow layers are still locked.
2. Select your arrow tool. Click on the fill on the gradient layer to highlight it. Select the dropper tool and click on the gradient. In your color mixer, change the left and right colors to the purple colors listed above in the table.
3. Repeat A and b for the other colors. You will end up with 6 different colored button symbols.

10. Labeling your buttons

You may choose to label your buttons on top of the instance in your main time line, or you can add the label right to your button. Below will describe how to make a set of player buttons for your sound player or slide show.

1. Duplicate your blue button 5 times. Call them blue glass stop, blue glass forward, blueglass fast forward, blue glass back, blue glass rewind.

Add your symbol or words to the top layer and either extend the same frame out to the hit frame or make your changes in the button according to the mouse over and down frames. (you may want to change the color of the text or size for mouse over, etc.) Select your Text tool. Type at font  in dark blue. Select  text box and set the font to Webdings.

Here are some common symbols used for buttons.