Web designers rejoice AGAIN! New HTML5 "canvas" support for Illustrator!

A few weeks ago, Adobe released the HTML5 Pack for Adobe Illustrator CS5. I wrote up some information on it, detailing the support Adobe added for CSS3, more robust SVG, and some limited support for the canvas tag. Basically, Illustrator generates a canvas with a raster version of your artwork within it.

It is certainly exciting to see Adobe putting this kind of emphasis into Illustrator. However, to really take advantage of the HTML5 Pack for Illustrator CS5, you either had to be a developer, had to have a high level of development skills, or you had to work with a developer in order to get any real results. In truth, Adobe talks about the designer-developer relationship, where content can easily be moved between design and developer applications. In this regard, the HTML5 Pack brings a valid and solid workflow to the table, allowing designers to create their masterpiece in Illustrator, and at the same time, hand off something more useful than just a whole bunch of sliced up images to their developer.

But what about all the things that HTML5 promises? What about the real power that the canvas tag exposes? Wouldn't it be cool if you could generate great-looking and useful HTML5 content (with interactivity, motion, interaction, etc) DIRECTLY from Illustrator? Now you can -- with a new FREE plugin for Illustrator.

The plugin, called AI2Canvas, ingeniously allows you to treat layers as JavaScript functions, and allows you to specify attributes for those functions directly from the Layers panel. It supports attributes like rotation, motion along a path, timing, easing, events, and interaction. It even has debugging capabilities.

While it’s true that you’re actually writing code, it is admittedly as easy as learning to write the most basic of CSS. In fact, I was able to do the following literally within 2 minutes (and that includes installing the plugin):

1. Create a new layer, and name it background();
2. Draw a rectangle on the layer
3. Create a new layer, and name it star();
4. Draw the artwork for a star on the layer
5. Modify the name of the star layer to star(origin: 0.5, 0.5; rotate-direction: cw);
6. Choose File, Export and choose Canvas HTML as the format

Layer names become JavaScript functions

The AI2Canvas plugin adds a new format to the Export dialog

You can view the result here (feel free to view source). I’ve tested the page on a Mac using Safari, Firefox, and Chrome, and I’ve also tested it on my iPhone and iPad. I also tested it on Windows with the Internet Explorer 9 Beta. The content displays and animates flawlessly. What’s totally cool about this plugin is that it almost turns Adobe Illustrator into Adobe Flash Professional—only it publishes to HTML5 instead of SWF. It kind of blows your mind.

The AI2Canvas plugin works on both Mac and Windows versions of Illustrator CS3, CS4, and CS5 (Adobe’s HTML5 Pack only works with CS5), and it’s free. And get this: the plugin is written and distributed by Mike Swanson, who actually is an evangelist for Microsoft (Mike has told me that this was a personal project of his though — it isn’t a Microsoft product). You can get the free plugin directly from the Mix Online website.

I hope to have some more examples up shortly, and I also plan on covering the capabilities of this plugin, along with Adobe's HTML5 Pack for Illustrator, in an update to my recent video training title at Lynda.com, Illustrator CS5 for Web and Interactive Design.