HTML and CSS Reference
In-Depth Information
Illustrator to Canvas
You may already be asking yourself, “Wait, why do I need to draw on the canvas programmatically using JavaScript?
I'm a designer; can't I use my normal design tools?” You're not alone in asking this question; there is a very nice
tool, one developed specifically for designers' use, called Ai Canvas ( visitmix.com/labs/ai2canvas ) ; it allows
designers to design in the vector-based programs they know and love, especially Adobe Illustrator.
The Ai Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork directly to
an HTML5 canvas element that can be rendered in a canvas-enabled browser. The plug-in provides
drawing, animation and coding options such as events so that you can build interactive, well-
designed canvas-based web apps.
visitmix.com/labs/ai2canvas
In a creative department, this tool is exceptionally helpful when you're working on a team where designers need
to provide concepts and mocks to developers. You can have your designers work in Illustrator and your developers
work in JavaScript. The tool offers a clear separation between design and function and helps when, down the road,
clients need to make changes (they always do). In addition to drawing in this fashion, using Illustrator, this plug-
in allows for animation, event handling, and even debugging. (Pretty sweet, if you ask me, plus it's all offered for
free.) These features make this plug-in a valuable addition to any designer's tool belt. Since it's appropriate for
certain applications, I'd suggest you check it out if you are serious about using canvas to work with highly visual and
complex art. Keep in mind, though, that as the graphics get more complex, the k-weight is sure to increase, as will
the unoptimized JavaScript that the plug-in will generate. So plan your execution correctly, and keep your client and
publisher are aware of what you're doing, particularly if k-weight constraints are tight.
Flash to Canvas
If you work in Flash or know people who do or did, they will tell you that it was a groundbreaking platform as far
as making innovative rich graphics for the Web is concerned. As you now know, the canvas element is a warmly
welcomed addition, since it lets designers and developers make advantageous use of graphics in HTML5 ads. Now, in
the latest Adobe Flash Professional CS6, designers can work with the canvas element more easily, thanks to a library
and toolkit called CreateJS.
CreateJS
CreateJS has a bunch of great things in its suite of offerings.
EaselJS (covered in detail shortly)
TweenJS (for animations)
SoundJS (for HTML5 audio)
PreloadJS (for preloading assets)
Zoe (a sprite-sheet generator)
tweenJs, soundJs, preloadJs, and Zoe won't be covered in this chapter. You can learn more about these
libraries at http://createjs.com .
Note
 
 
Search WWH ::




Custom Search