Add ActionScript to Button for Envelope Animation

In the last few tutorials, we finished the animation that caused the envelope to fly onto the center of the stage and added our invisible button over the stamp on the envelope. Now, the only thing left to do for the first half of the animation is to add a few lines of ActionScript to our button. This code will tell Flash to simply stop the animation on Frame 80 and listen for the button to be clicked. When the button is clicked, the ActionScript will move the animation on to Frame 81 and the second half of the animation. Of course, we still need to build the rest of the animation but for now, we will work on the code that will make our button control the Timeline.

Open our fla file into Flash CS3. At this point we have 80 frames on the Timeline. We will be working on Frame 80 during this tutorial.

Unlock the Actions and InvButton layers. On Frame 80 of the Actions layer, right-click and add a Keyframe. From the Menubar, click Window, Actions to open the Actions panel.
Add the following code to the Actions panel.

stop();

InvButton1.addEventListener(MouseEvent.CLICK, open_Env);

function open_Env(myevent:Event):void {
InvButton1.removeEventListener(MouseEvent.CLICK, open_Env);
play();
}

As you can see, this code has three parts. We first add the stop() code to stop the animation and wait for the button to be clicked. Because the code is on Frame 80, that's where the animation will stop.

Next, we add an EventListener to the InvButton1 instance of our invisible stamp button. This EventListener will listen for the mouse click on the button and then call the open_Env function.

The open_Env function does two things. First it removes the EventListener and then moves the animation to Frame 81 with the play() code.
After adding the ActionScript to the Actions panel, you can close the Actions panel.
As you can see, we did all of this on Frame 80. Click Control, Test Movie to test the button. You will see that the animation does not automatically go back to the beginning of the Timeline after Frame 80 as it has before. Now, our movie stops and waits for someone to click on the button. This is because we are now controlling the Timeline with the ActionScript.

Save your fla file for the next tutorial when we will start working on the second half of the envelope animation.

Join us in the Flash forum.