The Flash Connection Make mine Actionscript 3.0!

On the previous page, we finished out with a simple website example. Clicking on each button would take you to the corresponding "page," or frame on the main timeline. However, you may want to give your buttons "disabling" behavior. Yeah, I know I wrote a tutorial on button disabling that uses classes. This, however, is going to be the quick version, for those cases where you want to program the behavior more directly.

Button disabling behavior means that if you are at the home page, for example, you want to disallow the home button from being clicked again. Whatever page you are at, you want the corresponding button to be disabled so that it cannot be clicked again. This scenario creates what might also be termed "radio buttons." When they are clicked, they are selected, and cannot be selected again until something else has been selected instead.

To do this is very easy. We already have code that uses a for loop to cycle through the array that holds the buttons. Each one is compared to the event.currentTarget to see which button was clicked. All we have to do is add code that disables that button, and perhaps includes some visual clue that the button can't be clicked on again.

To disable the button, we set its mouseEnabled property to false. This will cause the cursor to become an arrow instead of the hand cursor. For a further visual clue that the button is disabled, we will set its alpha to 0.5. At the same time, we need to enable all of the other buttons, and set their alpha back to 1, just in case one of them is the button that was formerly disabled. We can do this using an else block added to our if statement:

stop();
var clipArray:Array = [home_mc, about_mc, products_mc, services_mc, contact_mc];
var destArray:Array = ["home", "about", "products", "services", "contact"];
for (var i:int = 0; i < clipArray.length; i++) {
	clipArray[i].buttonMode = true;
	clipArray[i].addEventListener(MouseEvent.CLICK, clickHandler);
}
 
function clickHandler(event:MouseEvent):void {
	for (var i:int = 0; i < clipArray.length; i++) {
		if (event.currentTarget == clipArray[i]) {
			this.gotoAndStop(destArray[i]);
			clipArray[i].mouseEnabled = false;
			clipArray[i].alpha = 0.5;
		} else {
			clipArray[i].mouseEnabled = true;
			clipArray[i].alpha = 1;
		}
	}
}

So you can see that when the buttons in the clipArray are cycled through with the for loop, something happens to every one of them. If the button happens to be the one that was clicked, it is disabled. If not, the else block handles it, and the button is enabled. There is one last little thing. When the application first begins, the home page is on the screen, and so the home_mc button should really start out in a disabled state. So add these lines to the end of the code:

home_mc.mouseEnabled = false;
home_mc.alpha = 0.5;

With those changes in place, here is how the application behaves now:

website_simple_button_disabling.fla

That concludes this tutorial. I hope you can now see some of the possibilities for using arrays in your programming.