With Adobe Flash Professional CC® you are able to publish HTML5 Canvas documents directly. Initially this was done using the Toolkit for CreateJS extension, however it has now been completely integrated into Flash, configurable from the Publish settings. Those who are familiar with publishing content with the Flash IDE will find themselves able to create HTML5-ready content using traditional Flash Pro timelines and tools. Even with little to no HTML/JavaScript experience, you can publish interesting and dynamic content within seconds.
Continue reading →
Tag / ToolKit
Orcastra: Live Web Audio using CreateJS
We recently spent some time playing with a new feature in Chrome called Web Audio Input, which provides access to a microphone or other audio input.
The result was “Orcastra” (ha!) which allows users to select one of five deep sea characters who lip sync along to the user’s audio input.
Creating Orcastra was quite straightforward. The characters were all created in the Flash CS6 IDE (MovieClips with timeline animations) and exported to HTML5 using Toolkit for CreateJS. We used PreloadJS to load all our assets, TweenJS for simple tweens, and EaselJS as the display layer.
We use feature detection to ensure the browser supports audio input, prompt users to allow access to their microphone, then listen for volume changes (with maximum mic gain) to confirm audio input before showing the character selection screen. Once the user picks a character, it’s just a simple matter of syncing the CreateJS animations with the current input volume level.
Orcastra should work with any Web Audio Input enabled browser. This currently includes the latest version of Chrome for OSX, and Chrome Canary for Windows, but you’ll need to enable the feature with chrome://flags and restart your browser before trying it.