Home / Articles / Adobe Illustrator / 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


Create a Blend for Your Animation

Create a Blend for Your Animation

The general steps for creating a .swf animation are creating the document, adding content for the animation, and then exporting. Let's start with creating the document:

  1. Choose File > New. Choose Web from the New Document Profile menu. This action sets units at pixels and colors at RGB. We're going to create a banner, so change the width and height to 250 pixels. Click OK.
  2. With the document open, draw a square that covers a little more than half of the top of the artboard. This square will become the stage curtain when it's all the way down.
  3. Change the fill and stroke of the rectangle to black.
  4. Copy the rectangle and then choose Edit > Paste in Front to paste a copy on top of the original.
  5. With the Selection tool, make the copied rectangle much shorter by dragging the bottom-center anchor point upward. Stop when the rectangle in front is about 50 pixels in height. Change the color of this smaller rectangle to red.
  6. With the smaller rectangle still selected, select the Warp tool beneath the Width tool in the Tools panel. Drag up and down (releasing each time) on the bottom of the smaller rectangle to create a "ruffled" appearance like the bottom edge of a curtain (see Figure 4).
  7. Figure 4 Create the pieces for the curtain blend.

  8. Now we'll create a blend between the shapes. Select the Blend tool in the Tools panel, click the larger rectangle, and then click the smaller rectangle. With the blend object selected, double-click the Blend tool in the Tools panel to open the Blend Options dialog box. Choose Specified Steps from the Spacing menu. Change the number of steps to 14 and click OK (see Figure 5). This action creates a blend of 14 steps (shapes) between the original black rectangle and the smaller red rectangle.

Figure 5 Creating the blend for the curtain.

Now we'll test the animation to see it in action. To do this, we need to go through part of the process of exporting the animation to a SWF file. Follow these steps:

  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. This option exports the artwork on each layer to a separate SWF frame, creating an animated SWF.
  3. Select Clip to Artboard Size to export only the Illustrator artwork within the selected artboard's borders. Any artwork located outside the borders will be clipped (see Figure 6).
  4. Figure 6 Basic export options.

  5. Click the Advanced button. To get the blend to animate, select Animate Blends and In Sequence (see Figure 7). This option shows and then hides each part of the blend in order. Selecting the In Build option would add the next step of the blend to the animation without hiding the previous step.
  6. Figure 7 Advanced export options.

  7. Click Web Preview to open a browser and preview the animation (see Figure 8).
  8. Figure 8 The curtain animation should preview like this.

  9. Close the browser and return to Illustrator. Click Cancel to close the SWF Options dialog box.
3. Working with Layers for Background Content | Next Section Previous Section