From SWF to HTML5

A few months ago I challenged our team if we could, convert/rebuild our big flash-based animation in our entry page to HTML5.

Well this was one of those challenges that backfired 🙂

Our designer is an awesome graphic designer, but he is still sharpening his “web skills”. Which was a problem since he could only deliver that animation in SWF format.

I started looking into painless solutions to convert the SWF file to HTML5, Adobe had some stuff (can’t remember its name) still in beta which didn’t work quite well at the time.

Then I found Google Swiffy, Swiffy is a project from Google’s DoubleClick team which converts SWF to HTML5 using their library to interpret things along the way.

First problems we encountered was performance and some conversion issues, we rebuilt the Flash and ActionScript which solved all those issues.

The second major issue was library compatibility with jQuery. Dont know why (since it is a really bad idea) they used a “$” to define variables inside their code base.

Well I could easily redefine jQuery caller on my side, but I wasn’t starting something from scratch so this was not an option.

Instead I swapped the problematic variables in Swiffy, solving the compatibility issues. This was really an easy fix.

You may my find a jQuery compatible Swiffy version at  https://github.com/apocas/swiffy-jquery

It worked pretty well, although the generated JS file is 50% bigger than the initial SWF file, it was a tradeoff we could handle.

This is related to our SWF graphic/visual complexity, if your SWF isn’t graphically complex the end result could be entirely different.

Advertisements
Next Post
Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s