Tween

Kind of class:public class
Package:org.casalib.transitions
Inherits from:Process < RemovableEventDispatcher < EventDispatcher
Known subclasses:
Version:11/11/08
Author:Aaron Clinger, Mike Creighton
Classpath:org.casalib.transitions.Tween
File last modified:Wednesday, 31 December 2008, 20:18:28
Simple and easily extendable tween/transition class.

Advantages of using this tween class over others:
  • Does not include any tweening equations, only the equation(s) a user defines.
  • Using the built in events you are able to tween more than one value.
  • Ability to tween any value, not only DisplayObject properties.
  • Works with all easing equations that follow the current time, start position, end position, total time standard.
Example:
  • package {
        import fl.motion.easing.Bounce;
        import flash.display.MovieClip;
        import org.casalib.events.TweenEvent;
        import org.casalib.transitions.Tween;
    
    
        public class MyExample extends MovieClip {
            protected var _tween:Tween;
    
    
            public function MyExample() {
                super();
    
                this._tween = new Tween(Bounce.easeOut, 0, 1, 2);
                this._tween.addEventListener(TweenEvent.UPDATE, this._onTweenPosition);
                this._tween.start();
            }
    
            protected function _onTweenPosition(e:TweenEvent):void {
                trace(e.position);
            }
        }
    }

    You can tween color by using ColorUtil's interpolateColor function:
    package {
        import fl.motion.easing.Linear;
        import flash.display.MovieClip;
        import flash.display.Sprite;
        import flash.geom.ColorTransform;
        import org.casalib.events.TweenEvent;
        import org.casalib.transitions.Tween;
        import org.casalib.util.ColorUtil;
    
    
        public class MyExample extends MovieClip {
            protected var _box:Sprite;
            protected var _finishColor:ColorTransform;
            protected var _tween:Tween;
    
    
            public function MyExample() {
                super();
    
                this._box = new Sprite();
                this._box.graphics.beginFill(0x0000FF);
                this._box.graphics.drawRect(0, 0, 250, 250);
                this._box.graphics.endFill();
    
                this.addChild(this._box);
    
                this._finishColor       = new ColorTransform();
                this._finishColor.color = 0xFF0000;
    
                this._tween = new Tween(Linear.easeNone, 0, 1, 1);
                this._tween.addEventListener(TweenEvent.UPDATE, this._onTweenPosition);
                this._tween.start();
            }
    
            protected function _onTweenPosition(e:TweenEvent):void {
                this._box.transform.colorTransform = ColorUtil.interpolateColor(new ColorTransform(), this._finishColor, e.progress);
            }
        }
    }

    If you want to tween an item on a ellipse you can use the Ellipse class and its getPointOfDegree function:
    package {
        import fl.motion.easing.Bounce;
        import flash.display.MovieClip;
        import flash.display.Sprite;
        import flash.geom.Point;
        import org.casalib.events.TweenEvent;
        import org.casalib.math.geom.Ellipse;
        import org.casalib.transitions.Tween;
    
    
        public class MyExample extends MovieClip {
            protected var _box:Sprite;
            protected var _tween:Tween;
            protected var _ellipse:Ellipse = new Ellipse(20, 50, 300, 200);
    
    
            public function MyExample() {
                super();
    
                this._box = new Sprite();
                this._box.graphics.beginFill(0xFF00FF);
                this._box.graphics.drawRect(0, 0, 25, 25);
                this._box.graphics.endFill();
    
                this.addChild(this._box);
    
                this._tween = new Tween(Bounce.easeOut, 0, 360, 5);
                this._tween.addEventListener(TweenEvent.UPDATE, this._onTweenPosition);
                this._tween.start();
            }
    
            protected function _onTweenPosition(e:TweenEvent):void {
                var point:Point = this._ellipse.getPointOfDegree(e.position);
    
                this._box.x = point.x;
                this._box.y = point.y;
            }
        }
    }
Usage note:
See also:
Events broadcasted to listeners:
  • TweenEvent with type: START - Dispatched when transition starts.
  • TweenEvent with type: STOP - Dispatched when transition is stopped.
  • TweenEvent with type: RESUME - Dispatched when transition is resumed.
  • TweenEvent with type: UPDATE - Dispatched as the transition progresses.
  • TweenEvent with type: COMPLETE - Dispatched when transition completes.

Summary


Constructor
  • Tween (equat:Function, startPos:Number, endPos:Number, duration:Number, useFrames:Boolean = false)
    • Creates and defines a new Tween.
Class properties
Class properties inherited from Process
Instance properties
  • equation : Function
    • The tween equation.
  • duration : Number
    • The length of time of the tween transition.
  • position : Number
    • The current position of the tween.
  • progress : Percent
    • The percent completed of the tween's duration.
Instance methods
  • start : void
    • Starts the transition from its starting position.
  • stop : void
    • Stops the transition at its current position.
  • resume : void
    • Resumes the transition from stopped position.
  • continueTo (endPos:Number, duration:Number) : void
    • Transitions from the tween's current position to a new end position and duration.
  • destroy : void

Constructor

Tween

public function Tween (
equat:Function, startPos:Number, endPos:Number, duration:Number, useFrames:Boolean = false)

Creates and defines a new Tween.
Parameters:
equat :
The tween equation.
startPos :
The starting value of the transition.
endPos :
The ending value of the transition.
duration :
The length of time of the tween transition.
useFrames:
Indicates to use frames true, or seconds false in relation to the value specified in the duration parameter.
Usage note:
  • The function specified in the equation parameter must follow the (currentTime, startPosition, endPosition, totalTime) parameter standard.

Instance properties

duration

public duration:Number
(read,write)

The length of time of the tween transition.

equation

public equation:Function
(read,write)

The tween equation.

position

public position:Number
(read,write)

The current position of the tween.

progress

public progress:Percent
(read)

The percent completed of the tween's duration.

Instance methods

continueTo

public function continueTo (
endPos:Number, duration:Number) : void

Transitions from the tween's current position to a new end position and duration.
Parameters:
endPos :
The ending value of the transition.
duration:
Length of time of the transition.
Usage note:
  • Will automatically start tween if currently stopped.

destroy

override public function destroy (
) : void

Overrides:

resume

public function resume (
) : void

Resumes the transition from stopped position.
Events broadcasted to listeners:
  • TweenEvent with type: RESUME - Dispatched when transition is resumed.

start

override public function start (
) : void

Starts the transition from its starting position.
Events broadcasted to listeners:
  • TweenEvent with type: START - Dispatched when transition starts.
Overrides:

stop

override public function stop (
) : void

Stops the transition at its current position.
Events broadcasted to listeners:
  • TweenEvent with type: STOP - Dispatched when transition is stopped.
Overrides: