flex 4 skinning button control - actionscript-3

Question

i am working on a flash video player, it is having a default skin for control bar. now what i need to do is, to change the skin of the player mainly control bar with the background image/color .
any suggestions
<mx:Button id="btnBuy" height="29" label="Watch Full Video" chromeColor="#B92420"
click="btnBuy_clickHandler(event)" color="#FFFFFF" fontFamily="Verdana"
fontSize="9" fontWeight="bold" paddingLeft="0" paddingRight="0"
skin="{BuyButtonSkin}"/>
Skin file
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
import controllers.DataController;
import mx.events.FlexEvent;
[Bindable]
[Embed(source='resources/images/ico-button.png')]
private var img:Class;
[Bindable]
[Embed(source='resources/images/ico-buy-hover.png')]
private var img2:Class;
[Bindable]
[Embed(source='resources/images/ico-button-wl.png')]
private var imgWL:Class;
[Bindable]
[Embed(source='resources/images/ico-buy-hover-wl.png')]
private var img2WL:Class;
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor color="0x000000" alpha="1" />
</s:fill>
</s:Rect>
<fx:Style>
.backgroundImage {
fontSize: 18;
fontStyle: italic;
contentBackgroundColor: #FFFFFF ;
backgroundImage: Embed("resources/images/ico-button.png");
backgroundImageFillMode: repeat;
}
</fx:Style>
<s:BorderContainer width="100%" height="100%" styleName="backgroundImage" borderAlpha="0">
</s:BorderContainer>
<!--<components:ImageRepeatCanvas includeIn="up, disabled, down" width="100%" height="100%"
repeatDirection="horizantal" id="BuyNowBtn" repeatImage="{DataController.white_label? imgWL : img}"
dropShadowVisible.up="false">
</components:ImageRepeatCanvas>
<components:ImageRepeatCanvas repeatDirection="horizantal" id="BuyNowBtnHover" repeatImage="{DataController.white_label? img2WL : img2 }" width="100%" height="100%" includeIn="over">
</components:ImageRepeatCanvas>-->

Answer 1

There's an example in the Flex documentation that deals with this.
In your skin class:
<fx:Script>
override protected function updateDisplayList(unscaleWidth:Number, unscaledHeight:Number):void {
// Push style values into the graphics properties before calling super.updateDisplayList
backgroundFill.color = getStyle("backgroundColor");
// Call super.updateDisplayList to do the rest of the work
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
</fx:Script>
...
<s:Rect left="0" right="0" top="0" bottom="0" >
<s:fill>
<s:SolidColor id="backgroundFill" color="0x000000" alpha="1" />
</s:fill>
</s:Rect>
And in your display class, assuming you dispatch a DataEvent from the network service handler with the color value:
private function responseListener(e:DataEvent):void {
btnBuy.setStyle("color", e.data);
}