Opening an Envelope - Program the Button

We need to convert this flap to a Movie Clip symbol. Select the flap with the Selection tool and click Modify – Convert to Symbol. In the dialog box, set the following values.

Name – Flap
Type – Movie Clip
Registration – Upper left corner

Click on the Advanced button. In the Linkage section of the dialog box, checkmark the Export for ActionScript and then set the Class to FlapAni. Click OK.
Once this is done, we can remove the flap from the stage because we do not want to see the flap until the stamp button is clicked. Select the flap and click Edit – Cut from the Menubar.

Now we are ready to make the flap appear on the stage when the stamp button is clicked. We will program the button to listen for the mouse click and then run the addChild code that will add the flap to the stage.
Add new layer to the top of the Timeline and name it "Actions". Click on Frame 1 of this layer and open the Actions panel (Window – Actions). Type this code into the Actions panel.

stampButton.addEventListener(MouseEvent.CLICK, openFlap);

function openFlap (e:MouseEvent):void {
var newFlap:FlapAni = new FlapAni();
this.addChild(newFlap);
newFlap.x = 0;
newFlap.y = 0;
}

Let’s take a look at the code.

The first line of code adds an EventListener to the stamp button and tells Flash to run the openFlap function when the stamp button is clicked.

stampButton.addEventListener(MouseEvent.CLICK, openFlap);

The openFLap function will create a new variable called newFlap which references the FlapAni movie clip in the Library. Then we add this to the Display List with the addChild code. Finally, we set the X and Y positions for the movie clip on the stage.

function openFlap (e:MouseEvent):void {
var newFlap:FlapAni = new FlapAni();
this.addChild(newFlap);
newFlap.x = 0;
newFlap.y = 0;
}

Click Control – Test Movie to test the movie. When you click on the stamp, the flap should appear on the stage in the upper left corner. You will need to change the x and y values in the openFlap function to move the flap on to the top of the envelope. Go back to the Actions panel and experiment with the x and y values until the flap is in the correct position.

Note: For the example, I drew an envelope that was 200 pixels wide and 130 pixels high. The X and Y positions for the envelope on the stage were both 200. After experimenting, I set the newFlap.x and newFlap.y positions to 200 and 142. This made the envelope flap appear to be fulling open when the stamp was clicked.

In the next tutorial, we will animate the flap to make it appear that the envelope is opening.

← Back

Join us in the Flash forum.