Adobe Animate Canvas Movieclip Hierarchy

Question

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?

JoãoCésar17023019 · Accepted Answer

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 : StageWhen 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 useexportRoot.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.

PeteBent · Answer

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded