How does gotoAndStop work for html5 canvas?

[Nebulous_Dawn]

I am finding that gotoAndStop will not work properly for an mc if the script is at the root level.

For example, if I have an mc called "bananas" which has ten frames, I can use "this.gotoAndStop(5);" on a script within the timeline of the mc itself and it seems to work.

However if I use "root.bananas.gotoAndStop(5);" from a script at the root of my Animate file, it does not work.

Is that how it is, or maybe I am doing something wrong?

Also, if you have multiple instances of an mc, does that cause problems with gotoAndStop?

[Colin Holgate · Accepted solution]

What is the value of root? The main timeline is also 'this' at its level, so this syntax would be more correct:

this.bananas.gotoAndStop(5);

but one potential problem is that at the time that line runs the movieclip hasn't yet arrived on the stage. Putting the script inside the movieclip is an easy solution, but you might want to have it go to a different frame sometimes. That can be done using window variables. Like in the main timeline on that first frame you could have:

window.whichbanana = Math.floor(Math.random()*10);

and inside the bananas movieclip you say:

this.gotoAndStop(window.whichbanana);

[Nebulous_Dawn]

Thanks, will try this. Yes, when I say root I mean the top level "this".

[coty_hsu]

it seems you need to put the code in the delay timer

try

var mtl = this;

setInterval(function(){

     mtl.banana.gotoAndStop(5)

}, 50);

[just.emma]

No you don't; all you need is this.bananas.gotoAndStop(5); like Colin said.

Keep in mind that frame numbers in EaselJS start at 0 instead of 1.

[Colin Holgate]

I'm not sure that 'this' would work inside an anonymous function. But either way it's not the best solution, because you'll get a frame of time when the movieclip is on the wrong frame. Using the window variable approach would make the movieclip be on the right frame the first time it's seen.

[Nebulous_Dawn]

Using this.bananas.gotoAndStop(5); was not working for me, which is why I asked about it here in the forum. It used to work fine when I was making swf, but now I am making html5 canvas it no longer works for me.

I haven't had a chance to test it yet, but I am hopeful the window variable approach will fix the problem.

[just.emma]

Did you give your mc an instance name of "bananas"?

I was assuming the movieclip was already on stage in which case that should still be all you need.

[Colin Holgate]

The problem is that 'this' inside the anonymous function does not equate to the main timeline. If you try this code:

var mtl = this;

setInterval(function(){

     this.bananas.gotoAndStop(5)

}, 50);

with an mc named 'bananas' already on the stage, you get a type error because of the anonymous function. If you have this:

var mtl = this;

setInterval(function(){

     mtl.bananas.gotoAndStop(5)

}, 50);

there is no error, and the movieclip does go to and stop on the 6th frame, but if you had noticeable animatino in the first few frames you will see those happening before the gotoAndStop happens.

You could change to:

var mtl = this;

setInterval(function(){

     this.bananas.gotoAndStop(5)

}, 0);

and would only see one or two glitch frames. Setting this in the main timeline:

window.whichbanana=5;

and this in the movieclip:

this.gotoAndStop(window.whichbanana);

gives you the movieclip on the correct frame as soon as it is visible.

[Colin Holgate]

For completeness, you can get around the 'this' issue with bind:

setInterval(function(){

     this.bananas.gotoAndStop(5)

}.bind(this), 0);

but that still wouldn't solve the visual glitch.

[just.emma]

I wasn't suggesting putting "this" in an anonymous function.

I was just saying that the answer to the initial question of how to target a movie clip in canvas mode is with "this" not "root".

[just.emma]

BTW, using a graphic symbol and the frame picker (instead of a movie clip) could also help you get the results you want: Create symbol instances in Animate CC

[Colin Holgate]

That wouldn't help if you wanted a random banana.

[just.emma]

Where did she say anything about wanting it to be random?  She asked how to go to a specific frame (5).

[Colin Holgate]

A common use case for gotoAndStop() is where you might at some times want to go to a different frame. If you always want to show that same image, then it need not be a symbol at all.

[Nebulous_Dawn]

Just to recap/clarify

What I was after is as follows:

I have an mc which has several frames, and I want to be able to go to a specific frame within that mc, but calling it from the main script that I have at the top level of my document. (As far as possible I prefer to have all my scripting in one place at the top level, rather than dotting it about on multiple frames and mcs.)

I don't really have an mc called banana, it was just a simplified example, to illustrate the situation.

so - I have tried using "this.banana.gotoAndStop" from my main script, but it doesn't work. It used to work in Flash/swf as I remember, but it does not seem to work with Animate/canvas.

Incidentally I like to start my script with

var root = this;

so that I can say "root.whatever...", rather than "this.whatever...". I find it easier to scan the code that way. That is why I was saying "root.banana.gotoAndStop". maybe that's not best practice - works for me though...

I am optimistic that Colin's posts will solve my problem. Unfortunately I am now tied up in some other non-Animate work and can't test it out for a few days.

Anyway, thanks very much to all of you for the help and comments. As soon as I get a chance to test it I will get back with my results.

[Colin Holgate]

Thanks for the extra info, though I'm still curious about what is your use case, for needing to tell a movieclip to go to a particular frame?

Watch out in your tests of code in this thread. Some places the mc is called bananas, and other places it's being accessed with this.banana.gotoAndStop, etc. That missing s might not be easy to notice.

[Nebulous_Dawn]

Finally got around to re-testing, and got my thing working 🙂

Because my canvas has a preloader screen, I was assuming everything was ready as soon as it appeared on the screen, but in fact, although all the assets had loaded, the elements within the canvas were not all constructed.

Originally I had set all the "gotoAndStops" immediately after the canvas had loaded - and nothing was happening.

I did not really need the gotoAndStops to run that early, so I moved them in the code to run later (after the user had clicked a few buttons, a splash screen had come and gone, etc.) - that fixed it.

Here's my final working code:

/* immediately on load */

var root = this;

/* inside a function later on, after the mcs all had time to build */

for (i = 1; i < 13; i++) {

    root.text_blocks["text_block_" + i].gotoAndStop(i-1);

}

So it looks as if my code was ok in the first place, except that I had it too early in the file.

Colin's first reply set me on the right track, so I will mark it as the correct answer, but the thread as a whole was very helpful.