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

Clairvoyance: 08:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

Flash ActionScript 3 scaleY to Open an Envelope


Now that we have programmed the envelope flap in our FlashR animation to appear fully open above the envelope when the stamp button is clicked, we need to refine the animation to make it appear that the flap is slowly opening. We will do this by controlling two properties of the flap. Remember, the newFlap object is a variable which references the FlapAni movie clip in the Library. We use this var to make the flap appear on the stage.

As a quick review, in the last tutorial, we programmed a function called openFlap to add a newFlap object to the Display List. We did this with the addChild code. We also set the initial position for the newFlap.x and newFlap.y properties. This placed the bottom of the flap at the top edge of the envelope. As mentioned before, your values for the x and y position on the stage may vary depending on the size and location of your envelope.

The first thing that we need to do is to experiment to find a newFlap.y value that will place the flap below the top edge of the envelope, and therefore out of sight at the beginning of the animation. In fact, we want the point of the triangular flap to be just below the top edge of the envelope. While you are experimenting, it may be easier to move the flap 100 pixels to the right by setting the newFlap.x to 300 (an addition of 100). This will make the flap partially visible on the right side of the envelope. After experimenting, I found that a newFlap.y value of 200 was what I needed. This is our new initial position for the flap. Don't forget to put the newFlap.x value back to the original value before moving on to the next step.

  1. We need to change the existing code from the last tutorial to reflect our new newFlap.y value of 200. Test your movie after making this change and you should not see the flap when you click on the stamp button.

    newFlap.y = 200;

    For our animation, we want the flap to slowly move upward to above the envelope. At the same time, we will need to scale the flap open from an initial scale value of zero. By starting with the scale set to zero, we can slowing scale the flap to fully open. The y value will move the flap upward but it is the scale value that will make the flap appear to open.

  2. The next change to the function will be the addition of the code that will set the scaleY to zero and flatten the flap.

    newFlap.scaleY = 0;

    Now we need to work on the part of the animation that will open the flap. There are several ways to do this with ActionScript. In this tutorial, we will used an Event Listener attached to the stage to run a second function which we will call scaleFlap. We will place this second function inside the openFlap function.

  3. Under the scaleY code, let's add the Event Listener to the stage. This is what will run the scaleFlap function.

    stage.addEventListener(Event.ENTER_FRAME, scaleFlap);

  4. Next, add the second function. Copy and paste this code into the openFlap function.

    function scaleFlap(event:Event):void
    {
    if (newFlap.scaleY>= 1 )
    { stage.removeEventListener(Event.ENTER_FRAME, scaleFlap); }
    else
    { newFlap.scaleY +=.05;
    newFlap.y -= 2.9;}
    }

    Let's examine the code. The first if statement will check the scaleY value to see if it is greater than or equal to 1. The number 1 represents a scale value of 100%). If the condition is true, we will remove the Event Listener and stop the animation.

    If the condition is false, we will continue the animation by increasing the scaleY value by .05 and moving the flap upward by a negative 2.9. (On the Flash stage, we move upward by decreasing the number value of the Y position.) This will continue with each new frame until the condition for the if statement is true.

    Again, these number values may be different for your movie due to the size of your envelope and the location of your envelope on the stage. Here is the final animation.

Join us in the Flash forum.




Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope to Twitter Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope to Facebook Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope to MySpace Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope to Del.icio.us Digg Flash+ActionScript+3+scaleY+to+Open+an+Envelope Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope to Yahoo My Web Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope to Google Bookmarks Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope to Stumbleupon Add Flash+ActionScript+3+scaleY+to+Open+an+Envelope 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
Duplicate Background Layers in Motion 5

Ken Burns Effect In Motion - Record Keyframes

Ken Burns Effect In Motion 5 - Set Up

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