1 Reply Latest reply on Jan 29, 2014 3:15 PM by elainecc

    Can't figure out how to make direction aware mouse over?

    Sekai_

      I don't have much coding skills at all so that is probably my main problem but does anyone know how to do this effect in Edge Animate? I'm very new to this program but over the last 2 weeks i've been trying to create this and epic failed. Any Advice? Thanks

       

      http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

        • 1. Re: Can't figure out how to make direction aware mouse over?
          elainecc Adobe Employee

          Hi, Sekai-

           

          If you're trying to do this in Animate, I would throw most of the concept out and think of what the jQuery is actually trying to accomplish: it's trying to determine which direction the mouse is entering and leaving in order to determine what direction the overlay should run when you actually enter the object.  You can do the same thing by looking at the pageX and pageY of the mouseenter and mouseleave events and then doing some kind of comparison.

           

          Without coding it explicitly, this is how I would approach the problem:

          • on every object's mouseleave (I'd use a symbol in this case, btw), try to determine the pageX and pageY and compare it to the content's dimensions in order to determine whether or not it leaves from top, right, left, or bottom.
          • Based on this information, play from the symbol's timeline in the out direction (e.g. "outFromTop")
          • on every object's mouseenter, try to determine the pageX and pageY and see which direction it comes from.  If I can tell, animate from that side.  If I can't, fall back to the last mouseleave's event in order to figure out where it should come from
          • Based on this information, play from the symbol's timeline in a different location, from label (e.g. "inFromTop")

           

          Hope that helps you get going!

           

          Thanks,

           

          -Elaine

          1 person found this helpful