Tween Manager Class in AS3

TweenManager is ActionScript3 class that helps you to animate your objects in flash. You don't need to create timeline type animations, because you can control every property of the object. Also it helps you to create a sequence by different animations/events. In the examples below I'll show you how to use the manager to solve different problems during your daily flash work.

TweenManager.tween method As a first parameter of this function you can put an object with property that you want to tween. For example you can pass MovieClip and change the "x" property, or TextField and change the "alpha" property. It doesn't matter what kind of object it is. That means that you can use your own object and change your own property. I'll give an example of this later. The code below changes the "x" property of MovieClip "exampleMovie":

var object: * = exampleMovie;
    var tweenObj: Object = new Object();
    var xTween: Object = new Object();
    xTween.start = 100;
    xTween.end = 480;
    xTween.mtd = currentTweenType;
    xTween.steps = 60;
    xTween.after = 5;
    xTween.callback = callbackFunction;
    tweenObj.x = xTween;
    TweenManager.tween(object, tweenObj);

The second parameter (tweenObj) is an object that contains other objects (xTween). The other object could have the following properties:• start - the initial value• end - the end value• steps - duration of the tween (in frames)• after - number of frames before staring of the tween• mtd - method of the tween. All the methods are defined in the TweenType class• callback - function to call after tween ends

Example of TweenManager.tween. You can change the "mtd" property of the tween object using the combobox. Download the source files from here.Here is an example how to use TweenManager with your own object and property. The source can be found here.

import ws.outset.managers.tween.TweenManager;
    import ws.outset.managers.tween.TweenType;
    var obj: Object = new Object();
    obj.customProperty = 20;
    addEventListener(Event.ENTER_FRAME, loop);
    TweenManager.tween(obj, {
      customProperty: {
        start: 20,
        end: 40,
        steps: 10,
        callback: onTweenEnd,
        mtd: TweenType.OUT_QUAD
      }
    });
    
    function loop(e: Event): void {
      trace("loop customProperty=" + obj.customProperty);
    }
    
    function onTweenEnd(): void {
      trace("onTweenEnd customProperty=" + obj.customProperty);
      removeEventListener(Event.ENTER_FRAME, loop);
    }

And the result is:


    loop customProperty=20
    loop customProperty=20
    loop customProperty=23.8
    loop customProperty=27.2
    loop customProperty=30.2
    loop customProperty=32.8
    loop customProperty=35
    loop customProperty=36.8
    loop customProperty=38.2
    loop customProperty=39.2
    loop customProperty=39.8
    loop customProperty=40
    onTweenEnd customProperty=40

TweenManager.alpha methodBasically this function uses TweenManager.tween to change the alpha property. Because I'm changing the alpha very often I just wrote this simple method. Download the example to check how it works.TweenManager.gotoFrame methodWith this method we can control the timeline based animations. gotoFrame function accepts two parameters. The first one, the same as tween method, is the object for tweening. The second one is an object with parameters:• start - initial frame• stop - end frame• after - number of frames before starting of the tween• callback - function to call after tween ends

example's sourceTweenManager.stop methodIf you want to stop the tween just pass the object and the type of the tween.example:

TweenManager.stop(exampleMovie, TweenType.OUT_BACK)

TweenManager.color methodIf you have a filled shape you can simply change the color of it using TweenManager.color.