2 Replies Latest reply on Jan 24, 2014 4:11 PM by AmintaAdobe

    Create an image scroller with swipe&drag in Edge Animate

    AmintaAdobe Level 1

      Hi folks!

       

      I'm trying to create a image scroller like this one http://www.awwwards.com/demo/touchSwipe-gallery-demo.html.

       

      For the Swipe, I use the wonderful JQuery Plugin TouchSwipe http://labs.rampinteractive.co.uk/touchSwipe/demos/, but for the image sliding I would use the Adobe Edge Animate Timeline.

       

      I know that I can use the Swipe events in Edge Animate to make start or reverse the timeline with pictures, but I would also make working an intermediate "dragging".

       

      My problem, in fact, is: how can I make that - if I've only begun to swipe  and I move the finger to left or right without releasing it - my timeline "drag" (or scrubs) frame by frame - like in the example above - until I release the finger?

       

       

      Many thanks in advance!


      Davide

        • 1. Re: Create an image scroller with swipe&drag in Edge Animate
          elainecc Adobe Employee

          Hi, Davide-

           

          This link might help you:

           

          http://forums.adobe.com/message/5247759#5247759

           

          Thanks,

           

          -Elaine

          1 person found this helpful
          • 2. Re: Create an image scroller with swipe&drag in Edge Animate
            AmintaAdobe Level 1

            Hi Elaine!

             

             

            First, thanks for your prompt answer!

             

            I read the link you gave me: in fact, I was aware - also thanks to Old Tim's posts - about how to create a "scrubber" in Edge Animate, starting from formulas like:

             

            Translation = (positionOfScrubber/WidthOfScrubbing)*timeline;

             

            My problem now is - I fear - more subtle: I can swipe left-right a set of pictures, I can "scrub" a timeline (using for example JqueryUI for the dragging), but I don't know how to put together the swiping and the dragging.

             

            I would that - like in the example from my first post - if, e.g., I completed the swipe left, my timeline would play the animation that shows the pic moving to the left but, if I didn't complete the swiping and I begun dragging to the left, the animation would move with my dragging-finger (the "scrubbing")...

             

            I know is very subtle, but it's how the gallery scrollers works on web and app in mobile devices...

             

             

            Many thanks for your attention!

             

            Davide