• home
  • forum
  • my
  • kt
  • download
  • Animated Buttons

    Author: 2007-06-06 14:21:30 From:

    Source Files: Download
    Level: Medium
    Version:
    4,5

    Animated buttons provide advanced interactivity. Simple rollovers and down states are common, but when you create animated buttons, your buttons take on a new life!.

    Step 1. Begin with a new document and place some graphics and/or text you'd like to use for your button. Here's what I am starting with:

    Step 2. Select all of your graphics and click the F8 key and make them a Button. Name your button.

    Step 3. Double-click your button to edit it.

    Step 4. I want to animate the circle and arrow in this example, so I'm going to select those again and click the F8 key again, and this time I'll select Movie Clip.

    Step 5. Let's edit this movie clip now so double click it to open it up. Here I'll separate the outer black ring from the inner yellow circle/arrow.

    Step 6. Double click the black circle to select it. Click F8 to convert it to a Graphic.

    Step 7. While still selected, click Command-X/Control-X to cut it. Create a New Layer, name it black circle and click Command-Shift-V/Control-Shift-V to Paste in Place on the Black Circle layer.

    Step 8. Select the yellow circle and the inner arrow and click F8 to make them a Graphic.

    Step 9. Create a short Motion Tween for each symbol. I rotated the yellow circle/arrow and animated the black circle.

    Step 10. That will complete the animation on the Up state on your button. Go ahead and preview the button by clicking Command-Enter/Control-Enter to preview it.

    When you're ready, go on to the next page to animated the Over state.

    Step 11. Go back to the main stage by clicking the Scene 1 tab, then double click your button again to edit it. We're now going to work on the Over state.

    Step 12. Add a keyframe to the Over state.

    Step 13. Change the color of the text and then click the circle movie clip and click Command-B/Control-B to break it apart. We want to make it a new movie clip now.

    Step 14. You should have two symbols now. The black circle and the yellow circle. Select them both and click F8 to make them a new movie clip.

    Step 15. This time reanimate the both the black and yellow circles. I will make the yellow circle grow larger to fill up the black circle. This time, add a stop motion on a new layer at the end of the animation. This is, or course, is optional.

    Step 16. Preview your button.

    Step 17. If you want to add a Down state, just follow the same steps for the Over or Up states.

    Step 18. Add a hit state to cover the entire button and you're all set. The only thing left is to see how creative you can make your buttons!

    discuss this topic to forum

    relation tutorial

    No information

    Category

      3D (36)
      Math Physics (18)
      3rd Party (10)
      Navigation (70)
      Actionscripting (228)
      Optimization (17)
      Animation (166)
      Projector (11)
      Audio (54)
      Special Effects (170)
      Backend (26)
      Text Effects (92)
      Drawing (34)
      Tips and Techniques (58)
      Dynamic Content (38)
      Tricks (8)
      Games (114)
      Utilities (24)
      Getting Started (99)
      Video (59)
      Interactivity (48)
      Web Design (37)

    New

    Hot