httpvhd://www.youtube.com/watch?v=1Xhdy9zBEws
If your new year’s resolution was to learn how to bring your illustrations to life with motion and interactivity, you are in luck. Below I’ve gathered some resources, tutorials and inspiration to get you started on your journey.
Adobe Flash
For better or for worse, Flash has been around for 15 years. While rival technologies may be digging its grave, Flash remains the most intuitive animation tool for users of Adobe Illustrator — and 15 years worth of online tutorials and forum discussions make for an easy learning curve.
Both made by Adobe, Flash and Illustrator work pretty well together (although, not as well as you might expect). Like Illustrator, Flash is vector based and can import .AI vector artwork along with bitmaps and video files. Illustrator can export .SWFs for Flash, and later versions (AI CS3+) can even include symbols, animation clips and dynamic objects.
In addition to animation tools, Flash also has a programming language called ActionScript (AS) with which you can make your animations interactive. There are three versions of ActionScript (AS1, AS2, AS3) which are not cross-compatible, each more esoteric than the last. I find AS2 to be the right mix of natural-language programming and breadth of possibilities, and seems to have the most tutorials too.
Resources:
Create Flash Animations Entirely in Illustrator
Illustrate and Animate a Bouncing Ball
Kirupa – Flash & ActionScript Tutorials
AdobeTV – Learn Flash CS5 Professional
Adobe After Effects
AE is a beast of a program; it’s like the Photoshop of video. It’s used for 2D & 3D motion graphics, editing, compositing, post-production and special effects for video, TV and film. And like Photoshop it can be used to create entire projects from start to finish, but its real strength is in manipulating and compositing assets made by other means, such as Illustrator and 3D applications.
AE takes just about anything you can throw at it — AI, EPS, PSD, PNG, PDF, MP3, WAV, AVI, MOV, even camera movements from popular 3D software — and spits out a wide variety of video formats.
Although AE does allow you to control animations and effects with scripting, it only exports video meaning no interactivity with AE alone.
Resources:
Intro to After Effects
Build a Car Racing Scene from Photographs
Greyscale Gorilla – After Effects Tutorials
AE Tuts
AdobeTV – Learn After Effects CS5
Ai to Canvas
Ai to Canvas is a plug-in for Adobe Illustrator produced by developers at Microsoft. It enables Illustrator to export vector and bitmap artwork directly to a new HTML5 web element called a Canvas. Canvas-enabled browsers (latest versions of Firefox, Chrome, Safari, Opera) can then interpret and render that content for viewers.
The advantage over simply exporting images for the web is that artwork in a Canvas element remains vectored and can be animated and manipulated with JavaScript code. In fact, Ai to Canvas allows rudimentary animation simply by renaming your layers.
The fact that Canvas doesn’t rely on a browser plug-in (like Flash does) means that your animation & interactivity will run regardless of the viewer’s installed components. This means content presented in a Canvas element are viewable on Apple’s iPad, iPhone and iPod Touch, since they disallow browser plug-ins. I made this HTML5 demo to try it out.
Resources:
Ai to Canvas Plug-In for Illustrator
Ai to Canvas Samples & Documentation
Canvas Element Tutorials & Documentation
Use What You’ve Got
You don’t necessarily need a fancy program to create rich animated and interactive media. Photoshop is equipped with an animation palette suitable for creating flipbook type animations; Here’s a primer.
Failing that, try to be creative with the tools you have. Here are two web pages that feel animated, using only static assets:
Ben the Bodyguard
Lost Worlds Fairs: Atlantis
