Skip to main content
ioana1103
Participant
Feb 21, 2020 2:19 PM UTC
Answered

Make an object appear on mouse hover

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

JoãoCésar17023019
JoãoCésar17023019Correct answer
Community Expert
Feb 21, 2020 2:55 PM UTC

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

6 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
Feb 21, 2020 2:55 PM UTC

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

Translate
ioana1103
ioana1103Author
Participant
Feb 21, 2020 3:52 PM UTC

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?

Translate
JoãoCésar17023019
Community Expert
Community Expert
Feb 22, 2020 2:04 PM UTC

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/10822113?page=1#M200097

 

Please let us know if you need further help.

 

 

Regards,

JC

Translate