Highlighted

HTML5 Canvas movieclips on main timeline playing automatically

Explorer ,
Jan 24, 2019

Copy link to clipboard

Copied

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!

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

TOPICS
Discussions

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML5 Canvas movieclips on main timeline playing automatically

Explorer ,
Jan 24, 2019

Copy link to clipboard

Copied

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!

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

TOPICS
Discussions

Views

1.2K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 24, 2019 2
Adobe Community Professional ,
Jan 24, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 24, 2019 2
Explorer ,
Feb 04, 2019

Copy link to clipboard

Copied

Thank you ClayUUID– very helpful!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 04, 2019 0
Advocate ,
Jan 27, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 27, 2019 2
Explorer ,
Feb 04, 2019

Copy link to clipboard

Copied

Thank you so much Klaus, this worked great!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 04, 2019 0
Community Beginner ,
Jul 04, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 04, 2020 0
New Here ,
Oct 20, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2020 0
neil15B9 LATEST
New Here ,
Oct 20, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2020 0