Flash tutorials | Flash video tutorials | Flash actionscript | flash animation | flash menu | flashconf.com Flash tutorials, Flash video tutorials, Flash actionscript, flash animation , flash menu

Create glass-like buttons

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 Width" > "4px"
5. Choose "Item" > "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" > "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. Press F9 to preview the button
18. To make the shadow select the larger circle, choose "Edit" > "Duplicate", enter step x: 5 and step y: 5, click OK
19. Choose "Edit" > "Send to Back" to move the shadow beneath.
20. Change shadow's fill and line color to # 39528E

Press F9 to preview the button

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" > "Gradient Fill" and modify "top" and "bottom" colors.

Press F9 to preview the button

Define Actions

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

Press F9 to preview the button, move the mouse over each button

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

Press F9 to preview the animation, the rectangle should blink

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

Download the project source here.