Flash Html5 Canvas Fl_mouseoverhandler

I'm quite new to Flash Actionscript & Javascript but I'm hoping to get some help here if possible. I'm creating a website using the canvas element, there is an image on the can

Solution 1:

The problem is that javascript handles scope(i.e. this) differently to ActionScript. In AS3 you can assume that the event handler maintains the scope of its containing object. In JS this isn't the case. Here are a couple of solutions to this problem:

1. You can pass the scope to the event handler using the bind method. For example, this technique is utilized in the code snippets in Flash for HTML5 Canvas/Timeline Navigation/Click to Go to Frame and Play.

   this.movieClip_11.stop();
   var frequency=3;
   stage.enableMouseOver(frequency);
   this.movieClip_11.addEventListener("mouseover",         
       fl_MouseOverHandler_32.bind(this));
   
   function fl_MouseOverHandler_32()
   {
       this.movieClip_11.play();
   }
   

2. An alternative solution available in easeljs(the javascript library utilized by Flash for producing HTML canvas content) is achieved by calling the EventDispatcher method called on instead of addEventListener. easeljs docs Now the event handler assumes the scope of the object that dispatched the event.

   this.movieClip_11.stop();
   var frequency=3;
   stage.enableMouseOver(frequency);
   this.movieClip_11.on("rollover",fl_MouseOverHandler_32);
   
   function fl_MouseOverHandler_32()
   {
       this.play();
   }