Converting Flash-Based maps to html5 canvas using Adobe Animate?

Matt K
Matt K used Ask the Experts™
on
I've inherited a bunch of legacy transit maps originally built in Flash CS5. These maps pan zoom, and reveal stop ID information when a given stop is rolled over. They also have a legend that can be expanded.

Here is a sample:

https://test.3rduse.com/sample/swf/sample.html

The native Flash CS5 sample file can be downloaded and viewed below. It's fairly simple – nothing fancy:

https://test.3rduse.com/sample/sample.zip

I'm hoping there is a way to convert these to HTML5 Canvas using Adobe Animate. These original native files will open in that app, and all the stops (there are over 2000 spread across dozens of files – one for each route of the service) are placed and have the correct IDs associated. I've started converting to AS3 (from AS1 – yes, these are that old), but I don't know if that's worthwhile. I have no experience with Actionscript to speak of.

If this is possible, I suppose it's then a matter of figuring out how to convert them. Ideally the final result will be usable on mobile devices.

If I'm barking up the wrong tree using Animate, I'm open to ideas. But again, with thousands of stops and all of them placed on maps and tagged with the proper ID, much of the battle is won if I can continue using Adobe Animate to push out html5 versions. Is this possible, and if so what would be the best way forward given what I already have?

If you can offer some guidance, please do fire away. Many thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2016

Commented:
Animate is the suggested solution.  Action scripts will be disabled and you will have to edit them.
Matt KWeb Designer

Author

Commented:
Thanks David – very glad to hear that. Can you expound on this? Are you referring to AS1 scripts being disabled, needing to be edited as AS3? Or as something else entirely? Will AS3 continue to work when exporting as html5/canvas, and will the final result be usable on mobile devices? Are there any tricks or pitfalls I should know about? Thanks again.
Top Expert 2016

Commented:
NO action scripts will run they will all be commented out.
As far as being mobile friendly. Probably NOT, you will have to change the html5 page to be responsive.
Have you considered google maps as all of the information is probably available there. Google does collect real time information from most transit authorities. It even knows if my bus is running behind (shows the scheduled time AND that it is delayed X minutes.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Matt KWeb Designer

Author

Commented:
Thank you for the suggestion. I actually am running Google maps already, with a lot of the same info and then some – including the GTFS transit feed spec, as well as info on when the next bus is to arrive. I actually supply this feed to Google myself on behalf of the client.

However, said client also has branded, stylized, not-to-scale maps that they use across all their media – including printed brochures and on the website. Up until this point, these have been generated from Flash, with a static image fallback. I'm told these stylized interactive maps with the rollover stops are "more user friendly" and correlate with the client's brand. Said client doesn't wish to lose this functionality in spite of the fact that Flash is going away. I was hoping there was some way to accommodate them.

"NO action scripts will run they will all be commented out." I'm having trouble following. You said earlier I would have to "edit" the scripts. Did you mean for html5? Edit them in what way? If not AS3, what language?

"Probably NOT, you will have to change the html5 page to be responsive." Responsive design is a somewhat separate issue from allowing interactive map functionality, yes? Change the html page to be responsive in a way that will allow this, or...?

I looked into Leaflet and CRS Simple, but given the resources we have at the moment it doesn't seem feasible to rework thousands of stops into a database of image coordinates across dozens of images, and ongoing maintenance would be a nightmare.

Thus, my hope that I could repurpose what we already have.

So it sounds like, contrary to your first response, Animate is perhaps not the suggested solution, after all?
Top Expert 2016
Commented:
Action Scripts have to be replaced with javascript
https://helpx.adobe.com/ca/animate/how-to/convert-flash-ads-to-html5.html
Another converter that supports AS3 https://www.createjs.com/zoe
Matt KWeb Designer

Author

Commented:
This is good stuff – thanks David. I had no idea that Animate supported languages other than AS. This gets me on my way. Cheers!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial