Do you really know CreateJS?
Many people have heard about it, but I often find out that they don’t really know what CreateJS is, what it can do, and why it can really help developing expressive websites in HTML5 today.
Believe me, it’s a topic worth digging!
What is CreateJS?
- EaselJS: provides a Flash-like display list for the HTML5 Canvas,
- TweenJS: animation engine obviously,
- PreloadJS: assets loading made simple,
- SoundJS: any idea?
What is the CreateJS Toolkit?
The CreateJS Toolkit for Adobe Flash Professional (that’s its actual full name) is an extension for Flash Professional (surprise) which can be installed in Flash Pro CS6 and which will be included in Flash Pro CC by default.
This extension is able to generate an HTML5 version from your FLA thanks to the CreateJS libraries.
Really, it’s able to convert most Flash features into code; there are a few important limitations that make it look broken if not used with care. So read carefully Grant’s presentation linked above!
Technically it generates:
- one HTML page, to setup the animation and the preloader,
- and all your images and sound medias which will be loaded at run time.
What about Edge Animate, Reflow,…?
One may wonder if Adobe Edge tools and this Flash Pro toolkit compete for the same job. Think of them as complementary tools:
Edge Animate and Reflow are tools designed to work with the DOM,
The Toolkits for CreateJS helps you work with one DOM element: the Canvas.
A modern website will combine the best of the possibilities offered by the DOM and the Canvas. You don’t want to make complex layouts or text-heavy contents using the Canvas when the DOM will do a much better job.
Understanding the HTML5 Canvas
In an HTML page, a Canvas behaves exactly like a (transparent) image. It can be positioned and animated like any HTML image. You can create as many Canvases as you want.
The Canvas can have different rendering modes – the most widely supported with about 90% penetration (IE9+ and all other desktop and mobile browsers) is the “2D context” which is actually now hardware accelerated in most cases and offer great performances in general (IE9+ Canvas in particular is very good). The “webGl context” is also quite popular, but its penetration is considerably more limited.
The 2D context is quite capable with vectors and bitmaps, but it’s a bit complex and it has some limitations:
- it exposes a low level API, inspired by openGl; in practice it feels a bit like drawing in a BitmapData with a fancy way to build matrix transformations,
- complex vectors can be very heavy on the CPU as they are entirely declared in code,
- text support is very basic,
- filters are limited to a “shadow” which can be used for drop-shadows and glows; also they are not consistently accelerated (filters are relatively slow on IE9/10),
- composition (“blend mode”) is limited; in practice you can only use normal or additive blending.
The Canvas API being relatively low-level it can become quite complex to create elaborated scenes as you are likely to have to re-invent a display list, animation system and caching for good performance – this is why numerous libraries, like CreateJS, have appeared to simplify and optimize the way you work with the Canvas.
If you think about ActionScript3 in comparison, with its handy class system and type annotations, you quickly regret the great tooling you had access to, with almighty code completion and refactoring.
Typescript is already quite popular, but still very young: it was published in 2012 by Microsoft, and is more precisely led by Anders Hejlsberg of Turbo Pascal, Delphi and C# fame (my hero). It has a growsing toolking support, starting with the official Visual Studio extension (even the free Express edition), IntelliJ Ultimate, and you can get something usable with Sublime Text 2.
The Haxe language is similar to ActionScript3 but a lot richer (enums, generics) and with a lightning fast and very powerful compiler (strict type inference, functions inlining, dead code elimination).
Haxe was created in 2006 as a successor of MTASC, the free open source ActionScript2 compiler that revolutionized Flash development. There are a few IDEs and editors that very nicely support Haxe JS: FlashDevelop, IntelliJ Ultimate, Sublime Text 2,…
Dart is a class-based language for the web, designed to be easy to learn. Like Typescript it adds classes and type annotations, and like Haxe it very strictly enforces classes. See my Adventures in Dart Land.
Dart was announced about 2 years ago and is near v1.0. The Dart Editor (Eclipse based) is quite good (and free), featuring a very good type inference to identify errors, code completion, and a growing number of refactoring actions; but you can try IntelliJ’s Dart support too.
How to use CreateJS with these languages?
For Dart it’s a bit complicated – forget it for CreateJS, but Adobe will soon release the Toolkit for Dart which will do a similar job, but generating Dart code leveraging the StageXL Dart library. Stay tuned, I’m proud of it!
For Typescript and Haxe: both languages have “definitions” which offer a fully typed way to work with the CreateJS libraries. In both cases it is very easy to use the libraries and you can easily find samples and demos to quickly get started.
Typescript hint: use the Typescript Definitions Manager to add (easeljs, tweenjs, preloadjs, soundjs) definitions to your projects.
Haxe hint: CreateJS externs are on haxelib (haxelib install createjs).
Introducing the CreateJS Definitions Generator
I’ve written a tool, createjs-def, which can generate the appropriate definition file from what the CreateJS Toolkit outputs.
The tool is available:
- as simple JSFL scripts that work automatically,
- as a node.js command line tool.
Sources and instructions:
(an animation by Chris Georgenes)