Introducing the Ai to Canvas Plug-In
Oct 12, 2010 In News By Thomas LewisWith 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?
- If you don’t have Adobe Illustrator,download the trial version.
- Go to the Ai->Canvas Plug-In project and download the plug-in for Windows or Mac.
- Read the documentation that covers all the functionality the plug-in offers and supports.
- Contact us with any questions you may have or let us know how you used it.
- Support us by telling your friends on Twitter!
Follow the Conversation
32 comments so far. You should leave one, too.
Any chance that the Ai->Canvas will be ported to Inkscape Vector Graphics Editor?
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.
@saqib ali - we don''t have current plans to do that, but definitely interesting!
Why convert from vector art to canvas? Wouldn''t you want to convert to SVG to maintain the vector format?
@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.
Thanks, Michael!
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.
@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.
@Michael: thanks!
Do you plan to open source this plugin?
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
Sorry - Adobe Lab link got mangled by closing bracket. Should be:
http://labs.adobe.com/technologies/illustrator_html5/
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.
@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.
@Jon Galloway: Illustrator has had SVG export for years, including animation and event handling with javscript.
Wow, great plugin, but cannot add event? i mean like when user click, hover or keyboard event that specify animation will excute?
@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
This is an awesome plugin. Thanks for releasing it!
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.
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?
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.?
^I mean that LONG layer names...
@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
Looks great, but where''s the tutorial videos? I only the see the first two, the other ones are missing (404)
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?
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.
Hi,
Any plans to implement for Expression Design / Blend?
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.
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
Thanks Michael.
Good Info you shared.
This is fantastic and saves a ton of time in coding!
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
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