Illustrator to HTML5 Canvas Plug-In Updated for CS6

Update on 7/18/2013: An updated version of the Ai->Canvas plug-in is now available for CS6 and CC.

My Ai->Canvas Plug-In (released almost two years ago, yet I still hear from developers and designers who use it regularly. When Creative Suite 6 was released this past May, users began to report that the plug-in wouldn’t work with the new version. A quick search revealed this paragraph on page 4 of the Adobe Illustrator CS6 Porting Guide:

Creative Suite 6 requires a different development environment from previous releases; this means that you must recompile plug-ins built with an earlier version of the Illustrator SDK in order for them to run in Illustrator CS6.

Reading this, I knew I’d have to schedule some time to port the code from the CS3 SDK to the CS6 SDK. And, because CS6 is the first version of Illustrator that’s available in both 32- and 64-bit PC versions, I also knew that I’d have to update some of the data types. Oh…I’d have to make sure that all of the changes also worked on the Mac too (fortunately, my Juicy Bits experience has made this part much easier).

To avoid boring you to death, I’ll fast forward through the porting details and simply state that the process was a success, and you can now download all three flavors of the plug-in in a single zip file. The Twitterverse has helped me confirm that the updated plug-in runs correctly on:

• Windows 7 and Windows 8, 32- and 64-bit editions of Illustrator CS6
• Mac OS X v10.7 (Lion) and v10.8 (Mountain Lion), Mac edition of Illustrator CS6

The plug-in may also work with earlier versions of Windows (like Vista and perhaps XP) and Mac OS X v10.6.8 (Snow Leopard), but I haven’t received confirmation of these platforms, so your mileage may vary. If you test any of these platforms, I’d appreciate it if you would drop me a note, and I’ll update this post accordingly.

Here are two examples that were exported directly from Illustrator:

• Yellowstone Map (3.83MB) – an “acid test” because of its complexity. I wouldn’t expect anyone to actually use output like this, but it works.
• Solar System (15.5KB) – the result of going through the introductory tutorial. This example shows off some of the animations that can be created (watch long enough to see the asteroid, rocket ship, and supernova).

To install, first download Ai->Canvas version 1.1, then extract the appropriate .aip file to your Illustrator plug-ins folder (default locations below):

• Ai2Canvas64.aip (\Program Files\Adobe\ Adobe Illustrator CS6 (64 Bit) \Plug-ins)
• Ai2Canvas32.aip (\Program Files (x86)\Adobe\Adobe Illustrator CS6\Plug-ins)
• Ai2CanvasMac.aip (/Applications/Adobe Illustrator CS6/Plug-ins)

Start Illustrator, pull down the File menu, select Export…, and verify that “<canvas> (*.HTML)” is available in the Save as type drop-down list. There are no other options to configure or runtimes to install.

Note that version 1.1 of the plug-in only works with Illustrator CS6. If you need to use the plug-in with earlier versions of Illustrator (back to CS3), you can still download version 1.0 from the MIX Online site.

If you’re new to the plug-in, it’s worth going through the Hard core geeks might enjoy the Adobe Illustrator to HTML5 Canvas – Under the Hood interview where I talk about how the plug-in works behind the scenes.

I hope that this updated release makes your life easier!