Question

我正在使用Flash视频播放器，它有一个控制栏的默认皮肤。现在我需要做的是，改变玩家的皮肤主要是用背景图像/颜色控制条。任何建议

<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}"/>

皮肤文件

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

Flex文档中有example处理此问题。

在你的皮肤类中：

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

在您的显示类中，假设您使用颜色值从网络服务处理程序调度DataEvent：

private function responseListener(e:DataEvent):void {
    btnBuy.setStyle("color", e.data);
}

flex 4 skinning按钮控件

皮肤文件

1 个答案: