Flash HTML5 canvas fl_MouseOverHandler

Question

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 canvas and when you scroll over a part of that image, a movie clip plays, when you click on it, it takes you to another page. I'm using flash to create it, but I'm having difficulty figuring out what's going wrong. I'm using code snippets to add in event handlers but I'm not getting the movie clip to play. The link to the page works but the mouse over event does not.

Also, my movie clip contains many layers, will this make a difference?

Any help would be greatly appreciated.

/* Stop a Movie Clip*/
this.movieClip_11.stop();

/* Mouse Over Event*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.movieClip_11.addEventListener("mouseover", fl_MouseOverHandler_32);

function fl_MouseOverHandler_32()
{
this.movieClip_11.play();
}

/* Play a Movie Clip*/

/* Click to Go to Web Page*/
this.movieClip_11.addEventListener("click", fl_ClickToGoToWebPage_15);

function fl_ClickToGoToWebPage_15() {
window.open("___", "_self");
}

first of all you must delete the "this"movieclip_11.play(); you dont need "this". Try movieClip_11.addEventListener("click", fl_ClickToGoToWebPage_15); — Careen
Thanks Careen but when I remove the "this" and test the file, the screen comes up blank. The link to the web page works fine as it is, my main issue is with the rollover. I can't get that to play the movie clip when I rollover it. — SoHodg

Craig Grummitt Craig Grummitt · Accepted Answer · 2014-07-14T19:18:44

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:

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();
}

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();
}
```

Flash HTML5 canvas fl_MouseOverHandler

1 Answers