Can I change the z-index of an element (Animate CC and HTML5<canvas> project)

[paul_james123]

Hi All,

I'm working on an HTML5 project.

I have three layers (A, B and C) in my timeline. Each has a movie clip on it. A is top-most layer on the stage (so hides the other 2 movie clips).

Can I make the movie clip on A appear behind C's movie clip according to the user's input? If so, is there any resource I could look at regarding that? (codePen, etc.)

Thanks much!

[ClayUUID · Accepted solution]

animation - How can I set the z-index of EaselJS Graphics and Shapes - Stack Overflow

[resdesign]

In the context of drag n drop you would want the currently dragged element to be on the top of every other elements if they are dragged to different place so it does not look weird.

I want to thank Martin Melendez for his drag n drop tutorial (  Drag And Drop (Adobe Animate HTML5) - YouTube  ). It is in Spanish. I am currently taking the time to translate it into English so people can choose the CC language. I will also post a tutorial on my site where I implemented things a little differently.

I put all the draggable items on the same layer. Then I used the following: this.setChildIndex(evt.currentTarget , this.numChildren - 1); on the mouse move event. Hope this helps.

function onMouseMove(evt) {
    var item = evt.currentTarget;
    this.setChildIndex(evt.currentTarget , this.numChildren - 1);
    if (item.drag) {
        var pt = item.parent.globalToLocal(evt.stageX, evt.stageY);        
        item.x = pt.x - item.offset.x;
        item.y = pt.y - item.offset.y;
    }
}

[lauralistig]

Thank you!!!

[ClayUUID]

Please do not bump year-old topics for the sole purpose of adding nothing to the conversation.