• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Button hover bring to front

Explorer ,
Mar 20, 2023 Mar 20, 2023

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);

Views

863

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
community guidelines

correct answers 1 Correct answer

Community Expert , Mar 20, 2023 Mar 20, 2023

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
...

Votes

Translate

Translate
Community Expert ,
Mar 20, 2023 Mar 20, 2023

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

Votes

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
community guidelines
Explorer ,
Mar 20, 2023 Mar 20, 2023

Copy link to clipboard

Copied

Hi JoãoCésar

Thanks for your reply, I have added the code you sugested but it doesn't change anything. I have attached a screen shot of the code I now have.

Votes

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
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

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?

Votes

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
community guidelines
Explorer ,
Mar 20, 2023 Mar 20, 2023

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...

 

http://349clients.co.uk/networking/Network.fla

Votes

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
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

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

Votes

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
community guidelines
Explorer ,
Mar 20, 2023 Mar 20, 2023

Copy link to clipboard

Copied

That's great, thank you so much JoãoCésar!

Votes

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
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

Copy link to clipboard

Copied

LATEST

You're welcome!

Votes

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
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

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.

Votes

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
community guidelines
Explorer ,
Mar 20, 2023 Mar 20, 2023

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?

Votes

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
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

Copy link to clipboard

Copied

no, not the layer.  the timeline.  are all the buttons on the same timeline?

Votes

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
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

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?

Votes

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
community guidelines
Explorer ,
Mar 20, 2023 Mar 20, 2023

Copy link to clipboard

Copied

Thanks  kglad. Not got much experiance with Animate so didn't know what to look for.

Votes

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
community guidelines
Community Expert ,
Mar 20, 2023 Mar 20, 2023

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

Votes

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
community guidelines