Skip to main content
S
salamandar1
Participating Frequently
February 13, 2017
Answered

Back and continue navigation not working correctly

  • February 13, 2017
  • 1 reply
  • 473 views

I have a old Flash project which I'm attempting to convert to HTML5 using Animate CC 2017 and I'm now working in the Canvas.fla.

The piece is a tool which displays information about medical conditions, so it has a couple of intro pages and then an A-Z navigation (which works fine) that exists for the rest of the timeline which is 37 frames in total.

What I'm  finding, is that 'back' and 'continue' seem to work correctly at first but then go to the wrong frames particularily after having used the A-Z navigation. These two buttons are on seperate layers that extend for the duration of the timeline.

The whole thing starts off in frame 1 (0)

I've looked at similar questions and answers on here but I'm not sure if they apply completely to what I'm trying to do.

This is the code I've used for the buttons added at frame 3 (2)

this.Back2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_11.bind(this));
function fl_ClickToGoToAndStopAtFrame_11()
{
  this.gotoAndStop(this.currentFrame-1);
}
this.Continue3.addEventListener("click", fl_ClickToGoToAndStopAtFrame_12.bind(this));
function fl_ClickToGoToAndStopAtFrame_12()
{
  this.gotoAndStop(this.currentFrame+1);
}

Any help would be much appreciated.

Many thanks

    This topic has been closed for replies.
    Correct answer ClayUUID

    There's no need for a flag. This sort of thing is exactly why hasEventListener() exists.

    if (!this.Back2.hasEventListener("click")) {

         this.Back2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_11.bind(this));

    }

    etc...

    1 reply

    Colin Holgate
    Colin Holgate
    Inspiring
    February 13, 2017

    Each time you come back to frame 3 those listeners will be created again, and a single click would end up taking you through lots of frames. Set up a Boolean to know if you have created the listeners already. Something like:

    if(this.inited==null){

       this.inited = true;

       this.Back2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_11.bind(this));

       this.Continue3.addEventListener("click", fl_ClickToGoToAndStopAtFrame_12.bind(this));

    }

    function fl_ClickToGoToAndStopAtFrame_11() {   this.gotoAndStop(this.currentFrame-1); }

    function fl_ClickToGoToAndStopAtFrame_12() {   this.gotoAndStop(this.currentFrame+1); }

      C
      ClayUUIDCorrect answer
      Legend
      February 13, 2017

      There's no need for a flag. This sort of thing is exactly why hasEventListener() exists.

      if (!this.Back2.hasEventListener("click")) {

           this.Back2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_11.bind(this));

      }

      etc...

        S
        salamandar1Author
        Participating Frequently
        February 13, 2017

        Thank you! Colin solution seems to be working but I'll try your solution too.

        Hello World!

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices