g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Opening an Envelope - Program the Button

  1. 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.

  2. 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.

  3. 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();
    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();
    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.

Add Opening+an+Envelope+%2D+Program+the+Button to Twitter Add Opening+an+Envelope+%2D+Program+the+Button to Facebook Add Opening+an+Envelope+%2D+Program+the+Button to MySpace Add Opening+an+Envelope+%2D+Program+the+Button to Digg Opening+an+Envelope+%2D+Program+the+Button Add Opening+an+Envelope+%2D+Program+the+Button to Yahoo My Web Add Opening+an+Envelope+%2D+Program+the+Button to Google Bookmarks Add Opening+an+Envelope+%2D+Program+the+Button to Stumbleupon Add Opening+an+Envelope+%2D+Program+the+Button to Reddit


RSS | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor