Selteco.com > FlashDesignerZONE.com > Tutorials > T1032

Glass Buttons.

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

Products | Purchase | Downloads | Support | Flash Tutorials | Contact
Copyright © 1999-2017 Selteco Software, Inc. www.selteco.com, ph: +1 810 377 5778