Hi all,
I've been working with this code from Create Click and Touch Draggable Scrubbers with Edge Animate CC | sarahjustine.com
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
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 scrubWidth = bottomY - topY;
// Confine the scrubber to the height of the bar
if (possibleY < topY) {
possibleY = topY;
}
if (possibleY > bottomY) {
possibleY = bottom;
}
scrubber.offset({
bottom: possibleY
});
var relativeY = possibleY - topY;
var stopTimeline = Math.ceil((relativeY / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay
mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released
}
})
})
but I don't really understand everything that's happening code wise.
Using this as is sets the scrubber at the top of the bar and when you drag down, the timeline plays from start to end, if you drag up it plays in reverse.
I want the timeline to do the opposite, so the scrubber starts at the bottom and the timeline plays forwards when dragged upwards.
Can anyone help point me to the code that needs changing?