Adding Interactivity and Creating Animations
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:
| 1. | Select an object on your artboard and choose Window > Attributes to open your Attributes palette. | | 2. | 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.
 | | 3. | 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
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. |
|
لطفا منتظر باشید ...
