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
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

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

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

  3. After adding the ActionScript to the Actions panel, you can close the Actions panel.

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




Add Add+ActionScript+to+Button+for+Envelope+Animation to Twitter Add Add+ActionScript+to+Button+for+Envelope+Animation to Facebook Add Add+ActionScript+to+Button+for+Envelope+Animation to MySpace Add Add+ActionScript+to+Button+for+Envelope+Animation to Del.icio.us Digg Add+ActionScript+to+Button+for+Envelope+Animation Add Add+ActionScript+to+Button+for+Envelope+Animation to Yahoo My Web Add Add+ActionScript+to+Button+for+Envelope+Animation to Google Bookmarks Add Add+ActionScript+to+Button+for+Envelope+Animation to Stumbleupon Add Add+ActionScript+to+Button+for+Envelope+Animation to Reddit



 



RSS | Related Articles | 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 © 2013 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
Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

Animated Title in Motion

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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor