Start animation with timed intervals HTML5 Animate CC

[rhofstedt]

How can I tell Animate CC to start a movie clip at a specific time?

example:

6 instances of the same 5 second animation

I want them to start and play every 5 seconds.

1 starts 0:00

2 starts 0:05

3 starts 0:10

4 starts 0:15

5 starts 0:20

6 starts 0:25

It's basically a circle filling up in 5 seconds. The next one starts filling in sequence.

I'm not great at coding but may be able to puzzle it together with something to jump off with.

I was OK with AS2 before Animate CC came along.

Thanks for your help in advance.

-Ray

[Colin Holgate]

I am sure there are more elegant ways to do this, but an easy solution would be to use setTimeout. Here's how that would be in AS3 (in JavaScript you would need to put 'this.' in front of each movieclip name):

mc1.stop();

mc2.stop();

mc3.stop();

mc4.stop();

mc5.stop();

mc6.stop();

setTimeout(play2,5000);

setTimeout(play3,10000);

setTimeout(play4,15000);

setTimeout(play5,20000);

setTimeout(play6,25000);

play1();

function play1(){

  mc1.play();

}

function play2(){

  mc2.play();

}

function play3(){

  mc3.play();

}

function play4(){

  mc4.play();

}

function play5(){

  mc5.play();

}

function play6(){

  mc6.play();

}

[rhofstedt]

I am impressed with quick turnaround. Thanks Colin!

This makes sense to me, will give it a try and let you know how it goes.

Best,

Ray

[rhofstedt]

Getting a blank image. Movie clips not appearing.

tried "this" and "root" in front of instance name with same result. Working in HTML5 Canvas

Do I need to establish the setTimeout somehow?

Thanks,

Ray

[rhofstedt]

Your script totally works as an AS3 document. How can I edit for HTML5 Canvas?

[Colin Holgate]

Try this script:

this.mc1.stop();

this.mc2.stop();

this.mc3.stop();

this.mc4.stop();

this.mc5.stop();

this.mc6.stop();

setTimeout(play2,5000);

setTimeout(play3,10000);

setTimeout(play4,15000);

setTimeout(play5,20000);

setTimeout(play6,25000);

play1();

function play1(){

  this.mc1.play();

}

function play2(){

  this.mc2.play();

}

function play3(){

  this.mc3.play();

}

function play4(){

  this.mc4.play();

}

function play5(){

  this.mc5.play();

}

function play6(){

  this.mc6.play();

}

[Colin Holgate]

I have it worked out now. 'this' inside the functions doesn't work, which can be worked around by setting a variable. I used 'self'.

Also, the movieclips don't yet exist at the time that the script runs. You can work around that by putting the script on the second frame, that way when the script runs it will find the movieclips ok, because they already exist.

Here's the script that works:

this.stop();

var self = this;

this.mc1.stop();

this.mc2.stop();

this.mc3.stop();

this.mc4.stop();

this.mc5.stop();

this.mc6.stop();

setTimeout(play2,5000);

setTimeout(play3,10000);

setTimeout(play4,15000);

setTimeout(play5,20000);

setTimeout(play6,25000);

play1();

function play1(){

  self.mc1.play();

}

function play2(){

  self.mc2.play();

}

function play3(){

  self.mc3.play();

}

function play4(){

  self.mc4.play();

}

function play5(){

  self.mc5.play();

}

function play6(){

  self.mc6.play();

}

[rhofstedt · Accepted solution]

Colin,

This is working (get it? this) thanks for taking the time to help.

I did put the action on 2nd frame of scene 1 and everyone runs in sequence.

Now it's running but the clips aren't stopping even though I have a stop(); frame inside the movie clip when the circles are full. Any thoughts? Maybe label the stop frame somehow?

Here's my version, I renamed movie clips to "circ" for the circles that are filling up.

this.stop();

var self = this;

this.circ1.stop();

this.circ2.stop();

this.circ3.stop();

this.circ4.stop();

this.circ5.stop();

this.circ6.stop();

setTimeout(play2,5000);

setTimeout(play3,10000);

setTimeout(play4,15000);

setTimeout(play5,20000);

setTimeout(play6,25000);

play1();

function play1(){

  self.circ1.play();

}

function play2(){

  self.circ2.play();

}

function play3(){

  self.circ3.play();

}

function play4(){

  self.circ4.play();

}

function play5(){

  self.circ5.play();

}

function play6(){

  self.circ6.play();

}

[rhofstedt]

ok, found it.

this.stop(); inside the movie clip

WINNER

These actions will be useful on tons of stuff we do. Really appreciate the help.

Thanks,

Ray

[ClayUUID]

Here's an alternative approach. First, you should put this.stop(); statements inside each circle clip on the first frame so they're not dependent on external code to be stopped. Then run this to kick off the animation:

for (var i = 1; i < 6; i++) {

    setTimeout(function(){this.play();}.bind(this["mc" + i]), 5000 * i);

}

[rhofstedt]

nice! Thanks Clay.

I'll try this one out too.

Where you have "mc" is where I add instance name, correct?

[ClayUUID]

Yes.

[Colin Holgate]

He was using my example names. If your real movie clips are "circle1", "circle2", etc, the routine would be:

for (var i = 1; i < 6; i++) {

    setTimeout(function(){this.play();}.bind(this["circle" + i]), 5000 * i);

}

[rhofstedt]

this works for the sequence but clips don't stop when full. Keeps looping

for (var i = 1; i < 6; i++) {

    setTimeout(function(){this.play();}.bind(this["circ" + i]), 5000 * i);

}

How do we stop at end of clip?

[ClayUUID]

Umm... you already asked and answered that exact same question in this very thread. Like, five posts ago. But if adding this.stop() to the end of each clip is really too much bother, I suppose you could do this:

for (var i = 1; i < 6; i++) {

    setTimeout(function(){this.loop=false;this.play();}.bind(this["circ" + i]), 5000 * i);

}

[rhofstedt]

should have mentioned I did try to add this.stop(); at the end of MCs with no luck.

These syntaxes are new to me. Thanks for pointing me in the right direction. I'll give it a try.

[ClayUUID]

If you're working in an HTML5 Canvas document, there's no way this.stop(); didn't work, assuming you did in fact place it on the last frame of the circle clip.

[rhofstedt]

Clay,

the second script works with the loop=false added. Thanks

I did add this.stop(); on the last frame of circ mc. I haven't been programming long enough yet to understand what's up.

With your's and Colin's input, I have something to work with and can expand my training in AS3 and Canvas.

I appreciate the quick responses.

Later,

Ray

[rhofstedt]

SUCCESS! The concept I was working on was approved and we'll be testing this month.

Combination of scripts from Colin and Clay got me through it. Learned a lot.

Thanks again!

-Ray