Peter Nyboer

If you use Adobe Illustrator, you may find this plugin really handy:

http://visitmix.com/labs/ai2canvas/documentation.html

It converts ai graphics into canvas graphics. This way you can layout something in illustrator, convert it into canvas commands, put it in JSUI, and maybe add a bit of logic in Max.

If you use Adobe Illustrator, you may find this plugin really handy:
http://visitmix.com/labs/ai2canvas/documentation.html
It converts ai graphics into canvas graphics. This way you can layout something in illustrator, convert it into canvas commands, put it in JSUI, and maybe add a bit of logic in Max.


jsui-and-canvas-made-a-bit-easier

thanks peter, this is completely brilliant. i had no idea it existed.

(it would be great if it went the other way, too!)

thanks peter, this is completely brilliant. i had no idea it existed.
(it would be great if it went the other way, too!)


There is probably something to convert canvas to SVG, and you could possibly bring that into AI. Just use the google!

In finding this, I went on a tangent, and ended up using kineticJS 

 in a browser. I was able to get a similar workflow going by exporting my graphics to SVG, and putting the data into the kineticJS code. I simply modified this example:

http://www.html5canvastutorials.com/labs/html5-canvas-world-map-svg-path-with-kineticjs/

to get what I wanted. Which I suppose I have to wait to share :( The only real mod I had to make was to be able to click on a thing and have it hold its color (i.e., ignore mouseout).

Getting the data from the KineticJS clickmap in the browser is pretty easy, thanks to this great example from Oli Larkin:

http://olilarkin.blogspot.com/2011/05/maxwebcontrol-v0-1.html

There is probably something to convert canvas to SVG, and you could possibly bring that into AI. Just use the google!
In finding this, I went on a tangent, and ended up using kineticJS  http://www.kineticjs.com/ in a browser. I was able to get a similar workflow going by exporting my graphics to SVG, and putting the data into the kineticJS code. I simply modified this example:
http://www.html5canvastutorials.com/labs/html5-canvas-world-map-svg-path-with-kineticjs/
to get what I wanted. Which I suppose I have to wait to share :( The only real mod I had to make was to be able to click on a thing and have it hold its color (i.e., ignore mouseout).
Getting the data from the KineticJS clickmap in the browser is pretty easy, thanks to this great example from  Oli Larkin:
http://olilarkin.blogspot.com/2011/05/maxwebcontrol-v0-1.html

jsui and canvas made a bit easier....