Converting Flash Interactives to HTML5

Over the past two weeks, I’ve taken on a project to convert an old (OLD) Flash interactive tool to HTML5. My primary reason for doing this is not so that it will run on mobile browsers… but rather that it would be an easier task to rewrite the thing in HTML5 rather than get all of the old AS1/2 code together, grab an old version of Flash Professional, locate and configure the external remoting libraries, and sift through my crappy old non-OOP code to figure out how to make a couple of simple changes. No thank you!

Old Flash Version
Old Flash Version

The benefits to performing this conversion include; 1) making it better from a UI perspective, 2) yeah, it’ll run on iApples, 3) provides me with a chance to explore a direct conversion project.

I’ll spend a little time explaining technology choices, below.

Art Tosser
New HTML5 Version

AngularJS: for data binding and repeatable elements.

I’ve been using AngularJS for a good part of this year on a secret project I am working on with Adobe’s Creative Cloud team. It makes things like data binding and templating quite easy to work with – very similar to Flex in some regards. It’s also hyper-structural and enforces a good amount of organization into the code.

GreenSock Animation Platform: for transitions, draggables, and tweening.

I actually have used GreenSock AS2/AS3 libraries on a number of Flash projects so it was pretty easy to get their JavaScript library working with this project. The main difference being that we are no longer working with the Flash display list but rather the browser DOM and all of the inconsistencies in positioning and sizing elements that goes along with that. It’s just something to be aware of when figuring our coordinate systems for drag and drop and other items.

Bootstrap: for buttons and icons and such.

CourseMedia is already using Bootstrap (albeit version 2.3) – so it was pretty simple to just generate some buttons and icons based upon their styling system. No biggie.

Art Tosser - loaded
Art Tosser (HTML5)

This was my first foray into using CSS FlexBox on an actual project. Is it perfect? No. I was hoping the positioning and sizing of FlexBox elements would be closer in similarity to Flex (Apache Flex) but not quite. It’s still nice to have a more powerful way of positioning elements for browsers.

Fullscreen API is an absolute mess still. Having to check against each specific browser and dealing with those inconsistencies is one of the things that is so off putting when it comes to web development. It feels incredibly restrictive that something so simply done in ActionScript is such a cumbersome chore in JavaScript… and even then there are still browsers which do not function ideally, similarly, or at all… but this is bound to improve with time.

So what is the main takeaway from this? Simple interactives such as this one can be pretty easily converted from Flash to HTML5. It isn’t perfect… but what really is? My main goal is to keep things like this as simple as possible as with anything – the more complex a system becomes, the greater chance of fragility.

Leave a Comment

Your email address will not be published. Required fields are marked *