Pinch, Swipe and Drag functions using hammer.js in Animate CC

[rogersub]

Hi, I have an html5 canvas movie that I would like to be able to recognize Pinch, Swipe and Drag gestures when using touch screens such as smartphones or tablets.

I am linking my html to the hammer.js library:

<script src="https://hammerjs.github.io/dist/hammer.js"></script>

However, I don’t know which functions I have to call in Animate CC canvas to Pinch, Swipe and Drag my movie symbol.

Can anyone help with the code needed to make this functions work?

Many thanks in advance!

[ClayUUID]

I'm not familiar with Hammer, but if it was written to work with the browser DOM (almost certainly), then it won't work with Animate Canvas objects, because Canvas objects are not DOM objects. All Hammer will see is the single canvas element that Animate uses to render the stage.

[rogersub]

OK, thanks for your reply. I understand.
Anyways, if anyone knows how to call the Pinch, Swipe and Drag functions for the whole canvas element?

[ClayUUID · Accepted solution]

Animate declares a global variable "canvas" which points to its canvas element. So just plug in "canvas" where the example code has "hammertime".

[rogersub]

Hi ClayUUID,

Following is the js code as you suggested. What is myElement & myOptions?

Is this code enough to make pinch, pan and swipe? It doesn't seem to work.

Anything else needed? Thanks!

<script>

var canvas = new Hammer(myElement, myOptions);

canvas.on('pan', function(ev) {

console.log(ev);

});

canvas.get('pinch').set({ enable: true });

canvas.get('rotate').set({ enable: true });

canvas.get('pan').set({ direction: Hammer.DIRECTION_ALL });

canvas.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

</script>

[ClayUUID]

Nuts, sorry, I misread the code examples. You should actually substitute "canvas" where it says "myElement".

[Marampazú]

I'm trying to do something similar.

I have reviewed what they indicate in the post, but I have a couple of doubts:

Does the line of code that calls the hammer.js script go in frame 1?

And once you load the script, where do you put the code they mention?

In some frame or in the index already published the file?

Thanks for the help.

Greetings.

[TvDirector]

I'm stuck on this one too - I don't know what I am missing in the steps -

One question I have is this - After I place the hammer.js link in the Global Include section - is there any other .js file I need to make or edit? - I'm doing all the function calls in frame 1 of my timeline - with a very simple timeline - it has three states - and I'm trying to gesture swipe left or swipe right -

Thanks