Animate CC HTML5 Canvas - loop X times and then stop mid animation, not on endframe

[laurens47891653]

Hi,

Been searching online for hours and can't find an answer to this? Surely other people are having the same problem?

Trying to create a simple HTML5 Canvas ad animation, Adobe CC Animate.

Frame 0 (START)

|

|

Frame 50 (Endframe)

|

|

Frame 60 (Endframe fades out to white so the animation can loop nicely)

The only resources I can find are telling me to put this on the last frame:

if(!this.alreadyExecuted){

this.alreadyExecuted=true;

this.loopNum=1;

} else {

this.loopNum++;

if(this.loopNum==3){

this.stop();

}

}

But this just loops the whole timeline from Frame 0 to 60. That means my endframe would just be a solid white empty panel (the fadeout).

Anyone have any ideas? I think it needs to be something like:

Frame 0 (START)

|

|

Frame 50 (Endframe) If loop =<2, continue playing. If loop = 3, stop here.

|

|

Frame 60 If loop =<2, go to frame 0 + play.

Many thanks in advance!

Lauren

[kglad]

put that code on line 50.

[laurens47891653 · Accepted solution]

Omg I want to cry, I was so close haha. To be fair, it was 2am. I think my brain stopped working.

Thanks kglad. Legend.

Heads up for others: You still need that gotoandplay on the endframe, to make it loop.

Frame 0 (START)

Frame 50 (Desired Endframe)

if(!this.alreadyExecuted){

this.alreadyExecuted=true;

this.loopNum=1;

} else {

this.loopNum++;

if(this.loopNum==3){

this.stop();

}

}

Frame 60 (Timeline endframe)

this.gotoAndPlay(0);

[ClayUUID]

You shouldn't need that code in the last frame if you have the timeline set to loop in the publish settings.

And the code you're using is needlessly verbose. You can accomplish the same thing with just this:

if (!this.looped) this.looped = 1;

if (this.looped++ > 3) this.stop();