How to move to a specific frame in Adobe Animate?

[Wadus2020]

I've published a HTML5 canvas project and am trying to rewind the timeline when it reaches a frame. This is what I'm trying:

From within the fnStartAnimation function:

stage.addEventListener("tick", handleTick)

handletick is defined as:

let pos = parseInt(stage.children[0].timeline.position);
if(pos === 44) {
    stage.stop(40);
    setTimeout(() => {
        stage.play();
    }, 2000);
}

The above code is a just an example. What I'm trying to do is once the timeline reaches frame 44, rewind to frame 40, wait 2 seconds and then restart the animation playback. It'd basically loop forever between frames 40 and 44.

If I do a console.log(pos) before the if statement, I can see that the timeline has been rewinded, but the animation playback continues to play where it was stopped (frame 44) and goes on until the end of the timeline.

I've also tried to manually set the timeline position like stage.children[0].timeline.setPosition(40) and stage.children[0].gotoAndPlay(40) with similar results.

Does anyone know what I am doing wrong? Why is the timeline position showing correctly but the animation isn't following along the timeline position?

[JoãoCésar]

Hi.

Try this:

Frame 1 (0):

this.loopRange = function(rangeStart, delay)
{
    this.gotoAndStop(rangeStart);
    setTimeout(function(){this.play();}.bind(this), delay);
}.bind(this);

Frame 44 (43):

this.loopRange(39, 2000);

Regards,

JC

[Wadus2020]

How would I add this code to the html file generated by Animate? I tried to add the following lines in the handleTick callback function when the timeline position reaches frame 44 but the same behavior in my original post happened:

stage.children[0].gotoAndStop(39);
setTimeout(() => {
  stage.children[0].play();
}, 2000);

I've been struggling with this for 2 days

[Wadus2020]

I've uploaded the published files here: Dropbox - Archive.zip

The yellow highlight on the girl face starts at frame 44 and ends at 50. What I'm trying to do is to loop over those frames 3 times. I've added this logic to the handleTick function on the html file, but it's not working properly.

[ClayUUID]

Wadus' code is on the right track, but he's doing basically everything wrong.

stage.addEventListener("tick", handleTick) 

Tick events are global, so the idiomatic way to do this is to add a listener to createjs.Ticker instead of any specific object.

let pos = parseInt(stage.children[0].timeline.position); 

• First, let is only supposed to be used when declaring a variable with block scope that might duplicate a variable name in the outer function scope. Just use var.
• Second, the correct way to address the root timeline is with the global variable exportRoot.
• Third, the correct way to get the current frame is by accessing the timeline's currentFrame property.
• Fourth, the current frame value is already an integer number, so passing it through parseInt() (which accepts strings, not numbers) is pointless.

stage.stop(40); 
stage.play(); 

• First, stop doesn't take an argument. It just stops the timeline wherever it is. To go to a frame and stop there you use (wait for it...) gotoAndStop.
• Second, both of these will (or should) do nothing, because the stage object is the global container, not the root timeline.

setTimeout(() => { 

Arrow functions aren't supported in IE11 (currently still 12% of the desktop browser market), and will just crash your code on that browser.

So, something like this should work:

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
     if (exportRoot.currentFrame === 44) {
          exportRoot.gotoAndStop(40);
          setTimeout(exportRoot.play, 2000);
     }
}

I'm away from my work computer right now, so not tested, may be wrong in some embarrassing way.

[Wadus2020]

Thanks for going over the code. If I don't use stage.stop(). exportRoot.gotoAndStop(40) doesn't stop the animation at all because Animate exports the following line in the html file:

createjs.Ticker.addEventListener("tick", stage);

The stage.addEventListener("tick", handleTick) line was actually exported by Animate as well.

Sorry if I've done everything wrong, but I was just following the code Animate exported and added a few lines.

[ClayUUID]

Hold up... are you saying you're hacking up the code that Animate generates when you publish? If yes, then noooo. That is absolutely the wrong approach. You're supposed to add code either directly on the timeline (typically in a dedicated "actions" layer), and/or as an included library.

Here's some actually tested code this time, verified to work for what you claim you want to do:

var repeatCount = 0;

createjs.Ticker.addEventListener("tick", handleTick);

function handleTick(evt) {

    if (exportRoot.currentFrame === 44) {

        if (repeatCount++ === 2) {

            evt.remove();

        }

        exportRoot.gotoAndStop(40);

        setTimeout(function(){exportRoot.play()}, 2000);

    }

}

[Wadus2020]

Thanks Clay, it's working on my end now as well.

One last thing.. I have added some other checks on the handleTick function for different frames. On frame 0, I want the timeline to stop for 2 seconds, however the girl's foot animation still plays. I've attached the FLA and published canvas files here: Dropbox - Archive.zip .

Do you know how to completely stop all the animations?

What I am trying to accomplish is to have a FLA file with 3 different phases:

1. static image at frame 0;

2. animation at frame 1 until 44 (girl dropping down with her foot moving);

3. highlight animation at 45 to 50 looping x number of times - the girl foot shouldn't animate here either.

Eventually these phases will be controlled by a different codebase, that's why I was trying not to add code to the FLA file.

[ClayUUID]

You know, if you want to control all these elements individually, you should make them movieclips. Animate is an animation program, after all. It's designed for this sort of thing.