EaselJS

A JavaScript library that makes working with the HTML5 Canvas element easy. Useful for creating games, generative art, and other highly graphical experiences.

EaselJS (cont)

• Rich HTML5 Content
• Canvas Display Objects
• Object Nesting
• Mouse Interaction Model
• Familiar Approach for Devs

Easel JS support:

EaselJS (cont)

Useful links:

Example from CreateJS:

https://github.com/CreateJS/EaselJS/tree/master/examples

Example from CodePen:

http://codepen.io/search?q=createjs

Tutorial:

http://code.tutsplus.com/tutorials/using-createjs-easeljs--net-34840

EaselJS (cont)

Useful links:

Getting start: http://createjs.com/Learn

Documentation: http://createjs.com/Docs/EaselJS/modules/EaselJS.html

GitHub: https://github.com/CreateJS/EaselJS

Ebook: http://www.apress.com/9781430263401

https://www.packtpub.com/web-development/getting-started-createjs

EaselJS (cont)

Quick-start example:

Follow the below steps to start the EaselJS:

Create Stage instance to wrap canvas element

Add display objects to Stage instance

Update Stage to show the display objects

1

2

3

EaselJS (cont)

Quick-start example:

It is time for coding... see how it works:

EaselJS (cont)

Display Objects Class Hierarchy:

EventDispatcher

DisplayObject

Container

Stage

MovieClip

SpritContainer

SpriteStage

Shape

BitmapText

Bitmap

Text

Sprite

DomElement

EaselJS (cont)

Using SHAPE and GRAPHICS:

Can create any kind of shape by using one of the following methods:

Method 1:
. Create Graphics instance then draw any kind of shape
. Create the Shape instance to wrap the above Graphics 

Method 2:
. Create Shape instance
. Using Graphics attribute of Shape instance to draw any kind of shape

EaselJS (cont)

Using SHAPE and GRAPHICS:

It is time for coding... see how it works:

EaselJS (cont)

Using SHAPE and GRAPHICS:

Tiny API method can be useful to help us drawing shapes:

EaselJS (cont)

Using TEXT

Text can be expensive to generate, so cache instances where possible. Be aware that not all browsers will render Text exactly the same.

Support to display one or more line of dynamic text

Support wrapping by using lineWidth attribute

ONLY display one font style at a time. Have to create multiple text to display multipple font style

Support web fonts

DO NOT SUPPORT THE HTML TEXT

EaselJS (cont)

Using TEXT:

It is time for coding... see how it works:

EaselJS (cont)

Using BITMAP:

Bitmap represent an Image, Canvas or Video. Bitmap also can be instantiated using an exising HTML element.

var bitmap = new createjs.Bitmap("path_to_image.jpg");

Note:

1- Bitmap with an SVG source will not respect an alpha value other than 0 or 1.

2- Images loaded cross-origin will throw security erros when interacted: mouse, filters, caching, get object under point method. Using img.crossOrigin = "Anonymous" to get around this.

EaselJS (cont)

Using BITMAP:

It is time for coding... see how it works:

EaselJS (cont)

Creating Mask:

A Shape instance that defines a vector mask for display object, the shape transformation will be apply relative to the display object parent coordinates (if it were a child of the parent).

//create mask by creating shape intance
var mask = new createjs.Shape();

//TODO: mask.graphics.draw...

//set mask for display object intance
displayObject.mask = mask;

EaselJS (cont)

Creating Mask:

It is time for coding... see how it works:

EaselJS (cont)

Using SPRITESHEET and SPRITE:

SpriteSheet is a series of images combined into a larger image to display the animation.

Using Sprite to display a frame or sequence of frame from a SpriteSheet instance.

var data = {
    images: ["sprites.jpg"],
    frames: {width:50, height:50},
    animations: { stand:0, run:[1,5], jump:[6,8,"run"] }
};

var spriteSheet = new createjs.SpriteSheet(data);

var animation = new createjs.Sprite(spriteSheet, "run");

EaselJS (cont)

Using SPRITESHEET and SPRITE:

It is time for coding... see how it works:

EaselJS (cont)

Using MouseEvent:

Using MouseEvent to interact with DisplayObject, the kind of MouseEvent: click, double click, mousedown, pressmove, pressup...

DisplayObject.addEventListener("type_of_MouseEvent", onMouseEventHandler};

function onMouseEventHandler(evt) {
    //TODO
}

Tutorial: http://createjs.com/tutorials/Mouse%20Interaction/

EaselJS (cont)

Using MouseEvent:

MouseEvent in simple Color Drop game

EaselJS (cont)

Create custom DisplayObject:

Using createjs.extend() and createjs.promote() method:

http://createjs.com/tutorials/Inheritance

(function() {
"use strict";

//declare the class and calling the parent class constructor:
function ClassName(parameters) {
    //calling parent constructor, for example:
    this.Container_constructor();         
    //TODO: initialize: this.initialize();
}

//Inheritance the parent class
var p = createjs.extend(ClassName, createjs.Container);

//override the method from parent class
createjs.ClassName= createjs.promote(ClassName, "Container");
}());

EaselJS (cont)

Create custom DisplayObject:

Simle Button class by using createjs.extend() and createjs.promote():

EaselJS (cont)

Create custom DisplayObject:

Using prototype and initialize method of parent class:

(function() {
"use strict";

//declare the class and call the initialize method
function ClassName(parameters) {
    this.initialize(parameters);
}

ClassName.prototype = new createjs.Container();
ClassName.prototype.Container_initialize = ClassName.prototype.initialize;

ClassName.prototype.initialize = function(parameters) {
    this.Container_initialize();
    //TODO: continue your code
};

createjs.ClassName = ClassName;
}());

EaselJS (cont)

Create custom DisplayObject:

Using prototype and initialize method of parent class:

EaselJS (cont)

Working with GSAP:

Embed the GSAP library in html code:

Calling GSAP method as usual:

See more:  http://greensock.com/docs/#/HTML5/Plugins/EaselPlugin

<!-- embed TweenLite -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenLite.min.js"></script>

<!-- embed Easel Plugin for TweenLite -->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/plugins/EaselPlugin.min.js"></script>

//call TweenLite.to(target, duration, parameters) to animate Display Object
TweenLite.to(circle, 2, {scaleX: 0.5, scaleY: 0.5, easel:{tint:0x00FF00}});

EaselJS (cont)

Working with GSAP:

Modify simple Color Drop game by adding TweenLite for animation:

EaselJS (cont)

Conclusion:

Free library and support to do everything with canvas except 3D.

Appropriate with game, graphics application

TweenJS

A simple but powerful JavaScript library for tweening and animating HTML5 and JavaScript properties. Works stand-alone or integrated with EaselJS.

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

TweenJS (cont)

Useful links:

Docs: 

https://github.com/CreateJS/TweenJS

Source code:

http://createjs.com/docs/tweenjs/modules/TweenJS.html

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

TweenJS (cont)

Overview:

It supports tweening of both numeric object properties & CSS style properties.

Chain tweens and actions together to create complex sequences.

//Simple tween call and complete callback:
target.property = oldValue;
createjs.Tween.get(target).to({property: newValue}, duration).call(onTweenCompleteHandler);

function onTweenCompleteHandler() {
    //TODO: handle when tween complete
}

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

TweenJS (cont)

Overview:

Support arguments and scrope in complete callback function and chaining

//Scope
createjs.Tween.get(target)
              .to({property: newValue}, duration, ease)
              .call(onTweenCompleteHandler, arguments, this);

function onTweenCompleteHandler(argurments, scope) {
    //TODO: handle when tween complete
}

Check Ease function http://www.createjs.com/demos/tweenjs/tween_sparktable

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

TweenJS (cont)

Overview:

Tween text

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

TweenJS (cont)

Using createjs.Tween:

Modify simple Color Drop game by using create.js.Tween

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

TweenJS (cont)

Using createjs.Tween:

MotionGuidePlugin example

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS

A JavaScript library that provides a simple API, and powerful features to make working with audio a breeze. Easily ties in audio file loading to PreloadJS.

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

Useful links:

Document:

http://www.createjs.com/docs/soundjs/modules/SoundJS.html

Demo:

http://www.createjs.com/demos/soundjs/webaudionodeinsertion

Source code:

https://github.com/CreateJS/SoundJS

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

How to use:

Installing audio playback plugins

Registering sound

Creating and playing sound

Control sound: volume, mute, and play, stop, resume, pause, pan...

//Register sound plugin
createjs.Sound.registerPlugins([createjs.WebAudioPlugin]);

//load file
createjs.Sound.on("fileload", this.loadHandler, this);

createjs.Sound.registerSound("path/to/sound.ogg", "sound");

//play sound when load completly
function loadHandler(evt) {
     var instance = createjs.Sound.play("sound"); 
 }

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

Plugins:

CordovaAudioPlugin

FlashAudioPlugin

HTMLAudioPlugin

WebAudioPlugin

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

FlashAudioPlugin:

Play sond using Flash instance

Require FlashAudioPlugin.swf and swfObject.js

Make sure the swfPath is set when using this plugin

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

FlashAudioPlugin:

//Example:

//set swf path
createjs.FlashAudioPlugin.swfPath = "../path/to/flashaudioplugin/";

//Register FlashAudioPlugin
createjs.Sound.registerPlugins([createjs.FlashAudioPlin]);

//TODO

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

FlashAudioPlugin:

SWF is embeded into html div using classname: SoundJSFlashContainer and id: flashAudioContainer, this div has 1x1 size, put at top left off-screen 1px.

There can be a delay in flash player starting playback of audio. This has been most noticeable in Firefox. Unfortunely this is an issue with the flash player and the browser and therefore cannot be addressed by SoundJS

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

CordovaAudioPlugin:

- Just work with Cordova apps and tools that utilize Cordova such as PhoneGap or Ionic

- Require Cordova Media plugin:

- Audio position is calculated async by Media, the getCurrentPosition() maps directly to media.getCurrentPosition()

//add cordova media plugin 
cordova plugin add org.apache.cordova.media

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

HTMLAudioPlugin:

- Using HTML <audio> tag to play sound

- Secondary priority plugin

- Should include and install FlashAudioPlugin for older browser that do not support HTML <audio> tag

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

HTMLAudioPlugin:

Limitations: the  limitation of number of HTML <audio> tag using in page, please use Sound.MAX_INSTANCE to check

For detail browser or device check:

http://createjs.com/docs/soundjs/classes/HTMLAudioPlugin.html

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

WebAudioPlugin:

Play sounds using Web Audio in browser

Web Audio API: https://webaudio.github.io/web-audio-api

Web Audio Example: http://www.html5rocks.com/en/tutorials/webaudio/intro

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

Using AudioSprite:

SoundJS support AudioSprite from v0.6.0. it is much like CSS sprites or sprite sheets: multiple audio assets grouped into a single file

var assetsPath = "./path/to/assets/";
var audioSprite = [{
    src:"Sound.ogg", 
    data: {
        audioSprite: [
            {id:"sound1", startTime:0, duration:500},
            {id:"sound2", startTime:1000, duration:400},
            {id:"sound3", startTime:1700, duration: 1000}
        ]}
    }
];

createjs.Sound.on("fileload", onSoundLoadedHandler);
createjs.Sound.registerSounds(audioSprite, assetsPath);

function onSoundLoadedHandler(evt) {
    createjs.Sound.play("sound2");
}

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

Preload sound with PreloadJS:

//TODO

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

SoundJS (cont)

Known browser and OS issues:

IE9 HTML Audio limitations: deplay in applying volume changes, mp3 encoding will not always work, sound cut off, number of embed audio tag.

Firefox 25 Web Audio limitations: mp3 audio file is not loaded properly(use .ogg)

Safari limitations: require Quicktime

iOS6 Web Audio limitations: initially muted and require user interaction to unmuted

Android HTML Audio limitations: no audio volume control, need user interaction to play

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS

A JavaScript library that lets you manage and co-ordinate the loading of assets. Built in plugin model to assist with preloading in other CreateJS libraries.

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS (cont)

Useful links:

Documentation: http://www.createjs.com/docs/preloadjs

Source code: https://github.com/CreateJS/PreloadJS

Demo: http://www.createjs.com/demos/preloadjs/mediagrid

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS (cont)

Overview:

Using HTML tags or XHR to preload content for applications.

Support for all modern browsers.

Plugins must be installed before items are added to the queue

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS (cont)

Basic example:

//create instance of LoadQueue and install plugin
var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);

//register handle function when all items are loaded
queue.on("complete", onCompleteLoadAllHandler, this);

//add item to queue
queue.loadFile({id:"sound", src:"http://path/to/sound.mp3"});
queue.loadManifest([
    {id: "image", src:"path/to/image.jpg"}
]);

//complete function
function onCompleteLoadAllHandler() {
    //handle loaded sound
    createjs.Sound.play("sound");

    //handle loaded image
    var image = queue.getResult("myImage");
    document.body.appendChild(image);
}

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS (cont)

Content loader type:

BinaryLoader

CSSLoader

ImageLoader

JavaScriptLoader

JSONLoader

JSONPLoader

SoundLoader

SpriteSheetLoader

SVGLoader

TextLoader

VideoLoader

XMLLoader

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS (cont)

Using LoadQueue class:

LoadQueue is loader manager, main API for preloading content:

//create LoadQueue instance
var queue = new createjs.LoadQueue(true); //prefer XHR

Listening for events:

//register events 
queue.on("complete", onCompleteAllHandler, this);
queue.on("error", onErrorHandler, this);
queue.on("progress", onProgressHandler, this);
queue.on("fileload", onFileLoadHandler, this);
queue.on("fileprogress", onFileProgressHandler, this);

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS (cont)

Using LoadQueue class:

Adding files and manifests by using loadFile() and loadManifest():

//Load file
queue.loadFile({id:"image", src:"filePath/file.jpg"});

//Load manifest
queue.loadManifest(["filePath/file.jpg", {id:"otherImage", src:"filePath/file.jpg"}]);
//??should add id for retreive later

//Load an external manifest
queue.loadManifest("path/to/manifest.json");
queue.loadManifest({src:"manifest.json", type: createjs.AbstractLoader.MANIFEST});

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

PreloadJS (cont)

Using LoadQueue class:

Adding files and manifests by using loadFile() and loadManifest():

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

The good and the bad things

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

The good and the bad things (cont)

The good things:

Free

Flash-like

2D 

Support Sound and PreLoad

Support plugins

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

The good and the bad things (cont)

The bad things:

Not support 3D

Not suppor Physics

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

Tips and Tricks

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

Tips and Tricks (cont)

Cache:

Use Stage.update() and DisplayObject.cache() method

Don't redraw the unchanged DisplayObject

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

Tips and Tricks (cont)

Multi Canvas:

Use one cavas for unchanged DisplayObject like background and use other canvas for changed DisplayObject

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

Tips and Tricks (cont)

DisplayObject.hitTest():

Avoid hit test calculating, it will make app running slowly.

Sutrix Media Viet Nam JSC

3rd Floor, Blue Sky Tower, 01 Bach Dang Street

Ward 02, Tan Binh District, Ho Chi Minh City, Viet Nam

Sutrix Media HK Limited

Unit 706, 7/F, South Seas Centre, Tower 2

75 Mody Road, TsimShaTsui, Hong Kong

Tips and Tricks (cont)

Size of canvas:

Please keep in mind that: the larger canvas size, the more drawing cost.