Browse > Home / Experiments, General, HTML5 / Interactive HTML5 using CreateJS

| Subcribe via RSS

Interactive HTML5 using CreateJS

February 8th, 2013 Posted in Experiments, General, HTML5

Grant Skinner’s open source code base CreateJS is a suite of Javascript libraries that use the HTML5 canvas element and Javascript to produce a developing environment similar to Flash, and thus, effectively let developers build interactive HTML5 content. Some really excellent games and interactive applications have already been produced using this method.

In this post, I will go through a basic example of using CreateJS to create a simple interactive experiment.

As you can see it is interactive and moving smoothly and there is no Flash, just HTML5 and Javascript. There are three files at work here: the index.html page, the easeljs.js file and the Circles.js file.

Get the files / view the code here:
http://www.christiankragh.com/HTML5/circles/index.html
http://www.christiankragh.com/HTML5/circles/Circles.js

The EaselJS file is the main CreateJS library that we reference and pull in from a hosted location using the script call line in the HTML file.

The Circles.js file was exported from Flash CS6 using the export for CreateJS toolkit – an add-on you can download for free at Adobe.com for Flash CS5.5 and above. This file creates, references and instantiates our graphics to be used on the canvas.

Then in the index.html file, a simple page is set up when we export from Flash – there’s the initial HTML page set up, the script references, and the instantiation of the canvas. From here we use Javascript as we would ActionScript and make a function that adds mouse over and mouse out listeners and functions. The tick() function is like the onEnterFrame function in ActionScript so that’s where we add the movement of the circles.

This is a very short and simple example, but it shows that you can have excellent interaction and produce it all with HTML5 and Javascript; no Flash player necessary.

For a more in depth tutorial and introduction to CreateJS, check out Lee Brimelow’s video tutorial on gotoandlearn.com

Leave a Reply

Security Code: