Controlling Timeline With Touch

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

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:

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

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);

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

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

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.

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

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!

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

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

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

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! :-(

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

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

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

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

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

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

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

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.

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

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

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/

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

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!

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.