Basic mouseover mouseout events in html5 canvas don't work for me

Question

I'm struggling with animate, I'm usually a frame by frame animator but I have to do a UI.

I've created a skitz just to test out how the events work, and I'm already having trouble at step one. there's a graphical layout and on top of it I've created an invisible button with a hit box, I used this code to handle the event:

*/* Mouse Over Event
Mousing over the symbol instance executes a function in which you can add your own custom code.


Instructions:
1. Add your custom code on a new line after the line that says "// Start your custom code" below.
The code will execute when the symbol instance is moused over.
frequency is the number of the times event should be triggered.
*/
var frequency = 3;
stage.enableMouseOver(frequency);
this.button_1.addEventListener("mouseover", fl_MouseOverHandler_3);


function fl_MouseOverHandler_3()
{
  // Start your custom code
  // This example code displays the words "Moused over" in the Output panel.
  this.gotoandplay(113);
  // End your custom code
}*

this is an image from the workspace: image

for the mouse over, I don't know why animate says 'this.button_1' since the button I checked while using the code snippet is called 'sirtonim', I tried changing that but when I do, the event doesn't even stop at this frame. (I have another action handling the frame with this.stop();)

I can't get to the mouseout event to test it out, maybe it works maybe it doesn't.

thanks ahead!

Answer 1

Alright, so I've fixed both things by :

adding .bind(this) after the events name.

I've also noticed that the only thing wrong with the mouse out event was the frame number I chose, in HTML5 canvas the frames start from zero, so if you want to get to fram 112 you need to write 111 instead, 1 less.