Ai->Canvas FAQ
Since the launch of the Ai->Canvas plug-in for Adobe Illustrator a few days ago, I’ve collected a bunch of questions via e-mail, Twitter, blog post comments, and forums. This list should eventually make its way to the official Ai->Canvas project page on MIX Online, but in the meantime, I’ve included a first version of the FAQ in this post. If you have other questions that you’d like addressed on this list, please leave a comment or drop us an e-mail. And thank you for all of the encouragement, blog posts, and tweets!
Q. Why would I ever want to export vector graphics to a HTML5 canvas element when I can just use Illustrator to export to SVG?
A. Excellent question! If you’re building a HTML5 application that can do everything with SVG, there’s no reason to use Ai->Canvas (and in that case, you should check out the Adobe Illustrator CS5 HTML5 Pack). However, if you’re building a canvas-based application or game that requires lower-level access and you need to draw more than simple bitmaps, Ai->Canvas makes the job much easier. Without a tool like Ai->Canvas, designers and developers are forced to manually write hundreds of lines of code like: context.bezierCurveTo(5.4, -1.5, 2.7, -1.5, 1.5, -0.5); . No fun at all.
Q. Am I required to keep the Mike Swanson and MIX Online comments in my HTML/JavaScript code?
A. No. We expect most people to copy and paste just the code that they need for their own projects. If you feel like giving us credit, though, we won’t complain!
Q. Can I use Ai->Canvas to convert .ai files without installing Adobe Illustrator?
A. No. Ai->Canvas is not a file conversion tool. It runs within Illustrator so that it has direct access to the internal representation of your artwork. This enables very high-fidelity output and also simplifies the workflow. If you don’t have Adobe Illustrator and you’d like to try Ai->Canvas, you can download a free 30-day trial
Q. When using Internet Explorer 9 Beta 1, how do I prevent the “blocked content” alert when loading the exported HTML file?
A. Choose Internet Options from the Tools menu (or press Alt + X), then click the Advanced tab. Scroll down to the Security section and make sure that “Allow active content to run in files on My Computer*” is checked. After you enable the setting and click OK, restart Internet Explorer for the changes to take effect.
Q. Which versions of Windows does Ai->Canvas work with?
A. The PC version of Ai->Canvas works with Windows Vista and Windows 7. Due to some OS-specific function calls, it will not work with Windows XP.
Q. Does Ai->Canvas work with the trial version of Adobe Illustrator?
A. Yes. If you’d like to try Ai->Canvas and you don’t have Adobe Illustrator, you can download a free 30-day trial.
Q. In the tutorial videos , the right-click “View source” menu in Internet Explorer 9 Beta 1 brings up Visual Studio 2010. How can I configure the same behavior?
A. Press F12 to bring up the developer tools window. Choose File/Customize Internet Explorer view source/Other… Then browse to your Visual Studio folder (usually something like C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE). Select the devenv.exe file and click Open.
Q. Are there plans to release the Ai->Canvas source code?
A. We had hoped to provide the source code for the plug-in, but the Adobe Illustrator CS3 SDK License Agreement (EULA) in section 2 appears to prohibit the release of source code. It sounds like it allows object code, but that wouldn’t help anyone who wanted to understand/modify/extend the plug-in.
Q. Why are my international characters lost during export?
A. While all text is handled as Unicode within the Ai->Canvas plug-in, it is converted to basic ASCII characters in the output stage. This is a known issue that is on the list to be addressed in a future version.
Q. Why is the performance slow when I export a complex animation and run it on a [fill in device name here]?
A. It’s hard to say, because each device, OS, browser, and application combination has unique performance characteristics. That’s why it’s important to test, test, test. Also, Ai->Canvas exports HTML and JavaScript code that is intended to be copied and pasted into your own project where performance is managed according to your project’s requirements. In general, though, the more elements that are animated and drawn for each frame, the slower the overall performance. For applications that don’t need to clear the canvas and re-draw the entire scene, there are many easy optimizations that can drastically improve performance.
Q. How can I include complex animation properties when Illustrator CS3/CS4 has a 100-character layer name limit?
A. Each property has an equivalent short name that uses fewer characters. For example, the rotate-timing-function property can be shortened to r-t-f, saving 17 characters. Some values also have short versions. For example, origin: center can be shortened to o:c. See the Ai->Canvas Extended Documentation for details.
Q. Is there a way to visualize the timing (easing) functions that are included in the Ai2CanvasAnimation.js file?
A. Yes. This HTML file draws a line graph for each of the built-in timing functions. The x-axis represents the input value (from 0.0 – 1.0), and the y-axis represents the output value (from 0.0 – 1.0).
Q. Are there plans to create a version of Ai->Canvas for Inkscape, Fireworks, [fill in app name here]?
A. Not at this time. Because the Ai->Canvas plug-in is written using the Adobe Illustrator SDK (software development kit), it is very specific to the internal workings of Illustrator. While the concepts could certainly be re-purposed for other drawing applications, it’s likely that very little of the actual code could be re-used.