Adding Interactivity and Creating Animations | Real World Adobe Illustrator CS2

Although it's nice to admire graphics on a Web page, nothing is quite like a graphic that invokes action on the viewer's part. It is images that move with animation or that contain clickable hotspots that can take a viewer to additional content that make the Web such an exciting medium. Although Illustrator is no replacement for an application like Macromedia Flash, you can still create Web graphics that come to life using your favorite vector graphics application.

Creating Image Maps

On the Web, a designer's job is far more than just to create a pretty graphic. Rather, a graphic must draw a viewer to action. The action could be as simple as switching to a different page, or as significant as generating a sale. In Illustrator, you can assign a URL to an object, which results in an image map. An image map is a region or portion of a graphic on which a viewer can click.

To create an image map, follow these steps:

Select an object on your artboard and choose Window > Attributes to open your Attributes palette.

Once the palette is open, choose Rectangle or Polygon from the Image Map pop-up menu (Figure 10.19). For objects that are rectangular, choose the Rectangle option. For images that fit any other shape, choose the Polygon option.

Figure 10.19. Older browsers only supported rectangular image maps, but just about all of today's browsers support polygonal image maps.

Once you've chosen an Image Map type, enter a URL in the field below the pop-up menu. For best results, it's best to enter the complete URL, including the http://.

Illustrator keeps track of all of the URLs that you enter, so if you're applying the same URL to multiple objects in your document, you can choose the correct URL from the URL pop-up (Figure 10.20). To test a URL to see if it is correct, click the Browser button; when you do, Illustrator launches your system's default browser and navigates to the chosen URL.

Figure 10.20. Once you've entered a URL into the Attributes palette, Illustrator remembers it so that you can easily apply it to other objects in your document.

Animation: Making It Move

There's no question that adding motion to Web graphics enhances their appearance and ability to garner the attention of viewers. Illustrator can build frame-based animations quite easily, although if you're looking for a high-end animation tool, you'd best look elsewhere. The techniques we discuss here are indicative of the simple animations you can create quickly and easily with Illustrator. You might still want to keep Macromedia Flash and Adobe After Effects on hand for more complex work.

Animation in SVG is not directly supported within Illustrator. In order to add animation to SVG files, you can either add the code by hand once you've exported the SVG from Illustrator, or you can use an SVG animation application, like Ikivo's Animator (www.ikivo.com).

The key to creating great animations in Illustrator is through the careful use of layers. There is no animation palette or timeline in Illustrator. Rather, Illustrator treats each top-level layer in your document as a frame in your animation. As you build your animation with each new layer, keep in mind the advice you learned throughout this chapter, especially with regard to using symbols (Figure 10.21). Illustrator allows you to create blends between symbols, and even objects with Live Effects applied. Refer to Chapter 9, Graphs, Distortion, and Blends, for detailed information on creating blends.

Figure 10.21. In this illustration, the airplane was defined as a symbol and then used in a blend across the width of the banner. The symbol on the far left was then set to 0% Opacity, resulting in a blend that makes the plane appear to fade in as it moves from left to right.

Once you've created the art for your animation, choose File > Export and choose the Macromedia Flash (SWF) file format. When you choose the AI Layers to Flash Frames setting, your resulting SWF file plays through each layer sequentially. Setting the animation to loop causes the animation to repeat endlessly (always fun). Refer to Chapter 12 for detailed information on the settings found in the Macromedia Flash (SWF) Export dialog.

Illustrator can only generate SWF animations. If you want to create animations using SVG, GIF, or other formats, you'll have to export your Illustrator artwork into other applications.