Skip to main content
rogersub
rogersub
Participating Frequently
January 15, 2018
Answered

Zoom and pan map movie using gestures in html5 canvas

  • January 15, 2018
  • 1 reply
  • 2423 views

I need help with the code for zooming and panning an Animate CC movie html5 canvas using the touch gestures.

I have a movie containing a map. I need an example of code to be able to pinch / spread for zooming and drag to pan the map.

If possible I would also need the functions for mouse-wheel zooming and click to drag the map for alternative desktop interfaces.

Many thanks!

This topic has been closed for replies.
Correct answer albertd9194959

Hi Rogersub,

I usually use: Hammer.JS - Hammer.js

A quick tutorial here: HTML5 and Multitouch – Hammer.js | Creative droplets

If you don't want to use addon scripts, you have to look at the standard browser touch events.

Example here from firefox:Touch events - Web APIs | MDN

A quick tutorial here: https://www.html5rocks.com/en/mobile/touch/

Regards,

1 reply

albertd9194959
albertd9194959Correct answer
Inspiring
January 16, 2018

Hi Rogersub,

I usually use: Hammer.JS - Hammer.js

A quick tutorial here: HTML5 and Multitouch – Hammer.js | Creative droplets

If you don't want to use addon scripts, you have to look at the standard browser touch events.

Example here from firefox:Touch events - Web APIs | MDN

A quick tutorial here: https://www.html5rocks.com/en/mobile/touch/

Regards,

rogersub
rogersubAuthor
Participating Frequently
January 16, 2018

Hi albertd9194959,

Thanks very much for your reply.

Do you have any examples on how to use hammer.js in Animate CC?

(the tutorial doesn't seem to work)

Thanks again.

M
Mystic_curiosity5C6D
Participating Frequently
January 26, 2018

Hey Roger have you figured out the gestures?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices