Flash ActionScript Tutorial: Tween Class Animation with Two continueTo Method
The continueTo Method instruct the tweened animation to continue tweening from its current animation point to a new finish and duration point.
Flash Tutorial Content:
In previous Flash ActionScript tutorial, we only used one continueTo Method with a Tween Class. In this tutorial, we use two continueTo Method to make a more complicated animation.
The finished Flash Movie of this tutorial is shown as above. The first motion is used with Tween Class. The second motion and third motion are used with continueTo Method.
Flash ActionScript Codes:
//import transition classes
import fl.transitions.*;
import fl.transitions.easing.*;
//Destination location the specified movie clips will move to
var x2:Number = 300;
var y2:Number = 200;
//Tween animation in x-axis
var tweenX:Tween = new Tween(football_mc, "x", Regular.easeOut, football_mc.x, x2, 3, true);
//Tween animation in y-axis
var tweenY:Tween = new Tween(football_mc, "y", Regular.easeOut, football_mc.y, y2, 3, true);
//Add Listener to tweenX
//Listen when the motion of tweenX FINISHED
//Will call moveMore function when motion of tweenX FINISHED
tweenX.addEventListener(TweenEvent.MOTION_FINISH, moveMore);
function moveMore(event:TweenEvent):void {
output_txt.text = "tweenX motion is FINISHED." + "\n" + "The function moveMore is called." + "\n" + "The football is now moving to y-80";
//Instructs tweenY animation to continue tweening
//from its current animation point to y-80 in 3 seconds
tweenY.continueTo(80, 5);
//Remove Listener if no longer in use
//tweenX.removeEventListener(TweenEvent.MOTION_FINISH, moveMore);
}
//Add Listener to tweenY
//Listen when the motion of tweenY FINISHED
//Will call moveAgain function when motion of tweenY FINISHED
tweenY.addEventListener(TweenEvent.MOTION_FINISH, moveAgain);
function moveAgain(event:TweenEvent):void {
output_txt.text = "Both tweenX motion and tweenY are executed." + "\n" + "Either moveMore and moveAgain function is called." + "\n" + "Thus create a loop animation.";
//Instructs tweenX animation to continue tweening
//from its current animation point to x-50 in 3 seconds
tweenX.continueTo(50, 3);
//Instructs tweenY animation to continue tweening
//from its current animation point to y-200 in 3 seconds
tweenY.continueTo(200, 3);
//Remove Listener if no longer in use
//tweenY.removeEventListener(TweenEvent.MOTION_FINISH, moveAgain);
}
Download Flash Source File:
Remarks:
This Flash ActionScript tutorial showed how to do animation with Tween Class with two continueTo method. We already did some interesting animation with the continueTo Method. The next flash tutorial will show how to do a Loop Animation with continueTo Method.