Highlighted

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

Contributor ,
Apr 02, 2017

Copy link to clipboard

Copied

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!

Views

3.5K

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

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

Contributor ,
Apr 02, 2017

Copy link to clipboard

Copied

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!

Views

3.5K

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
Apr 02, 2017 0
Adobe Community Professional ,
Apr 02, 2017

Copy link to clipboard

Copied

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...
Apr 02, 2017 0
Adobe Community Professional ,
Jan 29, 2019

Copy link to clipboard

Copied

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;

    }

}

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...
Jan 29, 2019 3
New Here ,
Jan 02, 2020

Copy link to clipboard

Copied

Thank you!!!

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...
Jan 02, 2020 0
ClayUUID LATEST
Adobe Community Professional ,
Jan 02, 2020

Copy link to clipboard

Copied

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

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...
Jan 02, 2020 0