Button Disabling using rollover state
I recently did a project where I needed to set up a system of button disabling like I described in the previous pages of this article. However, in this case, it was requested that each button's over state be used as the indicator that the button is disabled. That's when I discovered something interesting: the code I came up with wouldn't work right! It turns out that it wasn't enough to just set mouseEnabled to false for the disabled button, it was also necessary to set buttonMode to false.
By now I hope you realize that I'm not talking about the Button symbol, but rather a movie clip being used as a button. If you have been reading my other articles, you already know this. (Note: Whenever the word Button appears with a capital letter, it always means the Button symbol. Whenever it appears with an initial lowercase letter: "button," I almost always mean a MovieClip symbol being used as a Button. That's my own convention, anyway.)
Anyway, this seems to be a pretty common request--it would seem that a lot of people would like to know how to make a button "stick" in its over state when clicked. In fact, I believe a couple of visitors to this site have asked about that. Well, with the Button symbol, forget it. I don't know of any way. But if you have read my article on MCB's (movie clip buttons) you know that a MovieClip symbol can be made to behave like a button, and that a MovieClip can do anything that a Button can do, and much more! But nothing inside a Button symbol can be addressed with actionscript from outside the Button. So a Button cannot be told to gotoAndStop on its over frame.
If you didn't read my article on Movie Clip Buttons, you should take the time to do that now. Go read it and come back. If you have read it, then let's move on. Download the fla file at the top of this page. It's a modification of the button disabling file from the previous article. What I have done in this one is deleted the former MovieClip symbol that was being used as a button. Instead, I brought in the MCB symbol from the example file used in that article. Then I proceeded to create five new instances of it. I added code that gives each MCB instance a label on its face. Then I took out the code that alters each button's alpha, replacing it with code that makes each button gotoAndStop on its "_over" frame.
I also added code that sets each MCB instance's buttonMode property to false when it is clicked, and back to true again when it is a button that was not clicked. Everything else is still the same, and you will see what I mean about the buttonMode property if you comment out the lines that set it each time (lines 21, 24, and 32). It just doesn't work right without that additional touch.
stop();
home_mc.myText.text = "Home";
about_mc.myText.text = "About Us";
products_mc.myText.text = "Products";
services_mc.myText.text = "Services";
contact_mc.myText.text = "Contact Us";
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].buttonMode = false;
clipArray[i].gotoAndStop("_over");
} else {
clipArray[i].mouseEnabled = true;
clipArray[i].buttonMode = true;
clipArray[i].gotoAndStop("_up");
}
}
}
home_mc.mouseEnabled = false;
home_mc.buttonMode = false;
home_mc.gotoAndStop("_over");
Stay tuned for more interesting tutorials! Happy coding!
Jody Hall