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

Question

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 🙂

function ballMouseOver1()
{
	this.setChildIndex( ball_ani_1, this.numChildren()-1);
}  Any help much appriciated &#128578;

JoãoCésar17023019 · Accepted Answer

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

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