<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" viewSourceURL="srcview/index.html">
<mx:Style>
Application {
backgroundColor: #ffffff;
backgroundGradientColors: #ffffff, #ffffff;
}
.myButton1{
borderColor: #cccccc;
themeColor:#eb1212;
}
.myButton2{
skin: ClassReference(null);
upSkin: Embed(source="upbtn.png");
overSkin: Embed(source="overbtn.png");
downSkin: Embed(source="downbtn.png");
disabledSkin: Embed(source="disbtn.png");
skin: Embed(source="downbtn.png");
}
.myButton3{
fillAlphas: 1, 1, 1, 1;
fillColors: #ffffff, #ffffff, #ffffff, #ffffff;
borderColor: #ffffff;
themeColor:#ffffff;
}
</mx:Style>
<mx:Script>
<![CDATA[
[Embed(source="play.png")]
[Bindable]
public var playIcon:Class;
[Embed(source="pause.png")]
[Bindable]
public var pauseIcon:Class;
private function clickHanlder(event:MouseEvent):void{
if(event.currentTarget.selected){
event.currentTarget.setStyle("icon",pauseIcon);
}else{
event.currentTarget.setStyle("icon",playIcon);
}
}
]]>
</mx:Script>
<mx:Button id="mybtn1" width="100" height="100"
toggle="true" buttonMode="true"
icon="{playIcon}"
styleName="myButton1"
click="clickHanlder(event)"/>
<mx:Button id="mybtn2" width="100" height="100"
toggle="true" buttonMode="true"
icon="{playIcon}"
styleName="myButton2"
click="clickHanlder(event)"/>
<mx:Button id="mybtn3" width="100" height="100"
toggle="true" buttonMode="true"
icon="{playIcon}"
styleName="myButton3"
click="clickHanlder(event)"/>
</mx:Application>