You are reading a MIX Online Opinion. In which we speak our minds. Thomas Lewis Meet Thomas Arrow

Opinions

32Comment Retweet

Introducing the Ai to Canvas Plug-In

Oct 12, 2010 In News By Thomas Lewis

With the release of browsers that support HTML5 and related technologies, we will see web designers and developers build web apps that take advantage of the canvas tag to add drawing capabilities without an add-in to the browser. We wanted to build a tool that allowed you to take a drawing application you are familiar with and make it easy to export to canvas

With the release of browsers that support HTML5 and related technologies, we will see web designers and developers build web apps that take advantage of the canvas tag to add drawing capabilities without an add-in to the browser. We wanted to build a tool that allowed you to take a drawing application you are familiar with and make it easy to export to canvas.

We are calling it the Ai->Canvas Plug-In.

The Ai->Canvas Plug-In enables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser. The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps.

The Ai->Canvas Plug-In is free and runs on both Windows and Mac.

So what does this thing do?

Like it shows in the image above:

  • You first build your assets in Adobe Illustrator. Include things such as existing drawings and images, or even create new drawing to be exported. The plug-in can be used to export complex shapes, gradients, transparencies, drop shadows and all kinds of things. You can also create animations such as rotation, fades, movement, easing and triggers. Be sure to check out the documentation for all the different features available to you.
  • Then simply select Export on the File menu in Adobe Illustrator and choose canvas.
  • It will create the appropriate code for you and any additional files you will need. You then can edit these as appropriate for your application.
  • Then load the file(s) in a browser that supports canvas and you will be able to view your illustration along with any animation you may have created.

Simple!

How did this come about?

It is no surprise to our community at MIX Online (as well as internally here at Microsoft) that we are huge proponents of HTML5 and related technologies. Our team has been helping amazing customers build cool apps using canvas for the upcoming IE9 release (which work in all canvas-enabled browsers). I was evangelizing the brutality of HTML5 to Mike Swanson on a Friday. If you don’t know, Mike Swanson is the author of the way cool Adobe Illustrator to XAML Export plug-in. As we lamented over the fact that building canvas drawings weren’t for the feint of heart,Mike spent the weekend whipping up a prototype and showed me what he had done on Monday. We then decided that we should make this available to folks such as yourself so that you could create amazing canvas-based apps!

So what’s next?

Follow the Conversation

32 comments so far. You should leave one, too.

Saqib Ali Saqib Ali said on Oct 12, 2010

Any chance that the Ai->Canvas will be ported to Inkscape Vector Graphics Editor?

Ian Muir Ian Muir said on Oct 12, 2010

This is awesome. One of the biggest barriers in moving away from Flash is ties to other Adobe CS products, so this is an epic victory for standards.

Keep up the good work guys.

Thomas Lewis Thomas Lewis said on Oct 12, 2010

@saqib ali - we don''t have current plans to do that, but definitely interesting!

Jon Galloway Jon Galloway said on Oct 12, 2010

Why convert from vector art to canvas? Wouldn''t you want to convert to SVG to maintain the vector format?

Michael Swanson Michael Swanson said on Oct 12, 2010

@Jon: In many cases, you would use SVG. But imagine writing a casual game where elements are scaled and rotated as part of the game. Perhaps you''re using canvas because of other bitmap effects...or maybe due to its lower level performance. In these cases, you need to issue standard canvas commands to draw more complex shapes. This plug-in makes drawing those shapes much easier. Great question, and I think it''ll be some time before it''s clear when to use one over the other.

Jon Galloway Jon Galloway said on Oct 12, 2010

Thanks, Michael!

Vladimir Yunev Vladimir Yunev said on Oct 13, 2010

Thanks! Great tool.
But hey, there is no unicode support on export? My russian text is totally disappear in result. Sad but true. Please, fix it.

Michael Swanson Michael Swanson said on Oct 13, 2010

@Vladimir: Thanks. All of the strings are handled as unicode, but the output path may be converting them to ASCII. I''ll add it to the issues list to investigate.

Vladimir Yunev Vladimir Yunev said on Oct 13, 2010

@Michael: thanks!

Do you plan to open source this plugin?

Nicholas van der Walle Nicholas van der Walle said on Oct 13, 2010

Fantastic development - thanks for sharing!

What is your opinion of Adobe Lab''s Illustrator CS5 HTML5 Pack (http://labs.adobe.com/technologies/illustrator_html5/)? Can you see convergence of the tool you created and Adobe''s own tool?

Keep up the great work,

Nick

Nicholas van der Walle Nicholas van der Walle said on Oct 13, 2010

Sorry - Adobe Lab link got mangled by closing bracket. Should be:

http://labs.adobe.com/technologies/illustrator_html5/

Ricardo Costa said on Oct 13, 2010

Nicholas,

Even if there''s some convergence, there''s a great advantage using this plugin instead of Adobe''s: it also works with CS3 and CS4.

Naturally, Adobe is only inclined to make theirs compatible with the latest and greatest, to further drive sales.

Michael Swanson Michael Swanson said on Oct 13, 2010

@Vladimir: We had hoped to provide the source code for the plug-in, but the EULA for the Illustrator SDK seems to prohibit source code release. It looks like it allows object code, but that wouldn''t help anyone who wanted to modify/extend it.

Michael said on Oct 15, 2010

@Jon Galloway: Illustrator has had SVG export for years, including animation and event handling with javscript.

devlim devlim said on Oct 17, 2010

Wow, great plugin, but cannot add event? i mean like when user click, hover or keyboard event that specify animation will excute?

Michael Swanson Michael Swanson said on Oct 18, 2010

@devlim: Thanks. Drawings on a canvas don''t have their own native events (like the DOM), and you have to identify interaction in your own JavaScript code. Check out the documentation for an example of how to do this: http://visitmix.com/labs/ai2canvas/documentation.html#interaction

Edwin Edwin said on Nov 1, 2010

This is an awesome plugin. Thanks for releasing it!

Oliver Oliver said on Nov 17, 2010

Hi! Would have loved to try this, but it doesn''t seem to work on my machine. I have Illustrator (German) on Mac OS X (10.5.8).
Fileformat canvas (html) is being shown under export, but nothing is saved.

Lisa Lisa said on Nov 24, 2010

Absolutely love it! What I''d like to see is a better way of being able to figure out which shapes are clicked on. Similar to: http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

I know one of the tutorials show''s how you can trigger some action when the moon is clicked but there is a lot of manual work to see if it''s in the moon. What if there are 100 individual shapes?

Tuukka Rantala said on Dec 2, 2010

Very interesting. I tried to follow the tutorial... BUT my Illustrator CS3 doesn''t support that layer names... Is it because of the old Illustrator or Mac OSX 10.5.?

Tuukka Rantala said on Dec 2, 2010

^I mean that LONG layer names...

Michael Swanson Michael Swanson said on Dec 2, 2010

@Tuukka (and others): Good question. CS3 and CS4 limit the length of their layer names, so for complex behaviors, you need to use the short versions of properties and values. You can find a pointer to more information about this in the first version of the Ai->Canvas FAQ: http://blogs.msdn.com/b/mswanson/archive/2010/10/15/ai-to-canvas-faq.aspx

Julius Julius said on Dec 22, 2010

Looks great, but where''s the tutorial videos? I only the see the first two, the other ones are missing (404)

Thomas Lewis Thomas Lewis said on Dec 22, 2010

Hi Julius, I just checked and the tutorial videos were working fine for me. Can you let us know what browser and version you are using?

Oliver Oliver said on Feb 1, 2011

OK, 29 Euros and one Update to Mac OS X (from 10.5.8 to 10.6.3) later and I''m there. Now it works fine. Looking forward to playing with it. Thank you.

PK PK said on Mar 21, 2011

Hi,

Any plans to implement for Expression Design / Blend?

Drew said on Aug 1, 2011

I love this plugin thank you for developing it! I'll be the black sheep in the crowd unfortunately and ask a question that the Illustrator faithful probably won't like, but are there any plans to port this plugin over to CorelDRAW X5? Though I have been learning Illustrator, I just find some habits are hard to break...

Regardless, this will give me more motivation to learn Illustrator properly I suppose.

maxim said on Oct 6, 2011

i done some experiment:
i have some animation which i did in flash (it is a simple shape animation ftame by frame, 55 frames in 60 fps=0.92 s).
i build sprite from this animation (align frame seq in one tape) and i want move this layer on straight line to gat frame by frame animation in canvas.
Befor this i done some effect in flash. it is work. But in canva it is not. (first and end frames are coincide, all other a not aligned to frame)
any idea to fix this.
Thanks

Bankruptcy Lawyer-Jae said on Dec 12, 2011

Thanks Michael.
Good Info you shared.

Gordon said on Jan 19, 2012

This is fantastic and saves a ton of time in coding!

Lawrence Ketchum said on Apr 6, 2012

Hello, thanks for posting this. I've been searching the net for quite some time now. I really appreciate this. I'm going to test this tomorrow.

L. Ketchum
-quotes about death of a loved one

Tim Venettozzi said on Apr 27, 2012

Great Ap. I successfully made a simple animation with it and want to take it to the next level adding interactions.

I am picturing a game/quiz with 4 drop areas in the corners and words running across the middle of the screen. I want the user to be able to drag and drop words as they go across the screen to their area and be scored. The primary platform is a mobile ios, andriod..

Anyone know of good resources to take it to the next level? 1) drag and drop support, 2) validation and scoring.

Thanks