Skip to main content
Wadus2020
Wadus2020
Participating Frequently
October 24, 2018
Question

How to move to a specific frame in Adobe Animate?

  • October 24, 2018
  • 1 reply
  • 1746 views

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?

    This topic has been closed for replies.

    1 reply

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    October 25, 2018

    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
    Wadus2020Author
    Participating Frequently
    October 25, 2018

    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
    Wadus2020Author
    Participating Frequently
    October 25, 2018

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices