Timeline controlled by users scrollbar

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.

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

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

sorry, RussMSN.

I don'k know about it.

>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.

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.

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

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

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

Hi Ume,

this is nice thank you for your reply.

matt

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.

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.

Hi,

How to control the timeline by using the seekbar.