8 Replies Latest reply on Jan 11, 2018 6:43 AM by JoãoCésar

    Mouse over event keeps triggering (Canvas)

    Josh70138843 Level 1

      I'm trying to create a movie clip which plays an animation on mouse over, then animates to the original state on mouse off. Basically this Original Hover Effects with CSS3.

       

      I've created a movie clip called "button01_mc" which from fame 1 to 10 animates in, then from frame 10 to 20 animates out. Frame 1's labeled as "Over" and frame 10 is labeled as "Out". They both have the action "this.stop();".

       

      My code on the main timeline is:

       

      stage.enableMouseOver(3);

      this.button01_mc.addEventListener('mouseover',over.bind(this));

      this.button01_mc.addEventListener('mouseout',outF.bind(this));

       

      function over(e){

      this.button01_mc.gotoAndPlay('Over');

      }

       

      function out(e){

      this.button01_mc.gotoAndPlay('Off');

      }

       

      It's work, playing the Over and Out animations when triggered, but if the mouse is on the object and I move the mouse to a different part of the object, it plays the animation again. So every time the mouse overs it triggers the Over animation. How can I stop that happening? I tried setting "stage.enableMouseOver(3);" to "stage.enableMouseOver(1);", but then nothing happens at all when I mouse over it.

       

      Thanks.