October 12, 2010

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.


Anonymous said...

Hi all.

Just a quick note to point out that HTML5 (or XHTML3 as it should properly be called) has, after being in development since 2004, just been deprecated by the w3c:

Anyone who gets carried along by the hype will discover to their cost that html5 is unfortunately little more than a PR stunt.

While it cloaks itself in the guise of open development its important to recognize that in reality all the work is done by a few companies that are browser vendors, and they just are writing down whatever they want anyway.

K-Bav said...

Hi Anonymous,

I'm all for skepticism when appropriate, for taking what we hear with a grain of salt, but your post demonstrates a fundamental misunderstanding of the HTML5 spec.

HTML5 has not been "deprecated." Perhaps you are mistaken. Particular features come in and out of the in-draft spec, but to point back to this article, the canvas element is likely staying for the long haul.

Also, because it bugs me to see this uncorrected, calling HTML5 "XHTML3" is misleading. Development on XHTML was halted and one will find that HTML5 bears a closer resemblance to HTML4 syntactically.

HTML5 should indeed be carefully implemented but as the browsers bolster support and companies like Adobe develop applications for working in/enhancing an HTML5 environment, the greater risk is, in some cases, being left in the dust.

houston seo said...

HTML 5 is a new version of HTML 4.01 and XHTML 1.0 focusing on the needs of Web application developers as well as evolving HTML and addressing issues found in the current specifications.

ted said...

Reports of HTML5's death is exaggerated as the w3 school released its Working Draft 9 on November. Here is the url as my source http://dev.w3.org/html5/spec/Overview.html

Can you please give us the source url from the w3c stating that HTML5 is "dead" and not a news source?

And, as Jeremy Keith reports in his title, HTML5 for Web Designers, XHTML is/was in its second (XHTML2) revision stage and not version3 (pg.4), so please state your source on the XHTML jumping to version 3 when 2 was rejected by the web development community.

ALan G said...

The article cited by Anonymous neither says nor implies that HTML5 is anything other than under serious development. The word "deprecated" appears nowhere in the article, which concerns the fact that certain parts of HTML5 remain in flux and aren't expected to be finalized before mid-2011.

Andrew Buckle said...

thanks for the details about html5 and Illustrator... excellent news

new york website designers said...

Great news for website designers. Thanks for this wonderful post.

auntviolet said...

So, um, where exactly can I download this (I was all over Mix & can't find it) and Mordy, please take note, that if you FB this article that first (nasty) post is what shows up as a teaser, rather than your words. You may want to take that down. I'm just saying.

Dotcomweavers said...

Good informative blog on web development. Thanks for sharing great information with us.