Turn Your Vector Art Into Canvas-based Animations With Opacity

The latest version of Opacity, a vector graphics editor for Mac OS X, is able to export animations to code that can be pasted into web pages and played back in any browser that supports HTML5.

We’ve written quite a bit about HTML5 and the power of its proposed <canvas> tag. While the spec isn’t quite finished, the Canvas element in HTML5 promises to eventually give web developers a way to display complex 3-D graphic animations in the browser without plug-ins. Right now, the dominant technologies for doing so are proprietary players like Flash and Silverlight.

There is, however, a trade-off. Canvas-based animations must be written in pure code, and most easy-to-use graphics creation applications like Adobe Flash can’t export the browser-ready animation code, which is complex. Such a limitation is going to put off some of the most talented graphic designers and animators, many of whom are not trained programmers.

That’s why we were excited to hear that Opacity’s new capability to save animated vector shapes and their paths as browser-native code.

Opacity is a bit like Adobe Illustrator, but considerably simpler and easier to use. And with its new export feature, Opacity has a clear leg up on Illustrator when it comes to supporting the next generation of web graphics.

To use the new source code feature in Opacity, simply design your vector-based graphic or animation sequence and, once you’re happy with it, head to the Inspector menu where you can use what Opacity refers to as “Factories” to export your image in various formats. To get Canvas-based source code, chose Source Code for the format and Canvas (JavaScript) as the language.

The resulting JavaScript code looks almost exactly like the examples we’ve shown you in the past (if you don’t own a license for Opacity, which costs between $40 and $90, your image will be watermarked).

We should note that there are other tools around that can do similar things with just an image file — such as Alistair MacDonald’s Burst engine, which can take SVG animations and convert them to JavaScript objects that are rendered inside of a <canvas> tag.

Opacity is a Mac OS X application and costs $90 — not cheap, but cheaper than than Adobe Illustrator. There’s also a lighter version known as Opacity Express, which still has the code export option, but lacks some other features and retails for $40.