Getting Animated in Illustrator

Writing about animation is a little bit like dancing about architecture. Animation makes a lot more sense if you can see it happening. Fortunately, animating from Illustrator is so straightforward and clear that you don’t have to see anything actually move until you put it in motion.

The basic principle in creating Illustrator animations is almost embarrassingly simple. Ever have one of those flipbooks of drawings that you can riffle to make the pictures move? Same thing. Whenever you export an Illustrator file in the Flash format, you can export each layer as a separate frame in a movie. What you wind up with is a stack of layered images. When the frames play, the effect is as though you were clicking through the layers (showing the next one and hiding the previous one) really fast. Play begins at the bottom layer and goes upward in order to the top layer.

For a simple (but entertaining) example of this effect, the following steps demonstrate how to animate text to make it look as though it’s typing itself:

1. Create a new document in Illustrator.

2. Type some spontaneous foolishness.
For this example, we use Say what? so it will seem to be saying itself.

3. Highlight each letter with the Type tool and give each one a different Fill color.
All our letters are gray here because we are very boring people (in fact, this whole book is printed in full color, but we just couldn’t bring ourselves to use any color that wasn’t a shade of gray). But feel free to make every letter a different, vivid color.

4. In the Layers palette, duplicate the layer by dragging it on top of the Create New Layer button.
The Create New Layer button is the second button from the right at the bottom of the Layers palette. We duplicated the layer eight times, once for each letter, plus one extra. The idea is to keep duplicating layers until you create one more layer than the number of letters you have.

5. Hide all layers except for the second layer from the top by clicking the View button.
The View button (the eyeball icon) sits to the left of the layer name in the Layers palette.

6. Highlight the last letter in the text and press the Delete key.
In our case, we deleted the question mark.

7. Hide all layers except for the third layer from the top and delete the last two characters.
We got rid of the question mark and the letter t.

8. Hide all layers except for the fourth layer from the top and delete the last three letters.
We exterminated the question mark, the letter t, and the last letter a.

9. Keep going down through the layers in this way, deleting one more letter each time until only one letter remains in the second layer from the bottom and the bottom layer is blank.

10. Show all the layers.
Hidden layers won’t export to the Flash file.

11. Choose File➪Export, and after the Export dialog box appears, select the Flash (SWF) format.
When you name your file, make sure that its name ends with the .SWF extension. Flash files have a hard time playing when they don’t have that extension (even on a Mac).

12. Click Export.
The Flash (SWF) Format Options dialog box appears.

13. In the Export As box at the top of this dialog box, choose AI Layers to SWF Frames.
Because this animation has few frames, use a slow frame rate, such as 3 frames per second (fps). For a more dynamic animation, create more layers and use a faster frame rate. Select the Generate HTML check box.

Otherwise, leave the remaining settings as they are. You can now integrate your SWF more easily by generating a file that includes HTML code. This will allow your SWF file to be viewed at the correct original size in the browser; otherwise, your file will fill the browser window. It also eliminates the need for further editing of code to integrate your file into your Web site.

14. Click OK.

15. Test your animation by opening it in your Web browser.
If the animation doesn’t play, you may not have the necessary Flash plug-in installed. Go to www.adobe.com to find instructions on downloading and installing the plug-in for your browser.