MIX Online has released a new project called the Ai to Canvas Plug-In that enables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element that can be rendered in a canvas-enabled browser like Internet Explorer 9.
The plug-in provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps.
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.
The MIX Online team has built a tool that allows you to take a drawing application you are familiar with and make it easy to export to canvas.
- 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.
- 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.
The Ai to Canvas Plug-In is free and runs on both Windows and Mac. You will need to have Adobe Illustrator CS5 installed on your computer.
Go to the Ai->Canvas Plug-In project and download the plug-in.
Also check out Mike Swanson’s Adobe Illustrator to XAML Export plug-in.
If you have liked this post, you might want to check out some more, on topics like Adobe, Freeware, MIX.
