39 Replies Latest reply on Aug 17, 2015 1:04 AM by winstoncreative

    Controlling Timeline With Touch

    klausdps

      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

        • 1. Re: Controlling Timeline With Touch
          TimJaramillo Level 4

          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

          • 2. Re: Controlling Timeline With Touch
            klausdps Level 1

            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

            • 3. Re: Controlling Timeline With Touch
              TimJaramillo Level 4

              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"
              1 person found this helpful
              • 4. Re: Controlling Timeline With Touch
                klausdps Level 1

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

                • 5. Re: Controlling Timeline With Touch
                  TimJaramillo Level 4

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

                  • 6. Re: Controlling Timeline With Touch
                    klausdps Level 1

                    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

                    • 7. Re: Controlling Timeline With Touch
                      TimJaramillo Level 4

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

                      • 8. Re: Controlling Timeline With Touch
                        klausdps Level 1

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

                        • 9. Re: Controlling Timeline With Touch
                          TimJaramillo Level 4

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

                          • 10. Re: Controlling Timeline With Touch
                            klausdps Level 1

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

                            • 11. Re: Controlling Timeline With Touch
                              Jerry Witt Level 2

                              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.

                              • 12. Re: Controlling Timeline With Touch
                                klausdps Level 1

                                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.

                                • 13. Re: Controlling Timeline With Touch
                                  mermaidnyc Level 1

                                  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

                                  • 14. Re: Controlling Timeline With Touch
                                    TimJaramillo Level 4

                                    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!

                                    • 15. Re: Controlling Timeline With Touch
                                      mermaidnyc Level 1

                                      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

                                      • 16. Re: Controlling Timeline With Touch
                                        TimJaramillo Level 4

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

                                        • 17. Re: Controlling Timeline With Touch
                                          mermaidnyc Level 1

                                          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

                                          • 18. Re: Controlling Timeline With Touch
                                            klausdps Level 1

                                            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.

                                            • 19. Re: Controlling Timeline With Touch
                                              klausdps Level 1

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

                                              • 20. Re: Controlling Timeline With Touch
                                                TimJaramillo Level 4

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

                                                • 21. Re: Controlling Timeline With Touch
                                                  klausdps Level 1

                                                  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

                                                  • 22. Re: Controlling Timeline With Touch
                                                    TimJaramillo Level 4

                                                    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

                                                    • 23. Re: Controlling Timeline With Touch
                                                      oliverS

                                                      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

                                                      • 24. Re: Controlling Timeline With Touch
                                                        mermaidnyc Level 1

                                                        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

                                                        • 25. Re: Controlling Timeline With Touch
                                                          mobly Level 3

                                                          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

                                                          • 26. Re: Controlling Timeline With Touch
                                                            klausdps Level 1

                                                            i'll have a look

                                                            • 27. Re: Controlling Timeline With Touch
                                                              mobly Level 3

                                                              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

                                                              • 28. Re: Controlling Timeline With Touch
                                                                klausdps Level 1

                                                                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?

                                                                • 29. Re: Controlling Timeline With Touch
                                                                  mobly Level 3

                                                                  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

                                                                  • 30. Re: Controlling Timeline With Touch
                                                                    klausdps Level 1

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

                                                                     

                                                                    klaus

                                                                    • 31. Re: Controlling Timeline With Touch
                                                                      mobly Level 3

                                                                      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

                                                                      • 32. Re: Controlling Timeline With Touch
                                                                        TimJaramillo Level 4

                                                                        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.

                                                                        • 33. Re: Controlling Timeline With Touch
                                                                          mobly Level 3

                                                                          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

                                                                          • 34. Re: Controlling Timeline With Touch
                                                                            iodex Level 1

                                                                            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

                                                                            • 35. Re: Controlling Timeline With Touch
                                                                              TimJaramillo Level 4

                                                                              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/

                                                                              • 36. Re: Controlling Timeline With Touch
                                                                                iodex Level 1

                                                                                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

                                                                                • 37. Re: Controlling Timeline With Touch
                                                                                  SenTnelTV

                                                                                  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!

                                                                                  • 38. Re: Controlling Timeline With Touch
                                                                                    iodex Level 1

                                                                                    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.

                                                                                    • 39. Re: Controlling Timeline With Touch
                                                                                      winstoncreative

                                                                                      How do I make that the best answer?