ActionScript® 3.0 Reference for the Adobe® Flash® Platform
Home  |  Show Packages and Classes List |  Packages  |  Classes  |  What's New  |  Index  |  Appendixes
fl.transitions 

Tween  - AS3 Flash

Packagefl.transitions
Classpublic class Tween
InheritanceTween Inheritance EventDispatcher Inheritance Object

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The Tween class lets you use ActionScript to move, resize, and fade movie clips by specifying a property of the target movie clip to animate over a number of frames or seconds.

The Tween class also lets you specify a variety of easing methods. "Easing" refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic. The fl.transitions.easing package provides many easing methods that contain equations for this acceleration and deceleration, which change the easing animation accordingly.

To use the methods and properties of the Tween class, you use the new operator with the constructor function to create an instance of the class, and you specify an easing method as a parameter. For example:

 import fl.transitions.Tween;
 import fl.transitions.easing.*;
 var myTween:Tween = new Tween(myObject, "x", Elastic.easeOut, 0, 300, 3, true);
 

View the examples

Related API Elements



Public Properties
 PropertyDefined By
  begin : Number = NaN
The initial value of the target object's designated property before the tween starts.
Tween
 Inheritedconstructor : Object
A reference to the class object or constructor function for a given object instance.
Object
  duration : Number
The duration of the tweened animation in frames or seconds.
Tween
  finish : Number
A number indicating the ending value of the target object property that is to be tweened.
Tween
  FPS : Number
The number of frames per second calculated into the tweened animation.
Tween
  func : Function
The easing function which is used with the tween.
Tween
  isPlaying : Boolean = false
Indicates whether the tween is currently playing.
Tween
  looping : Boolean = false
Indicates whether the tween will loop.
Tween
  obj : Object = null
The target object that is being tweened.
Tween
  position : Number
The current value of the target object property being tweened.
Tween
  prop : String
The name of the property affected by the tween of the target object.
Tween
  time : Number
The current time within the duration of the animation.
Tween
  useSeconds : Boolean = false
Indicates whether the tween plays over a period of frames or seconds.
Tween
Public Methods
 MethodDefined By
  
Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)
Creates an instance of the Tween class.
Tween
 Inherited
addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.
EventDispatcher
  
continueTo(finish:Number, duration:Number):void
Instructs the tweened animation to continue tweening from its current animation point to a new finish and duration point.
Tween
 Inherited
Dispatches an event into the event flow.
EventDispatcher
  
Forwards the tweened animation directly to the final value of the tweened animation.
Tween
 Inherited
Checks whether the EventDispatcher object has any listeners registered for a specific type of event.
EventDispatcher
 Inherited
Indicates whether an object has a specified property defined.
Object
 Inherited
Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.
Object
  
Forwards the tweened animation to the next frame of an animation that was stopped.
Tween
  
Plays the previous frame of the tweened animation from the current stopping point of an animation that was stopped.
Tween
 Inherited
Indicates whether the specified property exists and is enumerable.
Object
 Inherited
removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void
Removes a listener from the EventDispatcher object.
EventDispatcher
  
Resumes the play of a tweened animation that has been stopped.
Tween
  
Moves the play of a tweened animation back to its starting value.
Tween
 Inherited
Sets the availability of a dynamic property for loop operations.
Object
  
Starts the play of a tweened animation from its starting point.
Tween
  
Stops the play of a tweened animation at its current value.
Tween
 Inherited
Returns the string representation of this object, formatted according to locale-specific conventions.
Object
 Inherited
Returns the string representation of the specified object.
Object
 Inherited
Returns the primitive value of the specified object.
Object
 Inherited
Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type.
EventDispatcher
  
Instructs the tweened animation to play in reverse from its last direction of tweened property increments.
Tween
Events
 Event Summary Defined By
 Inherited[broadcast event] Dispatched when the Flash Player or AIR application gains operating system focus and becomes active.EventDispatcher
 Inherited[broadcast event] Dispatched when the Flash Player or AIR application operating loses system focus and is becoming inactive.EventDispatcher
   Indicates that the Tween has changed and the screen has been updated.Tween
   Indicates that the Tween has reached the end and finished.Tween
   Indicates that the Tween has restarted playing from the beginning in looping mode.Tween
   Indicates that the Tween has resumed playing after being paused.Tween
   Indicates that the motion has started playing.Tween
   Indicates that the Tween has been stopped with an explicit call to Tween.stop().Tween
Property Detail

begin

property
public var begin:Number = NaN

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The initial value of the target object's designated property before the tween starts.

duration

property 
duration:Number

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The duration of the tweened animation in frames or seconds. This property is set as a parameter when creating a new Tween instance or when calling the Tween.yoyo() method.



Implementation
    public function get duration():Number
    public function set duration(value:Number):void

finish

property 
finish:Number

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

A number indicating the ending value of the target object property that is to be tweened. This property is set as a parameter when creating a new Tween instance or when calling the Tween.yoyo() method.



Implementation
    public function get finish():Number
    public function set finish(value:Number):void

Related API Elements

FPS

property 
FPS:Number

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The number of frames per second calculated into the tweened animation. By default the current Stage frame rate is used to calculate the tweened animation. Setting this property recalculates the number of increments in the animated property that is displayed each second to the Tween.FPS property rather than the current Stage frame rate. Setting the Tween.FPS property does not change the actual frame rate of the Stage.

Note: The Tween.FPS property returns undefined unless it is first set explicitly.



Implementation
    public function get FPS():Number
    public function set FPS(value:Number):void

Example  ( How to use this example )
The following example shows how you can override the default frame rate for a programmatic tween in Flash Professional by setting the Tween object's FPS property. Example provided by ActionScriptExamples.com.
import fl.transitions.Tween;
import fl.transitions.easing.*;
 
var tween:Tween = new Tween(mc, "x", Elastic.easeOut, 0, 300, 3, true);
tween.FPS = 60;
 
mc.addEventListener(MouseEvent.CLICK, onClick);
 
function onClick(evt:MouseEvent):void {
    tween.start();
}

func

property 
public var func:Function

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The easing function which is used with the tween.

isPlaying

property 
public var isPlaying:Boolean = false

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates whether the tween is currently playing.

looping

property 
public var looping:Boolean = false

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates whether the tween will loop. If the value is true, the tween will restart indefinitely each time the tween has completed. If the value is false, the tween will play only once.

obj

property 
public var obj:Object = null

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The target object that is being tweened.

position

property 
position:Number

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The current value of the target object property being tweened. This value updates with each drawn frame of the tweened animation.



Implementation
    public function get position():Number
    public function set position(value:Number):void

prop

property 
public var prop:String

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The name of the property affected by the tween of the target object.

time

property 
time:Number

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

The current time within the duration of the animation.



Implementation
    public function get time():Number
    public function set time(value:Number):void

useSeconds

property 
public var useSeconds:Boolean = false

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates whether the tween plays over a period of frames or seconds. A value of true will cause the tween to animate over a period of seconds specified by the duration property. A value of false will cause the tween to animate over a period of frames.

Constructor Detail

Tween

()Constructor
public function Tween(obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean = false)

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Creates an instance of the Tween class. Use the constructor function with the new operator: var myTween:Tween = new Tween().

Parameters
obj:Object — Object that the Tween targets.
 
prop:String — Name of the property (obj parameter value) that will be affected.
 
func:Function — Name of the easing function to use.
 
begin:Number — Starting value of the prop parameter.
 
finish:Number — A number indicating the ending value of prop parameter (the target object property to be tweened).
 
duration:Number — Length of time of the motion; set to infinity if negative or omitted.
 
useSeconds:Boolean (default = false) — A flag specifying whether to use seconds instead of frames. The function uses seconds if true or frames in relation to the value specified in the duration parameter if false.

Related API Elements

Method Detail

continueTo

()method
public function continueTo(finish:Number, duration:Number):void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Instructs the tweened animation to continue tweening from its current animation point to a new finish and duration point.

Parameters

finish:Number — A number indicating the ending value of the target object property that is to be tweened.
 
duration:Number — A number indicating the length of time or number of frames for the tween motion; duration is measured in length of time if the Tween.start() useSeconds parameter is set to true, or measured in frames if it is set to false.

Related API Elements

fforward

()method 
public function fforward():void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Forwards the tweened animation directly to the final value of the tweened animation.

nextFrame

()method 
public function nextFrame():void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Forwards the tweened animation to the next frame of an animation that was stopped. Use this method to forward a frame at a time of a tweened animation after you use the Tween.stop() method to stop it.

Note: Use this method on frame-based tweens only. A tween is set to frame based at its creation by setting the useSeconds parameter to false.

prevFrame

()method 
public function prevFrame():void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Plays the previous frame of the tweened animation from the current stopping point of an animation that was stopped. Use this method to play a tweened animation backwards one frame at a time after you use the Tween.stop() method to stop it.

Note: Use this method on frame-based tweens only. A tween is set to frame based at its creation by setting the Tween.start() useSeconds parameter to false.

Related API Elements

resume

()method 
public function resume():void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Resumes the play of a tweened animation that has been stopped. Use this method to continue a tweened animation after you have stopped it by using the Tween.stop() method.

Note: Use this method on frame-based tweens only. A tween is set to be frame based at its creation by setting the useSeconds parameter to false.

rewind

()method 
public function rewind(t:Number = 0):void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Moves the play of a tweened animation back to its starting value. If Tween.rewind() is called while the tweened animation is still playing, the animation rewinds to its starting value and continues playing. If Tween.rewind() is called while the tweened animation has been stopped or has finished its animation, the tweened animation rewinds to its starting value and remains stopped. Use this method to rewind a tweened animation to its starting point after you have stopped it by using the Tween.stop() method or to rewind a tweened animation during its play.

Parameters

t:Number (default = 0) — Starting value.

start

()method 
public function start():void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Starts the play of a tweened animation from its starting point. This method is used for restarting a Tween from the beginning of its animation after it stops or has completed its animation.

stop

()method 
public function stop():void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Stops the play of a tweened animation at its current value.

yoyo

()method 
public function yoyo():void

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Instructs the tweened animation to play in reverse from its last direction of tweened property increments. If this method is called before a Tween object's animation is complete, the animation abruptly jumps to the end of its play and then plays in a reverse direction from that point. You can achieve an effect of an animation completing its entire play and then reversing its entire play by calling the Tween.yoyo() method within a TweenEvent.MOTION_FINISH event handler. This process ensures that the reverse effect of the Tween.yoyo() method does not begin until the current tweened animation is complete.

Event Detail

motionChange

Event
Event Object Type: fl.transitions.TweenEvent
property TweenEvent.type = fl.transitions.TweenEvent.MOTION_CHANGE

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates that the Tween has changed and the screen has been updated.

The properties of the event object have the following values:

PropertyValue
bubblesfalse
cancelablefalse
currentTargetThe object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget property.
targetThe object that dispatched the event; it is not always the object listening for the event. Use the currentTarget property to always access the object listening for the event.
timeThe time of the Tween when the event occurred.
positionThe value of the property controlled by the Tween, when the event occurred.

motionFinish

Event  
Event Object Type: fl.transitions.TweenEvent
property TweenEvent.type = fl.transitions.TweenEvent.MOTION_FINISH

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates that the Tween has reached the end and finished.

The properties of the event object have the following values:

PropertyValue
bubblesfalse
cancelablefalse
currentTargetThe object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget property.
targetThe object that dispatched the event; it is not always the object listening for the event. Use the currentTarget property to always access the object listening for the event.
timeThe time of the Tween when the event occurred.
positionThe value of the property controlled by the Tween, when the event occurred.

motionLoop

Event  
Event Object Type: fl.transitions.TweenEvent
property TweenEvent.type = fl.transitions.TweenEvent.MOTION_LOOP

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates that the Tween has restarted playing from the beginning in looping mode.

The properties of the event object have the following values:

PropertyValue
bubblesfalse
cancelablefalse
currentTargetThe object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget property.
targetThe object that dispatched the event; it is not always the object listening for the event. Use the currentTarget property to always access the object listening for the event.
timeThe time of the Tween when the event occurred.
positionThe value of the property controlled by the Tween, when the event occurred.

motionResume

Event  
Event Object Type: fl.transitions.TweenEvent
property TweenEvent.type = fl.transitions.TweenEvent.MOTION_RESUME

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates that the Tween has resumed playing after being paused.

The properties of the event object have the following values:

PropertyValue
bubblesfalse
cancelablefalse
currentTargetThe object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget property.
targetThe object that dispatched the event; it is not always the object listening for the event. Use the currentTarget property to always access the object listening for the event.
timeThe time of the Tween when the event occurred.
positionThe value of the property controlled by the Tween, when the event occurred.

motionStart

Event  
Event Object Type: fl.transitions.TweenEvent
property TweenEvent.type = fl.transitions.TweenEvent.MOTION_START

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates that the motion has started playing.

The properties of the event object have the following values:

PropertyValue
bubblesfalse
cancelablefalse
currentTargetThe object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget property.
targetThe object that dispatched the event; it is not always the object listening for the event. Use the currentTarget property to always access the object listening for the event.
timeThe time of the Tween when the event occurred.
positionThe value of the property controlled by the Tween, when the event occurred.

motionStop

Event  
Event Object Type: fl.transitions.TweenEvent
property TweenEvent.type = fl.transitions.TweenEvent.MOTION_STOP

Language Version: ActionScript 3.0
Product Version: Flash CS3
Runtime Versions: Flash Player 9, AIR 1.0

Indicates that the Tween has been stopped with an explicit call to Tween.stop().

The properties of the event object have the following values:

PropertyValue
bubblesfalse
cancelablefalse
currentTargetThe object that defines the event listener that handles the event. For example, if you use myButton.addEventListener() to register an event listener, myButton is the value of the currentTarget property.
targetThe object that dispatched the event; it is not always the object listening for the event. Use the currentTarget property to always access the object listening for the event.
timeThe time of the Tween when the event occurred.
positionThe value of the property controlled by the Tween, when the event occurred.
Tween_class.as

This example animates a rectangle using the value provided by entering a number in a text field. The text field sets the width property of the tweened square to match the provided value. The value is stored in the variable userNumber, which is then passed to the Tween constructor as a parameter for the width of the shape.

Note: For the classes in the fl.transitions package, you need to use an import statement, even in the Actions panel of Flash Professional (for most classes you do not need the import statement within the Actions panel). Use * at the package level to include all the classes in the package, or import each one individually.

import fl.transitions.Tween;
import fl.transitions.easing.*;
   
//create a Sprite instance
var mySprite:Sprite = new Sprite()
   
// create an input text field
var myTextField:TextField = new TextField();
   
myTextField.type = TextFieldType.INPUT;
myTextField.width = 180;
myTextField.height = 20;
myTextField.x = 20;
myTextField.y = 140;
myTextField.border = true;
myTextField.text = "Type a number here and press Enter";
myTextField.restrict = "0-9";   
 
addChild(myTextField);

// add a listener when the user clicks in the text field
myTextField.addEventListener(MouseEvent.CLICK, fieldClickHandler);

// add a listener for a key press
myTextField.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
 
// clear the text field when the user clicks in it to enter a value
function fieldClickHandler(event:MouseEvent):void {
    myTextField.text = "";
}

// if the key pressed is the Enter key
// change the values of the box's width based on the value provided
function keyDownHandler(event:KeyboardEvent):void {
     if (event.keyCode == Keyboard.ENTER) {  

     mySprite.graphics.clear();
     var userNumber:Number = new Number(myTextField.text);
     mySprite.graphics.beginFill(0x666999);
     mySprite.graphics.drawRect(0, 0, 40, 120);
     addChild(mySprite);
     //provide tween values, including passing the variable userNumber for the width at
     //the end of the tween
     var myTween:Tween = new Tween(mySprite, "width", Elastic.easeOut, 0, userNumber, 4, true);
     }
} 

Tween_class2.as

This example is basically the same as the previous one, but uses the advanced drawing API to create the drawn shape.
import fl.transitions.Tween;
import fl.transitions.easing.*;

//create a Sprite instance
var mySprite:Sprite = new Sprite()

// create an input text field
var myTextField:TextField = new TextField();
 
myTextField.type = TextFieldType.INPUT;
myTextField.width = 180;
myTextField.height = 20;
myTextField.x = 20;
myTextField.y = 140;
myTextField.border = true;
myTextField.text = "Type a number here and press Enter";
myTextField.restrict = "0-9";   
 
addChild(myTextField);

// add a listener when the user clicks in the text field
myTextField.addEventListener(MouseEvent.CLICK, fieldClickHandler);


// add a listener for a key press
myTextField.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
 
// clear the text field when the user clicks in it to enter a value
function fieldClickHandler(event:MouseEvent):void {
    myTextField.text = "";
}

// if the key pressed is the Enter key
// change the values of the box's width based on the value provided
function keyDownHandler(event:KeyboardEvent):void {
     if (event.keyCode == Keyboard.ENTER) { 

     mySprite.graphics.clear();
    var userNumber:Number = new Number(myTextField.text);

    // Set up drawing data
    // stroke object
    var myStroke:GraphicsStroke = new GraphicsStroke(2);
    myStroke.joints = JointStyle.MITER;
    myStroke.fill = new GraphicsSolidFill(0x102020); // solid stroke
           
    // fill object
    var myFill:GraphicsGradientFill = new GraphicsGradientFill();
    myFill.colors = [0xEEFFEE, 0x0000FF];
    myFill.matrix = new Matrix();
    myFill.matrix.createGradientBox(300, 300, 0);
           
    // path object
    var myPath:GraphicsPath = new GraphicsPath(new Vector.<int>(), new Vector.<Number>());
    myPath.commands.push(1,2,2,2,2);
    myPath.data.push(0,0, 240,0, 240,60, 0,60, 0,0);

    // combine the objects for a complete drawing
    var myDrawing:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
    myDrawing.push(myStroke, myFill, myPath);
           
    // render the drawing 
    mySprite.graphics.drawGraphicsData(myDrawing);
    addChild(mySprite);

    //provide tween values, including passing the variable userNumber for the width at
    //the end of the tween
     var myTween:Tween = new Tween(mySprite, "width", Elastic.easeOut, 0, userNumber, 4, true);
      }

}