Flash CC - HTML5 Canvas: Slideshow Navigation

Question

I am trying to create a simple 3 image slideshow with a next and back button in Flash CC using HTML5 Canvas. I'm new to javascript and seem to be having an issue with it working.

this.stop();

this.next_btn.addEventListener("click", playClickNext.bind(this));

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


this.back_btn.addEventListener("click", playClickBack.bind(this));

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

I'm getting it to publish and the next button works but sometimes goes to the wrong frame. The back button sometimes work and sometimes doesn't. The most common thing it does is also go back to a random frame when clicked.

Thanks for any help!

Answer 1

I put together a quick sample, and got a similar result. The issue for me was that the frame that the script was on would fire any time you went to that frame. This meant that the listeners on the button would pile up, and fire multiple times.

The ideal solution is to pull the code out of the FLA, and into your HTML/JS app. You can target the timeline directly using the instance names. For example, in my app, it is all on the main timeline, so you can use:

exportRoot.next_btn.addEventListener("click", handler);

To solve it without rearchitecting, you could also just ensure that either:

1. Your frame with the script is never navigated to. You could make your "first" frame 2 frames long, and put the code on frame 1, and the stop() on frame 2. Then just ensure you never gotoAndStop on 1. You will have to put restrictions on both previous and next, because you can gotoAndStop at a higher frame than the max, and it will wrap.
2. Remove all the event listeners each frame. The way you set up your listeners using bind is problematic for removal, so I recommend just removing all listeners.

I uploaded a quick sample here [ https://dl.dropboxusercontent.com/u/2224806/Nav.fla ] that uses the second approach, mainly because it is an easy fix. Sorry, link expired

Let me know if this solves your issue, or if it is related to something else.