|Page (1) of 3 - 04/18/02||email article||print page|
Fast, Simple Web Effects with Adobe IllustratorHow to create unique Web animations using Illustrator 10 and LiveMotion 2
Designers who work in Adobe Illustrator software are well familiar with its print design capabilities and vector graphics handling. What Illustrator users may not realize is that the power to create fast, easy Web animations is right beneath their fingertips. From a simple blend of two Bezier lines to twisted distortions of logos, text and images, Illustrator 10 generates layered graphics that can be dragged as-is into LiveMotion 2 for animation. Plus, new effects in Illustrator 10 translate directly into LiveMotion, retaining their transparency, layer and object names and correct bounding box areas. The integration between Illustrator and LiveMotion means that you can create sophisticated Web animations in less time and effort than might otherwise be required using other programs.
Here are a few examples of how to animate Illustrator files, regardless of your level of experience. For example, Illustrator experts who have never tried their hand at Web animation sometimes overlook the simple technique of animating a blend. Animation experts, on the other hand, may not be aware of new time-saving and creativity-boosting features for generating Web graphics using Illustrator 10. In either case, the following tips bring you up to speed quickly on building vector-based Web animations.
Technique 1: Create Morphing Animations using Blends
Here's a simple example. Draw two Bezier lines in Illustrator with the Pen tool, one with a yellow stroke, the other with a red stroke. Give each a very different shape, but ensure they have the same number of points. Do a Blend between the two in, say, 20 steps, then Expand the blend into separate shapes. In the Layers Palette, use the Release to Layers (Sequence) option to place the paths onto individual layers. Save, and drag the resulting Illustrator file into LiveMotion. Convert the layers into a sequence, and you've now created a morphing animation where one line melds into the other in shape and color.
Download the Adobe Illustrator project file here.
Take this blending technique to the next level when releasing the layers by using the Build option instead. When in LiveMotion, your animation not only morphs into the second object, but appears to ĎgrowÓ into it. Experimenting with this option can result in almost 3D-like morph animations. Try it and you'll be amazed with its simplistic, yet intricate, effects.
Download the Adobe Illustrator project files here and here.
Related Keywords:Fast, Simple Web Effects with Adobe Illustrator
Source:Digital Media Online. All Rights Reserved