How to enable and disable a button with Actionscript

posted: 02-02-06
author: PrimeVector
website: http://www.free-webmaster-resource.com
views: 28567
comments: 3
total pages: 1
Download FlashMX2004 Source Files

Live Example

How to enable and disable a button with Actionscript

In this basic Flash tutorial i will show you how you can disable and enable a buttons functionality with a small bit of Actionscript. You can check the source files to see how i setup this test file, but in short what i did was:

I created a square with the rectangle tool. Then i converted it into a movieclip called "buttonTemplate" (select it and press F8, fill in the name and press ok). After i converted it i duplicated (drag it with "alt" selected) it 3 times on stage and made one of the three a bit bigger. I gave the 2 small ones an instance name of "buttonA" and "buttonB", the bigger one i gave an instance name of "buttonC". Then i just placed a bit of static text above the buttons describing what they do. (in the source file you will also see a bit of textbox filling ;))

Btw don't get confused by the term button. I always use movieclips, but because we are setting up button like functionality on those movieclips they act the same as buttons and therefore i call them buttons all the time. I can imagine that term like that can be a bit confusing when you start out in Flash. In Flash you can setup movieclip objects to do almost anything you want, but for some people it also good to have a visual way to setup button functionality so they don't convert to a movieClip but to an actual button which gives them the ability to visually set the button states like UP, OVER and DOWN. Because you are learning to do it the more powerful Actionscript way, you don't really need to use actual buttons. You can just use movieclips and give them button functionlity how you please with Actionscript, which is ofcourse way more powerful and quick to implement for more objects etc.

The Actionscript that makes it work

This first piece of the code enables you to press with your mouse on buttonA. You can target that button because it has an instance name "buttonA". You can check its name by selecting "buttonA" on Stage and look at it properties box, you will see that it has as name: "buttonA" You could also check the other names and you will see they will be "buttonB" and "buttonC". With the line "buttonC.enabled = true;" we set "buttonC" to be enabled, so when you now press on "buttonC", a trace is outputted and you will see a message on your screen.

buttonA.onPress = function(){
    buttonC.enabled = true;
}

This sets up the press functionality for "buttonB". And on press we disable "buttonC" and so no trace is outputted onto your screen when you press on "buttonC".

buttonB.onPress = function(){
    buttonC.enabled = false;
}

With this part we setup the press event for "buttonC" itself. When someone pressed on the button the trace function will output a message onto your screen as long as "buttonC" is enabled.

buttonC.onPress = function(){
    trace("hi there people");
}

The Full Code

buttonA.onPress = function(){
    buttonC.enabled = true;
}

buttonB.onPress = function(){
    buttonC.enabled = false;
}

buttonC.onPress = function(){
    trace("hi there people");
}

Please refer all questions to the forum as it is much easier to reply there instead of the comment box below. Thanks for reading and being here.