Cannot get a button mouseover event to play a movie in Adobe Animate

[Grim_1]

For some reason, the following code does not result in the Blue_Movie being played when I place the mouse over the Yellow_Button: 

var frequency = 3;

stage.enableMouseOver(frequency);

this.Yellow_Button.addEventListener("mouseover", fl_MouseOverHandler);

function fl_MouseOverHandler()

{

  this.Blue_Movie.play();

}

Anyone know why this would be?  This is code I made in a simple file I created to troubleshoot this issue in a project I am working on.  Nothing in the file except the button and the movie.

Thanks!

[kglad]

what's console.log() reveal?

[Grim_1]

First off, thanks for responding!

Second, I should have mentioned that I am an ultra new-comer to Animate.  This is my first project.  So I am sorry to say that I don't know what console.log() means...?

[kglad]

it's the javascrpt equivalent of the actionscript trace() function.  ie, it lets you output text to a browser's debug console.

[Grim_1]

Not sure what that means either, but that's my fault not yours.  I appreciate your help!

[ClayUUID]

Seems like we get this same question at least once a week.

In Canvas mode event handlers, "this" is set to the global window object, not the object that fired the event (as any reasonable person would assume). Basically the default value of this is useless, by design. There are a few workarounds for this problem.

You can use bind() on your event handler to force its this to a specific value.

Function.prototype.bind() - JavaScript | MDN

You can use on() instead of addEventListener(), which automatically applies bind().

EaselJS v0.8.2 API Documentation : EventDispatcher

You can use a global pointer to your object instead of using this.

You can use the .currentTarget property of the event object that's passed to event handler functions to reference the object that triggered the event handler.

EaselJS v0.8.2 API Documentation : Event

[Grim_1]

Going to look this information over and try a few changes based it.  Will update.  Thank you for thorough response! 

[kglad · Accepted solution]

try:

var frequency = 3;

stage.enableMouseOver(frequency);

this.Yellow_Button.addEventListener("mouseover", fl_MouseOverHandler.bind(this));

function fl_MouseOverHandler()

{

  this.Blue_Movie.play();

}

[Grim_1]

Thank you.  Used this edit and it worked.

[kglad]

you're welcome.

[Grim_1]

Thank you!  And sorry for my late response here.  The first workaround you list (bind) did the trick.  I basically edited my code to look pretty much exactly like what kglad typed out below. 

[Grim_1]

Would have marked this as correct answer but can only designate one as such, and the other answer displays the exact edit to my code that worked.  I feel if people are jammed up and browsing around needing the answer quickly they can zone right in on the bold part and make the quick change.  But this answer was indeed correct and very comprehensive in terms of the information you shared.  Thank you very much for helping.

[ClayUUID]

Also, if this button is an actual button, or there's a button anywhere else in the same project, you don't need this part, because Animate will add it automatically:

var frequency = 3;

stage.enableMouseOver(frequency);

Heck, even if you do need it, all you really need is this:

stage.enableMouseOver();

This enables mouseover at the default frequency, which is 20 times per second. Much more responsive than that sluggish 3 times per second.

[Grim_1]

And thanks again!  I edited as you suggest here (removed frequency etc).