How to Format Rollover Images in Adobe Edge Animate CC

By Michael Rohde

Create individual rollover effects for the different elements that make up your image in Edge Animate. This can make your image respond to contact by the user. You don’t even need extra code to do this. Just use the Timeline and associate mouse-over actions to the elements.

To create a rollover effect, follow these steps:

  1. Create an element on the stage.

  2. Move the Playhead and Pin down the Timeline to where you want to start the rollover animation.

  3. Add the rollover over the element on the Stage and set the Visibility to On.

  4. Move the Playhead and Pin down the Timeline a few ticks and add a Stage action to Stop.

  5. Directly after the Stop action, turn the Visibility to Off for the rollover.

  6. Right-click the element and choose Open Actions, then choose mouseenter.

  7. From the right side, choose Play From. Set the code so that it starts to play in the point in the Timeline where you set up the rollover animation.

  8. Add a second action for mouseleave to Play From the start of the animation or another point.