HTML Canvas tween with a random wait();

[richiebeno]

I looking for a more efficient way to tween (alpha) about 50 movieClips all from the same library movieClip with different instance names:

I could dupliacte this 50 times but that would be very efficent

createjs.Tween.get(this.movieClip).wait(200).to({alpha:1}, 400, createjs.Ease.quadOut);

...

...

It would be much better to randomise the number in the wait() parameter and have the instance name have a multiple of a number e.g this.movieclip1 etc

Any help would be appreciated.

[JoãoCésar · Accepted solution]

Hi.

One approach would be to place all of your instances inside of a container and then access the children property of this container to reference each child. Like this:

var root = this;
root.tweenBalls = function(e)
{
    stage.off("drawstart", root.drawStart);
    root.balls.children.forEach(function(ball) // the container is called balls
    {
          ball.alpha = 0;
          createjs.Tween.get(ball).wait(Math.random() * 5000).to({alpha:1}, 400, createjs.Ease.quadOut);
    });
};
root.drawStart = stage.on("drawstart", root.tweenBalls, null, true); // we need the drawstart event so children will be ready to be accessed

Please let me know if this helps you.

Regards,

JC

[richiebeno]

Work perfectly

[JoãoCésar]

Excellent!

You're welcome!