Grant Skinner

The "g" in gskinner. Also the "skinner".

@gskinner

Updates to EaselJS, SoundJS, TweenJS & Zoë!

I’m very happy to announce that I’ve pushed major updates to a number of our javascript tools and libraries for developing rich content with HTML5. It’s very exciting for me to see these starting to realize some of the vision I’ve had for them over the past year, both as individual pieces and as a suite of tools to make great interactive content using web standards.

Here’s a quick breakdown of what was released:

EaselJS v0.4.0
The latest release of EaselJS (our HTML5 display library) has a completely reengineered sprite sheet engine, which includes a host of new features: multi-image sprite sheets, variable frame dimensions, frame reuse, image preloading, and a new data format. Note that this change will require some minor updates to existing content using sprite sheets in EaselJS.

We’ve added filter effects, and a few sample filters, including a box blur filter by Mario Klingemann, who has agreed to write a number of other filters for the library.

There’s also a fantastic new build system, built on top of Node.js by Adobe’s own Mike Chambers. And, of course, a whole pile of other feature additions, optimizations and bug fixes. Check the VERSIONS file for full details.

Zoë v1.5.0
We’ve released a major update to Zoë, our tool for exporting sprite sheets from SWF animations. It supports EaselJS’s new data format, and adds some great new features like variable frame dimensions with more optimal rect packing, and intelligent frame reuse. The latter allows you to set a threshold for how similar frames can be, and Zoë will automatically remove similar frames and reuse them in animations. Testing on some old content, we saved 20-50% on file size with this feature, with virtually no decrease in animation quality.

This release was a bit more rushed than we would have liked, so you should expect to see a v1.5.1 release before too long that polishes things up and adds additional features such as multi-image export.

TweenJS v0.1.0
This is the first “official” release of TweenJS. TweenJS uses a simple API of chained commands to sequence tweens and actions to create complex animations and timed events. For example:

Tween.get(ball).to({x:200},500).wait(750).to({alpha:0,visible:false}).call(onComplete);

TweenJS makes a great companion to EaselJS, and also has some basic support for working with CSS properties, which will be extended in future versions.

SoundJS v0.1.0
This is also the first official release of SoundJS, our library for working with the HTML5 Audio tag. Sound in HTML5 is a complete mess to work with, and this library aims to make it a bit easier. It handles preloading, allows you to assign a fixed number of tags to a specific sound, provides volume control, and manages sound interruption.

This library is still a little rough, but we’re planning to continue to clean it up and add functionality (ex. WebAudio support) as time permits.

in summary
All of these projects are free and open source, released under the highly permissive MIT license, and are hosted on GitHub. I’d like to thank everyone who contributed to these releases, even if just by providing feedback or encouragement. Hopefully people find these useful in their own quests to build amazing content for the web!

As an aside, now that these releases are out of the way, I’m considering doing a series of posts or videos on getting started with some of these libraries. I think it would be particularly relevant as Flash developers start looking to create content in HTML5, and web developers look to create more interactive content.

Music Visualizer in HTML5 / JS with Source Code

It’s no secret that I like building music visualizers, or that I’ve been playing with HTML5 a fair amount lately. Given that, I thought I’d combine the two interests, and build a music visualizer using JS, the canvas & audio elements in HTML5, and the EaselJS framework.

The primary challenge was that Javascript doesn’t have any built in mechanism for accessing the volume of a playing audio tag. To address this I wrote a little AIR application that will read an MP3 file using Sound.extract() and export peak volume data as a text or JPG image file. I then wrote a JS class called VolumeData.js that reads in these files and provides access to the data via a simple interface (ex. myVolumeData.getVolume(time) ).

With those pieces in place and tested, I started putting together a demo of it in action using EaselJS. Two of the newest features were compositeOperation support (which let me approximate an “add” blend mode), and the drawPolyStar method, both of which I used to excess.

I think the end result is pretty cool, though it requires a fairly modern system, and will still melt your CPU – I was intentionally pushing things hard to try to find the performance limit. It requires an up to date browser to run.

I built two variations: Star Field and Atomic. Occasionally dynamic audio loading seems to break on certain browsers, just reload if it gets stuck on “loading music”.

If you’re interested in building your own music visualizers in HTML5/ Javascript, you can download the demo source, VolumeData.js class (MIT licensed) and VolumeData AIR application here. Also, be sure to check out the latest version of EaselJS (we just released v0.3.2 today).

Please let me know if you build anything cool with the code. I’d love to see it.

Zoë: Export SWF Animation as EaselJS SpriteSheets

Alongside the release of EaselJS v0.3 we’re also releasing the first version of Zoë, a free Adobe AIR application for exporting SWF animations as sprite sheets (single images containing a grid of animation cells), including frame data for use with EaselJS.

This means you can use Flash Pro to lay out your animations then very easily prep them for use with EaselJS and the HTML5 canvas element.

We used an early version of Zoë to prep all of the animations for the Pirates Love Daisies game we released a few weeks ago, which let our illustration team work with a tool they felt comfortable with, using tweens, skeleton constraints, and graphic symbols.

Here’s a quick feature overview:

  • Exports a single sprite sheet image, or individual frames
  • Reads frame labels in the swf to generate frame data.
  • Writes frame data as JSON or EaselJS files
  • Calculates the frame dimensions automatically based on the animation content
  • Saves profiles to make it easy to re-export when art changes

And a screenshot:

You can grab Zoë from easeljs.com/zoe.html. It’s currently not open source, but we’ll likely release the source once we have a chance to fix any major issues that arise with the public release and clean up the code.