4 Replies Latest reply on Jun 6, 2013 9:15 AM by mobly

    Is it possible to have an animation begin to play on device tilt?

    emilyragle

      I've been interested in using javascript to tell a timeline to begin playing when the target device is tilted.

       

      I see that "orientation change" is an option as an event, but does anyone know of a way to use a slight device tilt as a trigger as opposed to a full 90 degree rotation?

       

      I suspect that it will require custom code, but I haven't had any luck integrating outside code with native edge actions.

       

      Any guidance would be much appreciated!

       

      —Emily

        • 1. Re: Is it possible to have an animation begin to play on device tilt?
          TimJaramillo Level 4

          Hi Emily, you can do almost anything in Edge that you can do in the browser.

           

          Here is an example of Edge utilizing the gyroscope. Hold your iPad in portrait and rotate left/right to display the rotation via text. You can leverage this to call animations, etc.

           

          example:

          http://www.timjaramillo.com/code/edge/gyroscope

           

          source:

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

           

          I based my example on this link:

          http://www.webdigi.co.uk/blog/2012/using-an-ios-device-to-control-a-game-on-your-browser/

           

           

           

          Here is the code on Stage.compositionReady:

           

          //Detect if the browser supports DeviceMotionEvent

          if (window.DeviceMotionEvent != undefined) {

           

           

                    //ondevicemotion is fired when iOS device detects motion

                    window.ondevicemotion = function(e) {

                              //ax is the movement on the x axis.

                              //This motion is used to move the ship in the game

                              ax = event.accelerationIncludingGravity.x * 5;

                              ay = event.accelerationIncludingGravity.y * 5;

           

           

                              //Status 0 is start, 1 is left, 2 is right, 3 is stay

                              if(status == 0){ //initial condition

                                             status = 3; //stay

                                             sym.$("txt_test").html("Status: level");

                              }

           

           

                              if(ax > 14 && status != 2){ //move right on device

                                             status = 2;

                                             sym.$("txt_test").html("Status: move right");

                              }

           

           

                              if(ax < -14 && status != 1){ //move left on device  

                                             status = 1;  

                                             sym.$("txt_test").html("Status: move left");

                              }

           

           

                              if(ax > -14 && ax < 14 && status != 3){ //device held steady

                                        status = 3;

                                        sym.$("txt_test").html("Status 0");

                              }

                    }

          }

          • 2. Re: Is it possible to have an animation begin to play on device tilt?
            mobly Level 3

            thanks Tim

            don't suppose you know off the top of your head where I could find the syntax for a shake event?

            As I write this, I'm thinking can I replace "event.accelerationIncludingGravity" with event.shake for example, I should just test it I know, but if it's a simple answer then it would be good to know. I've used shake.js before, but this seems even easier.

             

            Cheers

            Alistair

            • 3. Re: Is it possible to have an animation begin to play on device tilt?
              TimJaramillo Level 4

              Hey mobly, off the top of my head, I don't know the specifics on the shake event.

               

              shake.js looks really straightforward to implement, just load it via yepnope, and then a few lines to check shake- I'd go with that!

              • 4. Re: Is it possible to have an animation begin to play on device tilt?
                mobly Level 3

                Hi Tim

                I took a stab at trying to implement my shake script, but maybe I've gone too simplistic!

                on the stage are 2 images sitting on top of each other, on shake the top image should be set to 0 opacity, or it could be hidden etc

                I do wish there was a book on Edge to explain the syntax a bit better :-(

                Your thoughts would be much appreciated

                 

                yepnope(

                {

                    nope:[

                      'js/shake.js',

                     ],

                    complete: init

                }

                );

                 

                 

                function init() {

                          var stage = sym.$("Stage");

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

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

                 

                                    JarDots.shake({

                                    opacity: 0,

                 

                                    }

                          });