An HTML5 Introduction For ActionScript Developers

For the last few months i've been meaning to sit down and properly try my hand at HTML5 development, keeping an open mind as I do so. Most of my 10 year career has been as a developer in the online games industry -  typically browser-based games - an area which has been synonomous with Flash for such a long time.

I haven't yet seen anything in HTML5 which beats the performance, quality and consistency across browsers of an equivalent well-made, professional Flash game, but I admit everything has to start somewhere. I remember Flash 3 animations being used as 'intros' to websites in the late 90s.

I also want to compare lead time. Being able to match Flash in terms of quality is only half the trick. It's not much use if it takes 10 times longer to put something together. I'll report my results and conclusions in a subsequent post.

Why Now?

Recently, HTML5 has begun to make more noise. Not just as the subject of intense debate and furious trolling on technology blogs. Now it come up in conversation with other Flash developers, and I get asked about it from non-techie types. I'm fairly familiar with the various aspects myself, but I would recommend this slideshow to anybody who wants a basic introduction to the core features (the infamous canvas tag, caching and storage, CSS3 etc).

Adobe's announcement that they are discontinuing Flash Mobile development, which is being treated as an obituary for the entire swf format in some quarters, has forced the issue somewhat. I now want to have HTML5 in my armoury, even if I decide not to use it.

Some History

My reluctance to try it out until now stems from the fact that I know the heavy lifting is done by JavaScript. I remember JavaScript from my student placement days as a web developer in 1998/99. I've dabbled with it on and off since then. A few years ago I was introduced to jQuery and that was a obviously a massive step forward. Frameworks like jQuery have filled in the holes and worked out a lot of the various browser inconsistencies so that you as the developer don't have to worry about them. I was still exasperated at the lack of data-typing and the fact that I couldn't compile or publish the code to get a convenient list of errors, but I did accept that JavaScript could be used for more than just opening pop-up windows or validating forms.

Fast forward another couple of years and HTML5 had become an annoying buzzword, being thrown about inappropriately. Clients where I work, who didn't know what HTML5 was, would ask why we weren't using it. It was supposed to be the future, except hardly any browsers fully supported it, those that did needed people to upgrade to the latest versions, and any examples of games I saw didn't match up to what we were able to produce in Flash, which enjoyed a 95%+ penetration.

Some of the games I have made are casino games - Blackjack and Roulette and so forth. I can't stress how dangerous it is to adopt a technology too early if your business relies on people being able to access those games easily. If Joe Punter with his tenner to spare can't load your game without upgrading his browser then he'll simply go and spend his cash somewhere else. He doesn't give a toss about emerging standards in web technology! Even using the latest Flash player is dangerous - you need to wait at least 6 months after it comes out before you start publishing games with it.

Support and uptake of HTML5 in browsers has been progressing steadily though (here's a useful site showing browser versions and compatibility), even on smartphones, where HTML5 is supported in Android and iOS browsers. If you decide to build something with it, you can now reasonably expect the person visiting your site to be able to see it.

Tools

Before I dived into the code, I wanted the right tools for the job. For example, I didn't want to edit html and javascript in FlashDevelop (my ActionScript editor of choice). There must be something more suitable. And what about debugging? Surely all the professional developers out there weren't still hunting around for missing semi-colons by hand?

Some googling and forum-hunting soon led me to Aptana Studio, and I am very impressed. I don't want to generalise it and call it FlashDevelop for Web developers, but if you're an ActionScript coder and you try it out then you'll know what I am getting at. I can setup projects, organise my files, write code (there's even some code completion), and the software checks my syntax as I go along. The days of forgotten brackets and commas are over.

To top it all you can click a 'Debug' shortcut. This launches Firefox, activates the Firebug and debugger extensions, then loads your page. If there's a problem in your code you get told what is, where it is, and you can see it in the Debug window. This is the Holy Grail for me, and it makes the whole HTML5 development process a lot more palatable.

I spent far too long messing about with themes (Window > Preferences > Aptana Studio > Themes) before I got down to business. It was more of a case of tying together lots of separate elements that I have come across over the years than picking things up from scratch. I'm not going to go into the basics of creating an HTML page and linking to JavaScript files etc (although the examples on this Netmagazine page show it clearly and concisely).

I recommend getting jQuery and another library called Modernizr which offers you an API you can query to see what features are supported in whatever browser the page is loaded in.

Classes and Inheritance

JavaScript doesn't support classical inheritance as we know it from ActionScript. There's no 'ThisClass extends ThatClass' and no super() functions.

You can get a library like Prototype (not to be confused with the 'prototype' javascript keyword) which will add that sort of functionality for you, but I wanted to make sure I knew what was going on under the hood.

Prototypal Inheritance is how JavaScript works. This means that if you want one object to inherit the methods and properties of it's parent, you basically clone it and add the extra stuff you want. Oh, and the 'classes' are actually functions. This tutorial from Wired will get you started, and then you'll get lost and confused about the differences between 'this' and 'var' and 'prototype', so I recommend looking at  this Stackoverflow thread I found. The first block on there breaks down a nice simple example of prototypal inheritace, with an explanation of how it's different from the second example.

And finally check out this tutorial on inheritance and prototype. It filled in the last gaps for me.

MVC

I instantly wanted to apply to JavaScript what I already knew about coding games in ActionScript, and that's the MVC design pattern. There are a few frameworks you can download - I saw recommendations for JavaScriptMVC and others on this useful Stakoverflow thread.

But when coding for Flash I don't use the readymade ActionScript frameworks like PureMVC or Robotlegs. I know the basic rules of MVC (Controller updates the Model, View listens for events and reads from the Model etc) and I like to implement an ultra-lightweight version of it myself. The same applied here.

Some hunting brought me to this 5 year alexatnet.com old article demonstrating exactly what I wanted. I could see familiar looking Classes and I could see a simple implementation of Events and Listeners.

I've since taken that example and broken it into files and folders for each of the MVC components. It looks like one of my ActionScript projects, which may not be a good thing if i'm supposed to be immersing myself in the 'JavaScript way' but it will at least get me started.

The Canvas

Right, here we go then. This is what all the fuss is about. The <canvas> tag defines a section of the webpage which is basically going to act like the BitmapData or Shape ActionScript class. This tutorial, as mentioned earlier, is a good breakdown of how it works. If you're familiar with the Graphics class in ActionScript, and it's drawing API, you'll get it in seconds.

Wherever you see Canvas examples, you'll also see the getContext("2d") method. This gives you a reference to the drawing API. There are supposed to be other contexts which offer alternative APIs, but to date I think they are still experimental.

EaselJS

The EaselJS library is either a Godsend, or the ultimate evil, depending how you look at it. It presents an entire API which lets you treat the Canvas like the Flash ActionScript display list. It's got sprites and bitmaps and mousevents and addChild(). It's undoubtedly an impressive achievement - hats off to Grant Skinner - but I wonder if it's trying to push a square peg in a round hole? Should I be trying to do it this way, or should I be coding up my own ways of drawing to the canvas?

To be honest, I'll use EaselJS for a while. It's a familiar (inter)face in unfamiliar surroundings and it will take care of the display business whilst I experiment elsewhere. I recommend Mike Chamber's introduction.

A Few Things I Wish I Knew Before I Started

1. You can't make calls to a different domain than the one you're in, from JavaScript. This includes from your local machine to a server. In Flash this is fine once you've added any necessary exceptions in the Security panel and/or specified a Security context. But I was trying to load data from a server with a jQuery POST request and it wasn't working at all, and then I saw a  note (scroll down a bit on this page) about the same-origin policy. This is a browser restriction for security reasons. One workaround is to start Chrome with the --disable-web-security switch. This lets you work against a server, but it's potentially dangerous so don't go surfing around until you've restarted Chrome normally.

2. For exactly the same reason, EaselJS mouse events don't work in all browers. They require pixel access to detect where you're clicking (see thread).

3. The version of Aptana I used installed Firefox Add-ons which were incompatible with the Firefox 8. If this happens to you, go to Tools > Add-ons. Click the little Preferences Cog button and Check for updates.

4. How to do Static functions in JavaScript.