Glossy buttons in Flash
Monday, June 4, 2007
I know that gloss buttons is quite a common tutorial in the web. And the famous gloss effect is used so widely, it is almost an overkill.
But, the gloss button tutorial is still widely sought after, due to its cool and classy look. And despite how simple it looks, to get a nice gloss effect is not that easy as you think. So, in today's tut, you can learn how to create vista-ish looking gloss buttons, directly in flash. No other graphic programs needed.
Lets see the result of this tutorial:
1st, Inserting a New Symbol For The Background:
Create a new flash document. In the 1st frame, create a new symbol (Insert>>New Symbol)
In the create new symbol window that popups, select movie clip for your symbol. Lets name this symbol background.
2nd, Drawing The Background:
In the background symbol, create rectangle. (dimensions are 200x80 for this tut)
The height of your rectangle is 2x the height of your symbol. This rectangle should not have any border. If you happen to create a border accidentally, just select the borders and delete them.
The rectangle is the gradient for the button. Click on the rectangle and In the color window, select the fill to be radial. Then for the left color, use #666666 and the right, use #000000.
3rd, Creating a Mask Layer The Background Rectangle:
Create a new layer in the timeline. (Right click the top layer and click Insert Layer)
In the new layer, create a new rounded rectangle 1/2 the height of the previous rectangle
(to create a rounded rectangle, in the click the set corner radius button). For this rounded rectangle, put the rounded radius to 2 points.
4th, Masking the Background Rectangle:
Then, go back to the 1st layer containing the bigger rectangle, can delete the bottom half of it, so the rounded rectangle overlapping it can cover all of its area. Next, mask the top layer over the bottom layer. (Right click the top layer and click mask)
5th, Creating A Symbol for the Button:
Go back to scene1. Then click insert a new symbol. This time, in the create new symbol window, select button as the type of symbol. Lets name this button1.
6th, Making a Glow In the Background:
Making an instance of the backgound:
In Button1 symbol, drag the background symbol from the library window onto the stage. Select the backgorund symbol. Then, in the properties window, click on filters and add a glow.
Setting the glow:
For the glow, apply the follow settings (Quality: low, Color:#FFFFFF, Blur x:11, Blur y:11, Strength:40, Inner glow)
7th, Adding Text:
Create a new layer and add some text (Static Text, Arial, Anti-alias for readability, #FFFFFF, 13px)
8th, Making a Glass Effect:
Drawing the highlight:
Make a new layer again. Zoom out enough, so the button is about 1/3 the width of the view.
Then create an borderless oval 3x the width of the background, covering only the top half of the background.
Setting the transcluency of the highlight:
In the color settings, choose radial for the color fill. The left color is (#FFFFFF, 35% opacity), The right color is (#FFFFFF, 10% opacity).
9th, Creating The Border:
Create another new layer. Choose the rectangle tool. With your rounded rectangle settings you have entered just now, draw a border around the background. The width of the border is 1.25px and the color of the border is #CCCCCC.
10th, Deleting the Excess Regions of the Highlight:
Go the the layer containing the highlight again. With the selection tool, select the parts of the highlight oval not covering the background and delete them.
11th, Creating an Extra Border for the Button:
Create a new layer, and drag it below all the other layers. Go to the layer containing the border, and copy the border. Then go to the bottom layer and paste the border in place. (Right Click>>paste in place)
Convert the border in the bottom layer into a new symbol (Movie Clip, Name: shadow)
Select this symbol and go to its filters, and add a drop shadow (Strength: 1000%, Distance: 0, Blur y: 3, Blur x: 3, Color: #000000, Quality: Low)
12th, Making the mouse Over and Down States:
Adding the keyframes for the states:
Add a keyframe to the end of the timeline for all layers. (Rightclick the hit frame and click insert keyframe) For the layer containing the background symbol, make a keyframe for the over and down frames too.
Adjusting the over and down states:
In the over frame, go to the layer containing the background and select the background symbol. In the properties window, set the brightness of he background symbol in the hover state to 8%, and in the down state to -11%.
Thats the end of this tutorial :). Do remember to save your hard work in a .fla file before exiting flash. You can use this button in your websites or flash applications. Maybe you may wanna tweak the settings of your button to suit your own site's color scheme or add some more effects to this button.
Labels: Flash, Graphic Tutorials
<< Home