3 Replies Latest reply on Nov 5, 2015 1:30 PM by kglad

    Can't get HTML5 Canvas mouseover on movieclip work

    jiggy1965 Level 1

      In Flash HTML5 Canvas I first made a movieclip which stops at its frame 1. On that frame there is a small rectangle. It is labelled 'start'. On frame 10 I've made that rectangle bigger. It is labbeled 'end'.

       

      On the main stage I've attached a mouseover code snippet to that movieclip with instance name 'knop':

       

      var frequency = 3;
      stage.enableMouseOver(frequency);
      this.knop.addEventListener("mouseover", fl_MouseOverHandler_4);
      
      function fl_MouseOverHandler_4()
      {
          this.gotoAndStop("end");
      }
      

       

      The problem is that this doesn't seem to work. I can hover my mouse cursor on the movieclip, but it won't go to its frame labelled 'end'. What am I doing wrong?

        • 1. Re: Can't get HTML5 Canvas mouseover on movieclip work
          kglad Adobe Community Professional & MVP

          you're loosing scope in your listener function: either use the easeljs bind or explicitly reference your timeline:

           

          var tl=this;

           

          1. var frequency = 3; 
          2. stage.enableMouseOver(frequency); 
          3. this.knop.addEventListener("mouseover", fl_MouseOverHandler_4); 
          4.  
          5. function fl_MouseOverHandler_4() 
          6.     tl.gotoAndStop("end"); 
          1 person found this helpful
          • 2. Re: Can't get HTML5 Canvas mouseover on movieclip work
            jiggy1965 Level 1

            Close. What did work is add '.bind.this()' to the fl_MouseOverHandler_4. The other way was like you described but then like this:

             

            var tl=this.knop;
            
            var frequency = 100;
            stage.enableMouseOver(frequency);
            tl.addEventListener("mouseover", fl_MouseOverHandler_4);
            
            function fl_MouseOverHandler_4()
            {
                tl.gotoAndStop("end");
            }
            

             

            In both cases I had to change 'var frequenty' from 3 to 100. I'm clueless at what 'frequency' does, but the default 3 from the code snippet obviously wasn't making it work. I'm not sure whether it's correct but leaving it to 0 like this also made it work in both versions.

             

            var tl=this.knop;
            stage.enableMouseOver();
            tl.addEventListener("mouseover", fl_MouseOverHandler_4);
            
            function fl_MouseOverHandler_4()
            {
                tl.gotoAndStop("end");
            }
            

             

            It this correct too? Is 'frequency' like that it checks a 100 time for a mouseover and then stops listening to it? Or is it meant to do something else?

            • 3. Re: Can't get HTML5 Canvas mouseover on movieclip work
              kglad Adobe Community Professional & MVP

              your code is correct if knob is the movieclip that you want to advance to 'end'.

               

              but, if that's the case, your message 1 code is misleading and incorrect even with actionscript's more 'friendly' application of scope.

               

              and the frequency parameter determines how many times per second the mouse position is polled to check what it's over.  3 should work unless you're movieclip the mouse quickly and/or the object is small and the mouseover starts and ends in less than 333ms.

              1 person found this helpful