-1

Just trying to get my head around Adobe Edge. What I want to achieve sounds simple but having real trouble. I have a button element, that when mouseover, displays an animated symbol I have.

Currently my code,on the button is Mouseout:

sym.$("pgicatext2").hide();

and mouseover:

sym.$("pgicatext2").show();

This doesn't seem to be working. I can achieve the result if, I turn off the movie symbol, and use this code on the button

sym.$("pgicatext2").toggle();

The trouble is of course it doesn't replay the animation every time you mouse over, and all the while it's hidden it's playing the animation.

Kara
  • 6,115
  • 16
  • 50
  • 57
Casso77
  • 41
  • 1
  • 8

2 Answers2

0

I see its been a month since you posted this. Hopefully you solved your issue. Your code for hiding and showing looks right. One thing I have had happen in some of my projects is that I inadvertently placed an object or symbol with 0% opacity on top of a button or something I had a mouse over event. Make sure that the button you have does not have anything layered on top of it. Another thing would be to turn off autoplay of your symbol, and add sym.$("pgicatext2").play(); into your mouse over. I know those are pretty obvious answers, but sometimes it is easy to forget the obvious.

justalittleheat
  • 387
  • 2
  • 13
0

Please get through following steps:

  1. Check if the button is over all other visible layers ('Elements' tab). Maybe setting cursor to 'pointer' will help to check it.

  2. Use 'Mouseenter' and 'Mouseleave' instead of 'Mouseover' and 'Mouseout'. The difference is explained here.

  3. Make sure that your animated symbols 'autoplay' option is off. If you did not tick it off while creating the symbol, just set Playback to 'Stop' on Stage at the very beginning of the timeline

  4. Lets do some coding. Lets assume that your animated symbols name is "film". You need to set following actions to your button element:

Mouseenter:

sym.$("film").show();
sym.getSymbol("film").play();

this basically shows up your 'film' element and plays 'film' symbol

Mouseleave:

sym.$("film").hide();
sym.getSymbol("film").stop(0);

this one hides your 'film' element and stops 'film' symbol at the beginning of animation (0ms)

Enjoy!

Community
  • 1
  • 1
Arkadiusz Lendzian
  • 417
  • 3
  • 6