How to Create a Macromedia Flash Navigation Menu

Creating a navigation menu in Flash allows for a multitude of interactivity options for your web site or project.

Macromedia Flash provides a multitude of publishing options for interactivity and multimedia projects. A major benefit to Flash is the interactivity in the navigation of a project or site. An object or media asset in the project may be converted to a navigation button using a few simple steps and can add multiple layers of user interaction to your project. We will use basic ActionScripting in the tutorial, and a basic familiarity with Flash is recommended for this tutorial. Adobe provides a multitude of tutorials specific to ActionScripting on their web site and introductory tutorials to this advanced animation program.

Things You'll Need

• Flash project files with a .fla extension

Instructions

1. Open your FLA project file in Flash and select the Layer you will be working in to create your navigation. If the following Layers do not exist, add them into the Timeline. Go to "Insert"> "Timeline"> "Layer" and label it "Navigation". Repeat the same process and label this Layer "Actions". Using the Selection Tool, click on the "Actions" Layer in the Timeline and hold the button on the mouse and drag the "Actions" Layer to the top of the Timeline and place the "Navigation" Layer underneath "Actions."

2. Create an object to convert into a Button for your navigation. Go to the Tool Bar and select the Rectangle Tool. Take the mouse and click and drag a box to the appropriate size and shape for your navigation. Any shape, using the rectangle, square or oval tools, will suffice for this step.

3. Use the Selection Tool and highlight the object created in the previous step. Once highlighted, the object will have a blue outline.

4. Right-click on the object and select the "Convert to Symbol" option. In dialogue box, name the Button according to its function, such as Home_button, for easy reference in the Library. In the same box, select "Type" > "Button" and then "OK." The remaining items in the dialogue box are used for more advanced programming options.

5. Add the intended navigation commands to your button using ActionScripting. Select the "Button" on the Stage with the Selection Tool and go to "Window" > "Actions" and add the appropriate programming language to the Button. A common navigation command for your button will direct the user to another frame or page in the site or to an external URL;
   on (release) {
   getURL("http://www.yoururlhere.com");

   }

   or
   on (release) {
   gotoAndPlay(insert frame number);
   }

   You must tell the Playhead where to go on the Timeline using ActionScripting to display the proper page for your navigation. By inserting the Frame Number in the parenthesis after the "gotoAndPlay" command in your ActionScripting, you are telling the Playhead to go to this Frame and display the frame on the Stage, which is a page in your website.

6. Select the "Actions" Layer and place the cursor on the first Frame. Go to "Windows" > "Actions" and add the following script to the frame;
   stop ();
   The Stop script will tell the Playhead to stop on the appropriate frame until the user selects a navigation button sending them to another section of the web site. Add the Stop script to the "Actions" layer of each frame.

7. Return to the Stage by placing the Selection Tool on the Stage and clicking once. Repeat steps 2 through 5 until the desired number of navigation buttons is reached for your project.

8. Save your project in a master file with the .fla extension file. This file will be in a separate folder from your publishing files and will serve as a future reference for editing the site.

9. Go to "File" > "Publish Preview" > "Default" and to test your work in an offline browser. If troubles arise, check "Window" > "Compiler Errors" and troubleshoot according to the error dialogue in this box.

10. Keep the SWF, HTML and JavaScript files in the same folder and upload them to your server for publishing.

Tips & Warnings

• A myriad of options exist for applying logical actions to a button, so knowing the desired outcome and a familiarity with the programming code to achieve the desired functionality outcome is essential to the success of your interactivity project.

• As with any professional level software program, there are a multitude of ways to achieve the desired outcome. Have patience and use trial and error to find the best methods that work for your style of programming and your abilities.

• Use a diagram or sketch of your navigation prior to building the project in Flash. Use arrows or a series of lines connecting to the various pages in your project. Label each page on a sticky note or a large piece of paper and keep the labels in your line of vision while programming your buttons for easy reference.

References

• Adobe's Learning ActionScripting 3.0

Resources

• Adobe Flash Tutorial