Adobe Flash Created Web Site Convert To HTML 5 (Android/iOS Devices)

BillFinkNC
BillFinkNC used Ask the Experts™
on
I haven't done any web-site programming/designing for 10 years.  (New job)

I recently inherited a web-site that was designed entirely using Adobe CS4. (Flash, Dreamweaver, etc..)

I'm new to using Adobe packages which doesn't make things any easier for me. I do manage well, though - I'm already making changes/mods to the site without too many issues and I am using Adobe CS5.5.

My question is simple however I recognize the solution may be very complex.

I have all of the source code from this site and simply wish to change (convert) it to now  support the Android and iOS devices. Flash display being the primary reason for my wanting to do this.

I there a simple way for me to do something like: "Export" the site to support these devices? (how?)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Sorry, but you and every other dev in the world (including me) would love it to be that simple.

There are no tools that will do what you ask (1 click conversion from existing web technologies -> HTML5)

You should also know that the HTML5 'standard', err... isn't a standard until at least 2014 (http://www.w3.org/2011/02/htmlwg-pr.html) and some have speculated that the W3C (the body that sets web standards) moves so ponderously that it may not be a fully baked standard until 2020 (http://www.techrepublic.com/blog/webmaster/html5-the-next-generation-of-web-design/484).

The other problem you have is that of 'legacy' browsers. Around 40% of the people using Windows are still on Windows XP, and there is no version of Internet Explorer on XP that can run HTML5. So if you switch, you get some new viewers can see your site with their mobile, but you then exclude 40% of Windows users. With Windows being the most popular OS on the planet, losing nearly half of those people would be a.... err... a brave move?

(Windows XP users can, of course, choose an alternate browser like Chrome or Firefox, but it seems that XP users are likely to be a) grannies or b) people using computers on a corporate network that doesn't allow you to install a new browser. Sorry Gran, I know you *try* to understand your PC...)

The other problem is that in terms of functionality (when compared with Flash) HTML5 is less capable (I'm gonna get flamed for that one). So even if there were a tool that could convert for you (there isn't) you would lose functionality in the process.

Finally I haven't yet seen any software tools that will let you easily create 'clever' content for HTML5, so you're nearly back to the hand-coding days of 'HTML-early version' to do anything more than text and images.

I've been (a little bit) deliberately provocative in my characterisation of HTML5 in the hope that someone will shoot me down and write a long list of capable, easy to use, compatible HTML5 tools that will do what you want. (Not holding my breath though...)

For the next few years, here's what I see happening...

Because HTML5 is still a long way from baked, and doesn't work with almost half of the world's computers, and arguably can't do what Flash does even when it arrives, I think web pages on mobile devices will become *simpler* and any 'clever' stuff that needs doing on a mobile device will done with an *app* and not a web page.

And on desktops / laptops, Flash continues to be used, because it is the best solution for 'rich' content in a browser.
And just to give you (maybe) a little ray of hope...

You know who I said that I think the 'clever' stuff on a mobile (anything more than a regular webpage) is probably best done as an app....?

Flash CS5 has the ability to cross-compile to iOS and Android apps. So you can have the .swf for your regular web pages, and some code in the web page that 'sniffs' to see if a mobile device has loaded the page. If it has, you replace the swf in your 'pc friendly' page with an image and a link that allows the mobile user to get the app, that would do the same as your Flash content in the regular web page. Does that make sense how I have explained it?

Author

Commented:
I hear (and sympathize) with all the points you made.

What I have been able to do up to this point is similar to one of your suggestions:

I redirect mobile-clients to a separate site (separate pages) after detecting the client's browser/platform.

My site's home (initial-page) simply displays images in a "slide-show" sequence with a few menu items at the bottom of the screen. I display the images by using a jquery script to display them in the same sequence as they are inside my flash project.  (The menu items I created a mapped-image out of a screen-shot from my initial flash display.)

Within Adobe CS5's flash there is the option to publish to "Air for iOS" but it requires that I obtain an Apple programmer's certificate - even if I only wish to test.  This requires another $100 fee to Apple.

Your second comment: With publishing to "AIR For Android" as an option - is it possible that the published document that I test with and publish for the Android will display properly inside an iPhone's Safari browser?  (at all?)  

Aren't these files that are simply downloaded to the device and displayed inside the mobile-devices web-browser??

My primary objective is not wanting to go through such a time-consuming process teaching myself CS5.x only to discover there is a simple, within CS5.x's facilities, way to accomplish the same thing I'm doing "by hand" (Slow!!!)
...
I just re-read your second comment and suggestion - I like that suggestion - I'll let you know how I make out.
Sounds like you got some of what you want with the 'sniff' script...

Ok, sorry to disappoint again, but when you publish an 'AIR for Android' app, what you are creating will not show in a browser - either on Android or iOS. What you are creating is an app - an application, and not web content. The filetype you create for Android is known as a .apk file (that's the file extension). If you change your publishing settings in Flash to make an iOS app, then the filetype becomes .ipa - an iOS app.

What's actually happening here is it is taking a swf (the thing you would normally publish to a website) and 'wrapping' it to become an Adobe AIR application. This then makes the whole package (the swf in an AIR wrapper) into either the .apk and / or the .ipa - a native application for Android or iOS. A bit clearer?

Although you are correct that Apple requires a $99 per year to become a registered developer, you can do iOS testing and development without this if you have access to a jailbroken iPhone. You can then 'sideload' the apps. Naturally, though, if you ever get to the point where you want to distribute your apps in the iOS app store, you then need to register and cough up the $99.

This probably won't help you with your existing Flash apps, but it may help with future ones. If you know, in advance of the design of the Flash app, that you want to deploy the final code three ways - web, Android app & iOS app, you can take this into account at the design stage, and build it from the ground up for the three platforms. For example, the code in one of your first frames of the Flash could detect the device it was playing on so you could set things up for that device (screen size, orientation, features of the device - i.e. compass, accelerometer, GPS etc).

That sounds like a bit of a chore (making one app fit three platforms) but if you have that in your mind *at the start of the design* then it really isn't as difficult as it might sound. Certainly it is far easier than trying to 'retro fit' a swf that was *only* designed for the web, but you now want to modify for mobile devices.

Author

Commented:
Though I would have been happier if the solution was a "Just do this, click on that, and then save ..."

Your comment(s) saved me a good bit of time by clarifying the mis-understanding I had thought CS5.x would/could do for me.

Thanks!

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