Home / Articles / Adobe Creative Suite / Creating Flash Animations in Adobe Illustrator CS5

Creating Flash Animations in Adobe Illustrator CS5

Article Description

Brian Wood, contributor to Adobe Illustrator CS5 Classroom in a Book, demonstrates a handy technique for animating Illustrator artwork or creating simple animations without the help of Flash.

Like this article? We recommend

Adobe Illustrator CS5 Classroom in a Book

Adobe Illustrator CS5 Classroom in a Book


Working with Layers for Background Content

Working with Layers for Background Content

The next step is to introduce layers to the animation. As I mentioned earlier, you can use layers to animate content, but right now we're going to create a layer to hold background content in the animation. That is, we'll create content that will show throughout the animation–without changing.

  1. In the Layers panel, double-click the first layer (Layer 1) and change its name to curtain.
  2. Create a new layer named background beneath the curtain layer.
  3. Add content that won't move and will be present in all frames of the animation. Figure 9 shows what I added: the silhouette of an audience, a movie screen, and a background. Notice that the movie screen I created (the white rectangle) extends below the final shape of the rectangle "curtain" blend.
  4. Figure 9 Background content added to the artboard.

Now test the animation again:

  1. Choose File > Export. In the Export dialog box, choose a folder and name for the file, and choose Flash (swf) from the Format menu. Click Export.
  2. In the SWF Options dialog box, choose AI Layers to SWF Frames from the Export As menu, select Clip to Artboard Size, and then click the Advanced button.
  3. Select Animate Blends and In Sequence, as before.
  4. This time, you want the background content on the layer named "background" to show throughout the animation, so select Export Static Layers to tell Illustrator to export that layer as static content. Then select the background layer in the list below that selection. You can select more than one layer in the list if you want more layers to be static content.
  5. Choose Top Down from the Layer Order menu to have the animation start with the topmost layer in the Layers panel and work its way down the layer order (see Figure 10).
  6. Figure 10 Advanced Export options for testing the revised animation.

  7. Click Web Preview to open a browser and preview the animation.
  8. After previewing, close the browser and return to Illustrator. Click Cancel to close the SWF Options dialog box.
4. Adding a Layer-Based Animation | Next Section Previous Section