• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Accessing movieClip.children array Animate CC Canvas

Community Beginner ,
May 19, 2018 May 19, 2018

Copy link to clipboard

Copied

Hello,

I’m trying to make a reusable widget for our design team, and instead of the user having to put this.movieClipInstances in a array inside my logic, I’d like to sort through the children of my container movieClip using Easlejs myContainer.children and storing them dynamically. If I console.log myContainer.children, I get an array with all the children in the movie clip - Great! But if I try to get the length or try to get an index of container.children[0] it returns undefined.  I am so confused as to why this shows up but I’m unable to access it?

On the stage I have a movieClip instance myContainer.

In myContainer I have three movie clip instances test_01, test_02, test_03.

(Inside my container movieClip)

var c = this;

var arrChildren = c.children;

console.log(arrChildren); //returns array

console.log(arrChildren.length); //returns 0

console.log(arrChildren[0]); //returns undefined

If I console.log arrChildren, I get:

Array(3)

0: lib.Symbol1{objects properties}

1: lib.Symbol1{objects properties}

2: lib.Symbol1{objects properties}

length:3

__proto__:Array(0)

Does anyone know why I can’t loop through this array or access even it’s length?

Any help from the community would be awesome. Thank you in advance!

Views

6.7K

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
community guidelines

correct answers 1 Correct answer

LEGEND , Jun 12, 2018 Jun 12, 2018

I'd just like to add some more information to the above post. While the setTimeout approach does work for safely executing initialization code in the same frame, it has the disadvantage that it executes after rendering. So any visual properties you've changed won't show up until the next stage update. However, it turns out the CreateJS API provides an even better approach. You can do this instead:

stage.on("drawstart", myInitFunction, this, true);

Every time the stage is updated, it fires two even

...

Votes

Translate

Translate
Community Expert ,
Feb 05, 2020 Feb 05, 2020

Copy link to clipboard

Copied

Hi.

Are you enabling mouse over?

createjs.com/docs/easeljs/classes/Stage.html#method_enableMouseOver

stage.enableMouseOver();

 

Animate enables mouse over and roll over events automatically if you have at least one standard button instance added to the stage. But if you don't, you have to enable them manually.

 

 

Regards,

JC

Votes

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
community guidelines
Community Beginner ,
Feb 05, 2020 Feb 05, 2020

Copy link to clipboard

Copied

[Solved]: I had a graphic symbol button base and used Tint to make my button states, well the tint doesn't appear to export so all states appeared to be the same color.

 

Buttons: 'mouseover' and 'mouseout' listeners not needed

MovieClips: must change on-stage instance to button, and add 'mouseover' and 'mouseout' listeners

 

To reach the timeline, it's (well who needed to get anything else done today? )

exportRoot.gotoAndStop(3);

 

However, good tip about stage.enableMouseOver();

Votes

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
community guidelines
Community Beginner ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

HI, I've read this whole post after 5 hours of works to understand why it doesn't work.

For a game to learn to read, I have a MC with several frames (one per letter).

When i'm on the good frames, i have two children : a background and the letter.

And in this letter, i have many parts (in fact each letter is an animal with mouth, nose ...).

With the method

stage.on("drawstart", this.suite, this, true);

it works for the first level but not for the second :

the code :

class BoutRepOrdre extends createjs.MovieClip {
    
    constructor() {
    super();
    this.alpha = new lib.Alpha();
    this.addChild(this.alpha);
    this.alpha.gotoAndStop("m");
    stage.on("drawstart", this.suite, this, true);
    // delai = setTimeout(this.suite.bind(this), 200);
  }
  suite() {
    console.log("children list :");
    console.log(this.alpha.children);
    console.log("children length :");
    console.log(this.alpha.children.length);
    console.log("first children :");
    console.log(this.alpha.children[0]);
    console.log();
    console.log("children list :");
    console.log(this.alpha.children[0].children);
    console.log("children length :");
    console.log(this.alpha.children[0].children.length);
    console.log("first children :");
    console.log(this.alpha.children[0].children[0]);
  }

 and the result is :image.png

I have to finish my work for last week 🙂 ... if you've an idea.

I've tried with setTimeout and by adding a second frame to each of the 14 parts but no way.

Thanks

Votes

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
community guidelines
Community Beginner ,
Mar 08, 2021 Mar 08, 2021

Copy link to clipboard

Copied

LATEST

I answer to myself and for all those who have the same problem :

for each level, use satge.on(drawstart" ....)

class BoutRepOrdre extends createjs.MovieClip {
    
    constructor() {
    super();
    this.alpha = new lib.Alpha();
    this.addChild(this.alpha);
    this.alpha.gotoAndStop("m");
    root.addChild(this);
    stage.on("drawstart", this.suite, this, true);
  }
  suite() {
    this.perso = this.alphaRep.perso; //my alphaRep.children[0]
    stage.on("drawstart", this.suite2, this, true);
  }
  suite2() {
    console.log(this.alpha.perso.children.length);
  }
}​

 

 

i have to put the root.addChild in the first function before the function suite2 otherwise i can't access to this.alpha.perso.children and it will not work!!

 

 

Votes

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
community guidelines