Beginning ActionScript 2.0 2006

Chapter 16

Starting position

First movement

Second movement

Third movement

Etc...

Figure 16-6

The choice of what fraction of the distance to move each time is dependent on how fast you want the deceleration to occur. A small fraction results in slow deceleration, whereas a value of one moves the movie clip instantly from its start point to its end point. The following equation determines what the next movie clip position should be:

newPosition = oldPosition + targetPosition – oldPosition easingFactor

If a movie clip starts at x position 0, targets x position 100, and uses an easing factor of 3, the clip will start with the following easing values:

388

Using ActionScript for Animation

Subsequent values will be 91.2, 94.1, 96.1, 97.4, 98.2, 98.8, 99.2, 99.5, 99.6, and so on. The numbers continue to get closer and closer to 100, but they never actually reach it. Mathematically, it is actually impossible for the target number to ever be reached; however, computer precision is limited, and once it gets close to the target point, you will no longer see any motion.

Give easing out a try.

In this exercise you create an ease-out effect and see how different easing factors impact the effect.

1.Create a new Macromedia Flash document.

2.Click the first frame in the timeline, open the Actions panel, and type in the following ActionScript code:

var targetX:Number = 400; var easingFactor:Number = 10;

this.createEmptyMovieClip(“holderClip”, this.getNextHighestDepth());

holderClip.createEmptyMovieClip(“square”, this.getNextHighestDepth()); holderClip.square.moveTo(0, 0);

holderClip.square.lineStyle(1, 0x000000); holderClip.square.lineTo(10, 0); holderClip.square.lineTo(10, 10); holderClip.square.lineTo(0, 10); holderClip.square.lineTo(0, 0);

holderClip.square._x = 0; holderClip.square._y = 200;

var intervalID = setInterval(updateAnimation, 20); function updateAnimation()

{

holderClip.square._x += (targetX - holderClip.square._x) / easingFactor; trace(“New x value: “ + holderClip.square._x);

if (targetX - holderClip.square._x < 0.5)

{

clearInterval(intervalID);

}

updateAfterEvent();

}

389

Chapter 16

3.Select File Save As, rename the file tryItOut_easingOut.fla, and save it to a folder of your choosing.

4.Select Control Test Movie.

5.Test the movie with different values of easingFactor to see what the effects are.

How It Works

This example creates a movie clip that can be animated, gives it a destination, and then sends it on its way.

First, a destination that corresponds with the targetPosition variable from the earlier equation is given:

var targetX:Number = 400;

An easing factor is selected (it can be any number from 1 upward; a value of 1 represents no easing, and a value of 100 or greater represents very slow easing):

var easingFactor:Number = 10;

A base movie clip is created, a movie clip is created within that, and then a shape is drawn within the nested movie clip to make the easing effect visible:

this.createEmptyMovieClip(“holderClip”, this.getNextHighestDepth());

holderClip.createEmptyMovieClip(“square”, this.getNextHighestDepth()); holderClip.square.moveTo(0, 0);

holderClip.square.lineStyle(1, 0x000000); holderClip.square.lineTo(10, 0); holderClip.square.lineTo(10, 10); holderClip.square.lineTo(0, 10); holderClip.square.lineTo(0, 0);

The movie clip is given a starting position:

holderClip.square._x = 0; holderClip.square._y = 200;

The setInterval() animation technique is used this time. Every time the updateAnimation() function is called, the movie clip position is recalculated:

var intervalID = setInterval(updateAnimation, 20); function updateAnimation()

{

// ...

}

Within the update animation function, the new movie clip position is calculated and assigned to the movie clip’s _x property:

holderClip.square._x += (targetX - holderClip.square._x) / easingFactor;

390

Using ActionScript for Animation

When the movie clip gets close enough to the target position, the easing is stopped, and the movie clip is snapped to the target position:

if (targetX - holderClip.square._x < 0.5)

{

holderClip.square._x = targetX; clearInterval(intervalID);

}

updateAfterEvent()is used by the setInterval() animation technique to make the animation smoother:

updateAfterEvent();

Play with different values of easingFactor to see different easing rates.

What about easing in?

Easing In

Easing in, or acceleration, is done a bit differently than easing out. Though the concept is the same, a couple of problems exist with just reversing the ease-out process. The first problem is that determining how far to go for the next step requires knowledge of how far it went in the previous step. This means some information needs to be kept for each movement and used for the calculation for the next movement. The second problem is that simply reversing the process results in an acceleration that is too fast for most purposes and does not look quite as natural.

Turning to some simple physics gives you another way of accelerating a movie clip. Figure 16-7 shows what the acceleration process looks like.

Starting position

...

Figure 16-7

Take a look at the math that is behind the physics of acceleration. Although to accelerate generally means to go faster, to make this work you need something more precise. To accelerate an object means to increase the speed of that object. Speed refers to the distance traveled for a specific period of time:

speed = distance time

To accelerate an object, you increase the speed repeatedly for each given period of time. To increase the speed, you continuously increase the distance traveled for each given period of time. Figure 16-8 illustrates this.

391

Chapter 16

Starting position

First movement

20 px

Second movement

40 px

Third movement

60 px

Fourth movement

80 px

Etc...

Figure 16-8

Implemented downward, the principles shown here are perfect for accurately modeling the effects of gravity.

If you can remember the last distance traveled by the movie clip, calculating the next distance to travel is an easy matter:

newPosition = currentPosition + distanceToTravel

392

Using ActionScript for Animation

After the calculation has been performed, the distanceToTravel variable is updated so that the next movement will travel further on the screen:

distanceToTravel = distanceToTravel + accelerationFactor

The acceleration factor can range from 0 for no movement at all to any positive number. Typical acceleration factors are between 1 and 20.

With a movie clip starting at an x position of 0 and an acceleration factor of 20, you get the following values:

3.newPosition = 60 + 60 = 120 distanceToTravel = 60 + 20 = 80

4.newPosition = 120 + 80 = 200 distanceToTravel = 80 + 20 = 100

5.newPosition = 200 + 100 = 300 distanceToTravel = 100 + 20 = 120

In this exercise you create an acceleration effect, and see the impact of different easing factors on the effect.

1.Create a new Macromedia Flash document.

2.Click the first frame in the timeline, open the Actions panel (Window Development Panels Actions), and type in the following ActionScript code:

var accelerationRate:Number = 5;

this.createEmptyMovieClip(“holderClip”, this.getNextHighestDepth());

holderClip.createEmptyMovieClip(“square”, this.getNextHighestDepth()); holderClip.square.moveTo(0, 0);

holderClip.square.lineStyle(1, 0x000000); holderClip.square.lineTo(10, 0); holderClip.square.lineTo(10, 10); holderClip.square.lineTo(0, 10);

holderClip.square.lineTo(0, 0);

holderClip.square._x = 0; holderClip.square._y = 200; holderClip.square.speed = 0;

var intervalID = setInterval(updateAnimation, 30); function updateAnimation()

{

holderClip.square.speed += accelerationRate;

393

Chapter 16

holderClip.square._x += holderClip.square.speed;

if (holderClip.square._x > Stage.width)

{

clearInterval(intervalID);

}

trace(“New x value: “ + holderClip.square._x); updateAfterEvent();

}

3.Select File Save As, rename the file tryItOut_easingIn.fla, and save it to a folder of your choosing.

4.Select Control Test Movie.

5.Try testing the movie with different values of easingFactor and see what the effect is.

6.Update the code so that the first line in the updateAnimation() function is replaced with the following code:

if (holderClip.square.speed < 30)

{

holderClip.square.speed += accelerationRate;

}

else

{

holderClip.square.speed = 30;

}

7.Select Control Test Movie.

How It Works

This example creates a movie clip that can be animated, sets an acceleration rate, and then starts the animation.

First, the acceleration rate is set. A value of 5 gives an acceleration that is fairly fast, but still slow enough to be able to clearly tell that the speed at the beginning and the speed at the end are quite different:

var accelerationRate:Number = 5;

A base movie clip is created, a movie clip is created within that, and then a shape is drawn within the nested movie clip to make the easing effect visible:

this.createEmptyMovieClip(“holderClip”, this.getNextHighestDepth());

holderClip.createEmptyMovieClip(“square”, this.getNextHighestDepth()); holderClip.square.moveTo(0, 0);

holderClip.square.lineStyle(1, 0x000000); holderClip.square.lineTo(10, 0); holderClip.square.lineTo(10, 10); holderClip.square.lineTo(0, 10); holderClip.square.lineTo(0, 0);

394

Using ActionScript for Animation

The movie clip is given a starting position and a starting speed. The speed is stored as a property of the movie clip so that if multiple movie clips are undergoing acceleration, they can be individually accelerated quite easily:

holderClip.square._x = 0; holderClip.square._y = 200; holderClip.square.speed = 0;

The setInterval() animation technique is used here. Every time the updateAnimation() function is called, the movie clip position is recalculated:

var intervalID = setInterval(updateAnimation, 20); function updateAnimation()

{

// ...

}

Within the updateAnimation() function, the new movie clip position is calculated and assigned to the movie clip’s _x property. Each time the speed value goes up by a constant amount as dictated by the accelerationRate variable:

holderClip.square.speed += accelerationRate; holderClip.square._x += holderClip.square.speed;

The variation of this code causes the movie clip to accelerate until it reaches a speed of 30 pixels per frame, and then it maintains a constant speed until it leaves the screen:

if (holderClip.square.speed < 30)

{

holderClip.square.speed += accelerationRate;

}

else

{

holderClip.square.speed = 30;

}

holderClip.square._x += holderClip.square.speed;

After the movie clip goes off the stage, the animation is stopped:

if (holderClip.square._x > Stage.width)

{

clearInterval(intervalID);

}

The updateAfterEvent() function is used by the setInterval() animation technique to make the animation smoother:

updateAfterEvent();

Playing with different values of accelerationRate gives you a sense of what different acceleration rates look like on the screen. Here, there is no issue about numeric precision as there was for the ease-out example.

395

Chapter 16

Next, take a look at both of these easing techniques being used in an interactive keyboard-driven example.

Now you apply both types of easing/acceleration in a more interactive environment. At the end, you will have a helicopter that you can move with the arrow keys.

1.Create a new Macromedia Flash document.

2.Select Modify Document. In the dialog box that opens, click the Background Color swatch and enter color #6699FF into the color value text field.

3.Open the Library panel (Window Library) and from the menu at the top right of the panel, choose New Symbol.

4.Within the New Symbol dialog box, set the name to be helicopter. Make sure the Movie Clip radio button is selected. Click the Export for ActionScript checkbox to select it. If you do not see the checkbox, click the Advanced button on the bottom right of the panel to reveal additional options. Click OK.

Within the new movie clip, use the oval, line, and paint bucket tools to create something like the symbol shown magnified at 400% in Figure 16-9. Steps 5–9 cover the process.

Figure 16-9

5.Click the Oval tool in the Tools palette (Window Tools), choose black from the line color chooser, choose white from the background color chooser, and then draw an oval roughly 22 pixels wide by 11 pixels high. The top-middle of the oval should be touching the registration marker for the movie clip.

6.Use the Line tool to draw the rotor, the landing struts, and the tail. Make sure that the lines for the tail form a closed shape with no gap.

396

Using ActionScript for Animation

7.Choose the Paint Bucket tool, change the selected color to white, and then click inside the bounds of the tail area.

8.Rename the layer to Helicopter. Create a new layer by clicking the new layer button below the layer. Rename the new layer to Rear Rotor.

9.Click the Oval tool in the Tools palette, select a dark grey from the line color chooser, select a medium grey from the background color chooser, and draw a circle roughly 11 pixels in diameter centered around the top of the tail.

10.Click the Scene 1 button on top of the timeline to return to the main timeline. Click the first frame in the timeline, open the Actions panel (Window Development Panels Actions), and type in the following ActionScript code:

#include “tryItOut_helicopterAnimation.as”

11.Select File Save As, name the file tryItOut_helicopterAnimation.fla, choose an appropriate directory, and save it.

12.Create a new script file by selecting File New and choosing ActionScript File from the New Document panel.

13.Select File Save As and ensure it is showing the same directory containing the Flash project file. Give the file the name tryItOut_helicopterAnimation.as and save it.

14.Enter the following code into the new ActionScript file:

var ACCELERATION_RATE:Number = 0.4; var EASING_FACTOR:Number = 10;

var MOVEMENT_AMOUNT:Number = 7;

this.createEmptyMovieClip(“holderClip”, this.getNextHighestDepth()); holderClip.attachMovie(“helicopter”, “helicopter”, holderClip.getNextHighestDepth());

holderClip.helicopter.targetX = 275; holderClip.helicopter.verticalSpeed = 0; holderClip.helicopter._x = holderClip.helicopter.targetX; holderClip.helicopter._y = Stage.height - 14;

var intervalID:Number = setInterval(updateAnimation, 20); function updateAnimation()

{

checkKeys();

holderClip.helicopter._x += (holderClip.helicopter.targetX - ; holderClip.helicopter._x) / EASING_FACTOR;

holderClip.helicopter._rotation = ; Math.min((holderClip.helicopter.targetX - ; holderClip.helicopter._x) / 5, 20);

holderClip.helicopter.verticalSpeed += ACCELERATION_RATE;

holderClip.helicopter._y += holderClip.helicopter.verticalSpeed; if (holderClip.helicopter._y >= Stage.height - 14)

{

holderClip.helicopter._y = Stage.height - 14;

397