28 Replies Latest reply on Dec 8, 2016 12:27 PM by cgisims

    Play animation in reverse using javascript/canvas

    andyjmacleod

      Hi,

       

      I have a play button, which I use the following javascript to operate.

       

      this.play_animation.addEventListener("click", playAnimation.bind(this));

      function playAnimation() {

           this.play();

      }

       

      I'd like to use another button to play the timeline in reverse... but I'm stuck. The closest I've gotten is this:

       

      this.play_reverse.addEventListener("click", playReverse.bind(this));

      function playReverse() {

           this.on("tick", rewind.bind(this));

      }

       

      function rewind(e) {

           this.gotoAndStop((this.currentFrame - 1));

      }

       

      Any help would be appreciated.

       

      Andy

        • 1. Re: Play animation in reverse using javascript/canvas
          kglad Adobe Community Professional & MVP

          try:

           

          this.play_reverse.addEventListener("click", playReverse.bind(this));

           

          function playReverse() {

              if(createjs.Ticker.hasEventListener('tick')){

                  createjs.Ticker.removeAllEventListeners();

              }

              createjs.Ticker.addEventListener("tick", rewindF.bind(this));

          }

          function rewindF(e) {

              this.gotoAndStop((this.currentFrame - 1));

              if (this.currentFrame == 1) {

                  createjs.Ticker.removeAllEventListeners();

              }

              stage.update();

          }

           

          this.play_mc.addEventListener("click", playAnimation.bind(this));

           

          function playAnimation() {

              if(createjs.Ticker.hasEventListener('tick')){

                  createjs.Ticker.removeAllEventListeners();

              }

              createjs.Ticker.addEventListener("tick", playF.bind(this));

          }

          function playF(e){

              this.gotoAndStop(this.currentFrame+1);

              stage.update();

          }

          1 person found this helpful
          • 2. Re: Play animation in reverse using javascript/canvas
            andyjmacleod Level 1

            Thanks for the help...

             

            My play button works as expected. However, when I click the play_reverse_btn, it reverses the animation all the way back to frame 2. (The first frame is frame 0?). Ideally, I want the animation to reverse until there is a "this.stop();" instruction (because I want to be able to reuse this code in other animations in the future without having to reference particular frames).

             

            This is the current state of my code:

             

            this.play_forwards_btn.addEventListener("click", playForwards.bind(this));

             

            // play_forwards_btn - working...

            this.play_forwards_btn.addEventListener("click", playForwards.bind(this));

             

            function playForwards() {

              this.play();

            }

             

            // play_reverse_btn - not quite there yet...

            this.play_reverse_btn.addEventListener("click", playReverse.bind(this));

             

            function playReverse() {

                if(createjs.Ticker.hasEventListener('tick')){

                    createjs.Ticker.removeAllEventListeners();

                }

                createjs.Ticker.addEventListener("tick", rewindF.bind(this));

            }

            function rewindF(e) {

                this.gotoAndStop((this.currentFrame - 1));

                if (this.currentFrame == 1) {

                    createjs.Ticker.removeAllEventListeners();

                }

                stage.update();

            }

             

            Thanks again for your help,


            Andy

            • 3. Re: Play animation in reverse using javascript/canvas
              kglad Adobe Community Professional & MVP

              change this line which stops at frame 1 (the 2nd frame):

               

              if (this.currentFrame == 1) {

               

              to change the frame where the reverse stops.  you'll need to hardcode the frame number or frame label.

               

              (p.s when using the adobe forums, please mark helpful/correct responses, if there are any.)

              1 person found this helpful
              • 4. Re: Play animation in reverse using javascript/canvas
                andyjmacleod Level 1

                I could hardcode the frame number/label...

                 

                But there must be a way to use an if statement to check whether to stop?

                 

                Could I add a boolean variable to keyframes to trigger the stop? For example:

                 

                In the first frame:

                 

                var stop = false;

                 

                In the other keyframes:

                 

                stop = true;

                 

                and then in the rewind function:

                 

                if ((stop == true) || (this.currentFrame == 0)) {

                  // Code to stop the function

                } else {

                  // Go to previous frame

                }

                • 5. Re: Play animation in reverse using javascript/canvas
                  kglad Adobe Community Professional & MVP

                  yes, you could do something like that.  but don't use a keyword like stop for your boolean, use something like

                   

                  var stop_bool=false;

                  • 6. Re: Play animation in reverse using javascript/canvas
                    andyjmacleod Level 1

                    I'm still missing something... When I click my play_reverse_btn, it will reverse back to (say) frame 30, as per the code below. At this point, the play_reverse_btn will continue to work, but the play_forwards_btn is not working...

                     

                    // This bit seems to work..

                    this.play_reverse_btn.addEventListener("click", playReverse.bind(this));

                     

                    // This bit seems to work too... because the animation starts to reverse...

                    function playReverse() {

                        if(createjs.Ticker.hasEventListener('tick')){

                            createjs.Ticker.removeAllEventListeners();

                        }

                        createjs.Ticker.addEventListener("tick", rewindF.bind(this));

                    }

                     

                    // The issue lies in here...

                    function rewindF(e) {

                        this.gotoAndStop((this.currentFrame - 1));

                        if (this.currentFrame == 30) {

                            createjs.Ticker.removeAllEventListeners(); // Issue here?

                        }

                        stage.update();

                    }

                     

                    I'm not enough of a javascript guru to figure it out...

                    • 7. Re: Play animation in reverse using javascript/canvas
                      kglad Adobe Community Professional & MVP

                      where's the problematic code?

                      • 8. Re: Play animation in reverse using javascript/canvas
                        ClayUUID Adobe Community Professional

                        If you want to get a bit silly, you can use reflection to look for some special character sequence in the current frame's code:

                         

                        if ((this["frame_" + this.currentFrame].toString().indexOf("none_shall_pass") > 0) || (this.currentFrame == 0)) {

                          // Code to stop the function

                        } else {

                          // Go to previous frame

                        }

                         

                        This would cause any frame containing...

                         

                        var none_shall_pass;

                         

                        ...to stop.

                         

                        This would have the slight advantage of stopping the rewind immediately, rather than waiting on the frame code to execute and set a variable.

                         

                        Note that the key phrase is declared as a variable instead of just a comment because apparently some JavaScript engines don't include comments when toString() is called on a function.

                        • 9. Re: Play animation in reverse using javascript/canvas
                          andyjmacleod Level 1

                          I have an actions layer with my code in the first frame, if that is what you mean?

                          • 10. Re: Play animation in reverse using javascript/canvas
                            kglad Adobe Community Professional & MVP

                            you said the problem was your play_forwards button.  where's the play_forwards button code?

                            • 11. Re: Play animation in reverse using javascript/canvas
                              andyjmacleod Level 1

                              Here is what I currently have, including the play_forwards_btn (which seems to work correctly until I use the play_reverse_btn...

                               

                              this.play_forwards_btn.addEventListener("click", playForwards.bind(this));

                              function playForwards() {

                                this.play();

                              }

                               

                              this.play_reverse_btn.addEventListener("click", playReverse.bind(this));

                              function playReverse() {

                                if(createjs.Ticker.hasEventListener("tick")){

                                      createjs.Ticker.removeAllEventListeners();

                                  }

                                  createjs.Ticker.addEventListener("tick", rewindF.bind(this));

                              }

                              function rewindF(e) {

                                this.gotoAndStop((this.currentFrame - 1));

                                  if (this.currentFrame == 30) {

                                      createjs.Ticker.removeAllEventListeners();

                                  }

                                  stage.update();

                              }

                               

                              Thanks,

                               

                              Andy

                              • 12. Re: Play animation in reverse using javascript/canvas
                                kglad Adobe Community Professional & MVP

                                that's not the code i suggested.  use the code from message 1

                                • 13. Re: Play animation in reverse using javascript/canvas
                                  andyjmacleod Level 1

                                  Yes, I see that I've made some assumptions that are not valid...

                                   

                                  Your original code is just about working. I'm just getting the conditional statements working now...

                                  • 14. Re: Play animation in reverse using javascript/canvas
                                    andyjmacleod Level 1

                                    Here is my fully working code

                                     

                                    this.stop();

                                     

                                    this.play_forwards_btn.addEventListener("click", playForwards.bind(this));

                                    function playForwards() {

                                      if(createjs.Ticker.hasEventListener("tick")){

                                            createjs.Ticker.removeAllEventListeners();

                                        }

                                        createjs.Ticker.addEventListener("tick", playF.bind(this));

                                    }

                                     

                                    function playF(e) {

                                      this.gotoAndStop(this.currentFrame + 1);

                                      if ((this.currentFrame == 29) || (this.currentFrame == 59) || (this.currentFrame == 89) || (this.currentFrame == 119)) {

                                      createjs.Ticker.removeAllEventListeners();

                                      }

                                      stage.update();

                                    }

                                     

                                    this.play_reverse_btn.addEventListener("click", playReverse.bind(this));

                                    function playReverse() {

                                      if(createjs.Ticker.hasEventListener("tick")){

                                            createjs.Ticker.removeAllEventListeners();

                                        }

                                        createjs.Ticker.addEventListener("tick", playR.bind(this));

                                    }

                                     

                                    function playR(e) {

                                      this.gotoAndStop(this.currentFrame - 1);

                                      if ((this.currentFrame == 29) || (this.currentFrame == 59) || (this.currentFrame == 89) || (this.currentFrame == 119)) {

                                      createjs.Ticker.removeAllEventListeners();

                                      }

                                      stage.update();

                                    }

                                     

                                    I'll probably change the conditional logic to use frame labels or a boolean value... but at least I now have a working animation!

                                     

                                    Many thanks to kglad for all the help - couldn't have done it without you!

                                     

                                    Andy

                                    • 15. Re: Play animation in reverse using javascript/canvas
                                      kglad Adobe Community Professional & MVP

                                      you're welcome.

                                      1 person found this helpful
                                      • 16. Re: Play animation in reverse using javascript/canvas
                                        andyjmacleod Level 1

                                        Not sure whether to add this here or create a separate discussion... but I notice that my play_forwards_btn and play_reverse_btn states don't work correctly.

                                         

                                        When I first run the animation, the "up" and "over" states work correctly. When I click the mouse, the "down" state appears as expected.

                                         

                                        However, when the animation stops at the next keyframe, the mouse state gets trapped in its current state. It seems as if the removeAllEventListeners is the problem here. What's the best way to correct this problem?

                                         

                                        Thanks,


                                        Andy

                                        • 17. Re: Play animation in reverse using javascript/canvas
                                          kglad Adobe Community Professional & MVP

                                          are you using simple buttons or movieclip buttons?

                                           

                                          are those buttons in one keyframe or are, at least, one of your buttons in more than one keyframe?

                                          • 18. Re: Play animation in reverse using javascript/canvas
                                            andyjmacleod Level 1

                                            They are instances of button symbols.

                                             

                                            The buttons are in the first frame of their own layer. I extended the timeline for that layer by inserting a new frame at the last point in the main timeline (frame 120).

                                             

                                            Thanks,


                                            Andy

                                            • 19. Re: Play animation in reverse using javascript/canvas
                                              kglad Adobe Community Professional & MVP

                                              then you shouldn't see a problem until the playhead returns to frame 0.

                                               

                                              to prevent that problem, move everything but your buttons and code to frame 1, and add the following to your frame 0 code:

                                               

                                              this.gotoAndStop(1);

                                               

                                              Screenshot - 10_29_2016 , 9_01_56 AM.png

                                              • 20. Re: Play animation in reverse using javascript/canvas
                                                andyjmacleod Level 1

                                                I did as you suggested but it didn't solve the problem (which is happening throughout the animation, rather than when the playhead returns to frame 0).

                                                • 22. Re: Play animation in reverse using javascript/canvas
                                                  andyjmacleod Level 1

                                                  It seems to have a similar issue to my own animation... If you click the forward button, it gets stuck in the state that it ends-up in...

                                                   

                                                  It is more noticeable in my example because I have a few stopping points as the animation progresses, so the forward button is noticeably stuck...

                                                   

                                                  The reverse button in your example does not seem to have the same issue.

                                                   

                                                  You can see a preview of my animation here... (without the background image, which resides in the images folder).

                                                   

                                                  Adobe Creative Cloud

                                                  • 23. Re: Play animation in reverse using javascript/canvas
                                                    kglad Adobe Community Professional & MVP

                                                    i don't know what's causing that.  it looks like a bug to me.

                                                     

                                                    i recommend using a movieclip button and see if you can work around the problem.

                                                    • 24. Re: Play animation in reverse using javascript/canvas
                                                      andyjmacleod Level 1

                                                      HI again,

                                                       

                                                      I tried as you suggested, and I had the same problem with custom movieclip-buttons. Here is my current code:

                                                       

                                                      this.stop();

                                                       

                                                      // Play forwards button - mouseover event

                                                      var frequency = 10;

                                                      stage.enableMouseOver(frequency);

                                                      this.play_forwards_btn.addEventListener("mouseover", playMouseOver.bind(this));

                                                      function playMouseOver(){

                                                        this.play_forwards_btn.gotoAndStop(1);

                                                      }

                                                       

                                                      // Play forwards button - mouseout event

                                                      stage.enableMouseOver(frequency);

                                                      this.play_forwards_btn.addEventListener("mouseout", playMouseOut.bind(this));

                                                      function playMouseOut(){

                                                        this.play_forwards_btn.gotoAndStop(0);

                                                      }

                                                       

                                                      // Play forwards button - click event

                                                      this.play_forwards_btn.addEventListener("click", playForwards.bind(this));

                                                      function playForwards() {

                                                        if (createjs.Ticker.hasEventListener("tick")) {

                                                        createjs.Ticker.removeAllEventListeners();

                                                        }

                                                        createjs.Ticker.addEventListener("tick", playF.bind(this));

                                                        // Activate "down" button state

                                                        if (this.currentFrame < (this.totalFrames - 1)) {

                                                        this.play_forwards_btn.gotoAndPlay(2);

                                                        }

                                                      }

                                                      function playF(e) {

                                                        // NB: the last frame index is equal to (this.totalFrames - 1) since the first frame is frame 0

                                                        if (this.currentFrame < (this.totalFrames - 1)) {

                                                        this.gotoAndStop(this.currentFrame + 1);

                                                        }

                                                        if ((this.currentFrame == 29) || (this.currentFrame == 59) || (this.currentFrame == 89) || (this.currentFrame == 119)) {

                                                        createjs.Ticker.removeAllEventListeners();

                                                        }

                                                        stage.update();

                                                      }

                                                       

                                                      // Play reverse button - mouseover event

                                                      this.play_reverse_btn.addEventListener("mouseover", playReverseMouseOver.bind(this));

                                                      function playReverseMouseOver(){

                                                        this.play_reverse_btn.gotoAndStop(1);

                                                      }

                                                       

                                                      // Play forwards button - mouseout event

                                                      this.play_reverse_btn.addEventListener("mouseout", playReverseMouseOut.bind(this));

                                                      function playReverseMouseOut(){

                                                        this.play_reverse_btn.gotoAndStop(0);

                                                      }

                                                       

                                                      // Play reverse button - click event

                                                      this.play_reverse_btn.addEventListener("click", playReverse.bind(this));

                                                      function playReverse() {

                                                        if (createjs.Ticker.hasEventListener("tick")) {

                                                        createjs.Ticker.removeAllEventListeners();

                                                        }

                                                        createjs.Ticker.addEventListener("tick", playR.bind(this));

                                                        if (this.currentFrame > 0) {

                                                        this.play_reverse_btn.gotoAndPlay(2);

                                                        }

                                                      }

                                                      function playR(e) {

                                                        if (this.currentFrame > 0) {

                                                        this.gotoAndStop(this.currentFrame - 1);

                                                        }

                                                        if ((this.currentFrame == 0) || (this.currentFrame == 29) || (this.currentFrame == 59) || (this.currentFrame == 89)) {

                                                        createjs.Ticker.removeAllEventListeners();

                                                        }

                                                        stage.update();

                                                      }

                                                       

                                                      And in my movieclip-buttons (with similar code in each)...

                                                       

                                                      In Frame 0:

                                                      this.stop();

                                                       

                                                      In frame 1:

                                                      this.play();

                                                       

                                                      (Each movieclip-button consists of 8 frames. Frame 0 is the "up" state, frame 1 is the "over" state and frames 2-7 are the "down" state, which is just the same frame repeated for a fraction of a second so that it is visible on the click event).

                                                       

                                                      I can only surmise that when removing all the event listeners from the "tick" event, the current state of the buttons/movieclips is being kept...

                                                       

                                                      I am wondering whether to try an alternative method for achieving the reverse play... perhaps using setInterval instead of the "tick" event?

                                                       

                                                      Thanks,


                                                      Andy

                                                      • 25. Re: Play animation in reverse using javascript/canvas
                                                        kglad Adobe Community Professional & MVP

                                                        you may be correct.  i haven't tested enough to pinpoint the problem.

                                                        • 26. Re: Play animation in reverse using javascript/canvas
                                                          andyjmacleod Level 1

                                                          I changed tack slightly to avoid the problem of removing the button listeners. I've made the tick event independent of the button clicks. Now, I'm only using the button events to indicate the direction of playback. I now have both the animation and the buttons working correctly.

                                                           

                                                          The downside to my approach is that effectively, the animation is running even before the user initiates play. Although, CreateJS does seem to pause the animation when it is playing in the background.

                                                           

                                                          I've also created an array to store the stop frames, to make it easier to reuse this code in other projects.

                                                           

                                                          Here is my current code:

                                                           

                                                          // Stop the animation from playing initially

                                                          this.stop();

                                                          var playDirection = "stopped";

                                                           

                                                          // List the stop frames

                                                          var stopFrames = [0, 29, 59, 89, 119];

                                                           

                                                          // Setup the array.contains method to check for the stopFrames

                                                          Array.prototype.contains = function ( needle ) {

                                                             for (i in this) {

                                                                 if (this[i] == needle) return true;

                                                             }

                                                             return false;

                                                          }

                                                           

                                                          // Start ticking

                                                          createjs.Ticker.addEventListener("tick", gotoNextFrame.bind(this));

                                                          createjs.Ticker.setFPS(30);

                                                           

                                                          this.play_forwards_btn.addEventListener("click", playForwards);

                                                          this.play_reverse_btn.addEventListener("click", playReverse);

                                                           

                                                          // Once the play_forwards_btn is clicked, start playing forwards and disable the buttons

                                                          this.play_forwards_btn.addEventListener("click", playForwards);

                                                          function playForwards(){

                                                            playDirection = "forwards";

                                                            this.play_forwards_btn.removeEventListener("click", playForwards);

                                                          }

                                                           

                                                          // Once the play_reverse_btn is clicked, start playing in reverse and disable the buttons

                                                          this.play_reverse_btn.addEventListener("click", playReverse);

                                                          function playReverse(){

                                                            playDirection = "reverse";

                                                            this.play_reverse_btn.removeEventListener("click", playReverse);

                                                          }

                                                           

                                                          // Iterate to the next frame, if appropriate

                                                          function gotoNextFrame(event) {

                                                           

                                                            // If playing forwards...

                                                            if (playDirection == "forwards") {

                                                           

                                                            // ... go to the next frame

                                                            this.gotoAndStop(this.currentFrame + 1);

                                                           

                                                            // Else if playing in reverse...

                                                            } else if (playDirection == "reverse"){

                                                           

                                                            // ... go to the previous frame

                                                            this.gotoAndStop(this.currentFrame - 1);

                                                           

                                                            // Else, play is stopped...

                                                            } else /* (playDirection == "stopped") */ {

                                                           

                                                            // ... so remove any existing click event listeners, so that the appropriate ones can be re-enabled

                                                            this.play_forwards_btn.removeEventListener("click", playForwards);

                                                            this.play_reverse_btn.removeEventListener("click", playReverse);

                                                           

                                                            // If the current frame is not the last frame, then re-enable the forward click event

                                                            if (this.currentFrame < (this.timeline.duration - 1)) {

                                                            this.play_forwards_btn.addEventListener("click", playForwards);

                                                            }

                                                           

                                                            // If the current frame is not the first frame, then re-enable the reverse click event

                                                            if (this.currentFrame > 1) {

                                                            this.play_reverse_btn.addEventListener("click", playReverse);

                                                            }

                                                           

                                                            } // End of "else, play is stopped..."

                                                           

                                                            // Check to see if the new currentFrame is a stopping point. If it is, then prevent it from iterating on the next tick!

                                                           

                                                            if ( stopFrames.contains(this.currentFrame) ) {

                                                           

                                                            playDirection = "stopped";

                                                           

                                                            }

                                                          }

                                                          • 27. Re: Play animation in reverse using javascript/canvas
                                                            cgisims

                                                            Hi andyjmacleod,

                                                             

                                                            I need the exact functionality that you have here, except I need to use the arrow keys on the keyboard to go back and forth between specific frame numbers instead of mouse click.  Would that be doable with what you have here?  I'm a designer, not a coder, so I've been trying to read up and hack something together, but am a bit lost and have spent hours on it.  Any help you could give would be greatly appreciated.  Thanks!

                                                            • 28. Re: Play animation in reverse using javascript/canvas
                                                              cgisims Level 1

                                                              I've got it mostly working, but there is a bug.  If I use the arrow keys to play forwards and go to the end, and then reverse, it works great, until I get back to frame 1.  If I ever move forward in the timeline, and then back to frame 1, then go back forwards, it starts jumping past stop points in the array.  It also seems to jump further and further the more times I hit frame 1.  Not sure how it's even hitting frame 1, because it's not part of the array of stop points.  The buttons won't go back to frame 1, but the arrow keys do.  Not sure why.  Any ideas for me?  Here is the code I'm using:

                                                               

                                                              // Stop the animation from playing initially

                                                              this.stop();

                                                              var playDirection = "stopped";

                                                               

                                                              // List the stop frames

                                                              var stopFrames = [9, 20, 29];

                                                               

                                                              // Setup the array.contains method to check for the stopFrames

                                                              Array.prototype.contains = function ( needle ) {

                                                                 for (i in this) {

                                                                     if (this[i] == needle) return true;

                                                                 }

                                                                 return false;

                                                              }

                                                               

                                                              // Start ticking

                                                              createjs.Ticker.addEventListener("tick", gotoNextFrame.bind(this));

                                                              createjs.Ticker.setFPS(24);

                                                               

                                                              this.play_forwards_btn.addEventListener("click", playForwards);

                                                              this.play_reverse_btn.addEventListener("click", playReverse);

                                                               

                                                               

                                                              //test for key down

                                                              document.addEventListener("keydown", checkKey);

                                                               

                                                               

                                                              function checkKey(e) {

                                                               

                                                               

                                                                  e = e || window.event;

                                                                  switch(e.keyCode) {

                                                                      case 38:

                                                                      break;

                                                               

                                                               

                                                                      case 40:

                                                                      break;

                                                               

                                                               

                                                                      case 37:

                                                                      playReverse();

                                                                     

                                                                      break;

                                                               

                                                               

                                                                      case 39:

                                                                      playForwards();

                                                                      break;

                                                               

                                                               

                                                                      default: return; // exit this handler for other keys

                                                                  }

                                                              }

                                                               

                                                              // Once the play_forwards_btn is clicked, start playing forwards and disable the buttons

                                                              this.play_forwards_btn.addEventListener("click", playForwards);

                                                              document.addEventListener("keydown", checkKey);

                                                              function playForwards(){

                                                                playDirection = "forwards";

                                                                this.play_forwards_btn.removeEventListener("click", playForwards);

                                                               

                                                               

                                                                //remove keypress eventListener

                                                                document.removeEventListener("keydown", checkKey);

                                                              }

                                                               

                                                              // Once the play_reverse_btn is clicked, start playing in reverse and disable the buttons

                                                              this.play_reverse_btn.addEventListener("click", playReverse);

                                                              document.addEventListener("keydown", checkKey);

                                                              function playReverse(){

                                                                playDirection = "reverse";

                                                                this.play_reverse_btn.removeEventListener("click", playReverse);

                                                               

                                                               

                                                                //remove keypress eventListener

                                                                document.removeEventListener("keydown", checkKey);

                                                              }

                                                               

                                                              // Iterate to the next frame, if appropriate

                                                              function gotoNextFrame(event) {

                                                               

                                                                // If playing forwards...

                                                                if (playDirection == "forwards") {

                                                               

                                                                // ... go to the next frame

                                                                this.gotoAndStop(this.currentFrame + 1);

                                                                // Else if playing in reverse...

                                                                } else if (playDirection == "reverse"){

                                                               

                                                                // ... go to the previous frame

                                                                this.gotoAndStop(this.currentFrame - 1);

                                                                // Else, play is stopped...

                                                                } else /* (playDirection == "stopped") */ {

                                                               

                                                                // ... so remove any existing click event listeners, so that the appropriate ones can be re-enabled

                                                                this.play_forwards_btn.removeEventListener("click", playForwards);

                                                                this.play_reverse_btn.removeEventListener("click", playReverse);

                                                                //test for key down

                                                                document.removeEventListener("keydown", checkKey);

                                                               

                                                                // If the current frame is not the last frame, then re-enable the forward click event

                                                                if (this.currentFrame < (this.timeline.duration - 1)) {

                                                                this.play_forwards_btn.addEventListener("click", playForwards);

                                                                //test for key down

                                                                document.addEventListener("keydown", checkKey);

                                                                }

                                                               

                                                                // If the current frame is not the first frame, then re-enable the reverse click event

                                                                if (this.currentFrame > 1) {

                                                                this.play_reverse_btn.addEventListener("click", playReverse);

                                                               

                                                                //test for key down

                                                                document.addEventListener("keydown", checkKey);

                                                                }

                                                               

                                                                } // End of "else, play is stopped..."

                                                               

                                                                // Check to see if the new currentFrame is a stopping point. If it is, then prevent it from iterating on the next tick!

                                                               

                                                                if ( stopFrames.contains(this.currentFrame) ) {

                                                               

                                                                playDirection = "stopped";

                                                               

                                                                }

                                                              }