2 Replies Latest reply on Oct 19, 2014 8:40 AM by CatSulzmann

    Scrubbing bar that controls many timelines

    CatSulzmann

      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.

        • 1. Re: Scrubbing bar that controls many timelines
          CatSulzmann Level 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

          • 2. Re: Scrubbing bar that controls many timelines
            CatSulzmann Level 1

            Well i fixed it

            It might not be the most professional way .. but its they only way i could work it out....

            Basically if you would like to use the Sarah Justine code above but have the scrubber affect a few animations then -

            1.put all the animations into one symbol (for mine they were png sequences) - group each animation and name them appropriately

            2.keep Sarah's code exactly the same in the document.compositionReady

            3.Have buttons on click, call up the Symbol and then specify if you want certain groups on or off

            var myVariable = sym.getComposition().getStage().play("timeLinePlay");

            myVariable.getSymbol("timeLinePlay").$("Group1").show();

            myVariable.getSymbol("timeLinePlay").$("Group2").hide();

             

            The scrubber will work for anything called up in timeLinePlay

            You just need the animations to all the the same length

             

            And don't make the same mistake as me by putting stop actions on the symbol from the main stage - it just won't work then

            Hope that's some help for anyone with the same question