Animate HTML5, how to reference nested movieclips using a variable

[netdzynr01]

In an HTML5 canvas file, I have a bunch of sequentially numbered movieclip instances I want to stop playing using a repeat loop.

The basic syntax I use to reference a clip directly is:

this.data_rings.ring1.stop()

My problem is I can't determine how to reference the clips using a variable. Trying variations of the following has no effect (clips continue to play):

for (i = 1; i < 10; i++) {
  theClip = "data_rings.ring" + i;
  this.theClip.stop();
}

I'm guessing this has something to do with scope but don't know what to change (moving "this" in and out of the variable has no effect). Any suggestion for how to fix?  Thanks in advance.

[JoãoCésar · Accepted solution]

Hi.

You need to first execute your code with fully initialized children. Then you can use bracket notation to access each child by its name using concatenated strings. Like this:

stage.on("drawstart", function(e)
{
    for (var i = 1; i < 10; i++)
          this.data_rings["ring" + i].stop();
}, this, true);

More info about the drawstart event:

https://createjs.com/docs/easeljs/classes/Stage.html#event_drawstart

Regards,

JC