Advertise    Write for Us

Vectorboom

Free Plug-in for Adobe Illustrator: Ai -> Canvas

posted by: Iaroslav Lazunov, in Freebies / Free Plug-ins/ Comments: 0

The Ai-> Canvas plug-in allows exporting vector and bitmap artworks from Adobe Illustrator directly to the HTML5 canvas element using JavaScript drawing commands. This means that your vector artworks will appear in browsers which support HTML5. With the help of this application you can create some animation and interactive graphics on the basis of web applications.

How Ai-> Canvas plug-in works

The Ai-> Canvas plug-in is compatible with Adobe Illustrator CS3 — CS6 and works in Windows and Mac OS X. The resulting HTML and JavaScript will work in the following browser versions: Internet Explorer 9, Firefox 3.6, Chrome 6, Safari 5, and Opera 10. You can download the Ai-> Canvas plug-in by clicking on the following link. Addition to the plug in archive contains documents that allow you to learn how to use plug in for drawing, animation and code. After watching detailed video tutorial you will learn the basics of work in the Ai-> Canvas.

Plug-in allows you to export complex shapes, fill styles, line styles, gradients, transparency, native text, bitmaps, pattern fills, symbols, drop shadows, and more. But such objects as gradient meshes, opacity masks and Gaussian blurs automatically rasterize into PNG file. This allows a browser work faster with more complex objects.

Ai-> Canvas plug-in

Animation can be used for rotation, zooming, opacity change and moving of objects along a vector path. The events feature can be used to trigger other animations. In order to animate objects, special functions and properties should be indicated in the name of the layer which corresponds to the object. The list of functions can be found in the document "Custom Functions" which is attached to the plug in.

Ai-> Canvas plug-in

I don't think that this is a very convenient way to code the objects, but you can open the exported document in any HTML editor and continue or extend code.

This even allows us creation of interactive graphics which will respond to the user's actions.

Examples of Ai-> Canvas usage:

Canvas Cycle: True 8-bit Color Cycling with HTML5

Ai-> Canvas plug-in

Canvas Zoom

Ai-> Canvas plug-in

Music Can Be Fun

Ai-> Canvas plug-in

I think that in the nearest future Ai-> Canvas will be mostly used in web animation, on-line games and interactive infographics.

Total comments: 0
Recent Consultations
Free Illustrator Script — Replace Swatches Color
Interview with Chris Spooner
Free Adobe Illustrator Script — Random Rotate Linear Gradient
Vector Drawing in Adobe Illustrator (Vector Inking)
Great movie posters from Tom Whalen