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
Glad to see you finally got the video up on here.
I dabbled a little bit in my last semester at Academy of Art University with transfering Adobe Illustrator files into Flash. It is somewhat tricky if the files you are using contain complex shapes (like clipping masks) or gradients.
One of the solutions I found that mostly works with a bit of tweaking to preserve the appearance of these shapes when imported into Flash is using the “Flatten Transparency” menu under the “Object” pull down menu. Keep all the boxes selected including preserve alpa transparency and it should work. Again, it might take some tweaking, but doing this first in Illustrator can save you a headache when working in Flash after your hard work in Illustrator.
Here is the project that I used it for (I’m still pretty new to Flash so the project isn’t all that fancy or necessarily smooth). http://megaswf.com/serve/85372/
@Steven,
Sorry forgot to credit you for that link. It’s awesome!
That’s a great tip, I’ll definitely give it a shot next time I’m moving from Illustrator to Flash. It’s little things like that you’d think Adobe would have taken care of, since they make both programs.
Nice Flash project in any case!
Loving this post James, right up my street.
I use a range of packages to get desired effects and an efficient work flow, and I’ve always sworn by a couple of plug-ins, my main and first love is FILTERiT, I don’t even know if Cs5 has the the features this has offered me all these years , but it’s defiantly an animation life saver (for me anyway…)
Mark.
question regarding, how to move these letters separately for motion graphics is there a plugins to do this motion, have a logo with letters how to do that? should I separate each letter in layer then animate manually is this is the process.