Flash: Advanced Buttons - Animated Buttons
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. |
