Introducing the Ai to Canvas Plug-InOct 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.
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!