Flash to HTML5

Introduction

Before I begin, this post is not a debate about the pros and cons about flash or HTML5. It’s just going to be about my experiences of converting a flash app into HTML5 in order to get that flash app to work on iPads. In case you didn’t know, an iPad does not support flash applications. You can download different browsers for your iPad which supposedly handle flash, but you have to pay for these. What I wanted was a free way to get some small flash quizzes working across multiple platforms (specifically the iPad).

Part One – Reusing Existing Code

After a quick bit of reading, I found that HTML5 is the way forward. However, I didn’t want to spend time learning HTML5 from scratch – I just wanted to be able to re-use what I’d already written in Flash. At the time of writing, Google provide a free online service called Swiffy that says it converts Flash SWF files into HTML5. You can also download a swiffy extention to work directly within your installation of Flash. There are a few conditions, the main one that I noticed was that the flash file has to be written in Action Script 2.0.

Part Two – Action Script 2.0

My existing application was written in Action Script 3.0. I had to go “backwards” if you like and change the coding into Action Script 2.0. Luckily, this was not so difficult. My little application was not complicated, and the coding was very basic. Therefore, this didn’t take very long at all. A few adjustments here and there, and I was ready to go.

Part Three – Conversion Issues

The Swiffy page gives some basic instructions, like the flash app has to be in Action Script 2.0 (check) and the file size has to be below 1mb (check). What it doesn’t say, and what is probably obvious to everyone apart from me, was that certain elements – even though coded in Action Script 2 – would not be converted. I’m sure it’s documented some place but I didn’t read it. Anyway, here’s a list of features I wanted to use, but couldn’t:

1. Radio Buttons for gathering student response. Previously, a student could click a radio button and then click on Next. This gave them the option to think about their choice before continuing.
2. Sliders to gather a sliding scale for responses.
3. Small audio clips. Simply to give a tiny “click” when an option was selected.
4. Dynamic text to display scores and feedback.

I had to re-think certain elements of the quiz and re-do certain aspects to avoid any of the above features.

What it did convert was perhaps the most crucial part – the use of variables within the code that counted up different elements of the quiz. It also converted conditional branches. So, if the final score was greater than 10 the user would be displayed a “Well done” frame (basic example, but you get my drift). Here’s a very simple example:

function goWhere () {
if (count < 5) { gotoAndStop(6);
} else if (count <10) {gotoAndStop(7);
} else if (count <15) {gotoAndStop(8);
} else if (count <20) {gotoAndStop(9);
} else {gotoAndStop(10);
}
}
Part Four – Final Product

After getting rid of radio buttons etc. I was presented with a small bit of HTML that contained my flash application. I bunged this into my wesbite using an iFrame, crossed my fingers and uploaded it. I first tested it on Firefox. So far so good – the quiz came up, looked exactly that I was expecting and worked. I then fired up the iPad – again, perfect results. Finally I opened up Internet Explorer. Nothing. Just a blank frame where the quiz should be. Apparently there’s a small bit of meta-data that is needed for Internet Explorer to understand the HTML5 code within an IFrame. All I can say is “Thank you Rich for being so clever”. He pinpointed me to this bit of code:

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=IE8" />

By putting this into my HTML document, the HTML5 quiz worked.

Conclusion

Whilst it would be nice to be able to use all the things I was using in the original Flash application (radio buttons and dynamic text being the most important), I was more than happy to be able to simplify the quiz in order for it to work on the iPad. It actually looks quite nice and might even fool some people into thinking that I am some genius at app development! The Swiffy plug-in is currently in development and is free. Whether or not this might change in the future is anyone’s guess. Maybe it’s time for me to try and learn HTML5 but for the time being I am more than happy converting my Flash stuff into HTML5 using the Swiffy plug in and just hope that it remains free for a bit longer!