18 Replies Latest reply on Mar 8, 2017 11:25 PM by rajeendranm56218114

    Timeline controlled by users scrollbar

    RussMSN Level 2

      Hi all,

       

      I am currently playing around with Edge.  I'm a designer, not a coder, however I do understand some basic jquery coding, and know html/css, etc.  I'm currently looking for a way to have the timeline move a keyframe, as the user moves their scrollbar.  There seems to be a lot of canvas scrolling animations being used on the web at the moment, and is definitely a neat effect that is going to catch on - two really neat examples of this are:

       

      http://www.beautyoftheweb.co.uk/experience/#/one-click-away

      and

      http://disneydigitalbooks.go.com/tron/

       

      As you can see, when the user scrolls forwards (by click and drag, on Tron -- and on their browser scrollbar, for the ie site), the content moves, animates and reacts.  Scrolling back has the same effect, playing the animations backwards.

       

      What I'm wondering is if there's a way of creating a similar effect using Edge?  Ideally, you could create the full animation in the timeline, and then as the user scrolls forwards or backwards, it moves the timeline scrub forward a keyframe, therefore creating the effect of animation.

       

      The only thing I found thats close to this is here:

       

      http://codehandyman.blogspot.co.uk/2011/12/adobe-edge-animation-controlled-by.html

       

      However this is an old article using an older version of Edge, and so doesn't seem to work - but shows that it can't be that difficult to do surely!?

       

      Any ideas, thoughts, etc would be greatly appreciated

       

       

      Thanks,

      Russ

        • 1. Re: Timeline controlled by users scrollbar
          YOSHIOKA Ume Level 3

          Hi, I think there is a variety of ways. but,this will do?

          I made a tiny symbol for control your Edge timeline.

          it's a "TimelineContoroller".

           

          http://ciruelo.jp/js/edge/TimelineContoroller.eglib

           

          download & import this symbol to Edge. - use [+] button on the library's Symbol area.

          and place it on your timeline. - done.

          now you can control your timeline by dragging the controller or press the arrow keys.

          (sorry for poooor appearance, please change to suit your taste)

           

          param settings, etc., please look at the creationComplete event of TimelineContoroller.

          2 people found this helpful
          • 2. Re: Timeline controlled by users scrollbar
            RussMSN Level 2

            Thanks a lot for your help! Greatly appreciate it.

             

            I was hoping to be able to do it with just the users browser scrollbar, like the ie example. From an accessibility point of view, people are used to scrolling websites now, and I want to give them the same user experience they get on the ie site, and let them control the animations from their scrolling.  Could I grab the code you used on the symbol above and put it within some scrolling code to do the same action from a browser scrollbar?

             

            Thanks!

            Russ

            • 3. Re: Timeline controlled by users scrollbar
              Comfunex Level 2

              Great code! I was wondering about adding touch events instead of mouse, Any thoughts?

              • 4. Re: Timeline controlled by users scrollbar
                YOSHIOKA Ume Level 3

                yes, now updated. plz re-download.

                 

                touchevents is worked fine on my iPod.

                http://ciruelo.jp/js/edge/tlcTest.html

                 

                here is the edgh files

                http://ciruelo.jp/js/edge/tlcTest.zip

                • 5. Re: Timeline controlled by users scrollbar
                  YOSHIOKA Ume Level 3

                  sorry, RussMSN.

                  I don'k know about it.

                  • 6. Re: Timeline controlled by users scrollbar
                    RussMSN Level 2

                    Damn - thanks anyway!

                     

                    What about applying this click method to the whole stage, rather than a symbol?  The idea being that the user can click anywhere within the stage and can scroll the content the same way the symbol works.

                     

                    I did try resizing the symbol you provided to the full size of the stage, and making it transparent, however it doesn't seem to function properly as it's still confined to the small size of the symbol.  I've tried modifying the speedwidth value but it doesn't seem

                    to perform the way I was hoping - any ideas?

                     

                     

                    Thanks again for your help!

                     

                    Russ

                    • 7. Re: Timeline controlled by users scrollbar
                      YOSHIOKA Ume Level 3

                      >What about applying this click method to the whole stage, rather than a symbol? 

                       

                      hmm.. try it.

                       

                      1. copy to all the code on TimelineContoroller-creationComplete to Stage -creationComplete.

                      2. delete TimelineController(no more need)

                      3. modify the code on around line 34

                          //target = sym.getParentSymbol();

                          target = sym;

                       

                      I think that can be set the events at the whole stage.

                      1 person found this helpful
                      • 8. Re: Timeline controlled by users scrollbar
                        RussMSN Level 2

                        Nice one that works quite nicely!  Thanks a lot for your help - now to try and work out how to put the same code into a scroll command!

                        • 9. Re: Timeline controlled by users scrollbar
                          DarioMatson Level 1

                          Hi,

                          The timeline controller works just fine, thank You.

                          I have a problem though.

                          I want my controller to control the time only when the timelineController object is actually being shown.

                          E.g. it's visible from 1000 to 10000 not from the start and to end of my timeline.

                          Currently when i scoll to either end it also disappears, so scrolling back isn't really possible.

                          And not only. I want it to fade in at first, so it should enable scrolling from like 2000 (and when playing the timeline in reverse, to 2000).

                           

                          Is it somehow possible to limit the scrolling to certain place in timeline without it disappearing? My coding abilities weren't able to crack this problem.

                           

                          Thanks in advance.

                          • 10. Re: Timeline controlled by users scrollbar
                            YOSHIOKA Ume Level 3

                            Hi, I guess, you can limit the scrolling range like this.

                            modify the code on around line 64.

                             

                              //if(-1<n && n<=target.getDuration())target.stop(n);

                              if(2000<=n && n<=10000)target.stop(n); //range 2000-10000

                            • 11. Re: Timeline controlled by users scrollbar
                              madudesign Level 1

                              Hi Ume,

                              Great code you have here & thank you very much for sharing this! it is very helpfull to me.

                              I'm testing this on an iPad, the ux is funny, when I swipe on the time controler symbol, the animation goes a little back and then goes forth... but while I'm writing this and testing again, I realize that you must be using a touch event on the half right and left on the horizontal part of the symbol, am I right ?

                               

                              Anyway, I have a major question here, I was wondering how we could reverse the touch event, for playing the timeline ?

                              • If I touch wipe from right to left, the timeline plays forward, and if touch swipe from left to right it would play reverse.

                              This experience is similar to a simple touch wipe image you can have on iOS image galeries, but this action anabling to play the timeline, gives us the complete control of what we can show while doing these touch actions...

                               

                              Any idea how we can change the code into this ?

                              thank you

                              matt

                              • 12. Re: Timeline controlled by users scrollbar
                                umeYOSHIOKA

                                Hi, madumatt.

                                now, timeLineContoroler get the direction & distance by calculating the mouse pos from center of the symbol.

                                 

                                calc center pos. code around 35:

                                centerX = el.offset().left+el.width()/2;

                                 

                                calc direction. code around 71:

                                evt.clientX - centerX  //if pos is left-half, value is minus. case of right-half is plus.

                                 

                                if you want to reverse the direction,I think there is a variety of ways.

                                 

                                ex, reverse the "power" value.  code around 7:

                                // var power = 2;

                                var power = -2;

                                 

                                etc..

                                 

                                I hope it will serve you.

                                thanks.

                                Ume

                                • 13. Re: Timeline controlled by users scrollbar
                                  madudesign Level 1

                                  Hi Ume,

                                  this is nice thank you for your reply.

                                  matt

                                  • 14. Re: Timeline controlled by users scrollbar
                                    pyratej

                                    Hello, awesome script you have here on timeline controll. As i was playing with it, I wanted to apply it to a parallax system that acted in the vein of iOS user swiping / dragging. Below is the script that i modified from above. Works pretty well, it supports dragging and snapping to timeline labels (removed mouse support for now). I am however experiencing an issue when you get to a certain point on the timeline. Basically any animation after about 0:03 seems to goof up. As in items appearing and dissapearring as well as not moving at all when they are timelined to do so. Take a look (or snag) this code. Let me know if there is anything there that would cause timeline animtion issues.

                                     

                                     

                                     

                                             // params

                                     

                                             var power = 5;

                                     

                                             var declineRate = 0.1;

                                     

                                             var speedWidth = 10;

                                            

                                             var currentFrame = 0;

                                            

                                     

                                             // try to hide the location bar at Safari,if need, comment out it.

                                     

                                             setTimeout(function() { window.scrollTo(0, 0); }, 250);

                                     

                                            

                                     

                                             var fps = 120;

                                     

                                             //var interval = (100/fps)|0;

                                     

                                             var speed = 0;

                                     

                                             var centerX,target,v;

                                            

                                     

                                            

                                            

                                     

                                             var el = $(sym.getSymbolElement());

                                     

                                             el.bind("touchstart",onStartControll);

                                     

                                             el.bind("touchmove",onFingerMove);

                                     

                                             el.bind("touchend",onStopControll);

                                     

                                            

                                            

                                            

                                            

                                            

                                            

                                            

                                     

                                             function onStartControll(evt){

                                     

                                                 evt.preventDefault();

                                     

                                                 target = sym.getParentSymbol();

                                              

                                                 evt = (evt.originalEvent.touches && evt.originalEvent.touches[0]) || evt;

                                              

                                                 centerX = evt.clientX;

                                             }

                                            

                                              

                                            

                                            

                                            

                                            

                                            

                                             function onStopControll(evt){

                                            

                                                 evt.preventDefault();

                                            

                                                 currentFrame = target.getPosition();

                                                             

                                                 console.log(currentFrame);

                                     

                                                   if (currentFrame < 0){

                                                       target.stop(0);

                                                   } else if (currentFrame > 0 && currentFrame < 500){

                                                       target.stop(0);

                                                   } else if (currentFrame > 500 && currentFrame < 1000){

                                                       target.stop(1000);

                                                   } else if (currentFrame > 1000 && currentFrame < 1500){ 

                                                       target.stop(1000);

                                                   } else if (currentFrame > 1500 && currentFrame < 2000){ 

                                                       target.stop(2000);

                                                   } else if (currentFrame > 2000 && currentFrame < 2500){ 

                                                       target.stop(2000);

                                                   } else if (currentFrame > 2500 && currentFrame < 3000){ 

                                                       target.stop(3000);

                                                   } else if (currentFrame > 3000 && currentFrame < 3500){ 

                                                       target.stop(3000);

                                                   } else if (currentFrame > 3500 && currentFrame < 4000){ 

                                                       target.stop(4000);

                                                   } else if (currentFrame > 4000 && currentFrame < 4500){ 

                                                       target.stop(4000);

                                                   } else if (currentFrame > 4500 && currentFrame < 5000){ 

                                                       target.stop(5000);

                                                   } else if (currentFrame > 5000){ 

                                                       target.stop(5000);

                                                   }

                                                  

                                                  

                                                   centerX = 0;

                                                  

                                              

                                             }

                                            

                                            

                                     

                                             function onFingerMove(evt){ 

                                            

                                                 //currentFrame = target.getPosition(); 

                                                    

                                     

                                            evt.preventDefault();

                                     

                                            evt = (evt.originalEvent.touches && evt.originalEvent.touches[0]) || evt;

                                                

                                            speed = (centerX - evt.clientX) / power;

                                              

                                            if(-1<speed && speed<1){

                                     

                                                           clearInterval(v);

                                     

                                                           v = undefined;

                                                   }

                                     

                                                 var n = target.getPosition()+speed;

                                     

                                                 if(-1<n && n<=target.getDuration())target.stop(n);

                                     

                                             }

                                            

                                            

                                     

                                     

                                     

                                    Thanks in advance,

                                    Yar.

                                    • 15. Re: Timeline controlled by users scrollbar
                                      pyratej Level 1

                                      Hmm. Odd. I fixed the problem by adding another animtion during the part that would goof up. Removed the newly added animation and the problem is gone. Weird bug, not really sure how to explain it.

                                      1 person found this helpful
                                      • 16. Re: Timeline controlled by users scrollbar
                                        philipkumar600 Level 1

                                        Hi,

                                         

                                        How to control the timeline by using the seekbar.

                                        • 17. Re: Timeline controlled by users scrollbar
                                          Perujo4

                                          Thank you so much for this!!!

                                          • 18. Re: Timeline controlled by users scrollbar
                                            rajeendranm56218114 Level 1

                                            Hello,

                                            I saw your script about controlling time line animation. Its working fine in adobe Edge CC. But unfortunately this script is not working in Adobe Edge CC 2015.  I am badly required that functionality for my course.

                                            I am searching something like seebar that can control the animation done in Edge CC 2015.

                                             

                                            Is it possible to help me for this.

                                             

                                            Thanks,

                                            Reji.