(Click your Refresh button to see the animation again)

Since the .SWF file format is VECTOR based, any VECTOR based animation made in Illustrator maintains its image quality at any resolution. This makes it very appealing to those who want to include animations on a web page as you can resize the animation without pixel distortion.

Let’s begin this tip by making a simple animation of the word “Illustratortips.com”.

Open a new document. In my example, I set the artboard dimensions to 400 pixels width and 40 pixels height. Double click on the ZOOM TOOL to bring the artboard to a workable size.

Select the TEXT TOOL and type the word you want to use in your animation. Position the word so that it is just outside the right side of the artboard. In the event the text size needs to be changed select the FREE TRANSFORM TOOL and resize the word to fit in the artboard or change the font size in the TEXT OPTIONS TOOL BAR.

With the word still selected, hit CTRL+C(PC)/COMMAND+C(Mac) to copy and then hit CTRL+V(PC)/COMMAND+V(Mac) about twenty times. You will notice that your word is pasted and stacked up on top of itself on the artboard.

Click and drag the top word from the stack using the SELECTION TOOL and place it where want your animation to end.

Chances are your words are not lined up horizontally so open the ALIGN PALETTE and from the ALIGN PALETTE MENU make sure the “ALIGN TO ARTBOARD” is checked. Click on the Vertical ALIGN CENTER button. This will center all the words horizontally in the middle of the artboard.

Return to the ALIGN PALETTE MENU and uncheck the “ALIGN TO ARTBOARD” choice. Use the SELECTION TOOL to select all the words and click on the HORIZONTAL DISTRIBUTE CENTER button. All of the words will be evenly spaced between the two outside words.

You will notice in the LAYERS PALETTE that all words are located on one layer. Remember in order to make an animation in Illustrator all objects need to be on separate layers.

Personally, I would find it far too tedious to manually copy and paste each word onto its own layer. Thanks to Illustrator this task can be automated by going to the LAYERS MENU and selecting RELEASE TO LAYERS (Sequence).

Each object is assigned a layer based on its stacking order within the layer on which it was created.

To make the animation a little more interesting, let’s make it look like it compresses a little when it gets to the end of the animation. To make it easier to see, toggle the visibility to OFF for all layers except Layer 1 and Layer 2. Drag Layer 2 onto the CREATE NEW LAYER button to make another instance of the word.

The newly copied word will be placed on top of the original word from Layer 2. Select this “new” word with the SELECTION TOOL and then click on the FREE TRANSFORM TOOL. Drag the right BOUNDING BOX handle to the left to compress the word a little.

COPY this transformed layer, PASTE, and compress the word a little more. Continue this until you are satisfied.

We want the word to spring back to its original size so . . . COPY, PASTE, and transform the word until it returns to its original size.

Toggle all Layers visibility to ON. Layers will not be included in the animation sequence if they are not visible.

Choose EXPORT from the FILE MENU to complete your animation.

You will be taken to the EXPORT window where you can name your file, choose a folder location, and format type. From the FORMAT OPTIONS DIALOG BOX choose Macromedia Flash (*.SWF). Click on EXPORT.

The EXPORT AS setting must be “AI LAYERS TO SWF FRAMES” on the FORMAT OPTIONS screen as shown below. You can also set Frame Rates, Animation Loop, Generate HTML Code (check this if you don’t have Flash Player installed on your computer), etc. You will need to experiment with these settings to determine your preferences. Click OK to save your creation.

If you have Flash Player go to the folder where you stored your file and double click on the .SWF file to see the animation. If not, you will need to double click on the HTML file (most recent browsers are capable of playing Flash animations).

There you have it . . . I hope this will help you think of new inventive uses for Illustrator animations!