SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

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
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" > "Line and Fill" > "Gradient Fill" and modify "top" and "bottom" colors.
Press F9 to preview the button

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
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.

subscribe to newsletter