Button Creation

Button Creation

In this tutorial we will show you how to create a simple animated button.

Important:
You need to have  Macromedia Flash MX 2004 and flash player 7 installed.

1. Create a new document by pressing  Ctrl+N or  using menu File/New.
2. Change scene size to 300*300  and set Frame Rate to  24

3. Enter the layer name: button

4. Draw a circle on a first frame using Oval Tool (O). Let its size be 200*200  and fill it with standard green gradient.

5. Having the object selected convert it to symbol using F8 key and name it  mc_button.

Doubleclick to access mc_button object.

7. Increase the scene up to 30ht frame and locate key frame.(F6)
8. Locate Shape Tween on the scene.

9. Locate key frame at the center of the timeline.

10. Select the object at this frame and change its color to blue gradient.

11. Create one more layer and write “button” word on it using Text Tool (T) and place it at the center of the button

12. Mouseclick the text to select it and apply the following setting to it:

Create a new layer and draw a circle on it using Oval Tool (O). The circle size should be 200*200

15. Having the object selected convert it to button using F8 key and name it mc_button_active.

16. Doubleclick the mc_button_active  object to access it and drag the first frame  to the very end,  Hit.

17. Move one layer down, to the movieclip mc_button.
18. Create one more level, we will need it for Action Script.
19. Make the first and the fifteenth frames empty.
20. Move cursor to one of these frames and press F9 to access Action Script  panel.
21. Write down “stop();” on Action Script panel.
22. Repeat the same actions for the second empty frame.

23. Label  the second frame as b1, and the 16^th – as  b2

24. The timeline should look like the following:

25. Mouseclick and select mc_button_active button, and press F9 to open Action Script  panel.

on (rollOver) {

gotoAndPlay("b1");

}

on (rollOut) {

gotoAndPlay("b2");

}

27. This is how it should look like in Action Script panel.

The important advantage of this button is that you may use lots of various objects and images instead of circle used in the tutorial. You also can make animated text.

Enjoy the result!