# How to select the right button?

**URL:** <https://forum.kirupa.com/t/how-to-select-the-right-button/260909>\
**Category:** flash\
**Created:** [May 20, 2008, 11:48pm UTC](https://forum.kirupa.com/t/how-to-select-the-right-button/260909 "2008-05-20T23:48:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![qpixo](https://avatars.discourse-cdn.com/v4/letter/q/c4cdca/32.png) [@qpixo](https://forum.kirupa.com/u/qpixo)\
**Post date:** [May 20, 2008, 11:48pm UTC](https://forum.kirupa.com/t/how-to-select-the-right-button/260909/1 "2008-05-20T23:48:00Z")

</div>

Hi all,

Does anyone know how to keep track of which button is selected?  
I have 3 buttons and what I want to do is to change color button while selected it.  
For now on, when clicked is selected the whole 3 buttons.

I made this code but couldn’t make it selected to right button. Any helps might appreciated.

```auto

package 
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import caurina.transitions.Tweener;
	
	public class selectedButton extends Sprite
	{
		private var tabBtn:Array;
		private var button:buttonMC = new buttonMC();
		
		public function selectedButton()
		{
			tabBtn = new Array(button, button, button);
			initButton();
		}
		
		
		private function initButton():void
		{
			var xPos:uint = 0;
			var count:uint =0;
			
			for(var i=0;i<tabBtn.length;i++)
			{
				var button:buttonMC = new buttonMC();
				button.buttonMode = true;
				button.mouseChildren = false;
				button.name = "btn"+i;
				button.x = xPos;
				xPos += button.width+5;
				
				button.addEventListener(MouseEvent.MOUSE_DOWN, handleButton);
				button.addEventListener(MouseEvent.MOUSE_OUT, handleButton);
				button.addEventListener(MouseEvent.MOUSE_OVER, handleButton);

				addChild(button);
			}
		}
		
		
		private function handleButton(eventType:MouseEvent):void
		{
			var mc:MovieClip = eventType.target as MovieClip;
			switch(eventType.type)
			{
				case MouseEvent.MOUSE_DOWN :
					if(eventType.currentTarget.name == 'btn0') 
					{
						Tweener.addTween(mc, {_color:0x0000ff});
						mc.removeEventListener(MouseEvent.MOUSE_OUT, handleButton);
						mc.removeEventListener(MouseEvent.MOUSE_OVER, handleButton);
					} else if(eventType.currentTarget.name == 'btn1')
					{
						Tweener.addTween(mc, {_color:0x0000ff});
						mc.removeEventListener(MouseEvent.MOUSE_OUT, handleButton);
						mc.removeEventListener(MouseEvent.MOUSE_OVER, handleButton);
						
					} else if(eventType.currentTarget.name == 'btn2') 
					{
						Tweener.addTween(mc, {_color:0x0000ff});
						mc.removeEventListener(MouseEvent.MOUSE_OUT, handleButton);
						mc.removeEventListener(MouseEvent.MOUSE_OVER, handleButton);
					}
					return;
				case MouseEvent.MOUSE_OUT : 
					mc.buttonMode = false;
					Tweener.addTween(eventType.target, {_color:null, time:0.5, transition:"easeOutQuad"});
					return;
				case MouseEvent.MOUSE_OVER : 
					mc.buttonMode = false;
					Tweener.addTween(eventType.target, {_color:0xcccccc, time:0.5, transition:"easeOutQuad"});
					return;
			}
		}

```

---

<div class="post-metadata">

**Author:** ![Felixz](https://avatars.discourse-cdn.com/v4/letter/f/ecb155/32.png) [@Felixz](https://forum.kirupa.com/u/Felixz)\
**Post date:** [May 21, 2008, 10:24am UTC](https://forum.kirupa.com/t/how-to-select-the-right-button/260909/2 "2008-05-21T10:24:24Z")

</div>

U mean right Mouse button? It is impossible except contextMenu.  
And one tip:

```auto
button.addEventListener(MouseEvent.MOUSE_DOWN, handleButtonDown);
				button.addEventListener(MouseEvent.MOUSE_OUT, handleButtonOut);
				button.addEventListener(MouseEvent.MOUSE_OVER, handleButtonOver);

```

Splitting functions is better since u do not need to use switch.  
If u would create a dictionary or a local variable on buttons, ur handleButtonDown could be just

```auto
Tweener.addTween(mc, {mc.color});
//or Tweener.addTween(mc, {dict[mc]});
mc.removeEventListener(MouseEvent.MOUSE_OUT, handleButton);
mc.removeEventListener(MouseEvent.MOUSE_OVER, handleButton);

```

---

<div class="post-metadata">

**Author:** ![qpixo](https://avatars.discourse-cdn.com/v4/letter/q/c4cdca/32.png) [@qpixo](https://forum.kirupa.com/u/qpixo)\
**Post date:** [May 21, 2008, 1:43pm UTC](https://forum.kirupa.com/t/how-to-select-the-right-button/260909/3 "2008-05-21T13:43:12Z")

</div>

No, not the right Mouse Button.

I want to keep track of which button of my 3 buttons have been selected by assigning it with a different color. Like a currentButtonSelected and LastButtonSelected

[QUOTE=Felixz;2329040]U mean right Mouse button? It is impossible except contextMenu.  
And one tip:

```auto
button.addEventListener(MouseEvent.MOUSE_DOWN, handleButtonDown);
				button.addEventListener(MouseEvent.MOUSE_OUT, handleButtonOut);
				button.addEventListener(MouseEvent.MOUSE_OVER, handleButtonOver);

```

Splitting functions is better since u do not need to use switch.  
If u would create a dictionary or a local variable on buttons, ur handleButtonDown could be just

```auto
Tweener.addTween(mc, {mc.color});
//or Tweener.addTween(mc, {dict[mc]});
mc.removeEventListener(MouseEvent.MOUSE_OUT, handleButton);
mc.removeEventListener(MouseEvent.MOUSE_OVER, handleButton);

```

[/QUOTE]

---

<div class="post-metadata">

**Author:** ![Felixz](https://avatars.discourse-cdn.com/v4/letter/f/ecb155/32.png) [@Felixz](https://forum.kirupa.com/u/Felixz)\
**Post date:** [May 22, 2008, 10:21am UTC](https://forum.kirupa.com/t/how-to-select-the-right-button/260909/4 "2008-05-22T10:21:44Z")

</div>

> **[Button Click](https://www.kirupa.com/forum/showthread.php?t=297842)**
>
> Got a web design/development question or just want to hang out with the most awesome people on the planet? Drop on in!

---

<div class="post-metadata">

**Author:** ![qpixo](https://avatars.discourse-cdn.com/v4/letter/q/c4cdca/32.png) [@qpixo](https://forum.kirupa.com/u/qpixo)\
**Post date:** [May 24, 2008, 12:42pm UTC](https://forum.kirupa.com/t/how-to-select-the-right-button/260909/5 "2008-05-24T12:42:46Z")

</div>

Thanks a lot for this link, it’s very helpful!

Do you have an example applying with AS2?

[QUOTE=Felixz;2329581][http://www.kirupa.com/forum/showthread.php?t=297842[/QUOTE]](http://www.kirupa.com/forum/showthread.php?t=297842%5B/QUOTE%5D)

---

<div class="post-metadata">

**Author:** ![qpixo](https://avatars.discourse-cdn.com/v4/letter/q/c4cdca/32.png) [@qpixo](https://forum.kirupa.com/u/qpixo)\
**Post date:** [May 26, 2008, 2:24pm UTC](https://forum.kirupa.com/t/how-to-select-the-right-button/260909/6 "2008-05-26T14:24:39Z")

</div>

okay,

here’s what I did with my buttons, I also added a text field to it. For some reason, while clicking on each button the text field dissappears. The new color has been changed but the text field is now gone.

Does anyone know how to fix that?

```auto

package 
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.geom.ColorTransform;
	
	public class ButtonManager extends Sprite
	{
		private var buttonCurrentSelected:buttonMC;

		private static const SPACE:uint = 1;

		
		public function ButtonManager()
		{
			createButton();
		}
		
		private function createButton():void
		{
			for(var i:uint=0;i < 4;i++)
			{
				buttonCurrentSelected = new buttonMC();
				buttonCurrentSelected.buttonMode = true;
				buttonCurrentSelected.mouseChildren = false;
				
				buttonCurrentSelected.x = (buttonCurrentSelected.width + SPACE) * i;
				buttonCurrentSelected.addChild(createTextField(buttonCurrentSelected, "Button"));
				
				
				buttonCurrentSelected.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);

				addChild(buttonCurrentSelected);
			}
		}
		
		private function createTextField(button:MovieClip, buttonText:String):TextField 
		{
			var btnText:TextField = new TextField();
			btnText.autoSize = "left";
			btnText.selectable = false;
			btnText.defaultTextFormat = initFormat();
			btnText.text = buttonText;
			
			btnText.x = (button.width - btnText.width) / 2;
			btnText.y = (button.height - btnText.height) / 2;
			return btnText;
		}
		
		
		private function initFormat():TextFormat
		{
			var textFormat:TextFormat = new TextFormat();
			textFormat.font = "Arial";
			textFormat.size = 12;
			textFormat.color = 0xffffff;
			return textFormat;
		}
		
		private function changeButtonColor(color:uint, button:buttonMC):void
		{
			var colorType:ColorTransform = new ColorTransform();
			colorType.color = color;
			button.transform.colorTransform = colorType;
		}
		
		
		private function handleMouseDown(eventType:MouseEvent):void
		{
			trace(buttonCurrentSelected);
			if (buttonCurrentSelected) 
			{
				buttonCurrentSelected.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
				changeButtonColor(0x999999, buttonCurrentSelected);
			}
			buttonCurrentSelected = buttonMC(eventType.currentTarget);
			buttonCurrentSelected.removeEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
			changeButtonColor(0x0195fd, buttonCurrentSelected);
		}
	}
}

```