Rich Presentations Using CreateJS

David Nance
David Nance
Share

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.

Frequently Asked Questions about Using CreateJS for Rich Presentations

How can I get started with CreateJS?

To get started with CreateJS, you need to first download the library from the official website or from GitHub. Once downloaded, you can include it in your HTML file using the script tag. You can then start creating rich and interactive presentations by creating new instances of the CreateJS classes and adding them to the stage. The CreateJS library is very flexible and allows you to create anything from simple animations to complex interactive presentations.

What tools are available for CreateJS?

CreateJS comes with a suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies. These tools include EaselJS for working with HTML5 Canvas, TweenJS for tweening animations, SoundJS for working with audio, and PreloadJS for preloading assets.

How can I use CreateJS with Adobe Animate?

Adobe Animate has a Toolkit for CreateJS, which is a plug-in that enables you to export content from Adobe Animate to HTML5 using the CreateJS suite. This allows you to leverage the powerful animation and drawing capabilities of Adobe Animate while still being able to create content that is compatible with the open web.

Where can I find the source code for CreateJS?

The source code for CreateJS is available on GitHub. This includes the source code for all the libraries and tools in the CreateJS suite. You can clone the repository to your local machine or download it as a zip file.

How can I install CreateJS using npm?

CreateJS is available as a package on npm. You can install it in your project by running the command ‘npm install createjs’. This will download and install the CreateJS libraries in your project’s node_modules directory.

How can I create animations with CreateJS?

CreateJS provides the TweenJS library for creating animations. You can create a new Tween instance, specify the properties to animate, and then add it to the stage. You can also chain multiple tweens together to create complex animations.

How can I handle user interactions with CreateJS?

CreateJS provides a robust event model that allows you to handle user interactions such as clicks, mouse movements, and keyboard input. You can add event listeners to any display object and specify a callback function to be executed when the event occurs.

How can I preload assets with CreateJS?

CreateJS provides the PreloadJS library for preloading assets. You can create a new LoadQueue instance, add assets to it, and then listen for the ‘complete’ event to know when all the assets have been loaded.

How can I play sound with CreateJS?

CreateJS provides the SoundJS library for playing sound. You can load sound files using the PreloadJS library and then play them using the SoundJS library. You can also control the volume, pan, and loop of the sound.

How can I debug my CreateJS applications?

CreateJS provides a Debug module that allows you to log messages, warnings, and errors. You can also use the browser’s developer tools to inspect the HTML5 Canvas and debug your code.