This tutorial will teach you how to create a Flash menu which gives the user feedback on which page they are currently viewing by disabling the menu option for that page. This technique can be applied to any size of Flash presentation, no matter if there are three or 300 menu options.

Introduction

Everyone is familiar with the typical structure of a website navigation menu, whether it's horizontal across the top of the page or vertical down the the side. On a well-designed page, the menu link that would lead the visitor to the page they are currently viewing is disabled, as it helps to alleviate the sudden confusion that might come along with clicking a link and being presented with the exact same page again. In a Flash presentation, that same navigation design practice is equally important - and equally easy to construct. See the below example.

As you can see, when you click on one of these buttons, it brings you to the corresponding page of the presentation (which is this case is a frame of a movieClip symbol), and then the button you've just clicked is disabled. Let's construct this type of menu in Flash. To begin, please download the appropriate exercise file and open it in your Flash authoring tool:

» Flash 8
» Flash MX 2004

The exercise file itself is very simple. The top layer, labeled "a," is reserved entirely for ActionScipt and is locked with an empty stage. The middle layer, labeled "buttons," has three movieClip symbols on the stage with the instance names button1_mc, button2_mc, and button3_mc. The bottom layer, labeled "content box" has one movieClip symbol on the stage with the instance name contentBox_mc. All of these movieClip symbols have timelines with three keyframes, and they all have the stop(); action on the first frame of their timelines. This prevents them from playing and looping through their three keyframes when the movie loads.

Click on the keyframe in the "a," layer to select it, and open the Actions panel. You'll see a script already in the Actions pane, which looks like this:

I've already put this script in place to save you some typing. The code is pretty straight-forward. These are the the onRollOver, onRollOut, and onRelease event handlers for each movieClip symbol. When the mouse is rolled over one of these movieClip symbols, that symbol will move to the second frame of its timeline, which is just a brighter version of the gradient fill that was on the first frame. When one of these buttons is clicked on, two things happen: 1) the movieClip symbol moves to the third frame of it's timeline, which is a gray gradient; 2) the contentBox_mc symbol moves to the corresponding frame in its timeline. It's very basic stuff.

Now, to establish a baseline for where we stand in this project, test this movie by selecting Control > Test Movie. In your preview pane, you'll see that the movie essentially works, but when you move the mouse away from a button after clicking it, the button goes back to the first frame of its timeline, and it remains clickable.

Our goal with this tutorial is to configure this menu so that when a button is clicked on, it becomes disabled so that the user cannot click on the menu option which would take them to the page they are already viewing.

On the technical side of the house, the MovieClip Class has a property that controls whether or not it will execute actions that have been assigned to it: enabled. The enabled property of the MovieClip Class is boolean, which means that it can be set to true or false.

OK, so we're going to set the enabled property of these buttons to false when they are clicked on. Let's try that. Add the code this.enabled = false; into each of the onRelease event handlers:

When that's done, hit Control > Test Movie again to see how it behaves.

Well, the code that disables the button after it is clicked works just fine, but there is a problem - the button stays disabled even after you click another one! How do we make sure that the button which has just been clicked is the only one that is disabled? It's a timing trick.

What we are going to do is write a function that sets the enabled property of all three of these movieClip symbols to true, and call that function right before the line of code that disables the button which has just been clicked.

When these actions operate in this sequence, the speed of the ActionScript Virtual Machine (AVM) in Flash Player will execute the actions so fast that the user will see only the end result, and not the middle step of the process.

Below is a flowchart diagram of this ActionScript sequence:

There are two aspects that go into one of these buttons being enabled: the first is the actual enabled property of the movieClip symbol itself, and the second is the appearance of being enabled. In this case, that means that the movieClip symbol must be parked at the first frame of its timeline. These are the actions that this function will execute. Let's create this function and give it the name reActivateMenu. In your Actions pane, click above the comment line (3rd line of the script), and hit enter a couple of times to get some space. Create the reActivateMenu function as follows:

Earlier in the tutorial, we added this.enabled = false; into the onRelease event handlers for button1_mc, button2_mc, and button3_mc. The proper place to call this reActivateMenu function so that the timing trick works is at the beginning of those onRelease event handlers. Add the reActivateMenu function into those three onRelease event handlers as follows:

Test this movie again by selecting Control > Test Movie. Now you'll see that it works exactly like the example at the beginning of this tutorial. Whichever button has just been clicked is grayed out and disabled. See the next page for the conclusion to this tutorial.

Just in case your movie isn't working right, here is a reference copy of the completed script:

Conclusion

Let's talk about practical applications for this technique. The most obvious is that this could be used in the navigation menu of a Flash website. Indeed, I use it on my portfolio site. Another good application for this technique is for playback controls on a long Flash animation. You wouldn't want the viewer to be able to click Stop over and over while the movie is already stopped, right?

This technique can be incorporated into any Flash project where there is a menu composed of multiple movieClip symbols, no matter how lavishly animated they are or how many menu options there are. When attention to detail is key, taking the extra time to incorporate little usability tweaks really goes a long way.

discuss this topic to forum