HTML5 for Flash Developers

Adobe are sponsoring a set of javascript libraries and tools called CreateJS. CreateJS includes a javascript library called Easel JS which allows developers to manipulate the HTML5 canvas element using familiar concepts and coding techniques found in Actionscript 3.

For example nested display lists and frame based events. Lee Brimelow has a great tutorial on EaselJS here. CreateJS also includes libraries for tweening, preloading assets and playing sounds as well a tool called Zoe which converts swf movieclips into spritesheets ready for use in Easel JS.

The interactive application below was created using Easel JS and Zoe. The animations were extracted from an original flash swf using Zoe and reassembeled in Easel JS. The fantastic Illustrations were drawn by Lindsay Walker.

Tested on ios (ipad & iphone), android as well as the latest versions of internet explorer, firefox, chrome and safari.

Rendered using the HTML5 Canvas:

[in_article_ad]Original Flash swf:

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ useexpressinstall=”true” movie=”files/monkey-punch/monkey-punch.swf” width=”500″ height=”500″ targetclass=”flashmovie”]

Get Adobe Flash player



Leave a Reply

Your email address will not be published. Required fields are marked *