<?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);/*把預設skin設為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");/*select後的skin*/
        
    }
    .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);
                //this.mybtn.setStyle("icon",pauseIcon);
            }else{
                event.currentTarget.setStyle("icon",playIcon);
                //this.mybtn.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>