StageXL Moves You Easily From ActionScript 3 to HTML5

So you’re an ActionScript 3 developer creating Flash games, but you can see the writing on the wall. Taking a long view, is it time to move to HTML5? If so, what’s the best approach? Here’s a way you may not have heard of, and it’s open source.

Although ActionScript and JavaScript are sort of distant cousins, there is an alternative to having to learn JavaScript: You can learn to program in Dart. Once you’ve done that, you’ll be able to use StageXL, an open-source library by Bernhard Pichler that provides a Flash-like API in Dart.

Why go to Dart instad of JavaScript? Coming from the world of ActionScript — with classes and objects — into JavaScript requires something of a shift in thinking. JavaScript doesn’t have classes. Instead, it uses prototype-based programming. However, since Dart does use classes, the transition is far easier. But it would still be a lot of new code to write if it weren’t for StageXL.

Dart has been described as Java Script, i.e., if you’re from a statically typed object-oriented background like Java, then you’ll feel right at home. Pichler doesn’t have a high opinion of JavsScript (“It sucks”) in comparison to ActionScript, so StageXL is his attempt to ease the transition from Actionscript 3 to Dart, making it as easy as possible. It’s not finished yet, but it’s already very usable and well worth a look.

How does it compare to ActionScript? Like this: DisplayObject? Check. Stage? Check. The hierarchy is all but identical. It’s like you’ve just switched to another hotel in the same chain as the one you’ve always used. It’s all so familiar, but things have moved around a little and the room layouts are a bit different.

dartflash object hierarchy

Although the StageXL documentation needs more work, it currently includes a list of API functions and a very useful side-by-side mapping of ActionScript to Dart, more than enough to get you started.

For example, take a look at the Escape game below. (The source code is available on GitHub.) This is an existing Flash game that you can play on The sources and assets were provided to Pichler, and in just six hours he converted it to Dart using the StageXL library. It plays the same, though neither really stresses the processor.

Screenshot of Escape

By contrast a performance demo shows several hundred flags being redrawn and moving in a browser canvas at 60 frames per second. I clocked it up to 1,200 objects before the frame rate dropped to 45 fps.

It’s clear that the designer of StageXL thought it through as a way to minimize the effort needed to move from ActionScript. Although it’s not complete, the author has a roadmap of other features including video, WebGL, particle effects and more to come.

Related Links

4 Responses to “StageXL Moves You Easily From ActionScript 3 to HTML5”

  1. At this point, just learn Javascript. Better yet, learn Ruby/RoR, jQuery, etc… I have not been able to find any Flash work since 2010. I just moved on. Just buckle down and learn something open source( RoR, PHP, Pyhton, etc….). Don’t invest your time on ANYTHING proprietary.

    • @puddyfudge
      I think you miss the point. This is not about finding flash work, but rather having a great way to code for HTML5 canvas. I am in no way, shape or form a AS3 developer, but using StageXL allows me to pick up great books like ‘Advanced ActionScript 3.0 Animation’ and do some awesome game programming aimed strictly at the browser. Since my code all compiles down to JavaScript, Flash never enters into it.

      I would highly recommend that anyone interested in developing for the web *NOT* hand code solutions in JavaScript or its cousin CoffeeScript if they do not have to and productivity is important to them. If one has to stick to one of these unfortunate options, an alternative to StageXL can be found in CreateJS.