How to Add Button Animation to a Flash Project
Adobe Flash provides tools to help you create Web page animations including a variety of objects, such as images, videos and buttons. Perhaps you want to animate a button, such as an Add to Cart button that displays a basketball being dunked into a basketball hoop when clicked. Flash enables you to manipulate a movie clip as a button.
Other People Are Reading
Instructions
-
-
1
Open the Flash project. Press “Ctrl” and “F8” to create a new symbol. Type a name for the movie clip, such as “AddToCart.” Choose the “Movie Clip” radio button and click “OK.”
-
2
Create your animation in the timeline frames. For instance, place a basketball hoop in frame one. Press “F6” in frame 2, and insert a basketball at the top right of the hoop. Press “F6” in frame 20 and move the basketball to the top of the hoop. Press “Ctrl” and “F3” to open the Properties panel. Click frame 2 and set the Tween button to “Motion.” A line is drawn on the timeline from frame 2 to frame 20. Press "Enter" to view the animation. The ball moves from the initial point on the side of the hoop to the ending location at the top of the hoop.
-
-
3
Click in frame 1. Press “F9” and insert the following ActionScript code:
stop();
Repeat this step in frame 20. The stop() method causes the button to stop at the first frame when displayed in your project. You will write code to display frame 2 through 20 in the next step.
-
4
Click the small arrow in the bar above the stage to return to your main project. Locate the movie clip in the Library panel and drag it into the place where you will use it as a button. Type an identifier for the button in the Instance Name field, such as “cart_btn.” Press “F9” to open the Actions panel and add the ActionScript for the button actions based on the Instance Name given:
cart_btn.onRelease = function(){
this.gotoAndPlay(2);
} -
5
Type any other actions that need to be performed for the button click action here also. Press “Ctrl” and “Enter” to test the button.
-
1
Resources
- Photo Credit Hemera Technologies/AbleStock.com/Getty Images
