How to Create Basic Menus in Flash 8

The most advanced and beautifully interactive websites online are created using Flash. A large part of what makes a successful website is the navigation through the site. Other considerations are whether the site is visually appealing, functional or easy to access and understand. Flash 8 allows users with just a rudimentary understanding of ActionScript to program an easy and basic navigation menu that can be added to any website. These step-by-step instructions for creating one such menu represent only one of literally hundreds of ways to accomplish this task.

Things You'll Need

• Macromedia Flash 8
• Basic knowledge and understanding of the Flash Interface and layout

Instructions

1. Once you have Flash 8 open, use the rectangle tool to draw a horizontal rectangle on the stage of any color fill and stroke. It should be long enough to where you can imagine dividing it up into the various number of buttons you plan to have.

2. Use the line tool to draw a vertical line from top to bottom of your horizontal rectangle. This will "split" and divide the rectangle into a part that will represent one of your buttons. Use the same technique to completely divide the rectangle into sections for all of your buttons. It doesn't matter how long the lines are, as you will delete them in the next step.

3. Double-click on a divided section of rectangle (I recommend the first section, farthest left). Press "F8" on your keyboard to turn this section into a "Movieclip" symbol. Name it "Button1." Select the next section by double-clicking (to get both the stroke and fill) and press "F8" on your keyboard to turn it into a Movieclip. Name it "Button2." Repeat this until all of your sections have been made into Movieclips. Delete the vertical lines you used to create the breaks.

4. Insert a new layer on the "Timeline" above the current layer (you can name the current layer if you wish by double-clicking where it says "Layer 1". On this layer, use the text tool to type the text above each button section such as "Home," "About," "Contact," etc. Lock this layer when you are done.

5. Select the first button and in the "Properties Inspector" give it an instance name of "Btn1". Reduce the button's alpha to 70% in the color area of the Properties Inspector. Name the second button "Btn2" and reduce its alpha to 70%, as well. Repeat this until all the buttons have been properly named and have had their alpha reduced.

Program Your Menu

1. Click on the "1st Keyframe" in the layers area and press "F9" to open the "ActionScript" Panel. Paste the following code:

   btn1.onRollOver = function(){
   this._alpha += 30;
   }
   btn1.onRollOut = function(){
   this._alpha -= 30;
   }

   You can press "Ctrl+Enter" on your keyboard to test this code. The button should darken when you put your mouse over it and return to 70% alpha when you move your mouse off it.

2. Now to make your button functional, insert the code below, replacing "YOUR_WEBPAGE" with your actual web address that you want the button to take visitors to. Note that your URL does have to have quotes around it.

   btn1.onRelease = function(){
   getURL("http://www.YOUR_WEBPAGE")
   }

3. Repeat the two steps above for each of the buttons in your navigation menu, replacing the name "Btn1" in the code with the actual name that you gave each of your buttons.

Tips & Warnings

• You can experiment with the code to find different methods of highlighting the buttons rather than changing the alpha.

• If your code does not seem to be working, make sure you are pasting it in to the FRAME of the document, and not onto the actual button movie clip itself. Have the "Keyframe" selected when you press "F9" to enter the script.

Resources

• Adobe Flash website