Flash Notes: Simple Button Group

June 30th, 2008

After getting one button to work, you can get several to work together, in what’s called a “button group.” This is a pretty common UI situation where you have several buttons but each has a “disabled” state indicating it was the last one the user clicked on. The button stays in this state until the user clicks on another button. As an added feature, the instance name of the last button clicked appears on the Stage.

Download the files

To start, I created a button symbol on the Stage and set it up with keyframes labelled _up, _over, _down, and disabled. Each keyframe can have different art depicting these button states. I then added a layer for the button’s name with a textfield with the instance name “name_txt”. Lastly, there’s a stop action on the first keyframe of the button.

Button Group

Then copy four instances of the button on the Stage, and label them “button_1″, “button_2″, “button_3″, and “button_4″.

Now everything else can be done with ActionScript. Here’s an init function which sets up the listeners for the four buttons:

function init ():void{
for(var i:uint = 1; i < 5; i++){
this["button_" + i].name_txt.text = i;
this["button_" + i].buttonMode = true;
this["button_" + i].mouseChildren = false;
this["button_" + i].addEventListener(MouseEvent.ROLL_OVER, myButtonOver);
this["button_" + i].addEventListener(MouseEvent.MOUSE_DOWN, myButtonDown);
this["button_" + i].addEventListener(MouseEvent.MOUSE_UP, myButtonUp);
this["button_" + i].addEventListener(MouseEvent.ROLL_OUT, myButtonOut);
}
this.getChildByName("button_1").dispatchEvent(new MouseEvent(MouseEvent.MOUSE_UP));
}

init();

Note: “mouseChildren = false” is used to keep the button’s textfield from reacting to the mouse.

Note: The “dispatchEvent” line sends the mouse event “MOUSE_UP” to the button with the instance name of “button_1″. This is the equivalent of button_1.onRelease(); I added this so when the movie is first played, “button_1″ is triggered.

The most important mouse event function is “myButtonUp” – triggered when the button is clicked and released – which is defined as follows:

function myButtonUp (event:MouseEvent):void{
	reset_buttons();
	event.currentTarget.buttonMode = false;
	event.currentTarget.gotoAndStop("disabled");
	content_txt.text = event.currentTarget.name;
}

The myButtonUp function is assigned to all four buttons. When the user clicks and releases a button, five things happen:

All the buttons are “enabled” (the function “reset_buttons”).
The clicked-on button is set to not show the hand cursor by turning off buttonMode (note the use of “event.currentTarget” rather than “this”.
The clicked-on button is turned red.
The clicked-on button’s name is displayed in a textfield with the instance name “content_txt.text”.

Lastly, here’s the “reset_buttons” function:

function reset_buttons ():void{
	for(var j:uint = 1; j < 5; j++){
		this["button_" + j].buttonMode = true;
		this["button_" + j].gotoAndStop("_up");
	}
}

When called, it basically loops through the buttons and enables them by turning on button mode, and telling the button to go to its “_up” state.

Please subscribe to the Webomatica RSS Feed!