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

    C
    ClayUUID
    Legend
    October 25, 2018

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

      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.

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