Create Rollover Buttons Using ActionScript

If you have been looking for an easy way to create cool looking and easy rollover buttons in Flash for your website’s navigation menu, I have provided a tutorial below that you can follow to make the text in your menu stand out when users hovering their mouse over the menu items. This will add a sophisticated, colorful, and interactive way to include Flash into your website.

Step 1: Create a New Flash Document

When Flash loads, create a new Flash document and set the height and width of your stage to the size that you want your menu to be on your website. For this tutorial, I will be setting the stage perimeter to 400(W) x 100(H). This can be changed by clicking on the “Size” button in your Properties Inspector.

After you have adjusted the size of the stage in the Properties Inspector, the stage will now appear as a horizontal bar (shown below).

Step 2: Create Menu Buttons

Once the stage size has been set, you can now add buttons to your Flash stage. To do this, use the “Text” tool on the Toolbar and drag a zone where you would like your text to be, and then enter the text you would like to appear as your button. Do this for all of the buttons that you would like to appear on your website’s navigation menu. For this tutorial, I have created: Home, About Us, Testimonials, and Contact Us.

After you have completed all of your labels on the stage, we will need to convert them over to buttons. To do this, click once on one of the labels that you have created and then press the F8 key. This will load the “Convert to Symbol” window.

Within the “Convert to Symbol” menu, enter the title of the button you have selected (e.g. Home), and then select the “Button” option from the Behavior list. After this has been done, click on the OK button, and the label that you have created will be converted to a button. Do for this for all of your labels, changing the name field to its respective title.

After all of the labels have been converted to buttons, click once on each of the buttons and within the Properties Inspector and within the “Insance Name” textbox, enter a one-word name for the button you created. For this tutorial, I will be naming my buttons with “button” at the end of them (e.g. homebutton, aboutbutton, etc.)

Step 3: Applying the Code

The buttons on your menu are now ready for you to enable their interaction. This will be done using a code called ActionScript, and without this code, your buttons will not function or have any rollover ability. To assign code to each of the buttons, click once on one of the buttons that you would like to start entering code into and input the code provided below into your Actions Inspector. If the Actions Inspector is not open, Click on the arrow beside the “Actions – Button” bar located near the bottom of your Flash window.

In this tutorial, I will be starting with the “Home” button, and using the “homebutton” instance name in the code below. I will also be using the color black (0x000000) as my mouse off color, and red (0xff0000) for when my mouse moves over the button. Please enter the following code in the Actions Inspector for the “Home” button.

on (rollOver) {
      var chcolor = new Color(homebutton);
      chcolor.setRGB(0xff0000);
}

on (rollOut) {
      var chcolor = new Color(homebutton);
      chcolor.setRGB(0x000000);
}
on (release) {
      getURL(“http://www.yourhomepage.com/index.html”, “_self”);
}

Add the code above to each of the buttons that you have created. Be sure to change the following in the Actions Inspector for each of the individual buttons:

  • var chcolor = new Color(homebutton); – Replace the homebutton value with the “Instance Name” that you assigned in the Properties Inspector
  • chcolor.setRGB(0x000000); – Replace the color code with colors that best suit the color scheme of your website. I have provided a list below of the color codes that you can substitute.
  • getURL(“http://www.yourhomepage.com/index.html“, “_self”); – Replace the URL between the quotes with the URL of the page that you would like the user to be directed to when the specific button is clicked.

Colors:

  • Magenta – 0xff00ff
  • Black – 0x000000
  • Red – 0xff0000
  • Blue – 0x0000ff
  • Light Blue – 0x00c0c0
  • Green – 0x00c000
  • Gray/Silver – 0x090909

Step 3: Testing and Exporting

To test the navigation menu that you have just made, press Crtl + Enter on your keyboard, or select “Test Movie” from the Control menu. A version of your navigation menu will appear for you. If the buttons do not activate, please check the code in your Actions Inspector, or leave a comment at the bottom of this post and I will gladly assist you.

To save this movie as an .SWF file to use in your website, select the “Export Movie” option from the File menu and save your file in the folder where your website files are. You will then be able to use your new navigation menu in your website.

Please be sure to leave any feedback, questions, or comments about this tutorial in our comments section below.

Published
Categorized as Flash

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment