Friday, September 25th, 2009

Opacity: Fancy a design tool with “Save as Canvas”?

Category: Utility

Our Webmonkey friends have featured Opacity, a vector image manipulation tool that has a couple of features that are interesting for Web developers wanting to do HTML5-y things:

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.

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.

Nice to see tools embracing the new technology. Of course, the devil is often in the details… specifically how good the code is (We all remember the old Frontpage days!) Inkscape is another example, that embraces SVG.

Posted by Dion Almaer at 6:25 am

3 rating from 22 votes


Comments feed TrackBack URI

Hehe, have to admit … a funny idea. I just came up with a rudimentary color gradient designer who outputs canvas-code. It still lacks some finetuning, but the base is there.

Give it a try:

Comment by PeterGeil — September 25, 2009

Oh, forgot to mention: It’s only for FF >= 3.5

Comment by PeterGeil — September 25, 2009

:-) Maybe Firefox will produce Gecko Frame (analogue to Chrome Frame) that will bring this feature to other browsers…

It would be great even for my project – WCMS/XUL which has the administration in XUL and runs exclusively in FF3.5.

Some browsers are simply ahead and it is quite difficult for eager developers to keep hands away from such as cool emerging technologies and get stick with an aging dinosaur like Trident powering IE… :-(

It is like having Ferrari in the garage but use a bus every day.

Comment by Elixon — September 25, 2009

Another handy tool:

Comment by GregHouston — September 25, 2009

Leave a comment

You must be logged in to post a comment.