Flash ActionScript 3 scaleY to Open an Envelope

Now that we have programmed the envelope flap in our Flash^R 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.

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

	Diane Cipollo BellaOnline's Flash and Animation Editor