<?xml version="1.0" encoding="utf-8"?>
<mx:Button 
    
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="initializeHandler(event)"
    added="onAdded(event)"
    
    >
    
    <mx:Metadata>
    
        Style"iconUpTint", type="uint", format="Color", inherit="yes")]
        Style"iconOverTint", type="uint", format="Color", inherit="yes")]
        Style"iconDownTint", type="uint", format="Color", inherit="yes")]
        Style"iconDisabledTint", type="uint", format="Color", inherit="yes")]
        Style"iconSelectedUpTint", type="uint", format="Color", inherit="yes")]
        Style"iconSelectedOverTint", type="uint", format="Color", inherit="yes")]
        Style"iconSelectedDownTint", type="uint", format="Color", inherit="yes")]
        Style"iconSelectedDisabledTint", type="uint", format="Color", inherit="yes")]
            
    </mx:Metadata>
    
    <mx:Script>
        <![CDATA[
        
            import mx.events.FlexEvent;
        
            import mx.core.IFlexDisplayObject;
            import flash.geom.ColorTransform;
            
            private var upTint:ColorTransform = new ColorTransform();
            private var overTint:ColorTransform = new ColorTransform();
            private var downTint:ColorTransform = new ColorTransform();
            private var disabledTint:ColorTransform = new ColorTransform();
            
            private var selectedUpTint:ColorTransform = new ColorTransform();
            private var selectedOverTint:ColorTransform = new ColorTransform();
            private var selectedDownTint:ColorTransform = new ColorTransform();
            private var selectedDisabledTint:ColorTransform = new ColorTransform();
            
            //--------------------------------------------------------------------
            protected function onAdded(event:Event):void
            {
                if(event.target == getChildByName('icon')) getChildByName('icon').transform.colorTransform = upTint;
                if(event.target == getChildByName('upIcon')) getChildByName('upIcon').transform.colorTransform = upTint;
                if(event.target == getChildByName('overIcon')) getChildByName('overIcon').transform.colorTransform = overTint;
                if(event.target == getChildByName('downIcon')) getChildByName('downIcon').transform.colorTransform = downTint;
                if(event.target == getChildByName('disabledIcon')) getChildByName('disabledIcon').transform.colorTransform = disabledTint;
                if(event.target == getChildByName('selectedUpIcon')) getChildByName('selectedUpIcon').transform.colorTransform = selectedUpTint;
                if(event.target == getChildByName('selectedOverIcon')) getChildByName('selectedOverIcon').transform.colorTransform = selectedOverTint;
                if(event.target == getChildByName('selectedDownIcon')) getChildByName('selectedDownIcon').transform.colorTransform = selectedDownTint;
                if(event.target == getChildByName('selectedDisabledIcon')) getChildByName('selectedDisabledIcon').transform.colorTransform = selectedDisabledTint;
                
            }
            //--------------------------------------------------------------------
            protected function initializeHandler(event:FlexEvent):void
            {
                upTint.color = getStyle('iconUpTint')? getStyle('iconUpTint') : 0x5c5c5c;
                overTint.color = getStyle('iconOverTint')? getStyle('iconOverTint') : 0x111111;
                downTint.color = getStyle('iconDownTint')? getStyle('iconDownTint') : 0x111111;
                disabledTint.color = getStyle('iconDisabledTint')? getStyle('iconDisabledTint') : 0xd3d3d3;
                selectedUpTint.color = getStyle('iconSelectedUpTint')? getStyle('iconSelectedUpTint') : 0xe5e5e5;
                selectedOverTint.color = getStyle('iconSelectedOverTint')? getStyle('iconSelectedOverTint') : 0xe5e5e5;
                selectedDownTint.color = getStyle('iconSelectedDownTint')? getStyle('iconSelectedDownTint') : 0xe5e5e5;
                selectedDisabledTint.color = getStyle('iconSelectedDisabledTint')? getStyle('iconSelectedDisabledTint') : 0xe5e5e5; 
            }

        ]]>
    </mx:Script>
    
</mx:Button>