The Blog

Rollover buttons have become a standard in web pages because they provide an interactive way to guide the users through the website. For example, a website can remind the user of the current page simply by leaving a button in the same state as when it was pressed. When you convert an image to a button symbol in Flash CS3, Flash automatically provides rollover frames for the up, over, down and hit stages of buttons. Unfortunately, Flash assumes that you want the button to return to its original state after the button has been pressed. You can still create this effect by converting the button to a movie clip symbol rather than a button symbol. By entering a few simple codes from Actionscript 2.0, your button will remain in the down state informing the user of the current page.

1. Draw the button shape. Select the rectangle tool and draw the shape of your button on the stage. If you want rounded corners, press the down arrow key as you draw the rectangle.
2. Step 2

   Convert the shape to a movie clip. Select the shape; if the shape has a stroke, you will need to double-click on the shape. Select “Modify>Convert to Symbol.” Name the symbol “btn_mc” and select “Movie Clip.” Click “OK.” Type “btn_mc” in the “Instance Name” box in the “Properties” panel.

3. Step 3

   Create the button for the top state. Double-click on the movie clip to edit the movie clip. Change the name of “layer 1? to “Buttons.” Select the “Text Tool” and type the text for the button. Position the text on the button. Add additional effects to the button as desired.

4. Step 4

   Convert the button to a button symbol. Select the entire button and select “Modify>Convert to Symbol.” Name the symbol “button” and select “Button.” Click “OK.”

5. Step 5

   Create the button for the down state. Select the frame where you want the button in the down state to begin. Select “Insert>Timeline>Keyframe.” Adjust the button for the down state. For example, if you want to have the button faded, adjust “Brightness” in the “Color” drop-down menu in the “Properties” panel.

6. Step 6

   Label the frames. Insert a new layer called “Labels.” Insert a new keyframe for the frame that contains the top button and the frame that contains the down button. Select the keyframe for the top button. In the “Properties” palette, enter “_top” in the “Frames” box. Select the keyframe for the down button. In the “Properties” palette, enter “_down” in the “Frames” box.

7. Step 7

   Add actions to the button states. Insert a layer called “Actions,” and insert a new keyframe for the frame that contains the top button and the frame that contains the down button. Select “Windows>Actions” to display the Actions panel. Enter “stop();” in both keyframes.

8. Step 8

   Add actions to the movie. Press the “Back ” button next to “Scene1? to return to the button shape. Click on “btn_mc.” The actions panel should say “Actions-Movie Clip” in the left hand corner. Enter the following code:

   on (press)_root.mc_btn.gotoAndStop(“_down”);
   }
   on (release) {
   _root.mc_btn.gotoAndStop(“_down”);
   }

Related posts:

1. Changing Colors Using ActionScript
2. Close flash window button
3. Endless scrolling background in AS3
4. Run an external executable file (.exe) from your flash
5. Flash zoom in movie clip and re-scale