Enabling Gestures in Edge Animate Compositions

As I mentioned in my last post, I’ve been working a lot lately with Adobe Edge Animate, Adobe InDesign, and Adobe DPS.  Here’s another post on that same subject.

Another request that I have gotten from some of our DPS customers is that they’d like to be able to implement gestures inside of the Edge Animate compositions that they are building for DPS publications. This includes double-tap gestures, swipe gestures, etc… Out of the box, these gestures aren’t supported, but you can add them to any Edge Animate composition without too great of an effort.

Below is a quick video showing Edge Animate Compositions that are taking advantage of both double-tap and swipe gestures.  Note: I intended these to be used inside of DPS, but I show them in Safari on iOS.  These gestures override the default mobile browser behaviors.

As I mentioned above, this isn’t something that is supported out of the box, but it is possible to add gesture features manually.

The links below are for the basic examples that I put in the video.  Both should work in desktop and mobile browsers:

For the double tap example, just perform a double tap/click gesture anywhere on the stage (the image area), and the animation will start again from the beginning.  For the swipe gesture, just perform a horizontal swipe in either direction with either your finger, or the mouse.

Gestures With Hammer.js

I leveraged the hammer.js JavaScript library to handle gesture detection since these gestures aren’t supported by default.  Hammer.js also enables other gestures, like long taps, pinch, rotate, etc…  However, I’m only showing double tap and swipe.  You can read more about hammer.js using the following links:

I used this exact setup procedure in both the double-tap and swipe examples.

To include this library, I first downloaded the hammer.js file, and saved it inside of the “edge_includes” folder.

hammer.js

Next, you have to disable the web view/browser default double tap behavior, which is to zoom in when double tapped.  You can disable the zoom on double tap by adding a viewport metadata tag inside of the Edge Animate project’s html file.  Open your project’s .html file (in this case “DoubleTap.html”, and add the following line to the <head>

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Example:

html

Next, we have to add the code inside of the Edge Animate composition to enable the gesture behavior.  The first thing you have to do is include the hammer.js library.  In this case, I wanted to add the gestures to the composition’s stage, instead of a particular element.  So, right-click on the stage in the Edge Animate Editor, then select  the “Open Actions for Stage” menu option.

open_actions

This will open the actions for the Stage instance.  Next, click on the “+” icon and select “creationcomplete”.  This will create a function that gets invoked once the Stage instance has been created at runtime.

creation_complete

In that function, first we need to import the hammer.js library.  Edge Animate compositions include the yepnope.js library, which is originally intended to detect if a browser includes a specific piece of functionality.  If not, then include a JS library so substitute that missing feature.  In this case, I am passing it a blank test to force it to include the hammer.js library.  The following function forces loading of the hammer.js library.  Once the library has been loaded into memory, it triggers the “init” function:

yepnope1

In the init function, we grab a reference to the stage’s element (div), then use hammer.js to add our gesture event handlers:

yepnope2

Now, we need to start looking at the individual examples…

Double Tap Gestures

In the double tap example, we have a simple timeline animation that plays sequentially.  At the end of the sequence the animation is stopped by a simple sym.stop() function call.  Here’s a quick preview of the setup in Edge Animate:

edge_double_tap

To add the double tap gesture, all you have to do is add a hammer.js event for “doubletap”.  In that event handler, we’re just calling sym.play(0), which restarts playback from the beginning of the composition. The full code for the creationcomplete event is shown below.  This is all that is needed to add the double-tap gesture to the composition stage instance:

yepnope({
	nope:['edge_includes/hammer.js'] ,
	complete: init
});

function init (){

   var element = sym.element[0];
   var hammer = Hammer(element);

   hammer.on("doubletap", function(event) {
        sym.play(0);
   });
}

Swipe Gestures

In the swipe gestures example, we have a simple timeline animation that plays sequentially.  However, at the end of each slide transition, playback is stopped by a simple sym.stop() function call.  Whenever we perform a swipe action, we’re either just playing forward, or playing in reverse until the next slide animation stops.  Here’s a quick preview of the setup in Edge Animate, note the stop points highlighted by the arrows:

edge_swipe

To add the swipe gestures, all you have to do is add a hammer.js event for “swipeleft” or “swiperight”.  In those event handlers, we’re just calling sym.play() or sym.playReverse(), depending whether it was a left or right swipe.  These play actions progress to the next animation sequence. The full code for the creationcomplete event is shown below.  This is all that is needed to add the swipe gesture to the composition stage instance:

yepnope({
	nope:['edge_includes/hammer.js'] ,
	complete: init
});

function init (){

	var element = sym.element[0];
	var hammer = Hammer(element);

	hammer.on("swipeleft", function(event) {
		  sym.play();
	});

	hammer.on("swiperight", function(event) {
		  sym.playReverse();
	});
}

With the swipe gestures, you can get some drag event conflicts on mobile devices.  If you run into this and you do not want the page to scroll, the scroll action can be prevented by capturing the touchstart event, and canceling the default behavior.  I didn’t add this, just because I wanted to keep this example very simple.

Source

Full source for each example can be downloaded from the links below:

Artwork used in these examples is from the Adobe MAX web site.  You should attend MAX, it’s going to be awesome.

Publishing

When you publish the composition from Edge Animate, the “hammer.js” file won’t be copied automatically, so make sure that you copy it to your publish directory before distributing the composition.

  • http://partycrashers.co.nz Karuna

    Hi there, using your files I am trying to replicate exactly what appears at 1:03 seconds of the video (swipe gesture) http://www.youtube.com/watch?feature=player_embedded&v=t_tv_p3xxGA, but I get this instead – http://partycrashers.co.nz/sample18/. I am using the exact same code as yours (found here:http://www.tricedesigns.com/2013/04/17/enabling-gestures-in-edge-animate-compositions/). I just can’t figure out what i”m doing wrong. I can email you my files if you have time. Thanks.

    • http://www.tricedesigns.com Andrew

      Sorry, that link isn’t working for me – I get a 404 error, so I’m not sure what issue you are running into.

  • http://partycrashers.co.nz Karuna

    it works fine locally. Here’s my index.html
    Any help you can provide would be great!

    EDGY

    window.jQuery || document.write(”)

     

     
     

     

    • http://www.tricedesigns.com Andrew

      Looks like the blog system removed the code you posted. Try putting it in a gist for sharing: http://gist.github.com/

  • Jose Andrade

    This doesn’t seem to work in Edge Animate CC. Thoughts?

    • Fang Zhou

      Animation published with CC used in DPS works on some iPads and not the others… And the the animation made with CC affects functionality of animation in neighboring articles and pages. Any idea how to fix it in CC?
      Right now, we are just using Edge animate 1.5 to publish the animations, it seems to work fine.

  • Nicholas Jacobs

    What about pinch and zoom on an object? Any suggestions?

  • Nicholas Jacobs

    I want to zoom in on the whole page, because I’m making a custom app within Phone Gap Build, and have everything working EXCEPT the pinch zoom. HELP?

  • Yolande Sukal

    I’m a designer with beginner knowledge of Adobe Edge and HMTL 5. The scrolling worked great in a widget published for iBooks. Just had to remember to put the hammer.js in the published .wdgt file. Thank you!

  • dylangraft

    I’ve run into the drag event conflicts that you were talking about inside of DPS. When you swipe horizontally, the animation plays but DPS also tries to pull the next article over at the same time. I would like to keep this from happening… I’m brand new to working in edge so any help would be greatly appreciated.

  • rubens

    Hi,

    Actually I am trying to controlling my timeline with events that I can use in my ipad. I export html from to Edge Animate, and I insert in Indesign to digital publishes (DPS).

    I found this example:
    https://www.dropbox.com/s/2mvc6l667nq79av/parallax_edge_demo.zip

    I would like to know if there is a way to make the scroll smooth. I mean, if you give a little push with your finger and it just scrolls by itself and goes slower at the stop (don´t stop suddenly like in the example). Is this possible?

    thank´s,
    Rubén Afonso

  • nathaniel harman

    this is great! i’m building an app inside animate and want to use swipe left, right, up and down for navigation, do you think i’ll be able to implement this using hammer?

    • http://tricedesigns.com/ Andrew Trice

      Actually the latest version of edge animate has native support for swipe gestures. You won’t even need hammer.js for basic swipes – you would need it for other features though, like pinch zoom or 2 finger tap

      • nathaniel harman

        thats cool, what about swipe up and down though?

  • Nicolas Celers Noeud Pap

    Hi Andrew

    nice tuts !!!

    work on dps but when i use swip ,DPS want to change page .

    is it possible to have more information about : “the scroll action can be prevented by capturing the touchstart event, and canceling the default behavior” cause i don’t understand very well what i have to do

    thanks alot