Skip to main content
paul_james123
Inspiring
April 2, 2017
Answered

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

  • April 2, 2017
  • 2 replies
  • 7727 views

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!

    This topic has been closed for replies.

    2 replies

    avid_body16B8
    Legend
    January 29, 2019

    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
    Participant
    January 3, 2020

    Thank you!!!

    Legend
    January 3, 2020

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

    ClayUUIDCorrect answer
    Legend
    April 2, 2017