EaselJS is a new library from Grant Skinner that somewhat mimics the Flash display list/display object heirarchy.  It is the result of the game Pirates Love Daisies which demonstrates some great gameplay in html5.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

Lots of great javascript libraries have been made public including such contributions as this, Three.js (3d canvas/svg/webgl), Lettering.js (typography), audio.js (audio) and many many others, a complete pipeline is emerging. EaselJS adds to that a helpful flash like api for html5 (<canvas> + javascript).

The API contains these familiar classes for Flash/AS3 developers:

DisplayObject

Abstract base class for all display elements in Easel. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.

Stage

The root level display container for display elements. Each time tick() is called on Stage, it will update and render the display list to its associated canvas.

Container

A nestable display container, which lets you aggregate display objects and manipulate them as a group.

Bitmap

Draws an image, video or canvas to the canvas according to its display properties.

BitmapSequence

Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.

Shape

Renders vector drawing instructions within the context of the display list.

• EaselJS
• Grant Skinner Post on EaselJS
• EaselJS Examples: game, sparkles, rollover / drag & drop, localToGlobal, globalToLocal, sprite sheets

John Nack from Adobe has been presenting Adobe tools exporters to html5 recently.  One is a Flash to html5 convertion tool. It looks good for converting flash vector assets to html5, but you could also use the Illustrator exporter to html5 (canvas/svg) for static assets.

This converter doesn’t appear to do anything for scripted animation or code, just exporting assets via old skool timeline. But this is definitely the right idea.

A new Javascript 3D Engine that can render to Canvas and SVG has been released by mr. doob.

Mr. doob is a well known Flash developer that has added many great experiments and cool contributions without being stuck to one technology, making some great interactive projects in javascript, chrome experiments and html5 (canvas/svg) in addition to the work in Flash with toolkits like Papervision 3D.  Recently the Harmony html5/javascript sketching project generated lots of interest for an html5 sketching app.

Three.js is great because it is a 3d engine built with renderers in SVG and Canvas makes to a really good base for modular, cross platform 3d engine right now (as soon as IE9 joins the party). For a while a good javascript rendering library will need to support multiple renderers for browser differences in performance and supported dependencies like canvas, svg and webgl. Three.js has that reality as part of the design.

Currently the engine only supports particles and triangles/quads with flat colors. The aim is to keep the code as simple and modular as possible.

At the moment the engine can render using <canvas> and <svg>. WebGL rendering would come at a later stage but feel free to fork the project and have a go.

Although this allows 3D for iPhoneOS and Android platforms the performance on these devices is not too good.

• Blog post on the Three.js project
• Three.js at github
• Demos
  • Cube
  • Random
  • Waves
  • Floor

Sample Code:

var camera, scene, renderer;
 
    init();
    setInterval(loop, 1000 / 60);
 
    function init()
    {
        camera = new Camera(0, 0, 1000);
 
        scene = new Scene();
 
        renderer = new CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
 
        for (var i = 0; i < 1000; i++)
        {
            var particle = new Particle( new ColorMaterial(Math.random() * 0x808008 + 0x808080, 1) );
            particle.size = Math.random() * 10 + 5;
            particle.position.x = Math.random() * 2000 - 1000;
            particle.position.y = Math.random() * 2000 - 1000;
            particle.position.z = Math.random() * 2000 - 1000;
            particle.updateMatrix();
            scene.add( particle );
        }
 
        document.body.appendChild(renderer.viewport);
    }
 
    function loop()
    {
        renderer.render(scene, camera);
    }

Gordon, a flash runtime written in javascript, is an interesting project that recreates the Flash Player into svg using javascript from a flash source swf file.

UPDATE: Also check out smokescreen for the same, html5/javascript interpreting SWF files.

This is an interesting direction. There are most likely many things that do not work about this approach for existing content. But it is also a neat way to create new content that might be simple enough to play on desktop and a mobile version.

All these examples work on an iPhone or iPod Touch.

• Gordon on github by Tobias Schneider
• Demos posted for viewing by Paul Irish