Interactive Zoom and pan Animate CC 20201

New Here ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

Hello everyone

I'm trying to buil, without success, an interactive map based on the graphic attached
The image is pretty wide and ideally the users will be able to move around zooming and panning to a specic point of interest. A big plus would be to show an image when the mouse is over (or click) certain text.
I've being rerearching the last days and I came across this great post (which might be the answer I'm looking for) but when testisg the html5 only the zoom on wheel is responding.


I'm quite new to AnimateCC, I used to do small projects with Flash back in the days.

Has anyone suggestions or inputs. Every lead or hint wuold be much appreciated.


Thanks in advance to whoever might answer!

Cheers, Marco

Views

92

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

Hi.

 

I've just tested the code from this discussion using the big image you attached and everything seems to be working fine. I've also included a button with over and down states and it worked as well.

 

Can you provide more details of the issues you're facing?

 

Regards,

JC

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

Thanks @JoãoCésar  for answering. Once open the html file (from this your folder animate_cc_html5_pan_and_zoom_v2.zipon the browser I can see the only the mouse on wheel is resopnding. The navigation buttons are not clikcable. But If I break the "app" layer and I publish a new html file then I see the buttons changing state but without zooming or panning.  

 

Just now I opened this link animate_cc_html5_map_pan_and_zoom.zip and everything seems to work.

 

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

It seems the mouse wheel method is not working in Firefox. I've changed that method and applied your image with some invisible buttons over the circles.

 

Download the FLA here:

https://bit.ly/37SRBaF

 

Please let me know if it works now.

 

Regards,

JC

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Dec 13, 2020 Dec 13, 2020

Copy link to clipboard

Copied

Hi João

the buttons and the pan seem disabled. only zoom on wheel is working.

I really don`t know from what this issue depends

 

Thanks for your support

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 13, 2020 Dec 13, 2020

Copy link to clipboard

Copied

Hi again.

 

Are you testing the HTML file using a local or remote server? Or at least using Animate's test function that automatically creates a server?

 

Anyway, can you share a video showing these problems happening?

 

Regards,

JC

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines