Rollover Animations

Create The "Invisible" Button

We are going to add an "invisible" button - a button with just a hit state - no Up, Over, or Down. This is just a little trick to make the button disappear after a user rolls over it - the hit state will be the same size, shape and position as your animated MovieClip:

  1. Insert a new layer name it button
  2. Insert a blank keyframe at the end of your tween
  3. Draw an identical object on top of your MovieClip

Now right-click on your new shape and Convert to Symbol:

  1. Choose the Button type
  2. Name the object rollButton

If you test your work now, you'll probably be unhappy with the button sitting right on top of your nice animation. We want the button to function, but we don't want to see it. Double-Click to edit the button, then use your mouse to drag the Up keyFrame to the Hit keyFrame. You can also Cut and Paste frames if that sounds confusing, but first just look at the example below, which shows blank keyframes in all but the Hit state:

Return to the container movieClip and behold your "invisible" button. When you're in the Flash authoring environment you will be probably see a semi-transparent "ghost" that represents your Hit state. Of course that won't show up when you test your movie: