28 Replies Latest reply on Aug 22, 2017 4:17 PM by Topu252

    Touch Swipe in Edge

    hazyturtle

      I used the script from TimJaramillo for my edge file and it worked!!

      http://www.timjaramillo.com/code/edge/swipe_v2/swipe.html

       

      But I still can't figure out where to put sym.playReverse() code.

      Can someone tell me exactly where to place the sym.play() or sym.playReverse() code, if I simply wanted the animation to play forwards or backwards when swiped left or right?

       

      Also, is there a way to speed up the swipe action. It's alittle slow.

       

      THANKS

        • 1. Re: Touch Swipe in Edge
          TimJaramillo Level 4

          Hey turle, I sent you a PM, but I'll post here as well.

           

          You would put the sym.play(); here:

           

          this.onSwipeLeft = function()

          {

                    if( this.activeAnim > 1 )

                    {

                              this.activeAnim--;

                              sym.play();

                    }

          }

           

          You would put the sym.playReverse(); here:

           

          this.onSwipeRight = function()

          {

                    if( this.activeAnim < this.animCount )

                    {

                              this.activeAnim++;

                              sym.playReverse();

                    }

          }

           

          Hope that helps!

          • 2. Re: Touch Swipe in Edge
            hazyturtle Level 1

            Thanks it worked!!!

             

            1 more question, and I promise not to bug you anymore today.

             

            The effect I'm creating is a car spinning at 360 degrees. I'm using 12 car images. The finger swipe works well. But do you know of a way to do a "continuous finger slide". So instead of swipe-swipe-swiping to the next image. You glide you finger across & watch the car spin?

             

            Thanks again.

            • 3. Re: Touch Swipe in Edge
              TimJaramillo Level 4

              Hi Turtle,

               

              In order to scrub your timeline via a finger slide, you can use a little math to compare the ratio of these 2 props:

              1) user's touch position in relation to stage width (or the width of your slide area)

              2) playhead position in relation to the car's timeline length.

               

              Here's the meat of that equation:

              sym.animScrubPosition = (sym.scrollThumbXPos/sym.stageWidth) * sym.animTimelineLength;

               

              Note: sym.scrollThumbXPos is set on Stage/touchstart and Stage/touchmove.

               

              Here is an example (try on touch device):

              www.timjaramillo.com/code/edge/swipe_v5/test.html

               

              And source:

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

               

              Let me know how it goes!

              Tim

              • 4. Re: Touch Swipe in Edge
                hazyturtle Level 1

                Thank you sooo much. I ran into some problems because I added this new code to your previous code. Now nothing is working.

                I wanted my car to do both actions....swipe & glide.

                 

                The new code uses a container, old code used the labels. I tried putting a 12 symbols (cars) into a container, but it still didn't work.

                 

                But I understand your code, just need time to play with it. I'm new to Adobe Edge, so it might take a while.

                Thanks soo much for your help.

                I really appreciate it.

                • 5. Re: Touch Swipe in Edge
                  TimJaramillo Level 4

                  Hmmm, are you saying you want to use swipe for both play/playReverse the timeline, as well as to scrub the timeline? It seems like those 2 interactions will conflict- unless you set up a separate area on stage for each of the interactions ...

                  • 6. Re: Touch Swipe in Edge
                    hazyturtle Level 1

                    I actually like the way it's working now, without the scrub. But I added some buttons to my layout, and now I think that's interferring with my swipe. It's not smooth & fast like it was without all the buttons.

                     

                    PLUS, it's taking alot longer to load now.

                    My swipe seems to take about 40+ seconds before your able to swipe.

                    • 7. Re: Touch Swipe in Edge
                      TimJaramillo Level 4

                      Hey turtle, there must be a bug somewhere, the Stage.touchevent should be able to be triggered as soon as the stage content is visible.

                       

                      Have you tried viewing your animation in-browser, with the javascript console open? To check for errors?

                      • 8. Re: Touch Swipe in Edge
                        hazyturtle Level 1

                        No bugs. No errors. Could it be the js?

                        I'll email you my link.

                        But after I noticed how slow my page loaded, I looked at your example swipe2.html file on the ipad, and it loads super slow too.

                        I thought maybe it was because I used 12 car images, but your file just uses straight 1,2,3 txt.

                         

                        Hmmm...

                        Let me send you my URL.

                         

                        • 9. Re: Touch Swipe in Edge
                          Jerry Witt Level 2

                          Have either of you (or anyone else) played with swipe-specific jQuery libraries like http://www.jqtouch.com/ or iscroll (http://cubiq.org/iscroll-4). I wonder if these offer smoother moves or just more overhead.

                          • 10. Re: Touch Swipe in Edge
                            Tonyp19732

                            Hi Tim,

                             

                            This was a great example, thank you it's tought me alot using swipe with edge animate. Any examples that can use drag with mouse and swipe? Also i noticed that iPad still tries to do other gestures while swiping on safari.

                             

                            Is there an easy way to disable all iPad gestures other than what you have coded in edge?

                            • 11. Re: Touch Swipe in Edge
                              TimJaramillo Level 4

                              Hi Anthony,

                               

                              I don't have an example on hand, but you can add mouse-swiping by transferring the "touchstart" event to "mousedown", and "touchend" event to "mouseup". And on those events, you'd use "e.pageX", instead of "touch.pageX".

                               

                              To disable other gestures on iPad, be sure to include "e.preventDefault();" on "touchstart", "touchend" events, and you might want to add it to the "touchmove" event if you're still having that issue.

                              • 12. Re: Touch Swipe in Edge
                                designedbyjackley

                                Hey Tim,

                                 

                                I tried your mouse-swiping suggestion by changing "e.pageX", instead of "touch.pageX" but couldn't get it to work ... Is there something else that I need to change?

                                 

                                Thx

                                • 13. Re: Touch Swipe in Edge
                                  TimJaramillo Level 4

                                  Hi there, you'd do something like this:

                                   

                                  if ( e.pageX == undefined ) {

                                            var touch = e.originalEvent.touches [0] || e.originalEvent.changedTouches [0];

                                                     sym.getComposition().getStage().swipeEndX = touch.pageX;// (swipeEndX is defined as sym.swipeEndX on Stage.compositionReady)

                                                     sym.getComposition().getStage().onSwipe();

                                  }

                                  • 14. Re: Touch Swipe in Edge
                                    designedbyjackley Level 1

                                    Thats exactly what I have and the touch swipes are working perfectly its the mouse (on desktop) swipes that are not registering at all ... changed touch.pageX to e.pageX and still nothing

                                    • 15. Re: Touch Swipe in Edge
                                      TimJaramillo Level 4

                                      For desktop, see this example (this has touch and mouse swipe):

                                       

                                      example:

                                      http://www.timjaramillo.com/code/edge/swipe_v2_touch_and_mouse/swipe.html

                                       

                                      source:

                                      http://www.timjaramillo.com/code/edge/_source/swipe_v2_touch_and_mouse.zip

                                       

                                      // code on Stage.mousedown:

                                      sym.getComposition().getStage().swipeStartX = e.pageX;

                                       

                                      // code on Stage.mouseup:

                                      sym.getComposition().getStage().swipeEndX = e.pageX;

                                      sym.getComposition().getStage().onSwipe();

                                      1 person found this helpful
                                      • 16. Re: Touch Swipe in Edge
                                        rosscwallis

                                        This might be just what I am looking for - I am a school teacher, making very simple 'flipbook' animations with young students - in the past we have animted these in Flash, but this is complex for them to do - animate is easier, using a mousemove, but I would really like this to scrub on touch screen devices as well - can you help please?

                                         

                                        (I am not too technical...)    http://www.rosswallis.org/animate_scrubs/clara/test%20animation.html

                                        • 17. Re: Touch Swipe in Edge
                                          Bill_C

                                          Tim, just letting you know that this really helped me out on a project today. I have a wheel-of-furtune styled wheel UI that needed to rotate via Swipe Up/Swipe Down, and this code helped me get there! Thank you

                                          • 18. Re: Touch Swipe in Edge
                                            TimJaramillo Level 4

                                            Awesome Bill, glad to be of help! Good luck with your project!

                                            • 19. Re: Touch Swipe in Edge
                                              yannick_lix3

                                              Hello, im make a swipetouch Vertical, with your code, but have a bug. When i have some button with action on it, it was not able to click on.

                                              to code is on the Stage.onmoveStart...etc.

                                               

                                              I trying to put the trigger on a other symbol, but still not working for my button.

                                              Did you know a  solution ?? Thanks

                                              • 20. Re: Touch Swipe in Edge
                                                TimJaramillo Level 4

                                                Hi there, it's hard to say why your button is not working, without seeing an example of the issue. Can you post/PM me a link to a simplified version of your source files?

                                                 

                                                A good place to start would be to add an 'alert' to your button's click event, to see if that's even firing. Then try to follow the trail and find out where things are stopping. Be sure to use your browser's console log to check for javascript errors as well.

                                                 

                                                alert('on button click');

                                                • 21. Re: Touch Swipe in Edge
                                                  yannick_lix3 Level 1

                                                  Here is the link, work on desktop, but mobile or ipad no.

                                                   

                                                  http://lix3.net/dev/touch/swipe_touch.html

                                                  • 22. Re: Touch Swipe in Edge
                                                    TimJaramillo Level 4

                                                    Are you using Edge Animate for this touch interaction, or is this raw javascript?

                                                    • 23. Re: Touch Swipe in Edge
                                                      yannick_lix3 Level 1

                                                      the exemple is only js.

                                                      but this exemple is in edge

                                                       

                                                      http://lix3.net/dev/maraudeurs/maraudeurs_homepage.html

                                                      • 24. Re: Touch Swipe in Edge
                                                        JRHall

                                                        Hi Tim,

                                                         

                                                                  this.onSwipeLeft = function()

                                                                  {

                                                                            if( this.activeAnim > 1 )

                                                                            {

                                                                                      this.activeAnim--;

                                                                                      sym.play();

                                                                            }

                                                                  }

                                                         

                                                         

                                                        Can I change this to work as onSwipeUp onSwipeDown?

                                                         

                                                        Instead of Left and Right?

                                                        • 25. Re: Touch Swipe in Edge
                                                          kathatp

                                                          Hello TimJaramillo,

                                                           

                                                          I'm trying out your beautiful code, but unfortunately I can not get the SwipeDown function to work at all.

                                                           

                                                          http://kat-media.com/test/swipe.html

                                                           

                                                          My current stage code is as following:

                                                          http://kat-media.com/test/swipe.js

                                                           

                                                          Would be great if you could take a quick look.

                                                           

                                                          Cheers,

                                                          Kat

                                                          • 26. Re: Touch Swipe in Edge
                                                            Henry Code Level 1

                                                            Hi guys,

                                                            I used simple swipeleft, swipe right on the stage .

                                                            swipeleft , sym.playReverse();

                                                            swiperight sym.pla();

                                                             

                                                            It works but sometimes  it skips one stop trigger  . So It scrolls what are two pages on the timeline.

                                                            Can I enter a code to stop at one stop trigger only or a time RESTRICTION allowed between two swipes?

                                                             

                                                            THANK YOU...

                                                            • 27. Re: Touch Swipe in Edge
                                                              g.bollmann Level 1

                                                              I'd guess you could either put in a dummy trigger, or use the true/false argument. True = recognize the trigger; false = disregard trigger.

                                                               

                                                              It goes something like: sym.play("label", true);

                                                              • 28. Re: Touch Swipe in Edge
                                                                Topu252

                                                                Hi Timjaramillo,

                                                                 

                                                                I have used your code in my parallax touchmove scroll project that moves a stage/timeline play head with touch, everything worked perfectly but client insists that my touchmove direction must match the animation direction (basically, he wants dragging, not scrolling, when you scroll a window, the scroll bar go right as content go left, its natural right?). However, all my animations are based on timeline so I have no alternative but move the timeline by reverse touchmove to meet his demand.

                                                                A big thanks for your superb code. Can you do me another favor and alter your code in any manner that would allow me to swipe/move the stage in the same direction of swipe? I mean my timeline would run from 0ms point, but my touch swipe that would control it, would be from right to left..backwards.

                                                                 

                                                                Here's you code...


                                                                    //on composition ready...

                                                                 

                                                                    sym.animScrubPosition;

                                                                    sym.scrollThumbXPos;

                                                                    sym.stageWidth = sym.$('Stage').width();

                                                                    sym.animTimelineLength = 6000;

                                                                 

                                                                 

                                                                    sym.onSwipe = function(pos)

                                                                    {

                                                                    sym.scrollThumbXPos = pos;

                                                                 

                                                                     // scrub to corresponding anim frame

                                                                    sym.getSymbol('stage').stop(sym.getScrubPos());

                                                                    }

                                                                 

                                                                 

                                                                    sym.getScrubPos = function() {

                                                                    //this.scrollThumbXOffsetPos = sym.scrollThumbXPos - this.scrollThumbXPosMin;

                                                                    sym.animScrubPosition = (sym.scrollThumbXPos/sym.stageWidth) * sym.animTimelineLength;

                                                                  

                                                                    return sym.animScrubPosition;

                                                                    }

                                                                 

                                                                    //on touchmove event...

                                                                 

                                                                 

                                                                    if ( e.pageX == undefined ) {

                                                                    var touch = e.originalEvent.touches [0] || e.originalEvent.changedTouches [0];

                                                                    sym.getComposition().getStage().onSwipe( touch.pageX );

                                                                    }

                                                                 

                                                                Thanks a lot.