6 Replies Latest reply on Jan 3, 2017 6:44 AM by Tonyteach

    How do I get this code to play backwards?

    Tonyteach Level 1

      I found an awesome tutorial from Sarah Justine to play a movieclip via a scrubber or slider:
      Create Click and Touch Draggable Scrubbers with Edge Animate CC | sarahjustine.com

       

      BUT, I can't figure out why the code plays my timeline in reverse.

      I'm looking to have the scrubber play the timeline forward (as it actually is)
      Here is the code:

       

      // insert code to be run when the symbol is created here
      var symDur = sym.getSymbol("timelinePlay").getDuration(); // Get the timeline length of timelinePlay. We'll reference this later in the code.
      var mySymbol = sym.getSymbol("timelinePlay"); // Get the symbol timelinePlay. We'll reference this later in the code.
      var scrubber = sym.$("scrubber"); // Touch this to scrub the timeline of timelinePlay
      var bar = sym.$("bar"); // Bar the scrubber follows
      sym.$("mobileHit").hide(); // Added an extra invisible div to increase the hit region for mobile (hard to grab otherwise)
      var dragme = false; // Set the initial dragme function to false
      
      
      
      
      
      
      // Detect if mobile device, and if so swap out mouse events for touch events. This is pretty much duplicated code with touch events swapped.
      
      
      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
      
      
          $(function () {
      
      
              scrubber.bind("touchstart", function (e) { // Enable the scrubber on touchstart
                  e.preventDefault(); // Cancels the default action of the mobile device - used to ensure our touch events are fired
                  dragme = true;
              });
      
      
              scrubber.bind("touchend", function () { // Disable the scrubber on touchend
                  e.preventDefault(); 
                  dragme = false;
              });
      
      
              scrubber.bind("touchmove", function (e) { // Make the magic happen on touchmove
                  if (dragme) {
                      var touch = e.originalEvent.touches[0]; 
                      var possibleY = touch.pageY;
                      var topY = bar.offset().top; 
                      var bottomY = (topY + bar.height()) - scrubber.height();
                      var scrubHeight = bottomY - topY; 
      
      
        // Confine the scrubber to the width of the bar
      
      
                      if (possibleY < topY) {
                          possibleY = topY;
                      }
      
      
                      if (possibleY > bottomY) {
                          possibleY = bottomY;
                      }
      
      
                      scrubber.offset({
                          top: possibleY
                      });
      
      
                      var relativeY = possibleY - topY;
                      var stopTimeline = Math.ceil((relativeX / scrubHeight) * symDur); // Make the scrubber scrub the timeline length of timelinePlay
      
      
                      mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released
      
      
                  }
              });
          })
      }
      
      
      else $(function () {
      
      
          scrubber.mousedown(function () { // Enable the scrubber on mousedown
              dragme = true
          })
          $(document).mouseup(function () { // Disable the scrubber on mouseup
              dragme = false
          })
          $(document).mousemove(function (e) { // Make the magic happen on mousemove
              if (dragme) {
                  var possibleY = e.pageY;
                  var topY = bar.offset().top;
                  var bottomY = (topY + bar.height()) - scrubber.height();
                  var scrubHeight = bottomY - topY;
      
      
                  // Confine the scrubber to the height of the bar
                  if (possibleY < topY) {
                      possibleY = topY;
                  }
      
      
                  if (possibleY > bottomY) {
                      possibleY = bottomY;
                  }
      
      
                  scrubber.offset({
                      top: possibleY
                  });
      
      
                  var relativeY = possibleY - topY;
                  var stopTimeline = Math.ceil((relativeY / scrubHeight) * symDur); // Make the scrubber scrub the timeline length of timelinePlay
      
      
                  mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released
      
      
              }
          })
      })
      
      
      
      

       

      Message was edited by: Anthony Ross