# How to initialize a button then swap it while clicking it?

**URL:** <https://forum.kirupa.com/t/how-to-initialize-a-button-then-swap-it-while-clicking-it/249069>\
**Category:** Uncategorized\
**Created:** [January 15, 2008, 12:24am UTC](https://forum.kirupa.com/t/how-to-initialize-a-button-then-swap-it-while-clicking-it/249069 "2008-01-15T00:24:23Z")\
**Posts on this page:** 1\
**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:** [January 15, 2008, 12:24am UTC](https://forum.kirupa.com/t/how-to-initialize-a-button-then-swap-it-while-clicking-it/249069/1 "2008-01-15T00:24:23Z")

</div>

I can’t figure out how to initialize a button then swap it while clicking it  
My buttons are loaded dynamically from a xml file.

For example:  
Home | Portfolio | Contact

I want to initialize on Home with a color(blue). When I click on another button, it will swap place. How can I do that?

Here’s my code so far:

var menuHolder:Sprite = new Sprite();  
addChild(menuHolder);

for each(var item:XML in this.parser.xmlArrayList) {   
var button = new Sprite();  
button.mouseChildren = false;   
button.buttonMode = true;   
button.name = “option”+count;

button.addChild(createUpStateBtn());  
button.addChild(createOverStateBtn());  
menuHolder.addChild(button);

button.addEventListener(MouseEvent.MOUSE\_OVER,displayMouseOver);  
button.addEventListener(MouseEvent.MOUSE\_OUT,displayMouseOut);  
button.addEventListener(MouseEvent.CLICK, displayMouseClick);

button.x = xPos; // Position  
xPos += button.width+1; // Give a space between each button  
count++;  
}

public function createUpStateBtn():Sprite {  
var up:Sprite = new Sprite();  
up.graphics.beginFill(0xCCCCCC);  
up.graphics.drawRect(0, 0, 80, 20);  
up.name = “up”;  
return up;  
}

public function createOverStateBtn():Sprite {  
var over = new Sprite();  
over.graphics.beginFill(0x00CCFF);  
over.graphics.drawRect(0, 0, BTN\_WIDTH, BTN\_HEIGHT);  
over.name = “over”;   
over.alpha = 0; // init to hide this color  
return over;  
}

public function displayMouseOut(event:MouseEvent):void {  
event.currentTarget.getChildByName(“over”).alpha = 0;  
}

public function \_displayMouseOver(event:MouseEvent):void {  
event.currentTarget.getChildByName(“over”).alpha = 100;  
}

public function displayMouseClick(event: MouseEvent):void {  
switch(event.currentTarget.name) {  
case “option0” :  
case “option1” :   
}  
}