Glass Buttons

This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.

Create glass-like buttons using gradient fill

Download source project t1032.zip

Create button base

1. Launch Flash Designer and choose "blank document"
2. Choose "Ellipse" tool and draw button surface hold CTRL to draw a circle
3. Position the circle, choose "Edit" > "Move To" and enter x:75, y:46, width:65, height:65, click OK
4. Choose "Item" > "Line and Fill" > "Line Width" > "4px"
5. Choose "Item" > "Line and Fill" > "Gradient Fill"
6. Choose "Vertical"
7. Click "Top Color" and change it to # 1F436D, click OK
8. Click "Bottom Color" and change it to # 4B8FED, click OK
9. Click OK to fill the circle with the gradient
10. Draw another ellipse to make the light reflection
11. Choose "Item" > "Line and Fill" > "Gradient Fill"
12. Choose "Vertical"
13. Click "Top Color" and change it to # FFFFFF (white), click OK
14. Click "Bottom Color" and select "No Color", click OK
15. Click OK to fill the circle with the gradient
16. Choose "Edit" > "Move To" and enter x:87, y:51, width:40, height:26, click OK
17. To make the shadow select the larger circle, choose "Edit" > "Duplicate", enter step x: 5 and step y: 5, click OK
18. Choose "Edit" > "Send to Back" to move the shadow beneath.
19. Change shadow's fill and line color to # 39528E

Duplicate the button

1. Press Ctrl+A to select all items
2. Choose "Edit" > "Duplicate" enter step x: 100 and step y: 0, click OK
3. Change new button colors, select front circle, choose "Item" > "Line and Fill" > "Gradient Fill" and modify "top" and "bottom" colors.

Define Actions

1. Select blue button surface and choose "Item" > "Actions" > "OnClick", choose "Play" and click OK.
2. Choose "Item" > "Actions" > "On Over Color", uncheck "No Color" and change the color to # B5D6FF
3. Select red button surface and choose "Item" > "Actions" > "OnClick", choose "Stop" and click OK.
4. Choose "Item" > "Actions" > "On Over Color", uncheck "No Color" and change the color to # FFB3A0

Customize

1. Draw green triangle with "PolyLine" tool.
2. Add red circle with "Ellipse" tool.
3. Add text with "Text Tool"
4. Choose "Frame" > "New"
5. In the Frame List set new frame background to "Frame 1"
6. Draw a rectangle after the text

To speed-up blinking change both frames delay to 0.1 sec.