Highlighted

Make an object appear on mouse hover

Community Beginner ,
Feb 21, 2020

Copy link to clipboard

Copied

Hi!

I'd like to create an interactive infographic in Animete that makes a dialog box appear when the mouse is over certain reginos. I already created the infographic in Illustrator.

In this tutorial the first image has the effect I want to create: https://tomgermeau.com/2014/02/how-designers-can-create-interactive-prototypes-with-illustrator/

 

Can anyone help me out, please? 😄

 

Thanks,

joanna

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

This can be achieved using a regular button and with almost no code - only two stop instructions in the end of the hover animations. You only need a nested Movie Clip animation in the over state of a Button instance.

 

Preview:

http://bit.ly/2HIsFpx

 

FLA / source / files:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/infographic_pop_up

 

Please let us know if you need further help.

 

 

Regards,

JC

Topics

How to

Views

764

Likes

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

Make an object appear on mouse hover

Community Beginner ,
Feb 21, 2020

Copy link to clipboard

Copied

Hi!

I'd like to create an interactive infographic in Animete that makes a dialog box appear when the mouse is over certain reginos. I already created the infographic in Illustrator.

In this tutorial the first image has the effect I want to create: https://tomgermeau.com/2014/02/how-designers-can-create-interactive-prototypes-with-illustrator/

 

Can anyone help me out, please? 😄

 

Thanks,

joanna

Adobe Community Professional
Correct answer by JoãoCésar | Adobe Community Professional

Hi.

 

This can be achieved using a regular button and with almost no code - only two stop instructions in the end of the hover animations. You only need a nested Movie Clip animation in the over state of a Button instance.

 

Preview:

http://bit.ly/2HIsFpx

 

FLA / source / files:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/infographic_pop_up

 

Please let us know if you need further help.

 

 

Regards,

JC

Topics

How to

Views

765

Likes

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
Adobe Community Professional ,
Feb 21, 2020

Copy link to clipboard

Copied

Hi.

 

This can be achieved using a regular button and with almost no code - only two stop instructions in the end of the hover animations. You only need a nested Movie Clip animation in the over state of a Button instance.

 

Preview:

http://bit.ly/2HIsFpx

 

FLA / source / files:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/infographic_pop_up

 

Please let us know if you need further help.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Community Beginner ,
Feb 21, 2020

Copy link to clipboard

Copied

Thanks so much for the reply! 

 

I'm new to Animate and I'm not sure I understood what to do. I opende the .fla file and tried to replicate the effect but I'm a bit lost 😞 Is there any chance for a step by step tutorial?

Likes

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
Reply
Loading...
Adobe Community Professional ,
Feb 22, 2020

Copy link to clipboard

Copied

Hi again!

 

I can suggest you some help content to get you started. Please visit this thread for some useful links:
https://community.adobe.com/t5/animate/helpful-resources-courses-or-instruction-for-animate/m-p/1082...

 

Please let us know if you need further help.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Community Beginner ,
Feb 25, 2020

Copy link to clipboard

Copied

Thanks so much! The files you shared were perfect and I could figure out from there what to do.

 

Best regards,

Joanna

Likes

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
Reply
Loading...
Adobe Community Professional ,
Feb 25, 2020

Copy link to clipboard

Copied

Excellent, Joanna!

 

You're welcome!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Community Beginner ,
May 18, 2020

Copy link to clipboard

Copied

Hello Joanna,

 

JC has been able to redirect me to your thread but I am also struggling to understand how I use the files sent etc, which did you use to help you and were you able to sucessfully add a pop up box? I am completley new to Animate as well and seem lost as to where to start.

 

Many Thanks

Roberta

Likes

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