Adobe Community: Message List - Timeline controlled by users scrollbar

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Sun, 23 Jun 2013 14:32:35 GMT

Hi,

How to control the timeline by using the seekbar.

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Mon, 17 Sep 2012 17:13:20 GMT

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.

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Mon, 17 Sep 2012 15:43:43 GMT

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.

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Sun, 01 Jul 2012 20:14:50 GMT

Hi Ume,

this is nice thank you for your reply.

matt

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Fri, 29 Jun 2012 17:52:14 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Wed, 27 Jun 2012 19:00:24 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Sat, 09 Jun 2012 22:29:31 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Sat, 09 Jun 2012 13:38:19 GMT

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.

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 09:54:16 GMT

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!

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 09:19:38 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 08:55:57 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 08:51:03 GMT

sorry, RussMSN.

I don'k know about it.

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 08:47:19 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 06:38:13 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 07:42:48 GMT

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

Re: Timeline controlled by users scrollbar

forums_noreply@adobe.com — Tue, 22 May 2012 00:59:38 GMT

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.

Timeline controlled by users scrollbar

forums_noreply@adobe.com — Mon, 21 May 2012 13:49:25 GMT

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