Stacked images come to front if you hover over them

Question

I have an animate project with three rectangles that are movie clips. The three are stacked on top of one another but are offset so you could hover over each one. What I want is for the the rectangle I'm hovering over to come to the top. I created it using the setChildIndex using createJS, but it isn't working. Please help!

var frequency = 15;
stage.enableMouseOver(frequency);
this.blueBox.addEventListener("mouseover", mouse1.bind(this));

function mouse1()
{
this.setChildIndex(this.blueBox,2);
alert("blueBox");

}

stage.enableMouseOver(frequency);
this.redBox.addEventListener("mouseover", mouse2.bind(this));

function mouse2()
{
this.setChildIndex(this.redBox,2);
alert("redBox");

}

stage.enableMouseOver(frequency);
this.greenBox.addEventListener("mouseover", mouse3.bind(this));

function mouse3()
{
this.setChildIndex(this.greenBox,2);
alert("greenBox");

}

ClayUUID · Accepted Answer

You don't need to be rude about it. I was asking where specificially in that line of code to add it.

It's added. It doesn't work.

Well I'm out of ideas then. I tried your code in 2020, with this.stop() added, and it worked perfectly.

Perhaps try this:

this.stop();
stage.enableMouseOver();

this.blueBox.addEventListener("mouseover", mouseOver);
this.redBox.addEventListener("mouseover", mouseOver);
this.greenBox.addEventListener("mouseover", mouseOver);

function mouseOver(evt) {
	var p = evt.currentTarget.parent;
	p.setChildIndex(evt.currentTarget, p.numChildren - 1);
}

ClayUUID · Answer

You only have to enable mouseover once, not three times. Now, I'm going to guess that you're using Animate 2020 for some reason. If you are, try adding this.stop(); to your above code.

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