13 Replies Latest reply on Nov 18, 2012 11:32 PM by Aiesyaah

    Touch events examples?

    JackPitsker Level 1

      I've been trying to get touch events (touchstart, touchmove, touchend) to work with my Edge animation, but so far to no avail. Has anyone been able to do this, and if so, are there any examples or code you can point me to? My Googling has been fruitless up to this point.

        • 1. Re: Touch events examples?
          TimJaramillo Level 4

          Hi Jack, I posted an example on how to leverage the touchstart and touchend events to simluate swipe in this thread:

           

          http://forums.adobe.com/message/4363829

           

           

          On that thread, posted a simple touch swipe example that allows you to cycle through 4 animations. Swipe left and right to play the previous/next animations.

           

          example:

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

           

          juicy source:

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

           

          Let me know if you have any more Q's on implementation.

          • 2. Re: Touch events examples?
            AmintaAdobe Level 1

            Hi Jack!

             

            Here is an example of touch event for a simple drag&drop of a square:

             

            I've created a red square in Edge, called "rect", size 140x140px and added this JQuery code on Stage (event: CompositionReady):

             

            sym.$("rect").css({"margin-left": "-70px", "margin-top": "-70px"});

             

             

            $(document).bind("touchstart touchmove", function(e) { 

              e.preventDefault(); 

              var x = e.originalEvent.touches[0].pageX;

              var y = e.originalEvent.touches[0].pageY;

              sym.$("rect").css({top: y, left: x}); 

            }); 

             

            Explanation:

             

            // this is to center the dragging, you have always to set margin-top and margin-left the negative half of the size object

            sym.$("rect").css({"margin-left": "-70px", "margin-top": "-70px"});

             

            // the function starts on event "touchstard touchmove", that is when you tap an element (=touchstart) and try to move it (=touchmove)

            $(document).bind("touchstart touchmove", function(e) { 

             

              //disable scrolling by preventing default touch behaviour 

              e.preventDefault(); 

            // assign to variable x and y the position of your finger if you keep it pressed

             

                      var x = e.originalEvent.touches[0].pageX;

                      var y = e.originalEvent.touches[0].pageY;

             

              // assign to the the element with  ID "rect" the x,y coordinates stored in previous variables

              sym.$("rect").css({top: y, left: x}); 

            }); 

             

             

            To make this I've started learning how to handle touchevents from this excellent tutorial: http://popdevelop.com/2010/08/touching-the-web/

             

            You can get the Edge file here: http://www.terredainventare.it/Prova.zip and test the composition with mobile safari here www.terredainventare.it/touch/Prova.html

             

             

            I hope this helps!

             

            Davide

            • 3. Re: Touch events examples?
              JackPitsker Level 1

              Thank you, both of you, for the examples. Not sure why, Tim, but I couldn't get your example to work with my specific animation. Davide's example helped, and once I used the bind() function for the events, that seemed to do the trick. Perhaps when I understand how this works better I'll understand the "why", but for now I'm grateful that it is working.

               

              This is a touch version of the animation scrub that I did in a previous post, a reuse of Darrell's code. I realized that attaching the touchstart to the little dragger handle was pointless and made clicking difficult, so I just attached the listener to the document. I may just get rid of the scrollbar altogether, though I guess it is a good indication of where the user is in the animation. Here's what ended up working for me, placed in compositionReady:

               

              var dragme = false;

               

              $(function () {

                 var scrubber = sym.$("scrubber");

                 var bar = sym.$("bar");

               

                 

                  $(document).bind("touchstart", function(e) { 

                    e.preventDefault();

                    dragme = true;

                  });

                 

               

                  $(document).bind("touchend", function() { 

                    e.preventDefault();

                    dragme = false;

                  });

                 

                  $(document).bind("touchmove", function(e) { 

                      if(dragme){

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

                          var possibleX = touch.pageX;

                         var leftX = bar.offset().left;

                         var rightX = (leftX + bar.width()) - scrubber.width();

                         var scrubWidth = rightX - leftX;

               

                          if(possibleX < leftX) {

                              possibleX = leftX;

                          }

               

                          if(possibleX > rightX) {

                              possibleX = rightX;

                          }

               

                          scrubber.offset({

                           left: possibleX

                       });

               

                          var relativeX = possibleX - leftX;

                          var perc = Math.ceil((relativeX/scrubWidth) * 4000);

               

                          sym.getComposition().getStage().getSymbol("engine_anim").stop(perc);

               

                      }

                  });

              })

              • 4. Re: Touch events examples?
                JackPitsker Level 1

                I just realized I copied reventDefault into the touchend event handler, which I think is probably not necessary.

                • 5. Re: Touch events examples?
                  AmintaAdobe Level 1

                  Hi Jack, thanks for your contribution!

                  In this moment I can't try the code but did you work out to move the custom scrollbars with the drag of the fingers?

                   

                  Thanks!

                   

                  Davide

                  • 6. Re: Touch events examples?
                    JackPitsker Level 1

                    Yes, the above code is working for me to scrub through my animation. I bound the "touchstart" event to the document rather than to the scroll button because it allows just swiping anywhere to scrub the animation...the button on the scroller ended up being so small on my iPhone.  I can't post a zip because of work-related issues, so posting code to the thread is the best I can manage. And I'm pretty new at all this, so if anyone has a better solution, please do chime in!

                    • 7. Re: Touch events examples?
                      resdesign Adobe Community Professional & MVP

                      Tim,

                      I was wondering how I could implement your swipe simulation in an app I am making.

                       

                      It is a simple alphabet - I want to be able to go through the letters (increment right - decrement left) by swipping the image. It is working as expected on the click events: I have a function (updateInfo) that updades the image, the letters,  and the description. The image is swapped by loading a new image in the image container.

                      Below is a screenshot.

                      In short, how can I apply this so that the touch event replaces the click event and increments the images and text?

                      The simplified click event is: 

                      bntRight.click(function(){

                           index++;

                           updateInfo(index);

                      });

                       

                      bntLeft.click(function(){

                           index--;

                           updateInfo(index);

                      });

                      My Themed Alphabet - Google Chrome_2012-10-20_18-29-42.jpg

                      • 8. Re: Touch events examples?
                        Aiesyaah Level 1

                        Hi Jack,

                         

                        I want to ask if you have any clicking events in your animation. As in, is the animation only for tablets? Or for both laptops (drag and drop using the mouse) and tablets? And do you have a reset button for your animation?

                         

                        Because my animtion works fine on laptops (web browsers: drag and drop using the mouse), the reset button works alright too. I am now working on the animation to make it work on the tablet. I tried the codes which you marked as correct. My symbol managed to move but it doesn't in the direction that I want (it moves to the left when I drag it the right).  Also, when I want to drag one symbol, all the other symbols get dragged together too. And it gets dragged as a bunch. How do you edit this in the codes?

                         

                        Thank you for your time.

                         

                        Aisyah

                        • 9. Re: Touch events examples?
                          JackPitsker Level 1

                          I did a mouse version of this first, which is here. You can combine mouse and click events for some functions. For example, I eventually included the mousedown with the touchstart event in the function that starts the drag:

                           

                          $(document).bind("touchstart mousedown", function(e) { 

                                e.preventDefault();

                                dragme = true;

                              });

                           

                          But some of the functions had to remain separate; I had to write separate functions for touchmove and mousemove, for example, because they used slightly different code to get the location of the touch or the mouse.

                           

                          It's difficult for me to figure out what's wrong with your code without seeing your code. But one problem might be that my code was just designed to drag one thing, a scrubber, and use the position of that scrubber to determine the progress of an animation. If you have code that is supposed to drag separate items, then you would need different code than what I did. You would need some sort of event that works for each individual draggable item, to mark that item as the one that is dragging, perhaps. And then the mousemove would know which item to drag. Or there may be a more simple way to do that. I'm certainly no expert when it comes to Edge or even JavaScript. Just someone trying to make things work.

                           

                          I would suggest starting your own question post, put up your code, and let the experts give you some advice on how to fix it. If you do, link it in this thread and I'll take a look and offer some advice if I have any. Good luck!

                          • 10. Re: Touch events examples?
                            JackPitsker Level 1

                            resdesign,

                             

                            Sorry for the late reply. Hoping Tim got back to you directly or that you figured it out. But in case that didn't happen...

                             

                            It looks from Tim's code that he is using the Stage.touchstart and Stage.touchend events to determine which way the user is swiping. So if you want, you could borrow that code from his swipe example, along with the this.onSwipe, this.onSwipeLeft, and this.onSwipeRight functions in his document.compositionReady event. Your index++ or index-- and updateInfo() would go in onSwipeRight and onSwipeLeft respectively, and that should do it for you.

                             

                            To explain what his code is doing, the Stage.touchstart event sets a variable (swipeStartX) of where on the screen the user touches. Then after they swipe and their finger leaves the screen, on Stage.touchend another variable is set - swipeEndX - and the onSwipe function mentioned above is called. This merely compares swipeStartX with swipeEndX to determine if swipeStartX is bigger (they swiped from right to left) or smaller (they swiped from left top right) than swipeEndX. And that determines which function to call.

                             

                            Hope that helps!

                             

                            -Jack

                            • 11. Re: Touch events examples?
                              TimJaramillo Level 4

                              Thanks for following up on resdesign's Q, Jack- I missed it.

                               

                              resdesign: let us know if you have any more Q's on this, but Jack explained my swipe-emulation code quite well!

                              • 12. Re: Touch events examples?
                                Aiesyaah Level 1

                                Hi Jack!

                                 

                                Thank you for your response. I appreciate it alot. I was thinking whether I have to do a separate set of codes for the touch screen. By the way, I have posted up my question. It is at this link: http://forums.adobe.com/message/4845624#4845624 . Check it out if you have the time. 

                                 

                                Thank you.

                                 

                                Aisyah

                                • 13. Re: Touch events examples?
                                  Aiesyaah Level 1

                                  Hi Jack,

                                   

                                  I did the drag and drop this way. But the elements move together as a bunch instead. And how do you get the element to drop at where you want it to be, and stay there (disable drag after it's being dropped, thus displaying a feedback)? In normal drag and drop codes for the web browser, it is something like this, call the animation that I want to be played.
                                  example:






                                  sym.getComposition().getStage().getSymbol("feedback").play("correct");

                                   

                                  these are the codes I attempted for the tablet version.

                                  /_1

                                  sym.$("_1").css({"margin-left": "-70px", "margin-top": "-70px"});

                                   

                                   

                                  $(document).bind("touchstart touchmove", function(b) {

                                    e.preventDefault();

                                  var x = b.originalEvent.touches[0].pageX;

                                  var y = b.originalEvent.touches[0].pageY;

                                  sym.$("_1").css({top: y, left: x});

                                  });

                                   

                                   

                                   

                                   

                                   

                                   

                                  //_2

                                  sym.$("_2").css({"margin-left": "-70px", "margin-top": "-70px"});

                                   

                                   

                                   

                                   

                                  $(document).bind("touchstart touchmove", function(b) {

                                    e.preventDefault();

                                    var x = b.originalEvent.touches[0].pageX;

                                    var y = b.originalEvent.touches[0].pageY;

                                    sym.$("_2").css({top: y, left: x});

                                  });

                                   

                                   

                                  //_3

                                  sym.$("_3").css({"margin-left": "-70px", "margin-top": "-70px"});

                                   

                                   

                                   

                                   

                                  $(document).bind("touchstart touchmove", function(b) {

                                    e.preventDefault();

                                    var x = b.originalEvent.touches[0].pageX;

                                    var y = b.originalEvent.touches[0].pageY;

                                    sym.$("_3").css({top: y, left: x});

                                  });

                                   

                                  ------------------------------------------------------------------------------------------ ------

                                   

                                  and this is the link

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

                                  to my drag and drop codes to make i work on the web browser. Can anyone help me on how to adapt these codes to make it work in tablets?

                                   

                                  Thank you so much