Skip to main content
Participant
April 13, 2019
Answered

Animate HTML5, how to reference nested movieclips using a variable

  • April 13, 2019
  • 1 reply
  • 353 views

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.

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
April 13, 2019

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