Adobe Community: Message List - Controlling Timeline With Touch

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Mon, 23 Jun 2014 13:37:02 GMT

Cool! Do you have a link to the working example? You might be able to do this with css overflow: hidden. I think this is what you are referring to.

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 30 May 2014 05:26:04 GMT

Hello guys! Great stuff! Tim: you're awesome!

Im just learning how to use EA, and thanks to this post I managed to achieve what I need it, except one thing:

I have an image on the left of the screen, kind of a menu, I want it to act as a frameset, I want the image to scroll vertically while the image on the right side stays in place, (this is also good if I need to place a "up one level" type of button, that you want not to scroll along with the vertical scrolling left image).

Hope you understand what I mean! Thanks a lot!

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 06 Aug 2013 19:54:10 GMT

Thanks Tim

I got my composition working, I had to replace .window with Stage and that took care of some of it. Thank you for your links. I will defenetly be looking at them.

Alex

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 06 Aug 2013 18:08:02 GMT

Hey Alex, Edge is really an animation tool, and most of these examples are just scrolling graphic objects. It sounds like you want to scroll actual page content? If so, I'd look at one of the many scrolling libraries out there.

Here are a few examples:

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

http://codeaway.info/sample.code/parallax/vertical.scrolling.html

http://jscrollpane.kelvinluck.com/scroll_to_animate.html

http://dev.jonraasch.com/scrolling-parallax/docs#horizontal-scrolling

http://tympanus.net/codrops/2011/12/05/lateral-on-scroll-sliding-with-jquery/

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 16 Jul 2013 17:58:17 GMT

Hi All

I want to start of by saying thank you for posting this. I have been following these post and trying to add to the sample files provided by TimJaramillo.

Sample Link http://alxaranda.com/edge/index.html

Download File : http://alexaranda.com/edge/timeline-control.zip

1. I have a back to top button at the bottom. How do I make it scroll up and still retain the parralax effect? Currently I have a sym.playReverse(); that is not really doing what I want. I want it to also scroll to the top

2. Currently I have three buttons in a Side Navigation on othe left. I would like it to stay in place"fixed" as you scroll down, and if you click on one of the button it will take you to either the Top, Middle or the bottom of the page.

I have seen examples of this type of functionaly. But when I combine it the animation stops working. I have tried a few thigs and nothing seams to work. Any help would be great. Thanks in advance for thew help.

Alex

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 19:24:45 GMT

Hi Tim

I appreciate your time.

No, not trying anything different, I thought it was the same as your demo with the horizontal rules, the square and the circle; swipe up and down and the graphics that were below the stage move up

I guess it's just that most of my graphics are off the stage below initially, so when the user swipe's up it looks like my flowers are being dragged.

But also earlier, using your example, I got my flowers to move up with the swipe, but then they then swiped off the top of the stage, even though the animation stopped within the stage, so there must be something in the the js files.

What do you think? I guess I could use drag, buy really I want to understand swiping of the timeline, just as in Klaus's examples.

Hope that all makes sense!

Cheers

Alistair

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 19:09:44 GMT

Hi Alistair,

From your "drag flowers" example, it looks like you are trying to do something a bit different than what others in this thread are trying to do. Your example doesn't seem to be tied to stage scrolling, but rather to dragging/swiping an object on stage, would you agree? There are many demos on drag/drop on the forum, search for that first to see if that points you in the right direction.

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 18:51:39 GMT

Its basically all the same code, I was wondering if you had to manually change the "myfile.edge.js" when you change the size of the stage?

Anyway thanks for the response, maybe Time will pick up the thread again.

Cheers

Alistair

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 18:33:36 GMT

Hi Alistair, The demo you mentioned wasnt made by me. You might contact Tim from this discussion. He made it.

klaus

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 17:25:40 GMT

On one of your demo with lines circle and Square You could swipe up and the graphics move up too. In my example I woul like the user to swipe from the bottom of the page to pull up the flowers into the stage. The flowers are symbols that when tapped, flip over. Initially this was working to a degree, but the flowers scrolled off the top of the stage when they were not supposed to.

Many thanks

Alistair

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 17:11:51 GMT

what exactly do you want to achive.? my demo started the animation by scrolling. you mentioned pull on your demo? do you wanna scroll down and the flowers start to rise?

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 17:09:21 GMT

much appreciated!

You will see I've made a bit of a mess of it.

Do I need to change the js files if I change the stage size?? that would happen automatically wouldn't it?

I have got my self in a hole!

Cheers

Alistair

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 16:52:09 GMT

i'll have a look

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Thu, 18 Apr 2013 16:46:42 GMT

Hi Klaus,

thanks for posting the timeline swipe demo's etc. I'm trying to understand how this works, and started puting in my own graphics, to the point where you files no longer work

I created my own animation with the same code as yours, but it doesnt work. Is there any chance you could look at it to see why its now working?

Thanks very much

Alistair

http://www.aq2.info/klaus-2.zip

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Sat, 23 Feb 2013 16:18:49 GMT

hi oliver,

i think i might be looking the answer to your question - "wonder how you make the edge file work in full screen and fits to your browser size"

see my posted question: site automatically scale to fit the browser window

BTW, i love the design of your sample site! It's beautiful!!!

and hi tim, i would appriciate any help you or anyone can give!

thanks all in advance!

-sharon

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 22 Feb 2013 07:48:44 GMT

Hi Tim,

I followed your discussion with Klaus and I am looking for a similar problem.

I want to scroll on my trackpad and follow the timline in edge.

That works for me so far. But I watched your example file "scroll-test" and wonder how you

make the edge file work in full screen and fits to your browser size.

Thats what I´m looking for. Is it possible in edge or do you have to make it in director.

My background is After Effects and flash (more Design) so I am not so familiar with scripting.

And one last question, do you think this side is made with edge an if so, how did they make thinks

stick in the canvas like the arrow to the right, if I rezise my canvas?

http://www.ascensionlatorre.com/the-team

THX in advance

Oliver

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 15 Feb 2013 19:47:34 GMT

Hey Klaus, I think the timeline funkiness on the second example is being caused by this line:

["style", "-webkit-overflow-scrolling", 'touch']

I have a feeling it is conflicting with the standard scroll event that Edge is listening for. Add a console.log('testing'); to the scroll event and see if this is firing on iOS. if you are on iOS6, you will have to enable remote debugging to see the console logs:

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWe bContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 15 Feb 2013 19:35:58 GMT

oops, forgot:

Here it is:

This one makes the animation while scrolling, but stops as soon as you lift the finger:

http://tablet.truedogsphoto.com/scroll-timeline-vertical.html

This one scrolls smooth, but the animation from the timeline (the parralax) doesnt work. it kind of does, but just when you change the position of the fingers on the pad.

http://tablet.truedogsphoto.com/ios/parallax-ios-scroll-test.html

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 15 Feb 2013 19:21:16 GMT

Hi klaus, can you post an html link to your updated file, so I can see what you're talking about?

I'm not sure what you mean by this:

However it scroll smooth now in iOS, but the animation just works as long as my finger is on the screen moving. So no scroll at all! :-(

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 15 Feb 2013 11:56:27 GMT

Hi Tim! As you might remember I am looking for a smooth scroll on iOS (like ipad, iphone). Actually to use it in adobe dps.

I figured it out to scroll smooth in ios adding some code in in "yourFileName_edge.js".

I added overflow-y", 'scrol'l (changed auto to scroll) and added ["style", "-webkit-overflow-scrolling", 'touch']

"${_Stage}": [

["style", "overflow-y", 'scroll'],

["style", "overflow-x", 'hidden'],

["style", "-webkit-overflow-scrolling", 'touch'],

["style", "height", '100%'],

["color", "background-color", 'rgba(0,0,0,1.00)'],

["style", "width", '100%']

However it scroll smooth now in iOS, but the animation just works as long as my finger is on the screen moving. So no scroll at all! :-(

Any idea how to scroll and animate at the same time??

you can try it out on ipad or iphone (normal browsers dont have a problem).

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 12 Feb 2013 21:19:24 GMT

Here is a demo file I made with all the things Tim told me above. Its for vertical parallax scroll. To change to horizontal see Answer 3.

http://tablet.truedogsphoto.com/scroll-timeline-vertical.html

https://www.dropbox.com/s/2mvc6l667nq79av/parallax_edge_demo.zip

tested: chrome, safari, firefox on mac and adobe dps as well.

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 12 Feb 2013 20:39:25 GMT

hi tim,

done & I'm so sorry! I'm new to forums and didn't mean to take over your thread. Please excuse me!!!

-sharon

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 12 Feb 2013 20:23:26 GMT

Hey Sharon, no problem! Can you post a new thread with your parallax question, so we don't hijack this thread?

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 12 Feb 2013 20:21:49 GMT

hi tim,

thanks so muchf for your reply. i'm trying to figure out Parallax scrolling. Below is a very simple file that i would like to parallax scroll. Would you mind (or anyone please!) take a look at it and tell me the code to use in:

stage > event > compositionReady

& the 2 symbols

to make the file Parallax Scroll

thanks so much- this has been driving me crazy!!!

https://www.yousendit.com/download/UW14SmJ3Q3RveE0xZXNUQw

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 12 Feb 2013 19:56:19 GMT

Hi Sharon, thanks for the offer, but unfortunately I don't have time for any official side gigs right now. Anytime I have a few spare minutes at work I hop on this forum, so if you have any specific questions, you can post them here, and myself, or one of the other friendly forum members is sure to help you along!

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Tue, 12 Feb 2013 19:42:13 GMT

hi tim,

i'm working on a website using Parallax Scrolling in Edge & am interested in hiring you as a tutor. Would you be interested in working with me?

please let me know.

thanks so much

-sharon

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Mon, 11 Feb 2013 18:31:00 GMT

Hi Jerry, in my opinion the best for magazines right now is to swipe left and right to the article and down to see the full article. For that I want to decide if it's snapping to single pages vertically, or smooth scroll etc. Im my case I wanted to have a smooth scroll parallax version which I can build in adobe edge (it's possible to do with stellar.js - most of the other parallax html script doesnt work on ios). But it's s so easy to do in adobe edge animate! I also want to build full pages in adobe edge, since there are more ways to animate things (even it's a little button). But then I have the same problem. I dont get off the page if it's made in adobe edge and shown full screen in adobe dps. I got some other html scripts which are full screen, but are able to swipe to the next page.

For example I searched weeks for a good slider. But most of them have the same problem. An example: I have an article vertically with a few pages in adobe dps. On the 3rd i want a full screen slider. I can swipe left/right, but cant go down or up anymore. But finally i found a solution which is so perfect for adobe dps.

http://www.idangero.us/sliders/swiper/

So many options and the abillity to get off the fullscreen page! but you need to know a bit html/css. I am not a coder at all, but enough to change some sizes etc.

Have a look on swiper. It's awesome!

Here is one feature they mentioned that's the problem with my above adobe edge animation:

Scroll prevention

Swiper will prevent vertical scroll when you touch it in "horizontal" mode, and horizontal scroll in "vertical" mode"

That's why I think it has to be possilbe to make the adobe edge full screen animation with scroll acts the same. If its vertical, i want to swipe left/right to get off the page.

Hope this wasn't to complicated.

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Mon, 11 Feb 2013 18:09:37 GMT

Hi Klaus,

I had a similar question in the DPS forum that you can see here:

http://forums.adobe.com/thread/1148751?tstart=90

I'm starting to think that full-sreen interactive content shouldn't be a full page initially. Maybe it should be represented by a picture or icon, and once engaged it should go to the full-screen EA piece with a close box or a "Done" button. Clicking on that would return you to the normal magazine flow.

But I'd still be interested to hear anyone else's "best practice" for this problem.

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Sat, 09 Feb 2013 18:18:16 GMT

Hi Tim! Yes I think it's a problem in adobe dps. Even I got some plugins/scripts in adobe dps which allows to swipe to the next page, most html-overlays which have scroll are not able to get off the page if the html overlay covers the full screen. For example if I can scroll/swipe vertical, I can't swipe/scroll horizontal... I thought I could try it with some overscroll settings, but it didnt work...

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Sat, 09 Feb 2013 02:17:02 GMT

Sorry, I'm not following. Are you saying the Edge Animate scroll stuff is getting in the way of swiping between pages in DPS?

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 23:20:48 GMT

I got a small question. Since i use it full screen in adobe dps, there is no way to come off the page anymore. For example if I have a vertical scroll, the horizontal scroll hast to bring me to the next/previous page). Can I somehow activate horizontal scroll (or vertical if i use horizontal parallax)?

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 19:42:49 GMT

No problem Klaus, glad to hear it's running smooth with .oam in dps!

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 19:38:54 GMT

Oh my mistakes. It works vertically now!!

It also runs smooth since i used the .oam in adobe indesign dps.

It's just that it stuck as soon as I lift the finger which doesnt give the ipad feel.

But great to work with!

Thanks again

Klaus

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 19:10:12 GMT

Hey klaus, in the code you posted, it looks like on the Stage.scroll event, you changed the variables in the console logs, but didn't change any of the variables out for the functioning code? Try this (disregard the space between "currentTarg et", the forum is adding that space):

// insert code for scroll event here

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

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

sym.stop(pos);

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 19:06:56 GMT

Hi Tim, thanks for the fast response. Too bad with Q1. Regarding Q2. I changed it like you mentioned, changed the animation so something happens vertical... but nothing happens. Looks like it's stuck at the first frame... any idea .

My changes:

states: {

"Base State": {

"${_Stage}": [

["color", "background-color", 'rgba(177,220,255,1.00)'],

["style", "overflow-x", 'hidden'],

["style", "height", '400px'],

["style", "overflow-y", 'auto'],

["style", "width", '550px']

and:

// insert code for scroll event here

var myCalc = e.currentTarget.scrollLeft/(e.currentTarget.scrollWidth-e.currentTarget.clientWidth);

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

sym.stop(pos);

//console.log('e.currentTarget.scrollTop = '+e.currentTarget.scrollTop);

//console.log('e.currentTarget.scrollHeight = 'e.currentTarget.scrollHeight);

//console.log('e.currentTarget.clientHeight = '+e.currentTarget.clientHeight);

console.log('pos = '+pos);

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 18:46:00 GMT

Hey Klaus, no problem! Can you mark my above response as correct?

Regarding Q 1: using the built-in scroll event, you would have to do some ugly stuff to have it scroll by itself after lifting your finger. You could potentially create a setInterval when the scrollEvent stops, and on each tick decrementally move the div's "left" position, and advance the timeline accordingly. But I would reccommend against that- too hacky, and good chance of not cleaning up the setInterval.

Regarding Q 2: in order to scroll vertically instead of horizontally- in my example you would need to do a few things:

in the Stage.scroll event, replace "e.currentTarget.scrollLeft" with "e.currentTarget.scrollTop"
in the Stage.scroll event, replace "e.currentTarget.scrollWidth" with "e.currentTarget.scrollHeight"
in the Stage.scroll event, replace "e.currentTarget.clientWidth" with "e.currentTarget.clientHeight"
in "yourFileName_edge.js", switch the Stage's (located here: states/Base State/${_Stage}), "overflow-y" to "auto", and "overflow-x" to "hidden"

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 18:34:01 GMT

Hi Tim! Thanks so much! That's by far the nearest way to make parallax scrolling with adobe edge!

Sorry, but i got 2 more questions:

1. As I said I use it in adobe dps. So on the ipad, the scroll is kind of touch for me. Still it's a bit stuttering. Is there a way to make the scroll smoother? Like if you scroll on iphone, ipad etc. I mean if you give a little push with the finger and it just scrolls by itself and goes slower at the end?

2. What do I have to change to scroll up/down to controll the timeline. To have a vertical parallax effect...

Thanks again!

Klaus

Re: Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 18:17:52 GMT

Hey Klaus,

Interestingly enough, the codehandyman example you posted doesn't use touch events at all, but instead slyly relies on the scroll event to control the timeline.

I referenced the codehandyman link, and the only change I had to make was to replace every instance of "this.element" with "e.currentTarget", in the Stage.scroll event. So on Stage.scroll, this is the code I have (I tweaked it just a bit to make it more legible):

var myCalc = e.currentTarget.scrollLeft/(e.currentTarget.scrollWidth-e.currentTarget.clientWidth);

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

sym.stop(pos);

The above code basically figures out the scroll position, then figures out that ratio in terms of the root timeline length. This tells us what time to jump to on the timeline.

Referencing your blog link- in order to stop vertical scrolling, I had to open "xxx_edge.js" and delete this line:

["style", "overflow", 'auto']

and replace it with this:

["style", "overflow-y", 'hidden'],

["style", "overflow-x", 'auto']

Example:

www.timjaramillo.com/code/edge/scroll_timeline

Source:

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

Controlling Timeline With Touch

forums_noreply@adobe.com — Fri, 08 Feb 2013 10:14:13 GMT

Hi! I use edge animate in adobe dps. I searched to control the timeline with touch (or scroll) in the forum. Even some solutions were discussed, i didnt find the perfect one. It could open so many possibilities like slideshows, parallax, diagonal textscroll etc.

I would like to build a wide animation and control the timeline by scrup/swipe with my finger.

I found something which works, but it seems the directions doesnt work in adobe edge animate anymore. Does anyone know how to resolve this problem? Demofiles would be awesome.

Here is the solution i found, which doesnt work in the latest edge.

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

And here is the result. Works on ipads in indesign dps:

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

thanks,

Klaus