CODEWITHSUNDEEP
javascripthtmlactionscript-3flashcanvas
SoHodg
SoHodg

Reputation: 13

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

Upvotes: 1

Views: 5642

Answers (1)

Craig Grummitt
Craig Grummitt

Reputation: 2995

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

Upvotes: 1

Related Questions