Buttons goToAndPlay behaving weird HTML5 canvas

[Mauro Rojas]

Hello, I'm having some problems and since I'm very noob with the scripting thing in HTML5 canvas, I hope you will help me.

The project: I have a series of buttons that are supposed to show an specific frame each, from the same movie clip. Simple I tought, I put some click to goToAndPlay sending the animation to the correct frame for each individual button.

The problem: When I pusblish and test the project, each button send me to a frame that isn't supposed to (yes I know that the frame 1 is = 0 in the script), anyway for example if I click the button that is supposed to play the 2nd frame, it shows me the 4th, and to do everything even worse if i click again the same button, it will show the 3rd frame for some reason I can't comprehend. The same applies for every single button, currently I'm testing three buttons but I'm getting very frustrated, and the final version is supposed to have 12 buttons!

Example of the script: IMPORTANT!    ---- imp1, noimp5 and imp7 are movieclips that contains the different buttons. The buttons are: hit_imp1, hit_noimp5 and hit_imp7.

The movieclip that contains the timeline of the different frames I'm trying to show is: textes_mc.

Ok now the script:

          /* BOUTONS */

          this.imp1.hit_imp1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

          function fl_ClickToGoToAndPlayFromFrame()

          {

          this.textes_mc.gotoAndPlay(1);

          }

          this.noimp5.hit_noimp5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

          function fl_ClickToGoToAndPlayFromFrame()

          {

          this.textes_mc.gotoAndPlay(2);

          }

          this.imp7.hit_imp7.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

          function fl_ClickToGoToAndPlayFromFrame()

          {

          this.textes_mc.gotoAndPlay(3);

          }

If you can help me out, I'll be super grateful. Maybe it's a dumb error that I'm making.

Edit: I have this.stop(); for every frame inside the movieclip I'm trying to play.

[JoãoCésar · Accepted solution]

Hi.

You have to give the handler functions different names. Right now all three functions have the same name.

Also, because you are using gotoAndPlay, I recommend you to add a check in each function so when the user clicks the same button over and over again the Movie Clip won't go back to the first frame.

function fl_ClickToGoToAndPlayFromFrame0()
{
     if (this.textes_mc.currentFrame != 1)
          this.textes_mc.gotoAndPlay(1);
}
function fl_ClickToGoToAndPlayFromFrame1()
{
     if (this.textes_mc.currentFrame != 2)
          this.textes_mc.gotoAndPlay(2);
}
function fl_ClickToGoToAndPlayFromFrame2()
{
     if (this.textes_mc.currentFrame != 3)
          this.textes_mc.gotoAndPlay(3);
}
this.imp1.hit_imp1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame0.bind(this));
this.noimp5.hit_noimp5.addEventListener("click", fl_ClickToGoToAndPlayFromFrame1.bind(this));
this.imp7.hit_imp7.addEventListener("click", fl_ClickToGoToAndPlayFromFrame2.bind(this));

I hope this helps.

Regards,

JC

[Mauro Rojas]

Yuuup! that worked perfectly! Thank you very much.

[JoãoCésar]

You're welcome!