Copy link to clipboard
Copied
Have been searching for ages but cant find a working solution.
I have 5 buttons, the hover states of the buttons are bigger than the original so when rolled over they the other buttons overlap the hover state. (See jpg.) I want to bring the button that is being hovered over to the front.
This is the code I have been trying but doesnt work...
this.bringToFront = function(e)
{
e.currentTarget.parent.addChild(e.currentTarget);
};
this.button_1.on("mouseover", this.bringToFront);
this.button_2.on("mouseover", this.bringToFront);
this.button_3.on("mouseover", this.bringToFront);
this.button_4.on("mouseover", this.bringToFront);
this.button_5.on("mouseover", this.bringToFront);
Thanks for the file.
Yeah, you have an invalid reference (button_2) when adding listeners for the mouse over event.
It should be like this:
this.button_1.on("mouseover", this.bringToFront);
//this.button_2.on("mouseover", this.bringToFront); // this button doesn't exist
this.button_3.on("mouseover", this.bringToFront);
this.button_4.on("mouseover", this.bringToFront);
this.button_5.on("mouseover", this.bringToFront);
this.button_6.on("mouseover", this.bringToFront);
this.button_7.on("mouseov
...
Copy link to clipboard
Copied
Hi.
Call this.stop(); on the timeline where your code is located even if it has only one frame.
This is necessary to any modification regarding depth/index in the HTML5 canvas document.
Regards,
JC
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Thanks for the image.
Do you mind uploading your FLA to a file sharing service (e.g.: Creative Cloud, Google Drive, Dropbox, WeTransfer) and paste the link here so that we can understand better what's going on?
Copy link to clipboard
Copied
Hi JoãoCésar
Thanks again for your help. The page can be seen here...
http://349clients.co.uk/networking/Network.html
The FLA can be downloaded here...
Copy link to clipboard
Copied
Thanks for the file.
Yeah, you have an invalid reference (button_2) when adding listeners for the mouse over event.
It should be like this:
this.button_1.on("mouseover", this.bringToFront);
//this.button_2.on("mouseover", this.bringToFront); // this button doesn't exist
this.button_3.on("mouseover", this.bringToFront);
this.button_4.on("mouseover", this.bringToFront);
this.button_5.on("mouseover", this.bringToFront);
this.button_6.on("mouseover", this.bringToFront);
this.button_7.on("mouseover", this.bringToFront);
this.button_8.on("mouseover", this.bringToFront);
this.button_9.on("mouseover", this.bringToFront);
this.button_10.on("mouseover", this.bringToFront);
this.button_12.on("mouseover", this.bringToFront);
And the this.stop(); call is needed anyway.
Regards,
JC
Copy link to clipboard
Copied
That's great, thank you so much JoãoCésar!
Copy link to clipboard
Copied
You're welcome!
Copy link to clipboard
Copied
the code you posted will always work IF the buttons all have the same parent. ie, if the parents are different, you may need to bring the parents to the front, too.
Copy link to clipboard
Copied
Thanks kglad
By parent do you mean the layer each button is on? If so how do I bring the layer to the front?
Copy link to clipboard
Copied
no, not the layer. the timeline. are all the buttons on the same timeline?
Copy link to clipboard
Copied
i downloaded your fla.
you have an error in your code and that's preventing ALL code from executing. ie, you're not executing the code in your original post.
p.s. don't you check for error messages?
Copy link to clipboard
Copied
Thanks kglad. Not got much experiance with Animate so didn't know what to look for.
Copy link to clipboard
Copied
you need to learn how to use your developer console.
lesson 1 - https://youtu.be/PBDQN9CQSeI lesson 2 - https://youtu.be/KJEl0OenGUY