Beginning ActionScript 2.0 2006

Chapter 17

{

myTween.stop();

myTween.prevFrame();

}

if (Key.isDown(Key.RIGHT) == true)

{

myTween.stop();

myTween.nextFrame();

}

}

Key.addListener(keyHandler);

prevFrame()

The prevFrame() method advances to the previous frame of a stopped tween. This method takes no parameters:

myTween.prevFrame();

See the nextFrame() method notes for sample code.

This method works only for frame-based tweens, where the useSeconds constructor argument is set to false. The nextFrame method works fine in both situations.

resume()

The resume() method continues a tween from where it last left off. This method takes no parameters:

myTween.resume();

A sample use of resume() might look like the following:

import mx.transitions.Tween;

var myTween:Tween = new Tween(circleClip, “_x”, ; mx.transitions.easing.Regular.easeOut, 100, 300, 5, true);

var isStopped:Boolean = false;

var keyHandler:Object = new Object(); keyHandler.onKeyDown = function()

{

if (Key.isDown(Key.SPACE) == true)

{

if (isStopped == true)

{

myTween.resume(); isStopped = false;

}

else

{

myTween.stop(); isStopped = true;

}

408

Automated Transitions

}

}

Key.addListener(keyHandler);

rewind()

The rewind() method goes back to the beginning of the tween, resetting the tweened property to its starting value. This method takes no parameters:

myTween.rewind();

See the fforward() method notes for sample code.

start()

The start() method starts a tween from its starting value, ignoring whether it was previously stopped partway through. This method takes no parameters. This method is not needed for the first invocation of a tween, because the tween will start immediately when created:

myTween.start();

A sample use of start() might look like the following:

import mx.transitions.Tween;

var myTween:Tween = new Tween(circleClip, “_x”, ; mx.transitions.easing.Regular.easeOut, 100, 300, 5, true);

var isStopped:Boolean = false;

var keyHandler:Object = new Object(); keyHandler.onKeyDown = function()

{

if (Key.isDown(Key.SPACE) == true)

{

if (isStopped == true)

{

myTween.start(); isStopped = false;

}

else

{

myTween.stop(); isStopped = true;

}

}

}

Key.addListener(keyHandler);

stop()

The stop() method stops a tween’s progress. This method takes no parameters:

myTween.stop();

See the start() method notes for sample code.

409

Chapter 17

yoyo()

The yoyo() method reverses the direction of the tween by swapping the start and end property values. The easing will take effect as if a new tween was created with swapped start and end values instead of simply playing the tween backwards. This method takes no parameters:

myTween.yoyo();

A sample use of yoyo() might look like the following:

import mx.transitions.Tween;

var myTween:Tween = new Tween(circleClip, “_x”, mx.transitions.easing.Regular.easeOut, 100, 300, 5, true); myTween.onMotionFinished = function()

{

this.yoyo();

}

This method needs to be called once for each time the direction is to be reversed. If the tween is still in progress, it will skip to the end before restarting the tween in the opposite direction.

Tween Class Properties and Events

The following table describes the properties that are available from each Tween class instance:

The following table describes the events that are available from each Tween class instance:

410

Until now you’ve seen the transition package name written out in full, such as mx.transitions.easing

.Regular.easeOut. This is a fair bit to put in each Tween class declaration, so from this point on, imports will be used so that the statement import mx.transitions.easing.* enables you to refer to an easing function through a short name such as Regular.easeOut.

This example uses the Tween class to animate a box so that it bounces into position.

1.Create a new Macromedia Flash document.

2.Select Modify Document, change the frame rate to 24 fps, and click OK.

3.Open the Actions panel (Window Development Panels Actions), and type the following ActionScript code:

#include “tryItOut_tween.as”

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

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

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

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

import mx.transitions.Tween; import mx.transitions.easing.*;

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

var isGrowing:Boolean = true;

var myTween:Tween = new Tween(null, “”, Elastic.easeOut, 100, 0, 2, true); myTween.onMotionChanged = function()

{

if (isGrowing == true)

411

Chapter 17

{

drawBox(20, 20, 125+this.position, 200+this.position, ; this.position/2);

}

else

{

drawBox(20, 20, 250-this.position, 360-this.position, - ; this.position/2);

}

}

myTween.onMotionFinished = function()

{

isGrowing = !isGrowing; this.rewind(); this.start();

}

function drawBox(x:Number, y:Number, width:Number, height:Number, ; sidePush:Number):Void

{

curveClip.clear(); curveClip.lineStyle(1, 0x000000); curveClip.moveTo(x, y);

curveClip.curveTo(x+sidePush, y+height/2, x, y+height); curveClip.curveTo(x+width/2, y+height-sidePush, x+width, y+height); curveClip.curveTo(x+width-sidePush, y+height/2, x+width, y); curveClip.curveTo(x+width/2, y+sidePush, x, y);

}

8.Save the file, return to the Flash document, and select Control Test Movie.

How It Works

This example uses the curveTo() method to draw a box with curves instead of lines. Each curveTo() call draws a curved line between the previous point and a new point, with a control point determining the amount of curving taking place. Figure 17-1 shows four curveTo() segments. Each control point is exactly halfway between the two anchor points, and as each control point moves closer to the line joining the two corresponding anchor points, the curves straighten out, eventually becoming straight lines.

Figure 17-1

First, the Tween and the easing classes are imported for convenience of access. Normally it is best to separately import each class to be used in its own statement, however this can be relaxed with the easing

412

Automated Transitions

classes. The easing classes all belong together as a group, and it is likely that you will want ready access to the different types of easing for experimentation:

import mx.transitions.Tween; import mx.transitions.easing.*;

A base movie clip is created to hold the animation:

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

A variable tracks which direction the animation is going so that it properly expands and contracts the rectangle:

var isGrowing:Boolean = true;

The tween is used to animate the distance of the control points from the lines joining each corresponding pair of anchor points. The tween is not actually given a movie clip or a property to adjust; it just keeps track through its own internal property value. The tween’s internal property goes from 100 to zero in two seconds. The property is used to represent the distance of each curve’s control point from the line connecting the two anchor points, as shown in Figure 17-1. When the tween reaches zero, the shape becomes a perfect rectangle.

var myTween:Tween = new Tween(null, “”, Elastic.easeOut, 100, 0, 2, true);

As the value changes throughout the tween, onMotionChanged is continually called, which calls the code to redraw the box with the new sidePush value passed in from the tween in the form of this.position:

myTween.onMotionChanged = function()

{

if (isGrowing == true)

{

drawBox(20, 20, 125+this.position, 200+this.position, ; this.position/2);

}

else

{

drawBox(20, 20, 250-this.position, 360-this.position, - ; this.position/2);

}

}

When the animation is done, onMotionFinished is called. It switches the isGrowing variable so that the animation shrinks to its final position instead of expanding, or vice versa. It then returns the tween to its starting value of 100 and starts the tween in motion again.

myTween.onMotionFinished = function()

{

isGrowing = !isGrowing; this.rewind(); this.start();

}

413

Chapter 17

The drawBox() function creates the actual box shape with the designated size and in the designated location. Every time the tween changes its value, this function is called again with values modified according to the tween value. Each call to curveTo() makes one side of the rectangle. The last two x and y values for each curveTo() call give the location for the end of the curve, where the start of the curve is automatically set to be the end point of the previous curve. The first two x and y values for each curveTo() call represent the control point for that curve. Each control point is made to be exactly halfway between the two curve anchor points, but pulled away from the invisible line joining the lines by a factor set by the sidePush variable.

function drawBox(x:Number, y:Number, width:Number, height:Number, ; sidePush:Number):Void

{

curveClip.clear(); curveClip.lineStyle(1, 0x000000); curveClip.moveTo(x, y);

curveClip.curveTo(x+sidePush, y+height/2, x, y+height); curveClip.curveTo(x+width/2, y+height-sidePush, x+width, y+height); curveClip.curveTo(x+width-sidePush, y+height/2, x+width, y); curveClip.curveTo(x+width/2, y+sidePush, x, y);

}

Next, you see how to call multiple tweens in parallel.

Playing Tweens in Parallel

Tweening one value at a time is certainly nice, but many times multiple values need to be tweened at once. For example, rolling a ball down a decline requires tweening each of the _x, _y, and _rotation values. Each property to be tweened requires its own instance of the Tween class, as is shown in the following snippet that rolls a ball down a slope:

import mx.transitions.Tween; import mx.transitions.easing.*;

var xTween:Tween = new Tween(0, new Tween(ballClip, “_x”, Regular.easeIn, ; ballClip._x, ballClip._x + 190, 2, true);

var yTween:Tween = newTween(0, new Tween(ballClip, “_y”, Regular.easeIn, ; ballClip._y, ballClip._y + 69, 2, true);

var rotationTween:Tween = newTween(0, new Tween(ballClip, “_rotation”, ; Regular.easeIn, 0, 360, 2, true);

In the previous Try It Out exercise, you used a single tween to modify both the bounce effect and the zoom effect. Although this effect worked fairly nicely, it does not work in all situations, nor does it allow for repositioning of the rectangle. The next exercise adds that ability to the previous exercise.

This example uses several Tween instances to animate the position, dimensions, and effect of an elasticized box.

1.Open the completed tryItOut_tween.fla file from the previous Try It Out exercise, or open tryItOut_tween.fla from the book’s source files at <source file directory>/Chapter 17/.

414

Automated Transitions

2.Open the completed tryItOut_tween.as file from the previous Try It Out exercise, or open tryItOut_tween.as from the book’s source files at <source file directory>/Chapter 17/.

3.Update the code in the ActionScript file to look like the following:

import mx.transitions.Tween; import mx.transitions.easing.*;

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

var direction:Number = -1;

var sidePushAmount:Number = 50; var startWidth:Number = 125; var endWidth:Number = 400;

var startHeight:Number = 200; var endHeight:Number = 320; var startX:Number = 20;

var endX:Number = 75; var startY:Number = 20; var endY:Number = 40;

var tweenDuration:Number = 2;

var sidePushTween:Tween = new Tween(null, “”, Elastic.easeOut, ; sidePushAmount, 0, tweenDuration, true);

var widthTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startWidth, endWidth, tweenDuration, true);

var heightTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startHeight, endHeight, tweenDuration, true);

var xTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startX, endX, tweenDuration, true);

var yTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startY, endY, tweenDuration, true);

sidePushTween.onMotionChanged = function()

{

drawBox(xTween.position, yTween.position, widthTween.position, ; heightTween.position, this.position * direction);

}

sidePushTween.onMotionFinished = function()

{

direction *= -1; this.rewind(); this.start(); widthTween.yoyo(); heightTween.yoyo(); xTween.yoyo(); yTween.yoyo();

}

function drawBox(x:Number, y:Number, width:Number, height:Number, ; sidePush:Number):Void

{

curveClip.clear();

415

Chapter 17

curveClip.lineStyle(1, 0x000000); curveClip.moveTo(x, y);

curveClip.curveTo(x+sidePush, y+height/2, x, y+height); curveClip.curveTo(x+width/2, y+height-sidePush, x+width, y+height); curveClip.curveTo(x+width-sidePush, y+height/2, x+width, y); curveClip.curveTo(x+width/2, y+sidePush, x, y);

}

4.Save the file, return to the Flash document, and select Control Test Movie.

How It Works

This exercise is almost identical to the previous exercise; it’s just been modified a bit to allow for tweening multiple parameters.

You still track which direction the animation is going, but this time it’s just to make sure that the sidepush effect matches the zooming. If the rectangle is getting bigger, the sides start by pushing out. If the rectangle is getting smaller, the sides start by pulling in. Using a Number instead of a Boolean avoids having to use an if statement:

var direction:Number = -1;

Start and end values are defined for each tween. These values are brought out into separate variables for ease of modification:

var sidePushAmount:Number = 50; var startWidth:Number = 125; var endWidth:Number = 400;

var startHeight:Number = 200; var endHeight:Number = 320; var startX:Number = 20;

var endX:Number = 75; var startY:Number = 20; var endY:Number = 40;

var tweenDuration:Number = 2;

Five tweens are created to control five separate parameters. None of the tweens are directly linked up with external movie clips; instead, they are used only to tween ranges of numbers:

var sidePushTween:Tween = new Tween(null, “”, Elastic.easeOut, ; sidePushAmount, 0, tweenDuration, true);

var widthTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startWidth, endWidth, tweenDuration, true);

var heightTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startHeight, endHeight, tweenDuration, true);

var xTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startX, endX, tweenDuration, true);

var yTween:Tween = new Tween(null, “”, Elastic.easeOut, ; startY, endY, tweenDuration, true);

416

Automated Transitions

As the value changes throughout the side-push tween, onMotionChanged is continually called. This calls the code to redraw the box with the new sidePush value as well as the current values from the other tweens. It does not matter that the other tweens might update themselves at a slightly different pace. Every time the event is fired for the side-push tween, the box is drawn based on the current snapshot of the other tweens’ current position values. They will be close enough to create a smooth animation, even with slight variations in the numbers:

sidePushTween.onMotionChanged = function()

{

drawBox(xTween.position, yTween.position, widthTween.position, ; heightTween.position, this.position * direction);

}

When the animation is done, onMotionFinished is called. It switches the isGrowing variable so that the animation shrinks to its final position instead of expanding, or vice versa. It then returns the tween to its starting value of 100 and puts the tween in motion again. Because all of the tweens are being used in parallel for the same animation and take the same amount of time, only one onMotionFinished event handler is needed. Even if you tried reducing the animation interval for the x, y, width, or height tweens, the event is called on the one that finishes last, so the effect will still work:

sidePushTween.onMotionFinished = function()

{

direction *= -1; this.rewind(); this.start(); widthTween.yoyo(); heightTween.yoyo(); xTween.yoyo(); yTween.yoyo();

}

Now take a look at how to call multiple tweens in a sequence.

Playing Tweens in a Sequence

Playing a sequence of tweens is a little trickier than playing them in parallel, and somewhat messier as well. Take a look at how tweens can be chained together, and then take a look at a library that helps you with the chaining process.

To chain together a sequence of tweens, you need to know when each one finishes so that the next one can begin. This requires the use of onMotionFinished event. The following example uses three tweens each called in sequence. The second and third tweens are stopped until needed, which will be after the onMotionFinished event fires for the first and second tweens, respectively:

import mx.transitions.Tween; import mx.transitions.easing.*;

var tween1:Tween = new Tween(circleClip, “_x”, Regular.easeInOut, 0, 200, 2, true); var tween2:Tween = new Tween(circleClip, “_y”, Regular.easeInOut, 0, 300, 2, true);

417