Animated Button Exercise Flash: Interactive Web Animation by Ken Kimura
Overview: We're going to create two graphic symbols, one
of text, and the other a circle. Then we're going to create an animation with
each symbol.
Finally, these animated symbols will be used to create a button.
Create a new GRAPHIC symbol of text - For example: "Movie 1." Call
it “Movie 1”
Create a new GRAPHIC symbol of a colored circle. Call it “circle.”
Try to make the center of the circle be on the center of the symbol
Create a new MOVIE CLIP symbol that will be an animation of the text
symbol. Call it “mc_anim_text”
Add a keyframe with a motion tween.
Have the text move to the right in the second keyframe.
Set the Alpha of the first keyframe to “0”
Put a STOP action on the last frame
Create a new MOVIE CLIP symbol that will be an animation of the circle
symbol. Call it “mc_anim_circle”
Add a keyframe with a motion tween.
Scale the circle to be larger on the second keyframe
Set the Alpha of the SECOND keyframe to “0”
Copy the frames
Create 2 more layers and paste the frames into the new layers
Stagger the timing of each layer
Create a new BUTTON Symbol. Call it “bt_button”
Use the text symbol on the UP frame.
Use the mc_anim_circle on the OVER frame.
In the inspector panel, make sure the symbol behavior is set to Movie
Clip
Make a new layer. In the OVER frame place the mc_anim_text
clip.
In the inspector panel, make sure the symbol behavior is set to Movie
Clip
Create a Hit Area.
Place the button symbol on the stage and test your movie.
Create an animated button with your own animation.
