logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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




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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Animating Color of Shapes in Motion 5

Motion 5 Parallax Effect - The Graphics

Animate Lower Third in Motion 5

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor