CC Animate HTML5 Canvas - Change (z-index) on hover

[richiebeno]

Using an "addEventListener" for "mouseover" I am trying to chnage the (z-index) move to the front this.ball_ani_1 when mouseover of this.ball_ani_1.ball_graphic_outer_frame1.ball_graphic_text.hotspot

this.ball_ani_1.ball_graphic_outer_frame1.ball_graphic_text.hotspot.addEventListener("mouseover", ballMouseOver1.bind(this));

function ballMouseOver1()
{
	this.setChildIndex( ball_ani_1, this.numChildren()-1);
}

Any help much appriciated 🙂

[JoãoCésar · Accepted solution]

Hi.

There are a few problems in your code:
1 - The first argument in the setChildIndex method should be this.ball_ani_1;
2 - numChildren is a property and not a method;

3 - You should subtract 1 from numChildren and not add 1;
4 - For hover interactions to work, you need to call stage.enableMouseOver() if there are no Button symbol instance anywhere in your code;
5 - Even if you have one frame in your timeline, you need to call this.stop() so that changes in depth will take effect.

function ballMouseOver1()
{
	this.setChildIndex(this.ball_ani_1, this.numChildren - 1);
}

stage.enableMouseOver(50);
this.stop();
this.ball_ani_1.ball_graphic_outer_frame1.ball_graphic_text.hotspot.addEventListener("mouseover", ballMouseOver1.bind(this));

I hope this helps.

Regards,

JC

[richiebeno]

Thanks JC, you explained this very well 🙂

[JoãoCésar]

Nice!

You're welcome!