Highlighted

Animate HTML5, how to reference nested movieclips using a variable

Community Beginner ,
Apr 13, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

100

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Animate HTML5, how to reference nested movieclips using a variable

Community Beginner ,
Apr 13, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

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

Views

101

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 13, 2019 0
Adobe Community Professional ,
Apr 13, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2019 1