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.

1. Launch Alligator Flash Designer and choose Blank
2. Set movie dimensions 700 x 150 (or any desired) with Frame > Frame Size
3. Change frame delay to “Stop”.
4. Change background color to black “Frame” > “Background Color”
5. Draw an ellipse 100 x 100 pixels (Step 1)
6. Choose Item > Gradient Fill
7. Setup the gradient: (Step 2) Custom / Radial, Scale 300%, Center Color (R: 168 G: 255 B: 155), Outer Color (R: 255 G: 255 B: 255), click Advanced and enter Delta Y: 100, under Add Colors check Point 3 and Point 6 Click Color 3 and setup (R: 200 G: 255 B: 137), Click Color 6 and setup (R: 54 G: 122 B: 42)
8. Draw a new ellipse (Step 3)
9. Choose Item > Gradient Fill
10. Setup the gradient: (Step 4) Custom / Vertical, Top Color (R: 255 G: 255 B: 255), opacity 30%, Bottom Color (R: 255 G: 255 B: 255), opacity 0%
11. Convert the ellipse to curve, select it and choose “Edit” > “Convert to Curve”
12. Choose the “Edit nodes” tool and reshape the ellipse (Step 5)
13. Hit F9 for preview.

Download the source code here

ActionScript 3.0 Linking and Using Buttons: Flash Tutorial!