Adding Interactivity

Now we get to the fun part: making web graphics interactive. One of the powers of the World Wide Web is the capability to create engaging websites that appeal to users. This not only makes surfing the Web fun, but it also aids in creating websites that are more user-friendly and more useable, and that help in selling products or services.

You can add different levels of interactivity to web graphics using ImageReady CS2. Image maps enable you to specify certain areas or hotspots in an image that allow users to click them to link to other pages or websites. Think of this almost as a button that you can place just about anywhere. For example, you might create an image map so that when a user clicks on the eye or nose of a portrait, different pages are loaded. Animation allows images to move, change color, or change appearance. Finally, rollovers have the capability to change graphics as a user interacts with them. An example of a rollover is a button that lights up when a user moves the mouse over it.

Image Maps

Creating an image map in ImageReady is easy. You can create three kinds of image map shapes, each with a different tool. The Rectangle Image Map tool draws image maps that are rectangular in shape. The Circle Image Map tool draws image maps that are circular in shape. The Polygon Image Map tool creates image maps that are irregularly shaped. After you've selected an image map tool (see Figure 6.23), draw an area on your document. Choosing Window, Image Map opens the Image Map palette (see Figure 6.24), where you can specify a URL for the image map as well as other settings, such as alt text or specific size dimensions.

Figure 6.23. Choosing from the three types of image map tools.

Figure 6.24. The Image Map palette.

Animation

Animation in ImageReady is frame based, meaning that the illusion of movement is achieved by displaying image after image in succession. You have complete control in ImageReady over how many frames your animation will have, and you can also control timing, such as how long each frame is displayed in a browser. All the settings necessary to create animations are in the Animation palette (see Figure 6.25), accessed from the Window menu.

Figure 6.25. The Animation palette.

By the Way

The Animation palette now also appears in Photoshop CS2 and works identically as it does here in ImageReady.

To add frames to a file, choose New Frame from the Animation palette fly-out menu, or click on the Duplicates Current Frame button at the bottom of the palette.

ImageReady also can help animate objects for you by using a process called tweening. The process of tweening, which comes from the word between, involves creating additional frames between two frames in an animation, changing them slightly. For example, if you had some text at the top of your image in one frame (see Figure 6.26), and then created a new frame and moved the text to the bottom of your image (see Figure 6.27), tweening those two frames would produce an additional frame between the two, with the text in the middle of the image (see Figure 6.28).

Figure 6.26. The first frame in an animation.

Figure 6.27. The second frame in an animation.

Figure 6.28. The tweened frame in the animation.

To tween frames in ImageReady CS2, select a frame and choose Tween from the Animation palette fly-out menu to get the Tween dialog box (see Figure 6.29). You can then specify to tween with the previous frame or the first frame, as well as specify the number of frames you want to add to your animation. More frames produce a smoother-looking animation but result in a larger file size. You can also specify what parts of your image and what attributes should be tweened.

Figure 6.29. The Tween dialog box.

You can use the controls at the bottom of the Animation palette to play the animation to see how it looks (see Figure 6.30).

Figure 6.30. The playback controls at the bottom of the Animation palette.

Under each frame in the animation is a pop-up menu that enables you to specify the duration of that frame (see Figure 6.31). As an animation plays, you can specify pauses as desired to make the animation play as intended. To get a real good idea of how the timing will play back, preview your image in an actual web browser by clicking on the Preview in Browser button on the toolbox.

Figure 6.31. Choosing a time duration for a frame in an animation.

Rollovers

If you've ever been to a website that had buttons that lit up when you ran your mouse over them, you know what a rollover is. To create a rollover in ImageReady, you use the Layers palette in tandem with the Web Content palette (see Figure 6.32). First, select a slice from the list of slices in the Web Content palette. Then click on the Create Rollover State button at the bottom of the palette. This adds an Over state to your slice. You can then use the Layers palette to turn on a different layer or to change the layer style for that new state.

Figure 6.32. The Web Content palette.

You can specify several different states for a slice. Each time you click on the Create Rollover State button, ImageReady adds a different kind of state for that slice:

• Over The Over state appears when a user places the mouse cursor over the slice.

• Out The Out state appears when the user moves the mouse cursor off the slice.

• Down The Down state appears when the user clicks the mouse on the slice and holds down the mouse button.

• Up The Up state appears when the user releases the mouse after clicking on the slice.

• Click The Click state appears when the user has clicked once on the slice.

• Selected The Selected state indicates that a user has clicked on a slice.