Rich Presentations Using CreateJS

March 7, 2014

From its inception as Macromedia Flash 1.0 in 1996, Flash has been the de facto method of incorporating sound, video, and image assets into new media. However, with the proliferation of various digital devices, Flash has slowly lost ground in favor of HTML5 and its increasing ability to handle complex animations.

While many animators still find comfort and familiarity in the flexible and highly-customizable Flash environment, the open source community continues to push the boundaries of what browser-independent, client-side solutions can accomplish. While there are a number of frameworks that are beginning to boast adequate tool belts for handling various media assets, CreateJS currently looks like the most comprehensive.

Not only does CreateJS serve as a JavaScript canvas framework, housing various libraries and tools, but it also does a fantastic job of facilitating the heavy lifting normally associated with time-consuming HTML5 development. Where complex, interactive content is concerned, CreateJS could be the powerful suite of tools that saves you more than one debugging migraine.

A Look Under the Hood

If you have not yet had a chance to take a peek at her innards, the CreateJS suite of software is made up of five parts: TweenJS, EaselJS, SoundJS, PreloadJS, and Zoë.

TweenJS is comprised of a streamlined, numeric and non-numeric tweening engine that has the option of working alone, or in tandem with EaselJS.
EaselJS serves as an overarching manager of project-specific media assets, including images, sprites, and events. It displays these assets in a list format, similar to a familiar Flash layout.
SoundJS houses the sound engine, and gives you the ability to plug-in modules that play sound according to user capabilities, including multi-touch.
PreloadJS helps you organize and preload all of your javascript, sound, video, image, and other data.
Zoë compiles and exports nifty sprite sheets and JSON directly from Flash (SWF) animations, allowing you to create illustrations in Flash and incorporate them seamlessly into the project.
Toolkit for Flash CS6 lets you export Flash animations in a format that is compatible with EaselJS.

Now we have the tools to start creating fully-interactive presentations that exceed the limitations of commercially available tools like Prezi, and rival popular libraries like ImpressJS, and KineticJS.

EaselJS

The value of EaselJS comes into play because of the difficulty experienced by those not versed in the standard HTML5 canvas. On the contrary, EaselJS syntax stems from the intuitive ActionScript 3 language. That makes building rich experiences much easier for both seasoned Flex/Flash developers and Flash newbies. A whole host of touch events (even those supported by IE 10) and fancy animations will be within your arsenal, providing a behavior, look, and feel that differs only slightly from native Android and iOS applications.

The cross-browser aspect of EaselJS extends to HTML5 canvas apps that are supported in every HTML5-capable browser, as well as:

OS 2.1+: Android tablets and smartphones
iOS 3.2+: iPad, iPhone, iPod 4+
BlackBerry 7.0 and 10.0+

Integration with simple HTML pages is an EaselJS attribute that cannot be overstated. Its HTML5 canvas element is incorporated into an HTML page like any other element; able to fill whole or partial sections of a document, and ready to layer with other page objects.

Compatibility used to be an issue because of the difficulty incorporating various media into the HTML DOM. EaselJS is similar to Flash in this instance, in the sense that graphic elements will render in the same relative position in virtually every browser.

Capabilities at the center of EaselJS include a “heartbeat” that redraws the stage once every ~20-60 milliseconds. Bitmaps, text, and graphics can be controlled through all different kinds of transforms, filters, opacities, visibilities, etc. Elements on the stage are then grouped into containers, like so:

// Let's group some elements with a container
var container = new createjs.Container();

// Let's make a shape
var shape = new createjs.Shape();

shape.graphics.beginFill("#333").drawRect(0,0,50,50);

// Let's create a bitmap image
var bitmap = new createjs.Bitmap("path/to/image.jpg");

bitmap.x = 50;

// And now for some text
var text = new createjs.Text("Lorem ipsum dolor", "16px Verdana", "#000000");

text.x = 100;

// Put it all in a container on the stage
container.addChild(shape, bitmap, text);
stage.addChild(container);

Using this approach, you can avoid working within the canvas context, allowing you to create and remove elements with few restrictions.

The EaselJS Graphics class offers concise syntax, chained/shared commands, and integration with common APIs:

// Here's a graphic object of some logo
var logo = new createjs.Graphics();

logo.setStrokeStyle(2);
logo.beginStroke(createjs.Graphics.getRGB(0,0,0));
logo.beginFill("#999999").moveTo(0,0).lineTo(0,0).lineTo(0,0);

Loaded only once, sprite sheets optimize performance by allowing multiple animation assets to fit into a single image. Single sheets can also contain information about multiple sprites, and by using Flash Toolkit for CreateJS’s SpriteSheetBuilder, you can turn exported vector data directly into sprite sheets:

{
  "frames": {
    "width": 60,
    "height": 60,
    "count": 20,
    "regX": 0,
    "regY": 0
  },
  "animations": {
    "FigureCycle": [5, 25],
    "FigureAnimate": [26, 36, "FigureCycle", 2]
  },
  "images": ["figure-sheet.png"]
}

Other Benefits of EaselJS

Interactions on a standard HTML5 canvas are only captured on the flat canvas, without the context that comes with awareness of multiple user events and interactions. EaselJS provides an intuitive stage that has memory of past user events, leading to facilitated design; even when it comes multi-touch support.

TweenJS

TweenJS allows for tweening just like Flash, but makes it easier to chain tween events, making complex animations easier. Keep in mind that the built-in ticker function is included in EaselJS, so if you are not using EaselJS, you would have to build your own ticker function and call it.

createjs.Tween.get(sphere).wait(500).play(
  cjs.Tween.get(sphere, {paused: true, loop: true})
    .to({x: 400}, 1000)
    .to({x: 25}, 1000)
  );

// Hover sphere up and down
createjs.Tween.get(sphere, {loop: true})
  .to({y: 20}, 500, createjs.Ease.quadInOut)
  .to({y: 0}, 500, createjs.Ease.quadInOut);

Using this library, you only have to use your imagination to come up with some value that transitions over time, and have TweenJS redraw it to the screen, frame by frame.

Everything Else

Preloading – Usually an inefficient process that lacks robust dependability, preloading with PreloadJS marks a distinct improvement over traditional workflows. By referencing a singular XML manifest, it is possible to manage all media assets just by pointing to them through simple API calls.

Flash Integration – For designers used to creating in the Adobe Suite, Zoë makes the transition even easier by producing sprite sheets directly from Flash timeline animations, with the option of exporting additional, rich JSON data.

Audio – Sound lends itself to presentations, games, and rich media in a way that normally only gets noticed when something stands out in a bad way. SoundJS doesn’t necessarily do anything extraordinary, rather, it preloads all of its audio by inconspicuously managing it in the background as a plugin. SoundJS autonomously determines which audio it will use based on current browser capabilities.

Conclusion

As the CreateJS suite continues to grow and adapt to industry needs, it would appear that imagination is the only limit to creating rich HTML5 interactivity with it. The growing community of CreateJS developers has also created some valuable SDKs and repos that continue to build value on specific applications that the framework applies to.

JavaScript: Novice to Ninja, 2nd Edition