Why is this.stop() changing the z-index I set with setChildIndex() in Adobe Animate?

Question

I've been having difficulty getting the expected results with setChildIndex().

In this example I have 2 MovieClip instances named redDot and yellowDot, and a black square Shape. I would expect it to place yellowDot on bottom, then square, then redDot.

//make black rectangle shape
var square = new createjs.Shape(new createjs.Graphics().f("#000000").dr(100,100,100,100));
this.addChild(square);

this.setChildIndex(this.yellowDot, 0); //set z-index towards background 
this.setChildIndex(square,1);
this.setChildIndex(this.redDot, 2);//towards foreground

Instead I get redDot, yellowDot, then square. Adding this.stop() to the end seems to change it back to the expected order. It's not clear to me what is causing this discrepancy. Looping is disabled in the publish settings. Am I misunderstanding how this function and the Animate timeline work?

Answer 1

I wonder if the stage is not being updated? What happens if you use stage.update() at the end of your code. (or however you update the stage in an animate script).

Answer 2

I believe calling this.stop() is re-rendering the initial state of the clip, which uses the original z-index definition. Probably makes sense to call it before you change the contents programmatically.