Hi all,
Is it possible for a scrubbing bar on the main stage to control the time lines of many symbols?
I'm using this code from Sarah Justine
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("timelinePlayl"); // 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)) {
sym.$("mobileHit").show(); // Show the extra invisible div to increase the hit region for mobile (hard to grab otherwise)
$(function () {
scrubber.bind("touchstart", function (e) { // Enable the scrib 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 possibleX = touch.pageX;
var leftX = bar.offset().left;
var rightX = (leftX + bar.width()) - scrubber.width();
var scrubWidth = rightX - leftX;
// Confine the scrubber to the width of the bar
if (possibleX < leftX) {
possibleX = leftX;
}
if (possibleX > rightX) {
possibleX = rightX;
}
scrubber.offset({
left: possibleX
});
var relativeX = possibleX - leftX;
var stopTimeline = Math.ceil((relativeX / scrubWidth) * 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 possibleX = e.pageX;
var leftX = bar.offset().left;
var rightX = (leftX + bar.width()) - scrubber.width();
var scrubWidth = rightX - leftX;
// Confine the scrubber to the width of the bar
if (possibleX < leftX) {
possibleX = leftX;
}
if (possibleX > rightX) {
possibleX = rightX;
}
scrubber.offset({
left: possibleX
});
var relativeX = possibleX - leftX;
var stopTimeline = Math.ceil((relativeX / scrubWidth) * symDur); // Make the scrubber scrub the timeline length of timelinePlay
mySymbol.stop(stopTimeline); // Stop the timeline of timelinePlay when the scrubber is released
}
})
})
What would be the best way to edit it so the scrubbers effected a few symbols?
At the moment that scrubber is specifically linked to timeLinePlay - but what if we had a few symbols with timelines we could scrub through?
In my scene there are a few buttons that createChildSymbols in a content box, and I would like the user to scrub through the timeline of each symbol with a scrubber bar.
I watched a tutorial on variables so attempted writing a few myself but they didn't seem to work, so I just copied the code a few times on the main stage actions and changed the names of the symbols and scrubbers etc - which unfortunately didn't work either.
I'm sure there is a simple way with variables that this could be achieved
Does anyone have any ideas??
Thank you very much in advance for any advice.