HTML5 Canvas movieclips on main timeline playing automatically

Hello All–

I am making the transition from Flash AS3 to HTML5 Canvas and I'm having issues with some basic timeline and movieclip control. From what I understand, frame numbers begin at 0, instead of 1. (Is this correct?)

I have a main timeline with 3 frames and navigation buttons (forward and backward) on each frame which advance the main timeline using this code:

Frame 0:

this.stop();

this.nav_arrow_forward0.addEventListener("click", Forward0.bind(this));

function Forward0() {

this.play();

}

Frame 1:

this.stop();

this.nav_arrow_forward1.addEventListener("click", Forward1.bind(this));

function Forward1() {

this.play();

}

this.nav_arrow_back1.addEventListener("click", Backward1.bind(this));

function Backward1() {

this.gotoAndStop(0);

}

Frame 2:

this.stop();

this.nav_arrow_back2.addEventListener("click", Backward2.bind(this));

function Backward2() {

this.gotoAndStop(1);

}

Each frame of the main timeline contains various simple movieclips with animation. Now I understand that I can control these movieclips either from the main timeline or within the timeline of each individual movieclip (just like with AS3). I want each movieclip to play at different times, based on different functions (irrelevant to my issue), so I want each movieclip to remain static on frame 0 (its first frame), as I navigate forward and backward through the main timeline.

I have placed this code on frame 0 of each individual movieclip:

this.stop();

This works to stop each movieclip the first time I advance through the main timeline, however if I navigate back through the main timeline frames, the individual movieclips on each frame will start to play.

I read in another forum that this is a common bug, and to solve the issue I must tell all movieclips to stop on frame 0 from the main timeline:

this.mc1.gotoAndStop(0);

this.mc2.gotoAndStop(0);

this.mc3.gotoAndStop(0);

...etc

However this DID NOT work. Now this is the strange part– if I use that same logic, but tell the movieclips to stop on frame 1 from the main timeline, then it works. With this code below, each individual movieclip stays on frame 1 when the main timeline is moved forward and backward through its 3 frames:

this.mc1.gotoAndStop(1);

this.mc2.gotoAndStop(1);

this.mc3.gotoAndStop(1);

...etc

What am I missing? This seems like such a silly issue that I must be doing something basically wrong, as to need a work around to simply stop all my movieclips. My interactive media product is going to have many many many movieclips on each main timeline frame, and movieclips within movieclips, so it seem very inefficient to work in this way.

Thank you in advance for your help!