5 Replies Latest reply on Apr 3, 2014 5:23 PM by TimJaramillo

    Scroll Timeline in a Div?

    bart_mc Level 1

      Example: http://www.bartmclaughlin.com/scroll_div/scroll_div_v1.html

       

      Edge project: https://www.yousendit.com/download/elNJc2ZOR0Y1R1BWUThUQw

       

      Now I want to control the timeline of a symbol on the stage using scroll. I’ve posted an example above, with a button that scrolls down the div.

       

      I don’t know how to simultaneously scrub the div’s timeline when scrolling in the div.

       

      This code below (that I got from Tim Jaramillo’s post here: http://forums.adobe.com/message/5058756#5058756) will scrub the timeline of the Stage when it’s placed in the Stage.scroll event, but I don’t know how to use it to scrub the timeline of my symbol.

       

      var myCalc = e.currentTarget.scrollTop/(e.currentTarget.scrollHeight-e.currentTarget.clientHeight);

      var pos = Math.round( myCalc * sym.getDuration() );

      sym.stop(pos);

       

      This question is similar to my question here: http://forums.adobe.com/message/6263651#6263651

      that was answered by hemanth kumar r. Thank you!

       

      bart

        • 1. Re: Scroll Timeline in a Div?
          TimJaramillo Level 4

          Hi there,

           

          Here is an example:

          http://www.timjaramillo.com/code/edge/scroll_div_scrub_timeline/

           

          Here is the source:

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

           

           

          Since you aren't using the Stage.scroll method, you shouldn't put your code in that event. I think there was some confusion there.

           

          1) So, start by removing your code from Stage.scroll event.

           

          2) Place the below code on your button click event (calls function on Stage.compositionReady):

          sym.getComposition().getStage().onClick();

           

          3) Place the below code on Stage.compositionReady:

           

          // timer constantly runs to check scroll position, and handle timeline scrubbin'

          var timerScroll = setInterval(function() {

                    sym.scrubTimelineScroll();

          }, 10);

           

           

          // this function is called on click of your button

          sym.onClick = function()

          {

               sym.$("parent").animate({scrollTop:500},750);

          }

           

           

          sym.scrubTimelineScroll = function()

          {

          // calulate percent scrolled

                    var myCalc = sym.$("parent").scrollTop()/sym.$("parent")[0].scrollHeight;

             // get percent of timeline length

                    var pos = Math.round( myCalc * sym.getSymbol('parent').getDuration() );

           

          //scrub timeline

                    sym.getSymbol('parent').stop(pos);

          }

          • 2. Re: Scroll Timeline in a Div?
            Feloxor Level 1

            Thank you so much TimJaramillo !!! YOU ARE MY HERO !

            • 3. Re: Scroll Timeline in a Div?
              bart_mc Level 1

              Tim, this is awesome, thank you!

               

              I'm just having one problem - scrolling the symbol only scrubs about half of the timeline. Can I modify the code in compositionReady to control how much of the timeline gets scrubbed?

               

              Thanks again -

               

              bart

              • 4. Re: Scroll Timeline in a Div?
                bart_mc Level 1

                I solved my own "scrub the whole timeline" problem.

                 

                I added *1.75 to the end of the next-to-last of code in compositionReady, like this:

                 


                var pos = Math.round( myCalc * sym.getSymbol('parent').getDuration()*1.75);

                 

                When I change that number, it apparently changes how much of the timeline gets scrubbed when scrolling. 1.75 is giving me 100% of this particular timeline.

                 

                Thanks again to Tim J. for his excellent guidance!

                 

                bart

                • 5. Re: Scroll Timeline in a Div?
                  TimJaramillo Level 4

                  Awesome, glad you guys got it working! And I'm happy to be of help!