There's been some resistance from Flash developers to our new HTML5 content. In this article - aimed at experienced AS3 coders - we'll look at EaselJS, a JavaScript library that makes working with the HTML5 canvas very similar to working with the Flash display list.



Subsequent Changes to Techniques & Software Certain aspects of applications or techniques used in this tutorial have changed since it was originally published. This might make it a little difficult to follow along. We'd recommend looking at these more recent tutorials on the same topic: Learn CreateJS by Building an HTML5 Pong Game

The HTML5 Scene

The "war" between Flash and HTML5 isn't news to anyone involved in browser or mobile development and as Michael points out there's no harm in learning HTML5 even if you know Flash and ActionScript.

HTML5 is a new and evolving technology and there are currently no full-featured tools quite like the Flash IDE covering the whole workflow to create games or applications, but if you're familiar with Flash Builder or FlashDevelop it shouldn't be hard to code in any text editor using external files as your assets.

(Editor's Note: There are plenty of JavaScript and HTML editors, though - take a look at JetBrains WebStorm for a great example.)

Introducing EaselJS, Tween JS and SoundJS

Luckily for us, Grant Skinner has developed a JavaScript library that will make our learning less complicated. In his own words:

The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

EaselJS uses a similar syntax to ActionScript; it has a Display List, Stage, Graphics and even Filters, this will make working with the canvas easier for us Flash developers.

Additionally we can complete our easel development with the TweenJS and SoundJS scripts which, as the names suggest, handle animations and sound.

The Display List

The Display List works very similar to ActionScript:

In this code, the myStage variable is the linked reference of the canvas to the Stage class in EaselJS. More on that in the example at the end of this tutorial.

Mouse Events

The way to add Mouse Events couldn't be easier:

Text

This code adds a Text object and places it in the stage.

Tickers

The Ticker class provides a centralized tick or heartbeat, broadcast at a set interval; the tick() event can be used as a substitute for an AS3 Timer or EnterFrame event.

The following code sets the frame rate to 30 and deines the stage as the listener for the ticks.

Tweens

The Tween class is an external addition to EaselJS which is available by adding the TweenJS script to our document. It works very similarly to tween engines in ActionScript.

Sounds

We can play a sound by adding the SoundJS script to our document and writing the following code:

Hello World!

An introduction to a programming library would not be complete without a hello world example! Follow these steps to create a very simple HTML5 Canvas hello world containing images, mouse events, text and more.

Step 1: HTML Structure

Let's prepare our HTML document, it is a simple html structure to begin writing our app.

Step 2: Hide Mobile Highlight

Let's add a little bit of CSS too: this line will remove the default highlight when you tap on an element using a mobile browser; without this the mobile experience would decrease drastically.

Step 3: JavaScript Libraries

The following code adds the necessary JavaScript libraries for our app to work.

Step 4: Call Main Function

In the next lines we call our constructor, this is the main function that will be created later in our javascript code.

Step 5: Canvas Tag

The Canvas is added in this line, we assign an ID to reference it later and also set its width and height.

Step 6: JavaScript

Let's begin our app creation!

Open your preferred JavaScript editor (a basic text editor will work, but you won't have syntax highlighting) and prepare to write your awesome app. Remember to save the file with a js extension in your project folder.

Step 7: Define Canvas

We'll start by defining all the graphic and logic variables.

The next variables represent the HTML canvas element and the stage that will be linked to it. The stage variable will behave in a similar way to the AS3 stage.

Step 8: Background

This variable stores the background image.

Step 9: Button

Another variable to store the button image.

Step 10: Variables

These are the variables we'll use, read the comments in the code to know more about them:

Step 11: Constructor

The constructor is a function that runs when an object is created from a class; this particular function will be the first to execute when the web page is loaded.

Step 12: Link Canvas

This code gets the HTML canvas ID and links it to the EaselJS Stage class. This will make the stage variable behave like the Stage class in AS3.

Step 13: Enable Mouse Events

Mouse Events are disabled by default in EaselJS to improve performance. Since we need those in the application, we'll add the following line:

Step 14: Load Graphics

This code is used to preload the graphics with the help of a function that we'll write later. It sets the Image object we created before to the source png file in our document folder. A name is given to detect which image is loaded and lastly the function that handles the loaded images is called.

You'll need to download the images from above (or make your own) in order for this to work.

Step 15: Set Ticker

The following code sets the frame rate to 30 and defines the stage as the listener for the ticks.

The TweenJS class will listen to this tick to perform the animations.

Step 16: Preload Graphics

Every time a graphic is loaded this function will run. It will assign each image to a bitmap object and check that all the elements are loaded before proceeding.

Step 17: Build Interface

This code places the graphics on the stage and adds a mouse listener to the button.

Step 18: Show Text

The function that will run when the button is pressed, explained in the code commentary.

That's it! Click here to see this simple demo in action.

Conclusion

Congratulations! You just made an HTML5 canvas application compatible with all major browsers, including mobile. Stay tuned for more here on Activetuts+.

I hope you liked this tutorial, thank you for reading!