This website uses cookies.

Cookies are small text files held on your computer. They allow us to create the best browsing experience for you on our site. By using this website or closing this message, you are agreeing to our Cookies policy.



Share your requirements and we'll get back to you with how we can help.

Thank you for submitting your request.
We will get back to you shortly.

Convert Flash to HTML5

Porting simple Flash banners and video to HTML5 is straightforward. There are plenty of tools out there which can convert Flash animations into sprite sheets. You can also convert SWF files to video (mpeg, mp4, avi) and embed in a page using <video>tag.

However, porting highly interactive content, such as games and eLearning applications, is more of an undertaking. In this case, SWF files need to be properly translated to JavaScript without using workarounds such as video. We usually recommend a two-step process as detailed below:

Export Existing Assets

You want to reuse your existing Flash assets and leverage your team's Flash skills as much as possible. If you are using Creative Studio 6, you can use a complementary plugin, Toolkit for CreateJS, to export your Flash artwork and animations. It will generate separate and readable JavaScript files representing symbols, images, sounds, and so on. However, before you can use the exported assets, you may have to resize them, so that they play nicely with the smaller mobile screen sizes. And you may have to create standard and high-definition versions of these assets to support different resolutions. The idea is to design assets in Flash Pro, export using the Toolkit for CreateJS, and code in a proper JavaScript IDE. This way designers and coders can work independently using tools that suit them best.

e-Learning through Mobile Devices

eLearning through Mobile Devices

The convenience of being portable without the limitations of too small a screen makes tablets the preferred choice for eLearning activities. With the influx of mobile devices, computer or Internet-based courses are no longer confined to large desktops. If the majority of your audience rely heavily on tablets and smartphones, you should definitely consider converting your course content to HTML5. Optimizing organizational training content for smartphone and tablet users is a decision that will be welcomed by your employees.

Coding the Interactivity

The Toolkit does not convert ActionScript. You will have to manually convert it to JavaScript. You may end up doing many rendering optimizations as well.

There are a few things you will need to watch out for when planning a conversion. Keep in mind that mobile devices are less powerful than desktops. Due to this limitation, computationally intensive stuff such as animated SVG filters are not supported on all mobile browsers. Use of audio can slow down your mobile web app and until there is better support for web audio you are left with using sound sprites. And finally, it is essential to test the output on all target devices—something that was working perfectly in your development machine may not work perfectly in the target device.

Google has come up with a web-based tool—Swiffy— that converts .swf files. Swiffy supports shapes, buttons, embedded fonts, timeline, and movie clips. It can convert ActionScript 2.0 to JavaScript. Swiffy emits an efficient format, but the exported file is not easily editable. This makes it difficult and time consuming to perform optimizations and iron out any bugs in the conversion. Also, some older browsers do not support the SVG output from Swiffy.

Having executed many porting projects, we have learned a few good lessons along the way. We can come up with a conversion strategy suited to your needs and implement it too. Get in touch with us for free consulting and estimate.