flex 4 skinning button control

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>-->

You are already using a custom skin and setting a background and drawing operation. So you shouldn't ask how to do it since you are already doing it. What exactly are you asking? — BotMaster, Jul 07 '14 at 16:54
@BotMaster He wants to change the control bar color when the video color changes. — Zeus, Jul 08 '14 at 16:32
so 'with' means 'according to' and 'background image/color' means 'video background color'? If that's the case he needs to say so. Additionally if he wants to work on the main bar then why is he showing a button code? He should just say button. — BotMaster, Jul 08 '14 at 16:42
I'll probably have an answer for him but I can't post anything until the question is cleared out. — BotMaster, Jul 08 '14 at 16:48
@BotMaster yes i am currently using a custom skin, what i need to do is. swf player gets loaded, a service call sent for the video information, now in the response of the service call there are some skinning information like background color change. i need to change the background color of the control bar. sort of dynamic skinning e.g the player has a default skin. for one video i will send some color code in service call #ccff33 and for other video i will send other color code #ddff22 i need to effect the color code from server side on the player control bar background — Abuzer Firdousi, Jul 08 '14 at 19:25

score 1 · Answer 1 · answered Jul 11 '14 at 15:16

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);
}

flex 4 skinning button control

Skin file

1 Answers1