Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

About Continuing Animations

About Continuing Animations

What if you want to move the ball after the initial animation completes? There are at least two ways you can handle this. The first, and perhaps the most obvious solution, is to re-animate the ball using the onMotionFinished event handler function. While this solution works, the Tween class offers a simpler solution: the continueTo() method. The continueTo() method instructs the tweened animation to continue from its current value to a new value. You can see this in the following ActionScript:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var ball_tween:Object
= new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 3, true);
ball_tween.onMotionFinished = function() {
ball_tween.continueTo(0, 3);
};

After the initial tween finishes, the ball_mc movie clip tweens back to its original position at 0 pixels. You can see the function prototype for the continueTo() method in the following snippet (edited for space):

function continueTo (finish:Number, duration:Number):Void { 
/* omitted to save space. */
}

There are only two arguments that pass to the continueTo() method, instead of the seven arguments for the Tween method, as seen in the following snippet:

function Tween (obj, prop, func, begin, finish, duration, useSeconds) {
/* omitted to save space. */
}

The five missing arguments (obj, prop, func, begin, and useSeconds) in the continueTo() method use the arguments that you defined earlier in the call to the Tween class. When you call the continueTo() method, you assume the obj, prop, func (easing type), and useSeconds arguments are the same as in the earlier call to the Tween class. The continueTo() method uses the finish value from the call to the Tween class, instead of specifying a value for the begin argument.

But what does this all mean? Take another look at the following ActionScript:

import mx.transitions.Tween;
import mx.transitions.easing.*;
var ball_tween:Object
= new Tween(ball_mc, "_x", Regular.easeIn, 0, 300, 3, true);
ball_tween.onMotionFinished = function() {
ball_tween.continueTo(0, 3);
};

This code moves the ball_mc instance along the X-axis from 0 pixels to 300 pixels in three seconds. After the animation finishes, the onMotionFinished event handler triggers and calls the continueTo() method. The continueTo() method tells the target object (ball_mc) to proceed from its current position and animate for three seconds along the X-axis to 0 pixels, and to use the same easing method. You use the values that you specify in the earlier call to the Tween constructor for any parameters that you don’t define in the continueTo() method. If you don’t specify a duration for the continueTo() method, it uses the duration you specify in the call to the Tween constructor.

Comments