gSkinner - Home

Announcing CreateJS

Posted on March 16, 2012 by Grant Skinner

We’ve been working really hard on a lot of great stuff over the last couple months, and I’m thrilled finally to be able to share it with the world.

CreateJS

We’re going to be releasing EaselJS and a number of companion libraries under the new umbrella name “CreateJS”. CreateJS will be a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies (aka HTML5). These libraries will be designed so that they can work completely independently, or you can mix and match as suits your needs. The initial offerings will be: EaselJS, TweenJS, SoundJS, and PreloadJS.

Along with the new name, we’ll also be launching a new site at createjs.com which will consolidate demos, docs, tutorials, community, and showcases for all of the libraries and tools. If you have a project or tutorial you’d like to see featured, tweet it to us: @createjs.

EaselJS

EaselJS provides a display list and interactive model for working with rich graphics on top of the HTML5 canvas (and beyond). It provides an API that is familiar to Flash developers, but embraces javascript sensibilities.

We’re planning a minor v0.4.1 release soon, which includes bug fixes and some minor feature additions. Following that, work will commence on v0.5, which will focus on some larger features, API clean up and consistency, and improved documentation. If you have features you’d like to see in v0.5, add them to the issue list, or tweet them to @createjs, and we’ll see what we can do.

Along with the CreateJS site launch, we will be releasing much improved examples, and links to resources and tutorials developed by the community. Again, let us know if you’ve written a tutorial, or have something cool you’ve built with EaselJS you’d like us to showcase.

TweenJS

TweenJS is a tweening and animation library that works with EaselJS or independently. It offers a deceptively simple interface, and a huge amount of power with support for delays, easing, callbacks, non-numeric properties, sequencing, and plugins.

TweenJS v0.2 will be tagged soon. It will incorporate some fixes and tweaks, along with a full plugin model. After v0.2 our next focus will be on performance and providing better demos and documentation in preparation for the CreateJS launch.

SoundJS

Audio is currently a mess in HTML5, but SoundJS works to abstract away the problems and makes adding sound to your games or rich experiences much easier.

We have a huge v0.2 release in testing right now. It is a ground up rewrite that incorporates a target plugin model that allows you to prioritize what APIs you’d like to use to play audio. For example, you could choose to prioritize WebAudio, then audio tags, then Flash audio. You can query for capabilities (depending on the plugin that is used), and it offers seamless progressive enhancement (for example, panning will work in WebAudio, but will be quietly ignored in HTML audio). Following v0.2 our focus will move to fixing bugs, and delivering plugins for mobile and application platforms like PhoneGap and Win8 Metro for a v0.2.1 release.

PreloadJS

The newest addition to the suite, PreloadJS will make it easy to preload your assets: images, sounds, JS, data, or others. It will use XHR2 to provide real progress information when available, or fall back to tag loading and eased progress when it isn’t. It allows multiple queues, multiple connections, pausing queues, and a lot more. We’re hoping to get a v0.1 build out in the next couple weeks for people to start playing with, and then will focus on fixing bugs, improving documentation, and just generally maturing things for v0.1.1.

Zoë

Zoë is an open source AIR application that converts SWF animations to sprite sheets. It supports some advanced features, like configurable frame reuse and multi-image sheets (important for mobile).

For Zoë v0.2 we’re planning to add support for reading the symbols in a SWF, and letting you select multiple symbols to include in your exported sprite sheet. It’s also worth mentioning here that Flash Pro CS6 will include direct support for exporting sprite sheets for EaselJS, offering a more integrated workflow than Zoë can provide.

Toolkit for CreateJS

We’ve partnered with Adobe to build a fantastic tool for leveraging all of the existing Flash Pro skill that’s out there to build amazing HTML5 experiences. The Toolkit for CreateJS is an extension for Flash Pro that allows you to publish content (including symbols, vectors, animations, bitmaps, sound, and text) for CreateJS & HTML5 as a library of scriptable, instantiable objects.

We’ve worked really hard to develop a workflow that makes sense, and to generate code that is completely human readable, and very small (in some cases the output is smaller than SWF when zlib compressed). You can even write JS code on the Flash timeline, and it will be injected into your published tweens.

Exciting times! If you’d like to stay on top of CreateJS updates, please follow @createjs on Twitter.

Follow @gskinner on Twitter for more news and views on interactive media.
27 Comments

Very exciting! Any clue on when some of this will be rolled out? I'm working on a big project right now using EaselJS / TweenJS and would love to implement some of this new stuff. Primarily PreloadJS.

Posted by: Brad Manderscheid on Mar 16, 2012 12:23pm URL: http://actionmouse.com

Brad - We're hoping to get an initial (preview/alpha) build of PreloadJS and SoundJS v0.2 out next week. EaselJS v0.4.1 & TweenJS v0.2 will likely release within the next couple weeks. I can't comment on when Toolkit will be released (that's up to Adobe).

Posted by: Grant Skinner on Mar 16, 2012 12:45pm

Save me from Edge dude!!! please.

Posted by: Rich on Mar 16, 2012 12:53pm

Great stuff. Look forward to this coming out.

LOL @ Rich

Posted by: Ben on Mar 16, 2012 3:25pm URL: http://twitter.com/BK4D

[...] Announcing CreateJS 最近はEaselJS, TweenJS…などなど HTML5用のJavaScript [...]

Posted by: gskinner先生のCreateJS… on Mar 17, 2012 2:08am URL: http://www.inazumatv.com/contents/archives/67…

This absolutely rocks! Thank you so much for bringing some sanity to the canvas landscape!

Posted by: Jad Sarout on Mar 17, 2012 5:06am URL: http://yelostudio.com

Cant wait! Go GS Go!

Posted by: zman on Mar 17, 2012 5:25am

[...] 最近話題になっていたcreate.js。 HTML5のcanvasに使用できるjsを幾つか同梱しているようで これからニーズが高まっていくのではないでしょうか。 http://gskinner.com/blog/archives/2012/03/announcing-createjs.html [...]

Posted by: jQuery JavaScriptのす… on Mar 18, 2012 7:51pm URL: http://makoto-tanaka.com/web/%ef%bd%8aquery/1…

Wow This looks great! Thank you very much for your hard work!

Posted by: Don Shin on Mar 18, 2012 10:12pm

[...] http://gskinner.com/blog/archives/2012/03/announcing-createjs.html [...]

Posted by: sudpaw | Grant Skinner An… on Mar 19, 2012 6:51am URL: http://sudpaw.com/grant-skinner-announces-cre…

@Rich, just curious about your 'Save me from Edge' comment. What do you mean? If it doesn't do what you need it to do, now's the time to tell Adobe eh? (As the paint is still wet).

Posted by: JustAskin on Mar 19, 2012 5:09pm

Any courses coming up on createJS and Flash?

Posted by: Derrick on Mar 20, 2012 11:53am

Mad respect all i can say. this brings back Flash to be a tool that has a real powerful usage. rock on continue the great work! :)

Posted by: Ben Fhala on Mar 22, 2012 8:46am URL: http://everythingfla.com/

[...] Skinner announced CreateJS last month as an umbrella term for a collection of existing projects. Among them are EaselJS for working with rich graphics using HTML5′s canvas technology; TweenJS for animation controls; SoundJS for making it easier to handle sound in Web games or other applications; PreloadJS to fetch elements in advance; and Zoe, which converts Flash animations into graphics files called sprite sheets that Web animations can use. [...]

Posted by: Adobe touts tools for Fla… on Apr 3, 2012 7:40am URL: http://www.brianlfontenot.com/2012/04/03/adob…

Will CreateJS also be available through Flash Builder? We write Flex apps, but very much need the same roadmap/migration features. Thanks!

Posted by: m on Apr 3, 2012 7:52am

[...] Skinner announced CreateJS last month as an umbrella term for a collection of existing projects. Among them are EaselJS for working with rich graphics using HTML5′s canvas technology; TweenJS for animation controls; SoundJS for making it easier to handle sound in Web games or other applications; PreloadJS to fetch elements in advance; and Zoe, which converts Flash animations into graphics files called sprite sheets that Web animations can use. [...]

Posted by: Adobe touts tools for Fla… on Apr 3, 2012 9:45am URL: http://webtoolszone.com/adobe-touts-tools-for…

[...] Skinner announced CreateJS last month as an umbrella term for a collection of existing projects. Among them are EaselJS for working with rich graphics using HTML5′s canvas technology; TweenJS for animation controls; SoundJS for making it easier to handle sound in Web games or other applications; PreloadJS to fetch elements in advance; and Zoe, which converts Flash animations into graphics files called sprite sheets that Web animations can use. [...]

Posted by: Adobe touts tools for Fla… on Apr 4, 2012 5:25am URL: http://www.bussinesstree.co.uk/news/technolog…

[...] (Grank Skinner) To Let Flash CS6.0 Export To HTML5 Canvas We found out about Grant Skinner's CreateJS project a few weeks ago, and were instantly excited to start writing about it for the second [...]

Posted by: Adobe Working With Create… on Apr 4, 2012 7:31pm URL: http://www.8bitrocket.com/2012/04/04/adobe-wo…

[...] Skinner announced CreateJS last month as an umbrella term for a collection of existing projects. Among them are EaselJS for working with rich graphics using HTML5's canvas technology; TweenJS for animation controls; SoundJS for making it easier to handle sound in Web games or other applications; PreloadJS to fetch elements in advance; and Zoe, which converts Flash animations into graphics files called sprite sheets that Web animations can use. [...]

Posted by: Adobe touts tools for Fla… on Apr 8, 2012 12:01am URL: http://www.flashtohtml.net/adobe-touts-tools-…

Are these items unit tested Grant? If so, I'd love to have those checked into the git too. They make another great source for documentation.

Posted by: Kelly on Apr 16, 2012 11:57am

No, though that's one of the things I'd like to tackle for our next set of releases. Hoping to track down someone that like writing UTs (that person is not me). I'm also planning to toss together a visual test framework to make it easier to test the actual visual results.

Posted by: Grant Skinner on Apr 16, 2012 12:00pm

Ugh. Sorry lads, but I dont get this.... Javascript is horrible.

CreateJS is hacked together from hacks that have been hacked together for 10 years.

If the web of the future is down to 1999 Javascript, then its time to hang up the dev tools for me.

I feel I have returned to the "Flash 5 Flash Match Creativity" of 1999.

Posted by: Colin on Apr 17, 2012 12:20am

so awesome, thank you very much

Posted by: elftail on Apr 18, 2012 3:09am

Thanks for the response Grant; you've done great work with these.

Posted by: Kelly on Apr 18, 2012 8:49am

Looks like a nice tool with lots of potential but a few issues... Where do you want problem/bug reports in the toolkit reported?

Posted by: GFTN on May 10, 2012 9:08am URL: http://ticketnetwork.com

Good project. One question:

Where are the EaselJS syntax highlighting and keyword completion for popular text editors?

If you made them already then I have not found them.

If not - it is a simple way to ease initial usage which adds to the user base etc.

Posted by: Ted on Nov 18, 2012 2:00pm

[...] Announcing CreateJS We’ve been working really hard on a lot of great stuff over the last couple months, and I’m thrilled finally able to share. CreateJS, EaselJS, SoundJS, TweenJS, PreloadJS, and Toolkit for CreateJS. [...]

Posted by: I love +Grant SkinnerR… on Mar 7, 2013 6:49am URL: http://www.gplustimeline.com/?p=76445