Skip to main content
G
Grim_1
Known Participant
April 21, 2018
Answered

How do I instruct a button to play a specific range of frames (i.e. "play from frame labelled X to frame labelled Y")

  • April 21, 2018
  • 2 replies
  • 2165 views

I'm sue this is very basic, but I cannot find the answer anywhere.  I am making an HTML5 canvas doc.

Thank you to any who can help.

    This topic has been closed for replies.
    Correct answer Colin Holgate

    Thank you!  I will try this.

    But, from your subtle tone , I'm thinking I've set out to do this is in a dumb way?  Is there a better way to do it?

    "It" being (I'm rounding all numbers etc for simplicity sake):

    • I have a thousand frame movie.
    • Every one hundred frames represents an animation (so there are ten animations that play in order).
    • I want to have controls that:

    1) Allows the user to watch all ten animations, in order, straight through (play button)

    2) Allow the user to skip to the next or previous animation, and just that animation (next, previous buttons)

    3) Allow the user to skip directly to any individual animation, and just that animation (go to x)

    Thanks.  You've helped a lot already so if not in the mood to keep going that's totally fine, I get it, and I appreciate the responses already.


    I thought of a safer approach, for the case where you want to either play one animation or all animations. You could have. variable that you test. On the last frame of each animation you have this:

    if(playone) this.stop();

    Then, when you tell them to play one animation you do this:

    playone = true;

    this.gotoAndPlay("animation 3");

    Animation 3 would play, and it would stop on the last frame of that animation. If you want to play all animations you would do:

    playone = false;

    this.gotoAndPlay("animation 1");

    The last frame of the last animation would have:

    this.stop();

    so that it stops whether you were playing one or all animations.

    2 replies

    G
    Grim_1Author
    Known Participant
    April 22, 2018

    Trying to make it more clear here -

    Basically, for the following line:

    _this.gotoAndPlay(XXXXX);

    What would I put in place of "XXXXX" to mean "frames 70 to 90"?

    C
    ClayUUID
    Legend
    April 23, 2018

    Nothing. The gotoAndPlay() function Does Not Work That Way. If you want playback to stop on a certain frame, you put a this.stop() on that frame.

    C
    ClayUUID
    Legend
    April 23, 2018

    Thank you for replying.  Is there another way I can make this happen?  I don't think I can put stop () in that frame because I want the user to be able to watch the entire movie straight through if they choose (without getting stopped at that frame).


    Sigh. Okay, if you're dead set on doing whatever weird thing you're doing, paste this code somewhere in your initialization where it will only ever be run once.

    createjs.MovieClip.prototype.playRange = function(startFrame, stopFrame) {

        var _this = this;

        stopFrame = _this.timeline.resolve(stopFrame);

        if (_this.playingRange) {

            createjs.Ticker.removeEventListener("tick", _this.playingRange);

        }

        _this.playingRange = createjs.Ticker.addEventListener("tick", function() {

            if (_this.currentFrame >= stopFrame) {

                createjs.Ticker.removeEventListener("tick", _this.playingRange);

                _this.playingRange = 0;

                _this.stop();

            }

        });

        _this.gotoAndPlay(startFrame);

    }

    This adds a new movieclip method that supports playing a range of frames. Either parameter can be a frame number or a frame label. Use like this:

    this.playRange(20, 50);

    ...or whatever. There's no error checking, so use responsibly.

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community Expert
      Community Expert
      April 21, 2018

      Hi.

      You code your button play from the initial label using your_movie_clip.gotoAndStop("X") and then you put a this.stop() inside of your_movie_clip in the frame where your label "Y" begins.

      G
      Grim_1Author
      Known Participant
      April 21, 2018

      Hi, thanks for responding!  Not sure if that would work.  I have no movie clips.  I may not have explained what I am trying to do clearly.

      They easiest way to describe it would be, if I had a 100 frame animation, I need the user to be able to just play the whole thing straight through (1-100), or, when clicking a button, they play frames 70-90 (start at 70, end at 90).  And there will be several instances where they can click a button and play a specific range.  I can't put stops anywhere because that will disrupt the flow of those who want to watch it straight through. 

      EDIT Sorry, I misunderstood your use of "movie clip" when stating I have no movie clips.  Basically I need the "stop and play" command to reside within the action for the button instance, and not be tied to any particular frame.  Thanks

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