Flash ActionScript Tutorial: Tween Class Animation with One continueTo Method
This tutorial series show how to use Tween Class with other methods, e.g. continueTo method and yoyo method, to make a more interesting and complicated animation with ActionScript 3.
We already did some animation with the Tween Class. What if we want to do a bit more animation after the Tween Class? The continueTo Method and yoyo Method provide an easy solution to that.
The continueTo Method instruct the tweened animation to continue tweening from its current animation point to a new finish and duration point.
The yoyo Method instructs the tweened animation to play in reverse from its last direction of tweened objects.
Flash Tutorial Content:
We already learned how to do flash animation with Tween Class. This Flash ActionScript tutorial series show how to do more animation after the Tween Class. The continueTo Method instruct the tweened animation to continue tweening from its current animation point to a new finish and duration point.
The finished Flash Movie of this tutorial is shown as above. The first motion is used with Tween Class. The second motion is used with continueTo Method. The second motion will be started when the first motion is finished.
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);
}
Download Flash Source File:
Remarks:
This Flash ActionScript tutorial showed how to do animation with Tween Class and continueTo method. The next flash tutorial will do a bit more complicated animation with continueTo Method.