You’re probably sick of these bubbles. They’ve already popped up in my book, a recent Starling tutorial I wrote, and now here they are again. So what’s different this time? Well, if you right-click on any of them you’ll notice something odd. That’s right, there’s no Adobe Flash Player driving them. Unlike my other bubble demo’s, this one’s powered by JavaScript and HTML5’s canvas tag.

It doesn’t mean I’ve ditched Flash though. In fact, I used Flash Professional to create the artwork and fancy wobbling bubble animation. The code however was written entirely in JavaScript. Witchcraft you say? Yeah we’ll I suppose you’re not that far off. All this magic is made possible by Flash Professional CS6’s Toolkit for CreateJS, and Grant Skinner’s rather impressive CreateJS JavaScript framework.

The Toolkit for CreateJS is an extension for Flash Professional that exports a FLA’s contents to HTML5. Once exported, you can write JavaScript to manipulate and add interactivity to that content by taking advantage of CreateJS’s libraries.

As a seasoned ActionScript developer, I was pleasantly surprised at just how familiar the CreateJS APIs felt. If you have Flash Professional CS6 then I recommend you download the Toolkit for CreateJS and give it a spin. If you don’t have CS6, then I think CreateJS is a great reason to upgrade.

Oh, and pop the bubbles by left-clicking them.

  1. On a personal level. Is there a reason why you would choose html5 over flash? I found that working html5 is very mundane and tedious. Things to get done in html5 would normally take half the time if not more in flash, I feel the workflow in flash is much quicker and sufficient. I understand in some circumstances why to use html5 (seo obviously) but when it comes to interactive then Flash is obvious no brainer, I don’t get why people don’t get this.

  2. Hi Erick,

    I guess the biggest reason for using HTML5 over Flash is mobile penetration. With Adobe having dropped development of the mobile Flash player, HTML5 really is the only option for writing rich web content on mobile/tablets.

    Sure if you’re targeting the desktop then I’d say Flash is still the best solution in many cases. However if you do need to work on some HTML5 projects, then it’s good to know that Flash Professional can still be an effective part of your workflow thanks to the Toolkit for CreateJS.

    Christopher (Author)