Creating rollover statesA rollover state is named by the event, such as a click or rolling the pointer over an area of the image, that triggers a change in the image or part of the image. ImageReady automatically assigns one of the following eight states to new rollovers: Over, Down, Click, Custom, None, Selected, Out, or Up. (For complete definitions of these states, see ImageReady Help.)Remote rollovers tie a rollover state in one slice to changes in a different slice. For example, the user could click a button (the activating slice) that would make a previously hidden graphic or text block (the remote slice) visible in another area of the Web page.Only user slices can have rollover states. However, you can choose Slices > Promote to convert an auto slice into a user slice, and then assign rollover states to that slice. Preparing the workspace and work optionsIf you've already completed other lessons in this book, then you've had some experience customizing the workspace. ImageReady has several predefined workspaces that you can use for specific kinds of work, one of which you'll use for this exercise.
Creating a rollover with warped textOne of the fun things you can do in ImageReady is to warp text shapes. For example, you can make the words appear as if they were painted on a three-dimensional object.In this exercise, you'll apply that warp as well as a rollover state to some text. The resulting text will appear on the fina213 image only when the user performs a specific action. Note Warping text is not the same as placing type on a path, which is a Photoshop feature. For information on how to arrange characters on geometric or freeform paths, see Photoshop Help. (That feature is not available in ImageReady.) Previewing a rolloverAlthough the end result of this project is a Web page, you can test the interactive behaviors of your slices in ImageReady. You do this by stepping out of working mode into preview mode. While you are previewing, some palettes, such as the Layers palette, are dimmed because you cannot select layers or make adjustments in those palettes in preview mode.
Creating rollovers that affect layer visibilityPerhaps one of the most common methods of animating a file is to change the visibility of different layers.In this design, the original version of the central image was fully colored instead of the heavily blue-toned version that you see in Normal state. Sections of the original version have been copied onto layers in this file, above the blue-version Background layer. The original-color sections line up perfectly with the blue image, so making them visible appears to brighten just that area of the image by removing the blue color cast.
Previewing layer-visibility rolloversNow it's time to test your rollovers by previewing them.
 |
لطفا منتظر باشید ...
) on that tab to fully expand the palette. Then drag it to the upper right corner of the work area, and switch its location with the Web Content palette.
Another important preparation is to make sure that the work settings for ImageReady are configured properly. Some of these can't be configured unless a file is open, so you'll open your start file now.
), and drag a rectangle around the words "Museo Arte," using the guides as a reference so that the slice borders snap to them.
) at the bottom of the Web Content palette. A new Over state rollover appears nested below the Museo Arte slice in the palette.
). On the Type tool options bar, click the Create Warped Text button (
). (If a dialog box appears warning you that editing will cause the layout to change, click OK.)
) or press Q to hide the slice boundaries and remove the ghosting appearance over the image.
) or press Y to activate preview mode.
). This means Menu Slices is part of a215 table.
Tables produce cleaner, more manageabl206 code. Each cell in a table can contain an image slice, as in our Menu Slices slice. The slices within the Menu Slices slice are called nested slices.
) button at the bottom of the palette to create a new Over state for it.
) by the Cell_1 layer.
) that appears in the symbol sets in the image window and slice listings in the Web Content palette, and also in the boxes next to the slice visibility symbols (
) The number of the slice. Numbers run sequentially from left to right and top to bottom of the image.(
) The slice contains image content.(
) The slice contains no image content.(
) The slice is layer-based (that is, it was created from a layer).(
) The slice includes at least one rollover effect.(
) The slice is a nested table.(
) The slice is a remote trigger (causes a change in a remote slice).(
) The slice is a remote target (changes in response to a user action in an associated remote trigger slice).(
) The slice is linked to other slices (for optimization purposes).
![[View full size image]](/image/library/english/13889_14inf05_alt.jpg;437237){kind=link}
![[View full size image]](/image/library/english/13889_14inf14_alt.jpg;437237){kind=link}