Date: 2004-12-01
Hits: 3065
Rate:
email to friends
printMacromedia Flash Realistic Button - Embossed Flash Button
Creating a button in flash mx is simple but creating a realistic embossed one is even simpler than you might imagine.
Here is what we are going to create by the end of this tutorial:
1- Create a new flash movie with size of 200 x 50.
2- Select Rectangle Tool 
or press R on your keyboard.
3- Change the 'stroke color' to none.
4- Change the 'Fill Color' to gradient of two color: #666666 and #999999 by
> Click on the 'Fill Color'.
> Under Color Mixer Panel. Change the drop down list to 'Linear'.
> Click on the left color picker and change the color hex number to #666666.
> Click on the right color picker and change the color hex number to #999999.
5- Now we are ready to begin drawing a rectangle button in flash mx. With the Rectangle Tool still selected, click and drag to create a rectangle with height of 150 and width of 30.
6- Click on the rectangle and press F8 to convert it to a button instance.
7- Click to select the new rectangle button. Under menu bar choose:
Modify >> Transform >> Rotate 90o CCW
You will get something like this in the canvas window
8- Double Click on the rectangle to edit the button.
9- Choose Line Tool 
by
pressing N on your keyboard.
10- Change the 'Stroke Color' to #333333 and draw two straight lines. One on the lower part of the rectangle and the other on the right edge of the rectangle.
11- With Line Tool still selected, change the 'Stroke Color' to #CCCCCC and draw two straight lines. One on the higher part of the rectangle and the other on the left edge of the rectangle.
If you have done it right, you will get something like figure below.
12- Click on 'Down' state of the button and use mouse's right click and choose 'Insert Keyframe'.
13- Deleted the 4 border lines you have created in step 10 and 11.
14- Repeat step 10 and 11 again BUT with interchanging of color i.e. the lines with #CCCCCC should appear on the lower and right edge of the rectangle whereas the lines with #333333
should appear on the higher and left edge of the rectangle.
15- Your button is ready. Press Ctrl+Enter to test the new flash realistic button.
In summary, to create a realistic flash button, you mostly deal with 4 colors. In laymen term, the 4 colors used derive from one main color but are different in opacity. In this tutorial, the color we used are #333333,#666666,#999999 and #CCCCCC which is a family of #000000 (black color).
You may consider building other flash mx realistic buttons with other colors but the concept of this tutorial remains the same.
Finally, the essence of this tutorial is the usage of color to create a feel of depth.
And Here is your flash mx source code.
