Skip to main content
ioana1103
ioana1103
Participant
February 21, 2020
Answered

Make an object appear on mouse hover

  • February 21, 2020
  • 1 reply
  • 3958 views

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

Correct answer JoãoCésar17023019

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

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
February 21, 2020

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

    ioana1103
    ioana1103Author
    Participant
    February 21, 2020

    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?

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      February 22, 2020

      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

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices