Moving interactive visualization from Flash to HTML5

November 6, 2012

I’ve recently rewritten a interactive visualization made for design challenge from Flash/AS3.0 to HTML/CSS/Javascript. I’ve noted few things for myself.

ActionScript vs Javascript

Sometimes rewriting something from Actionscript to Javascript is just matter of getting rid of the strong typing. Actually, I find it a good rule of thumb to write the most classes in a way you could easily rewrite them in either language. Only classes dealing with displaying visuals on one side and communicating with back-end on the other side are allowed to differ significantly due to obvious technical reasons. This helps me keeping application structure abstract. I guess it’s kinda related to the “programming TO language, not IN language” concept.

Not-messing up with DOM

At first, I hated DOM elements because they seemed to be a little smartheads that will reluctantly do what you told them to do, altough always bearing in mind their little inate quirknesses. I think it’s one the biggest mindset shifts you’re facing when moving from Flash style programming. Once you give it a thought and brushed up on some HTML knowledge, though, you can fully embrace the DOM element natural behaviour and flow in the document and end up writing actually less code. It also helps with the proper seperation concerns, if you limit the DOM access and manipulation to dedicated classes.

CSS3 Transitions

This is just great. The fact that when coding in JS, you are only concern with when things should happen, always knowing that how it will look when it happens will be specified later on in CSS. I’ve used SASS for this project, so I didn’t cared for the browser prefixes that riddle the CSS code. Cannot wait when it’s gonna be possible to specify even more in CSS, letting JS go off the visual and fancy animation stuff for its true nature.

Responsiveness

Of course, this has been a completely new aspect of the application. As usual, I’ve started with the best intentions to develop with mobiles on mind right from the beginning and make concscious effort not to forget resizing window all the time. But anyways, roughly in the middle of development, I got stuck with little problem, was happy to solve it and then just rushed towards the finish in my favorite resolution. So I had to work backwardly to accomodate for smaller resolution anyways. It was small project, so it didn’t matter that much. However, I’d like to find a way of formalizing the process of development for different resolution that would help to avoid this common pitfall.

To conclude, it was less pain to rewrite project from Flash/AS3.0 to HTML/CSS/Javacsript than I expected. As a bonus, the project got thank to its responsivness actually better than the first version. So cool.

View project Download source

Leave a Reply