Is there a tool that converts HTML5 + JS + CSS into an SWF?

Question

There's so many people wanting to do this the other way around, I'm left wondering if I'm being stupid about something.

Basically, I want to build my web application using open standards and support older browsers via SWF files for the Flash Player. Is that possible?

Answer 1

Okay, I'm going to have a go at this. It sounds to me like a question borne out of a certain amount of frustration with the current technology landscape. It feels like you're asking for a silver bullet when in fact no such silver bullet exists.

I think until recently Flash probably was that silver bullet, but with the proliferation of mobile devices which don't support Flash (iOS initially and more recently Windows Phone 8), Adobe's decision to cease development of the Flash plug-in for mobile, and the fact that HTML5 is less capable and a long way off achieving the near universal support Flash enjoys, there simply isn't a one-size fits-all solution anymore.

You say you want to build your web app using open standards but you don't explain why. There could be a number of reasons including the business requirements of the particular project, the skill-set you have available to you, the need to support mobile devices, and / or the belief that open standards are simply a better choice than proprietary technologies.

Further, you don't offer any specifics on the nature of your web application which, if you accept that there is no longer a one-size fits-all solution, makes it quite difficult to offer an alternative approach with any great confidence.

That said, if we assume your web application is complex and heavily data and UI driven, it seems to me there are two approaches available to you.

1. Build the application using open-standards and accept that it's going to take longer to develop and that you won't be able to guarantee a consistency of user-experience across the various browsers.
2. Build the application in Flash which will allow you to do everything you want to do today and do it far more quickly (because of the platform's superior tooling and component set), as well as guarantee a consistency of user-experience across the various browsers. If mobile support is a requirement, you can package your application to target iOS (natively) and Android (via the AIR runtime) with, in theory, only minor changes to the core code-base.

But, to actually answer your question, the closest thing I could find to a tool that converts HTML, JS and CSS to a SWF is OpenLaszlo, a declarative language and component set which can publish the same code to either SWF or DHTML (how hilariously out-dated that sounds!). However, it seems to have all the hallmarks of a dead project.

Answer 2

The solution I would take when designing your webpages with HTML5 video's and CSS3 Animations so that they fallback to SWF and CSS2 is to use those ready-to-go scripts that include such fallback built in.

For example, JW Player has many embed options for embedding videos. You can configure that so videos are embedded via HTML5 video and then gracefully falls back to flash support when required. That API handles the necessary changes automatically and uses the correct CSS for the browser detected via features supported, not user agent.

The same is true for jQuery CSS3 Animation Plugins that will deliver HTML5 FX when the browser supports those features and then will deliver CSS2 when it doesn't. For example, jQuery Quicksand plugin can be made into a modern HTML5 Menu Navigator with the bells-and-whistles of HTML5 but falls back to support IE8 and older browsers automatically. Another Navigator by Wizzud is HERE which looks like HTML5 Animations but it isn't.

The keywords to search for when checking out any modules you need to add to your webpage is fallback support which will then allow you to concentrate on design rather than rebuilding a script for a non-supported browser.