Why the Tween Class don't work inside a for with Flash AS3?

Question

Problem

---

I'm trying to make a Tween with many Movieclips using the for command, like this:

for(var i:int = 0; i < mcArray.length; i++) {

    new Tween(mcArray[i], "x", Regular.easeOut, 0, 100, 1.0, true);

}

But it doesn't works. I've tried change the code as follow down:

var tween:Tween = new Tween(mcArray[i], "x", Regular.easeOut, 0, 100, 1.0, true);

And it doesn't works too.

I can't use the setInterval or Timer because the Movieclips should be synchronized and the it may cause problems.

Is there a way to do this?

Answer 1

AS3 Tween engine, very bad: by design, by performance etc. If you can't use Greensock library for animation, you could use GTween, It's great tweening engine under MIT Licence. Even without support and continuous improvement, engine is much better than Tween by Adobe.

Working example, after start, if will collect every object in the center of scene:

package {

    import com.gskinner.motion.GTween;
    import com.gskinner.motion.easing.Sine;

    import flash.display.DisplayObject;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.geom.Point;

    public class StackOverflow extends Sprite {

        public function StackOverflow() {
            addEventListener(Event.ADDED_TO_STAGE, onAdded);
        }

        private function onAdded(e:Event):void {
            removeEventListener(Event.ADDED_TO_STAGE, onAdded);

            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;

            setup();
        }

        private function createDummyObjects(size:uint):Array {
            var result:Array = [], i:uint, object:Shape;
            for (i; i < size; ++i) {
                object = new Shape();
                object.graphics.beginFill(Math.random() * 0xFFFFFF);
                object.graphics.drawCircle(0, 0, 20);
                result[i] = object;
            }
            return result;
        }

        private function setup():void {
            var objects:Array = createDummyObjects(10);
            var i:uint, len:uint = objects.length, item:DisplayObject, middle:Point = new Point(stage.stageWidth >> 1, stage.stageHeight >> 1);

            for (i; i < len; ++i) {
                item = objects[i];
                item.x = Math.random() * stage.stageWidth;
                item.y = Math.random() * stage.stageHeight;

                addChild(item);

                new GTween(item, 1 + Math.random() * 4, {x: middle.x, y: middle.y}, {ease: Sine.easeInOut});
            }
        }

    }
}

Answer 2

I tried your exact code and it works just fine. You need to load your array initially, and I'm not seeing your code for that.

Try this: make two test MovieClips and put 'em on stage with instance names 'boxA' and 'boxR' Then run this code:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var A:Array = new Array();
A.push(boxB); A.push(boxR);

for(var i:int = 0; i < A.length; i++)
{

    new Tween(A[i], "x", Regular.easeOut, 0, 100, 1.0, true);

}

Works, no?

Answer 3

If everything in your code is correct and the code is running perfectly fine, and the tweens just aren't working, then this may be caused by Flash's garbage collector killing your tweens before they can finish.

This issue is relatively well known I think. I have run into this issue myself. Here is an article explaining the cause and how to fix it. http://www.scottgmorgan.com/as3-garbage-collection-the-reason-your-tweens-are-ending-early/

Essentially what you have to do is make sure you have a reference to your tween somewhere in your code.

Here is some code you can try to actually see it happening:

var mcs:Array = [];
var tweens:Array = [];

for (var j:int = 0; j < 50; j++) {
    for (var i:int = 0; i < 50; i++) {
        var mc:MovieClip = new MovieClip ();
        mc.graphics.beginFill (0xff0000);
        mc.graphics.drawRect (0, 0, 5, 5);
        mc.graphics.endFill ();
        mc.x = j * 6;
        mc.y = i * 6;
        mcs.push (mc);
        this.addChild (mc);

        new Tween (mc, "x", None.easeNone, mc.x, mc.x + 500, 2, true);
        //tweens.push (new Tween (mc, "x", None.easeNone, mc.x, mc.x + 500, 2, true));
    }
}

In theory every single red square in this code should tween to the right, but only about half do, for me at least. However if you comment out the second last line and uncomment the last line, it should now work because the array holds a reference to each tween.