Back and continue navigation not working correctly

[salamandar1]

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

[Colin Holgate]

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

[ClayUUID · Accepted solution]

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...

[salamandar1]

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

[Colin Holgate]

Was that added to CreateJS at some point? When I first did CreateJS stuff hasEventListener was AS3 only.

[ClayUUID]

I don't know when it was added, only that it exists now.

http://createjs.com/docs/easeljs/classes/EventDispatcher.html#method_hasEventListener

[Colin Holgate]

I was curious, and checked old docs. Seems hasEventListener wasn't in v0.7.0, but was in v0.7.1.

[salamandar1]

I tried this but couldn't get it too work, probably because of the way I implemented it.

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

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

}

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

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

}

function fl_ClickToGoToAndStopAtFrame_11() {

  this.gotoAndStop(this.currentFrame - 1);

}

function fl_ClickToGoToAndStopAtFrame_12() {

  this.gotoAndStop(this.currentFrame + 1);

}

[salamandar1]

Thanks Colin, that seems to have worked. Many thanks!