20 Replies Latest reply on Jul 9, 2013 4:05 AM by roti62

    Detecting zoom gesture in Edge Animate

    roti62

      While devoloping Edge animations for playing in Air4Android App webview instances, I tried to detect zoom gestures.

       

      So far the native actions "touchstart, touchend, and touchmove" work fine, but I am unable to figure out a solution for the zoom gesture. Does a native way for zoom detection exist? Or maybe an external lib via yepnope?

       

      Your answer would make me very happy and save a lot of time, so thx in advance.

        • 1. Re: Detecting zoom gesture in Edge Animate
          TimJaramillo Level 4

          Hi there,

           

          Hammer.js is a good gesture library, loadable via yepnope:

           

          http://eightmedia.github.com/hammer.js/

          • 2. Re: Detecting zoom gesture in Edge Animate
            roti62 Level 1

            Thx a lot, Jim. I will check this out soon. Regards Rolf.

            --

            Diese Nachricht wurde von meinem Android Mobiltelefon mit GMX Mail gesendet.

             

             

             

            TimJaramillo <forums_noreply@adobe.com> schrieb:

             

                  

             

            Re: Detecting zoom gesture in Edge Animate

             

            created by TimJaramillo in Edge Animate - View the full discussion

            • 3. Re: Detecting zoom gesture in Edge Animate
              roti62 Level 1

              I checked the hammer lib - and it is realy a hammer. Right what I need, but I must say it is poorly documented on github. So implementing it via yepnope is defintiely NOT that easy. However, it is worth trying. I will keep you informed and post my solution (if my knowledge allows to get one)...

              • 4. Re: Detecting zoom gesture in Edge Animate
                TimJaramillo Level 4

                Hi there Rolf, there are 2 basic parts to implementing this library: 1) load the Hammer.js library with yepnope 2) use Hammer.js library to zoom your object.

                 

                To load Hammer.js with yepnope, your code on Stage.compositionReady, would look something like this:

                 

                yepnope(

                {

                          nope:[

                          'hammer.js'// path to your hammer.js file

                          ],

                 

                          complete: init

                          }

                );

                 

                 

                //when yepnope has loaded everything execute init();

                function init (){

                          // run your init code here, implementing hammer.js, etc

                }

                 

                 

                 

                 

                Here is an example of zoom implementation using hammer.js

                http://mhluska.com/demo/pinchzoom

                 

                Here's the code that makes that happen:

                http://mhluska.com/static/demo/pinchzoom/js/pinchzoom.js?v=f8fd8

                 

                Here's the github thread I found that example:

                https://github.com/EightMedia/hammer.js/issues/17

                 

                The Hammer.js download also contains a very nice example implemenation in the "demo" directory".

                 

                Let us know how it goes!

                • 5. Re: Detecting zoom gesture in Edge Animate
                  roti62 Level 1

                  Hi Tim,

                   

                  thanks for the reply. I checked out all links. Well, basically I know the yepnope way and it is working fine in some of my other Animate projects with different JS libs. But Hammer drives me crazy. It does not work.

                   

                  On the server directory of the html file I created a directroy 'libs' for the library code. I have an rectangle on the highest root layer named 'gesture_container' to detect user interaction. So on compositionReady I wrote the following:

                   

                  yepnope({

                      nope:[

                                                "libs/hammer.js",

                                                "libs/jquery.hammer.js"

                                           ],

                     

                       complete: init_gesture

                   

                  });

                   

                  function init_gesture() {

                             $("#gesture_container").hammer().bind("transform", function()

                                 {

                                                     alert("zoom functionality works");

                                                }

                             );

                  }

                   

                  I know that the problem is the thing between my ears, so I appreciate any thoughts on that!! A solution might bring Animate close to Air's gesture detection...

                  • 6. Re: Detecting zoom gesture in Edge Animate
                    roti62 Level 1

                    I think there is a way to detect zoom gestures via the implemented native support of ontouchstart, ontouchmove, and ontouchend in Edge Animate.

                     

                    These actions deliver a lot of information one can use to write zoom response functions. However, it will take me some more time.

                     

                    I will keep you informed...

                    • 7. Re: Detecting zoom gesture in Edge Animate
                      TimJaramillo Level 4

                      Hey Rolf, pinch is a multitouch gesture- not sure how you will get multi-touch info with the current events available in Animate?

                       

                      I think you would save yourself a lot of time using a pre-existing gesture library rather than writing this from scratch, but perhaps you look forward to the challenge? Either way, good luck, and let us know how you get on!

                      • 8. Re: Detecting zoom gesture in Edge Animate
                        roti62 Level 1

                        Hey Tim,

                         

                        that is true, pinch is a multitouch gesture. It is also true that using JS libs might be time-saving, but Hammer does not work in my project. So head first, code second. There must be a reason, that Adobe implemented only low-level touch events:

                         

                        Indeed, because they are good for more and you DEFINITELY can detect multitouch gestures (NOT EVEN FOR ZOOMING BUT EVEN FOR TEN FINGERS) natively in Animate. Those functions use the native browser capabilities, and in every HTML5 browser you may detect touch gestures by those functions. I figured it out for Animate now and my zoom works with ontouchstart, ontouchmove, and ontouchend . Performance is still a bit rough on weak hardware, but the SGS 3 and Galaxy Note 10.1 perform very well.

                         

                        Give me this weekend to finish my project, which is already beyond the initial time limit. Early next week I will come up with the complete code and I hope I can save others a bit of time (it took me less time to figure it out than I wasted for Hammer's implementation). Promise!

                         

                        The whole think remembers me on the old Flash rule: "If you can do it, Flash can do it." Now it is more "... Animate can do it". I knew the problem was again between my ears. The good think is that everything works fine even in hybrid AIR apps (AIR app with webview instances playing touch-enabled Edge Animate files).

                         

                        Later - Rolf

                        • 9. Re: Detecting zoom gesture in Edge Animate
                          roti62 Level 1

                          Err.., to be more specific for the time beeing:

                           

                          The magic command is "event.touch.length" where length indicates the touching fingers minus 1 and the access can be done via "event.touches[fingerID]"  ...

                          • 10. Re: Detecting zoom gesture in Edge Animate
                            TimJaramillo Level 4

                            Nice- I hadn't thought of using different indexes to access additional touches in the "touches" array. For the swipe emulation I've been using, I've been accessing: e.originalEvent.touches[0], for the first touch. Makes sense that you can access the second touch by targeting e.originalEvent.touches[1].

                             

                            Glad you're figuring it out!

                            • 11. Re: Detecting zoom gesture in Edge Animate
                              roti62 Level 1

                              Am 28.01.2013 18:43, schrieb TimJaramillo:

                              >

                                    Re: Detecting zoom gesture in Edge Animate

                               

                              created by TimJaramillo <http://forums.adobe.com/people/TimJaramillo>

                              in /Edge Animate/ - View the full discussion

                              <http://forums.adobe.com/message/5028436#5028436

                               

                              • 12. Re: Detecting zoom gesture in Edge Animate
                                jplbm

                                Hey Rolf,

                                 

                                Have you tried invoking a double tap touch event using this approach? I am specifically targeting Adobe DPS on iPad. Any insight you could provide would be highly appreciated.

                                 

                                J'

                                • 13. Re: Detecting zoom gesture in Edge Animate
                                  sarhunt Adobe Employee

                                  I don't have anything to contribute but I find this thread super interesting and want in on responses :)

                                  • 14. Re: Detecting zoom gesture in Edge Animate
                                    njacobs32

                                    I, too, am looking at doing this very thing. I simply want a quick way to zoom 200% on a double tap on any element in my animation. Can you help?

                                    • 15. Re: Detecting zoom gesture in Edge Animate
                                      njacobs32 Level 1

                                      I, too, am looking at doing this very thing. I simply want a quick way to zoom 200% on a double tap on any element in my animation. Can you help?

                                      • 16. Re: Detecting zoom gesture in Edge Animate
                                        roti62 Level 1

                                        hey jplbm and njacobs 32,

                                         

                                        sorry for the delay, I needed to be some months offline. I am not a DPS expert. However, in Edge Animate you may implement a double tap zoom action easily, because this ist pre-build by Adobe and not so much a gesture thing. A double tap gesture is the same as a double click (similar to, say, Flash). You may write pure JS code (which might work in DPS too) or:

                                         

                                        Just set up an element in Edge Animate which you intend to receive the double tap. Click on the "Open Actions" button right of the element's name input. Click on "dblclick" and fill in the zoom code. This should include lines like

                                         

                                        sym.getComposition().getStage().$("the_name_of_the_zoomed_element").css({"zoom":"2.0", ...});

                                         

                                         

                                        doubletap_edge.jpg

                                         

                                        In case you may do this with a "pinch2zoom" gesture, this ist not so easy. Of course, even this is JS stuff, so all commands work in JS code too. This might be a chance for DPS?

                                         

                                        For your examination, I tried to explain the thing in  http://www.medienmanufaktur-eifel.de/edge/multitouch_support_edge_animate.pdf

                                         

                                        You may check it out how it looks and feels by downloading my Android biometeorological app for Germany. Just look for "biometeorological forecast" in Google's Play. This is (still) an (heavy) AIR app and displays Edge animations in the sections "pollen", "air quality", and others. For example, the pollen forecast map can be zoomed via pinch2zoom and is pure Edge Animate. In a couple of weeks the AIR will be gone and the app is pure Animate too.

                                        • 17. Re: Detecting zoom gesture in Edge Animate
                                          roti62 Level 1

                                          Hey Tim,

                                           

                                          sorry for the crytic replay (I just answered the email about your post) and the long time off. Now they implanted me the bunny power and, hey, I am back in the game.

                                           

                                          Please look at my post on 2013-07-03 which contains correct links to the explanation what I did.

                                          • 18. Re: Detecting zoom gesture in Edge Animate
                                            roti62 Level 1

                                            Dear sarhunt,

                                             

                                            Sorry for the long delay, I posted my solution more in detail in replay to njacobs32 and jplbm.

                                            • 19. Re: Detecting zoom gesture in Edge Animate
                                              njacobs32 Level 1

                                              That worked superbly! Thank you! Now, is there a way to zoom in, centered on a specific point?

                                              • 20. Re: Detecting zoom gesture in Edge Animate
                                                roti62 Level 1

                                                Hey njacobs32,

                                                 

                                                the answer is yes. But the code depends on your needs. Just define the intended zoom center coordinates and set the top and left attributes of your zoomed element in a CSS definition within your dblclick action.

                                                 

                                                PS: You may swipe around elements since Adobe added the swipeleft/swiperight gesture (see my screen shot above). For swiping up or down you need to write a couple of lines of own code at this time. You may find some ideas how in my pdf http://www.medienmanufaktur-eifel.de/edge/multitouch_support_edge_anim ate.pdf. This might be helpful if the zoomed element runs out of your stage's/screen's dimensions.

                                                 

                                                Enjoy Animate...