Creating a glossy button in Flash MX 2004


Today i am going to describe to you people that how to create a glossy style button in flash it self rather than to import from photoshop or any other tool.The biggest advantage of doing that is because the button created in flash itself is not a raster image it vector means it does not get distorted on resizing the movie or website.

Lets get started.

Open the flash and go to modify panel and select the document Or press Ctrl+J.In the dialog box make the settings as shown in following pic.

1.jpg

Now select the rectangle tool and in the option below the tool bar select the round rectangle radius button and set the radius to 5px.

2.jpg

3.jpg
Now draw the rectangle of any size..after drawing double click the rectangle to select it all and then go to properties panel and set the values as shown in following image.

4.jpg

Now on the timeline double click the layer1 to rename it.name it as “bg” then click the new layer button to create a new layer (as shown in fig) and rename it as “text”.This layer will contain the text which will show on the button.

5.jpg

Create another layer and rename it as “ref”.

So now you must have three layers in the order as shown below.

6.jpg

Now select the text layer and the select the text tool(T) and type any word in my case its “Button” and set its size, font and color according to your own taste and then set it in middle of the button by using select and move tool or just select the text and press the arrows keys on keyboard.

71.jpg

till this point i got this

8.jpg

Now we had to add reflections to give it a glossy look there could be many ways of doing that depending on the situation but here i will use the following way.

Select the “ref” layer and select the rectangle tool, then select the small arrow bellow the stroke color to open a color selection window….Select the no stroke button to turn off the stroke

9.jpg

Set the fill color to white.

Now draw another rectangle anywhere on the canvas and then go to properties panel and make the settings according to the image below.

101.jpg
be sure that the ref rectangle is selected goto the color mixer panel by pressing the shift+f9.

click the fill color, make sure it is set to sold and set the alpha to 50%.

12.jpg

Thats it i am done with following result.

13.jpg

In upcoming post i will show you how to make the very sleek looking flash animated menu for website so be in touch.

add :: Add :: add :: Digg :: add :: Stumble :: add :: seed :: :: :: TailRank