[Tutorial] Animated Gif Rollover effects

ci5co · Web Design Newbie Joined: Aug 18, 2004 Posts: 89

Editing layers in rollover states and animation frames (ImageReady)

Some changes you make to layers affect only the active rollover state or animation frame, while others affect every state and frame in which the layers are included.

State- and frame-specific changes Affect only the active animation frame or rollover state. By default, changes you make to layers using Layers palette commands and options—including layer opacity, blending mode, visibility, position, and style—are state- and frame-specific. However, you can apply layer changes to all states in a rollover and all frames in an animation using the unify buttons in the Layers palette. (See To unify layers for rollovers and animations (ImageReady).)

Note: Changes you make to layers in the Normal state or Frame 1—including layer opacity, blending mode, visibility, position, and style—affect all states or frames in which the layers are identical. For example, consider a slice that has a Normal state, an Over state, and a Down state. If the layers in the Normal and Over states are identical, and you apply a layer style in the Normal state, the layer style will also be applied in the Over state.

Inclusive changes Affect every state and frame in which the layers are included. Changes you make to layer pixel values, using painting and editing tools, color and tone adjustment commands, filters, type, and other image-editing commands, are examples of inclusive changes.

Creating a rollover (ImageReady)

Use the following general workflow to create a set of rollover buttons. You can make rollovers using layer-based slices or layer-based image maps.
Create the content for the Normal state.

If you are creating a rollover button, start by creating the button as you want it to look when the page is first loaded in a web browser. Make sure to put each button in a set of rollover buttons in a separate layer so that you can create a layer-based slice or image map.
If you plan to completely replace the contents of the Normal state (as opposed to modifying the layer’s style), create contents for other states in other layers.

If using image maps, make each button a layer-based image map.

Choose Layer > New Layer Based Image Map Area. You’ll need to add each state, including the first state. See To add a rollover state (ImageReady).

If using slices, make each button a layer-based rollover button.
Click the Create Layer-Based Rollover button on the Web Content palette. ImageReady creates an image-based slice and adds the Over state to the Web Content palette. See To create a layer-based slice for a rollover (ImageReady).

Add rollover states.

Create additional rollover states as needed, or change the default Over state automatically created by the layer-based rollover button. See To add a rollover state (ImageReady) and To change a rollover state (ImageReady).

Edit the layer content for the state to create the rollover effect.
Select the state you want to work with in the Web Content palette. You can apply and change layer styles for each state, change the position of content in each layer, or change the visibility of a layer. If you are replacing the contents of one layer with another, make the first layer invisible and the second visible for that state.

For more information on changes you can make to each state, see Editing layers in rollover states and animation frames (ImageReady).
You can use layer styles to create instant rollover effects. When working with layer-based slices, you can also save the series of states as a rollover style. (See To apply a rollover style to a layer (ImageReady).)
If you are creating a remote rollover, target the remote slice to the selected state.

Use the Pickwhip icon in the Web Content palette to point to the slice that contains the image for the remote rollover. See To create a remote rollover (ImageReady).

Optimize the image.

Choose a file format for the image and set optimization options in the optimization palette. See To optimize an image for the web.

Preview the rollover.

Preview the rollover in ImageReady as you create it. Then preview it in various web browsers used by your audience. See To preview rollovers (ImageReady).

Save the rollover.

Save a web version of your rollover using the File > Save Optimized command. Make sure that the output settings are set to save an HTML page along with the image files. ImageReady will write the JavaScript code for the rollover in the HTML page.

To add animation to a rollover state (ImageReady)

You can add multiple-frame animation to a rollover state. Adding animation to the Normal state causes the animation to play when the image is loaded in a web browser. Adding animation to another type of state causes the animation to play when a user activates the state.
In the Web Content palette, select the state in which you want to display an animation.

Make sure that you can see the Create Animation Frame button and the New Animation Frame command. If they aren’t visible, choose Palette Options from the Web Content palette menu, and then select Include Animation Frames.

Do one of the following to add frames to the animation:

Click the Create Animation Frame button in the Web Content palette or choose New Animation Frame from the palette menu.
Create frames in the Animation palette.

_________________
White Papers

Internet Marketing

Boku