HTML5 Canvas movieclips on main timeline playing automatically

[SSSSSSBenay]

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!

[ClayUUID]

You're having this problem because script code executes top-to-bottom. The gotoAndStop() is executing before the nested clip has been activated.

Instead, try putting your clip-stopping code in a function and calling it thusly:

stage.on("drawstart", initMyClipsForFrameWhatever, this, true);

More information here:

Re: Accessing movieClip.children array Animate CC Canvas

[SSSSSSBenay]

Thank you ClayUUID– very helpful!

[kdmemory · Accepted solution]

Hi

to add to ClayUUID's good reasoning, I'm sure you could use this in each of your main timeline frames:

var ths = this;
var mcs = ["mc1", "mc2", "mc3", "mc4"];
stage.on("drawstart", initAllFrameMCs, this, true);
function initAllFrameMCs (e) {
    for (var i = 0; i < mcs.length; i++) {
        ths[mcs].gotoAndStop(0);
    }
}    

You only would have to amend the mcs array with the correct series and instance names of contained movieclips.

Klaus

[SSSSSSBenay]

Thank you so much Klaus, this worked great!

[Calculuswhiz]

*frustrated sigh* I can't believe this is really the only way. There's no way this was intentional, right? I thought the point of the whole thing was to be as close to Flash/AS3 as possible.

Oh, well. The solution works, I guess, but this works better if you anticipate dealing with this a lot in the future:

// Set this up in your global scripts/include file
let freezeRegistry = new Set();
function applyFreezeHacks()
{
	stage.on('drawstart', () => 
	{
		freezeRegistry.forEach((clip) =>
		{
			if (clip)
				clip.gotoAndStop(0);
		})
	// All that matters is the true so that it only fires once
	}, null, true);
}
function addFreezeClips()
{
	applyFreezeHacks();
	for (let clip of arguments)
	{
		if (clip instanceof createjs.MovieClip)
			freezeRegistry.add(clip);
	}
}

Then you only need to waste spend 1 line on this in your action code:

addFreezeClips(this.door1a, this.door2);

[neil15B9]

Hi, I'm new to using Adobe Animate and trying to learn as I go. I have the same problem, movieclips autoplaying after using a GotoAndStop function, rather than being activated by clicking a button as I have set the document to do.

Can someone please break this down for me, I think this is the code I need to help solve the issue I'm having with my project, but I'm not sure which elements of the code above I need to change in order to make this work. 

Should "MC1, MC2, MC3, MC4" above, should they be replaced with the instance names in my project?

Also, initAllFrameMCs is this something I should be substituting with something else?

Any help would be greatly appreciated.

Thanks.

[neil15B9]

Hi, Can someone explain this code for me too please. Thanks.