Highlighted

Adobe Animate Canvas Movieclip Hierarchy

New Here ,
May 03, 2018

Copy link to clipboard

Copied

I am in the process of learning createjs and Javascript using Adobe Animate. I'm trying to understand the hierarchy of movieclips that are on the stage during authoring and those that are dynamically created.

If I add a movieclip dynamically to the stage:

var mc = new lib.MC();

stage.addChild(mc);

I can remove it simply by stage.removeChild(mc);

The hierarchy is like this:

stage.children

          [0] exportRoot

          [1] mc

So long as I am adding and removing movieclips dynamically, I understand exactly where they are going.

If the same movieclip is on the "stage" during authoring, it doesn't seem to export as a child of the stage, but as part of the entire container stored in a variable called exportRoot.

So what I can see is a hierarchy like this:

stage.children

          [0] exportRoot.mc

          [0] exportRoot.children

                    [0] mc

So, it seems like mc is both a property of exportRoot and a child of exportRoot. I can change properties of mc, but I can't actually remove it from exportRoot using removeChild.

Have understood this correctly? Is there a way to remove movieclips that were not dynamically added to the stage?

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

Hi.

What I understand is that the 'exportRoot' is a reference to a library object with the same name as the FLA and it contains all other objects.

The 'stage' is a reference to an actual CreateJS Stage and this one is the root level Container for a display list.

EaselJS v1.0.0 API Documentation : Stage

When you create a Canvas object inside of Animate CC, like a Movie Clip, it becomes a child of the 'exportRoot', not the 'stage' itself.

When you add the object dynamically, you can add it to the 'stage' and remove it. But you can do it to the 'exportRoot' object as well.

I think the problem here, and this is my opinion, is that we can't be sure if the object added using the IDE is really ready.

If you add a Movie Clip to the stage in the authoring environment and try to use

exportRoot.removeChild(exportRoot.yourMC);

chances are this is not gonna work.

But, if you do this:

createjs.Ticker.on("tick", function(e)

{

    exportRoot.removeChild(exportRoot.yourMC);

});

It is gonna be removed. Which proves the reference is correct; the Movie Clip instance is actually a child of the 'exportRoot'. Another way of checking this is:

console.log(this.yourMC.parent == exportRoot);

It's weird and this is the way things are, at least for me.

Maybe someone else can clarify this.

Views

2.2K

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

Adobe Animate Canvas Movieclip Hierarchy

New Here ,
May 03, 2018

Copy link to clipboard

Copied

I am in the process of learning createjs and Javascript using Adobe Animate. I'm trying to understand the hierarchy of movieclips that are on the stage during authoring and those that are dynamically created.

If I add a movieclip dynamically to the stage:

var mc = new lib.MC();

stage.addChild(mc);

I can remove it simply by stage.removeChild(mc);

The hierarchy is like this:

stage.children

          [0] exportRoot

          [1] mc

So long as I am adding and removing movieclips dynamically, I understand exactly where they are going.

If the same movieclip is on the "stage" during authoring, it doesn't seem to export as a child of the stage, but as part of the entire container stored in a variable called exportRoot.

So what I can see is a hierarchy like this:

stage.children

          [0] exportRoot.mc

          [0] exportRoot.children

                    [0] mc

So, it seems like mc is both a property of exportRoot and a child of exportRoot. I can change properties of mc, but I can't actually remove it from exportRoot using removeChild.

Have understood this correctly? Is there a way to remove movieclips that were not dynamically added to the stage?

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

Hi.

What I understand is that the 'exportRoot' is a reference to a library object with the same name as the FLA and it contains all other objects.

The 'stage' is a reference to an actual CreateJS Stage and this one is the root level Container for a display list.

EaselJS v1.0.0 API Documentation : Stage

When you create a Canvas object inside of Animate CC, like a Movie Clip, it becomes a child of the 'exportRoot', not the 'stage' itself.

When you add the object dynamically, you can add it to the 'stage' and remove it. But you can do it to the 'exportRoot' object as well.

I think the problem here, and this is my opinion, is that we can't be sure if the object added using the IDE is really ready.

If you add a Movie Clip to the stage in the authoring environment and try to use

exportRoot.removeChild(exportRoot.yourMC);

chances are this is not gonna work.

But, if you do this:

createjs.Ticker.on("tick", function(e)

{

    exportRoot.removeChild(exportRoot.yourMC);

});

It is gonna be removed. Which proves the reference is correct; the Movie Clip instance is actually a child of the 'exportRoot'. Another way of checking this is:

console.log(this.yourMC.parent == exportRoot);

It's weird and this is the way things are, at least for me.

Maybe someone else can clarify this.

Views

2.2K

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
May 03, 2018 0
Adobe Community Professional ,
May 04, 2018

Copy link to clipboard

Copied

Hi.

What I understand is that the 'exportRoot' is a reference to a library object with the same name as the FLA and it contains all other objects.

The 'stage' is a reference to an actual CreateJS Stage and this one is the root level Container for a display list.

EaselJS v1.0.0 API Documentation : Stage

When you create a Canvas object inside of Animate CC, like a Movie Clip, it becomes a child of the 'exportRoot', not the 'stage' itself.

When you add the object dynamically, you can add it to the 'stage' and remove it. But you can do it to the 'exportRoot' object as well.

I think the problem here, and this is my opinion, is that we can't be sure if the object added using the IDE is really ready.

If you add a Movie Clip to the stage in the authoring environment and try to use

exportRoot.removeChild(exportRoot.yourMC);

chances are this is not gonna work.

But, if you do this:

createjs.Ticker.on("tick", function(e)

{

    exportRoot.removeChild(exportRoot.yourMC);

});

It is gonna be removed. Which proves the reference is correct; the Movie Clip instance is actually a child of the 'exportRoot'. Another way of checking this is:

console.log(this.yourMC.parent == exportRoot);

It's weird and this is the way things are, at least for me.

Maybe someone else can clarify this.

__________________________________________
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...
May 04, 2018 0
New Here ,
May 04, 2018

Copy link to clipboard

Copied

I checked this with my test file and both work. Thanks for pointing this to me. I don't understand this well right now. I'll see if I can figure it out.

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...
May 04, 2018 0
Explorer ,
Feb 15, 2019

Copy link to clipboard

Copied

Has this behavior changed in a recent update? I can't seem to get removeChild to work at all anymore.

Adding it to a tick event as you suggested does nothing.

If I publish the file and then manually try exportRoot.removeChild(exportRoot.myMC); in the console it returns false. If go in the console and try exportRoot.myMC.parent.removeChild(exportRoot.myMC) it will return true, but the movieclip will still be visible on the stage and can have it's properties accessed and updated, so it doesn't appear it's actually removing anything even though it returned true. The only thing that works at all is to call stage.removeAllChildren(); and just obliterate everything.

I'm tearing my hair out trying to figure this out and all my searches keep returning accepted answers similar to this one that just don't do anything in any test documents I create. I'm so very confused.

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...
Feb 15, 2019 0
Adobe Community Professional ,
Feb 15, 2019

Copy link to clipboard

Copied

Do you have Advanced Layers enabled?

If you do, turn it off.

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...
Feb 15, 2019 1
Explorer ,
Feb 15, 2019

Copy link to clipboard

Copied

That fixed it!

I wish I could give you more than one like, oh my gosh, thank you so much.

I didn't even know that setting had been added and nothing about it was turning up in my searches, I'm so incredibly grateful.

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...
Feb 15, 2019 0
Engaged ,
Feb 15, 2019

Copy link to clipboard

Copied

Yes, it's a new default setting that has caused a lot problems for users as they, like yourself (and myself at one point) are not aware of. A bit of a UX error on behalf of Adobe I think personally. But I have faith they'll fix it.

Darn... another missed chance to use the meme!

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...
Feb 15, 2019 0
Engaged ,
Oct 08, 2019

Copy link to clipboard

Copied

"But, if you do this: createjs.Ticker.on("tick", function(e)..."

What does it mean, 'Do This'?

Is that a function that can be fired from a click event listener? I can't get that to work: 

// This adds a MC from my library to the stage:

this.buttonAddvideo_SMP.addEventListener("click", addvideo_SMP);
function addvideo_SMP(e){
	that.addChild(new lib.video_SMP());
}

// I want to remove the MC from the stage after it has been added:

this.buttonRemovevideo_SMP.addEventListener("click", removevideo_SMP);

function removevideo_SMP(e){
		createjs.Ticker.on("tick", function(e)
{
    exportRoot.removeChild(exportRoot.video_SMP);
});
}

// It is not working, and not producing any console errors. 

 
Shouldn't removing a MC that was added from the library be easy to remove? 

Thanks. 

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...
Oct 08, 2019 0
New Here ,
Dec 03, 2019

Copy link to clipboard

Copied

Hello,

 

I am experiencing the issue with objects created within animate authoring.

Basically the objects are not beeing removed visually even though console says they're gone (parent.numChildren is decremented) when removeChild is called in a tick Event. Not calling removeChild in a tick Event will result in the parent numChildren decrementing only once from the original numChildren each time (81 to 80 in my case) but no further...

Calling stage.update(); in the tick Event after removeChild will reproduce the latter behavior.

 

I should mention these objects are shapes wrapped inside a movieClip and I'm trying to remove them on mouseover event attached to their parent movieClip.

My code is working since I can animate these shapes alpha to 0 but I can't manage to remove them.

(I commented the tweening code and only tried removing the shape instead but it won't work as mentioned above)

 

Not sure I'm discribing this clearly...

 

Also I've disabled Advanced Layers but it still doesn't work.

 

If anyone could help I'd greatly appreciate it.

 

Pete

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...
Dec 03, 2019 0
Explorer ,
Dec 30, 2019

Copy link to clipboard

Copied

eom

 

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...
Dec 30, 2019 0
Adobe Community Professional ,
Dec 30, 2019

Copy link to clipboard

Copied

Don't ask the same question in multiple threads. It's pointless and annoying.

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...
Dec 30, 2019 0
Explorer ,
Dec 30, 2019

Copy link to clipboard

Copied

I would love to have deleted one of my posts but there is no way to delete a post in these forums.

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...
Dec 30, 2019 0
ClayUUID LATEST
Adobe Community Professional ,
Dec 31, 2019

Copy link to clipboard

Copied

Also don't go back and erase a question that someone already responded to. That's even more annoying.

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...
Dec 31, 2019 0