.

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

A few months 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

This post was written by: Franklin Manuel

Franklin Manuel is a professional blogger, web designer and front end web developer. Follow him on Twitter