Scrubbing bar that controls many timelines

Question

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.

Answer 1

Well I think I've got it..but not quite
So I changed nothing of the Sarah Justine code above
But I just added all the animations to the one time line of timeLinePlay and then grouped the elements for each specific animation
So then when the buttons are clicked they go to timeLinePlay and hide or show the specific groups/ animation.
So the code looks like this for one of the buttons:
var myVariable = sym.getComposition().getStage().play("timeLinePlay");
myVariable.getSymbol("timeLinePlay").$("Group1").show();
myVariable.getSymbol("timeLinePlay").$("Group2").hide();
Which works fine - but it only works for the first click. If i navigate to another button that hides and shows a different element then it doesn't work anymore - it shows nothing
So I tried resetting the timeLinePlay animation with this:
document.compositionReady:
sym.resetTimeLinePlay = function() {
getSymbol("timeLinePlay").$("Group1").hide();
getSymbol("timeLinePlay").$("Group1").hide();
buttons:
sym.getComposition().getStage().resetTimeLinePlay();
But thats not working either - I assume because straight after the reset, the button also says - to play timeline and hide and show elements so its obviously getting confused.
Would anyone possibly know how to fix this?
Thanks you so much in advance