8 Replies Latest reply on Feb 7, 2013 10:39 AM by TimJaramillo

    Scrubbing different areas of the timeline.

    Jacksoneon

      This is a branch from an earlier thread here: http://forums.adobe.com/message/4752554#4752554#4752554 Thank you so much for making this available for me to use.

       

      In the thread, a way was created to scrub through an edge timeline. I was wondering, is there a way to scrub through five different symbol animations? I have five objects lined up from left to right, and when you touch one it scales full screen and starts the object's animation. You can scrub the video back and forth for each separately. I'm just starting to understand what each part of the code does. I can make it work with one animation, but I haven't been able to get it for all five yet.

       

      Also, some smaller things. Is it possible to make the scrubber automatically move down the bar as the symbol plays from the beginning? Right now it stays still until I touch it, than I can scrub.

       

      Thanks,

       

      Jackson

        • 1. Re: Scrubbing different areas of the timeline.
          TimJaramillo Level 4

          Hi Jacksonean,

           

          Yes, you can scrub through multiple different timelines with different scrubbers. There are several ways to do this. One way would be: on press/drag of each scrubber, filter the event through a switch statement and based on the scrubber ID, control the relevant timeline.

           

          And yes, you can make the scrubber move as the timeline plays as well. Start a setInterval timer when the timeline plays, and set the x (css left) position of the scrubber based on the current frame label divided by total frames of the playing timeline. When the timeline stops playing, be sure to clear the setInterval!

           

          Quasi-code, to put on Stage.compositionReady event:

           

          (you will need to run this "currentScrubPosition" var through a custom utility function (getTranslation) to get the actual position to place the scrubber, relative to it's min and max x positions)

           

          // you'll need to set up vars for all 5 of your timelines/scrubbers

          var minInput1 = 0; // start of timeline

          var maxInput1 = sym.getSymbol("my_timeline1").getDuration(); // duration of timeline

          var minOutput1 = 100; // left most constraint of scrubber

          var maxOutput1 = 500; // right most constraint of scrubber


           

          // when timeline starts playing, run setInterval, with the code below in it (what out for scope issues!)

          var tempScrubPosition = sym.getSymbol("my_timeline1").getPosition()/sym.getSymbol("my_timeline1").getDuration();

          var translatedScrubPosition = getTranslation(minInput1, maxInput1, minOutput1, maxOutput1, tempScrubPosition);

           

          function getTranslation(minInput, maxInput, minOutput, maxOutput, inputNumber) {

               var translatedVal = ((inputNumber - minInput) * (maxOutput - minOutput)/(maxInput - minInput) ) + minOutput;

               return translatedVal;

          }


          • 2. Re: Scrubbing different areas of the timeline.
            Jacksoneon Level 1

            Ok, I'm going to look over this when I get to work on it tonight. Thanks!! I'll let you know how it goes then.

            • 3. Re: Scrubbing different areas of the timeline.
              Jacksoneon Level 1

              Hi Tim,

               

              Thanks for your help with the code for this app. I understand the concepts of what you are saying to do, I just need to figure out how to place it together. We actually decided to change the design a little bit, and instead of having a scrub bar at the bottom, the user can scrub by scrubbing the entire picture back and forth (like swiping). You can do this in InDesign using a png sequence, but that is only for 1 animation.

               

              Would I be able to use the exact same methods you described but make the bar/scrubber invisible over the entire stage? Below are some pictures of the app (click on one of the images and it expands to play animation you can scrub).

              Screen Shot 2013-01-13 at 10.16.49 PM.pngScreen Shot 2013-01-13 at 10.16.19 PM.png

              • 4. Re: Scrubbing different areas of the timeline.
                TimJaramillo Level 4

                Hey Jacksonean, yep- to make the whole Stage the "scrub hit area", you can add an event for touchmove to the Stage, and add code to track the touch position like the example below, and pass that value to an "onSwipe" func on Stage.

                 

                 

                // code on Stage.touchmove:

                 

                e.preventDefault();

                 

                if ( e.pageX == undefined ) {

                          var touch = e.originalEvent.touches [0] || e.originalEvent.changedTouches [0];

                    

                     // pass touch position to "onSwipe" func at Stage

                     sym.getComposition().getStage().onSwipe( touch.pageX );

                }

                 

                 

                 

                // code on Stage.compositionReady:

                 

                sym.animScrubPosition;

                sym.scrollThumbXPos;

                sym.stageWidth = sym.$('Stage').width();

                sym.animTimelineLength = 4000;// 4000ms

                 

                sym.onSwipe = function(pos)

                {

                      sym.scrollThumbXPos = pos;

                 

                             // scrub to corresponding anim frame

                      sym.getSymbol('container').stop(sym.getScrubPos());

                }

                 

                 

                sym.getScrubPos = function()

                {

                               //this.scrollThumbXOffsetPos = sym.scrollThumbXPos - this.scrollThumbXPosMin;

                               sym.animScrubPosition = (sym.scrollThumbXPos/sym.stageWidth) * sym.animTimelineLength;

                 

                               return sym.animScrubPosition;

                }

                 

                 

                 

                Example (this test was for another user, but you should be able to leverage it for your use case):

                www.timjaramillo.com/code/edge/swipe_v5/test.html

                 

                Source:

                www.timjaramillo.com/code/edge/_source/swipe_example_v5.zip

                • 5. Re: Scrubbing different areas of the timeline.
                  Jacksoneon Level 1

                  Uggh you are so invaluable. Thank you so much Tim. I am going to work on it and I may be back

                  • 6. Re: Scrubbing different areas of the timeline.
                    TimJaramillo Level 4

                    No problem, let us know how it goes!

                    • 7. Re: Scrubbing different areas of the timeline.
                      klausdps

                      Hi Tim! Awesome how you help the comunity! I tried your demos, but somehow i am looking for something else. I would like to scrub trough a long (wide) animation which i wanna use in adobe dps. It should look kind of the scrollable area overlay of adobe dps but not static.

                       

                      In your demos i cant lift the finger and scroll again with another swipe.

                       

                      Something like that:

                       

                      http://www.northeastmagic.com/adobeEdge/scrollbar_scrubber/test7.html

                       

                       

                      Is this possible in adobe edge animate?

                      • 8. Re: Scrubbing different areas of the timeline.
                        TimJaramillo Level 4

                        Hi klaus, since this is a unique topic, can you open a new thread for this request, and  I'd be glad to help out! You can title it something like: "Controlling Timeline With Touch". If you PM me when it's up I'll be sure to take a look.