Creating animated rollovers

You can create sophisticated rollover effects by animating the different states of the rollover. For example, you can create a rollover button that pulses with color while the mouse is over it, or that spins when clicked.

You create animated rollovers by creating the animation within the rollover's timeline, rather than within the composition's timeline. Adding a state to an object automatically makes that object a movie clip as well as a rollover, so you can create the animation with the object's timeline. However, to include a transformation (such as changing the rollover's position or rotating it) in an animation, you must make the rollover a movie clip group.

For information on movie clip timelines and movie clip groups, see Working with movie clips.

To create a basic animated rollover:

1. Choose Window > Timeline, or Timeline > Show Timeline Window, to display the Timeline window.
2. Select the object in the Composition window or in the Timeline window.
3. In the States palette, select or create a state for the animation.

Selecting a state for the animation

Notice that the Timeline window names both the rollover and its currently selected state.

4. Double-click the rollover's name in the Timeline window to open up its timeline.
5. Create a short animation using the Object Attributes or the Layers properties.

Animating properties in the Timeline window

Note: If you want the animation to loop continuously while the rollover state is active, click the Loop button in the lower left corner of the Timeline window.

To create a transformation-based animated rollover:

1. Choose Window > Timeline, or Timeline > Show Timeline Window, to display the Timeline window.
2. Select the object you want to work with in the Composition window or Timeline window.
3. Choose Object > Make Movie Clip Group.
4. In the States palette, select or create a state for the animation.

Notice that the Timeline window names both the object and its currently selected state.

5. Double-click the rollover's name in the Timeline window to open up its timeline.
6. In the Timeline window, expand the rollover to display the Transform, Object Attributes, and Layer properties.
7. Create a short animation by modifying any of these properties, including transformation properties, such as Scale or Opacity.

Animating transformation-based properties in the Timeline window