在 FLEX 中制作自定义皮肤的按钮

今天我们来说说FLEX中自定义皮肤按钮的制作。 首先这是一个按钮皮肤文件：
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
   
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.Button")]  //表明这是一个按钮皮肤
        ]]>
    </fx:Metadata>
   
    <!-- states -->
    <!--按钮的四种状态-->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
   

<!-- skinParts中定义的外观部件，表示按钮上的文字-->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
   
</s:SparkSkin>
在Flex4.0 API中，打开spark.components.Button可以看到：
这里定义了按钮的几种状态，不过是按钮的外观部分，指的是按钮上方的文字。
然后我为按钮分配填充背景：
<s:Rect id="buttonColor"
            top="0" bottom="0"
            left="0" right="0"
           radiusY="50" radiusX="50"
            width.over="900" width.down="700" >   
        <s:fill>
            <s:SolidColor color.up="#0074aa"
                          color.over="#64BC48"
                          color.down="#FF7256"/>
        </s:fill>
这时候我们在应用这个小皮肤的时候，会发现按钮上的文字有点难看。 这时候有一个小技巧可以把Label的颜色改成白色。

接下来，添加状态切换到按钮时的动画：
<s:transitions>
        <s:Transition fromState="up" toState="over">            
            <s:Resize target="{buttonColor}"   widthBy="100"/>            
        </s:Transition>
        <s:Transition fromState="over" toState="up">   
            <s:Resize target="{buttonColor}"   widthBy="-100"/>   
        </s:Transition>
        <s:Transition fromState="over" toState="down">   
            <s:Resize target="{buttonColor}" widthBy="-100"/>   
        </s:Transition>
    </s:transitions>
这里我发现了一个问题，就是我用这些效果来工作的前提是你的按钮宽度是固定的
<!--不能在此设定按钮的宽度-->
    <s:Button   label="定制按钮实例_Flex开发课堂"  
                       fontFamily="黑体"  fontSize="40"
                       top="10"  
                       skinClass="skins.really_defaultButton"
                       horizontalCenter="0" verticalCenter="0">
    </s:Button>
自定义皮肤的按钮在这里完成。

(Today, let's talk about the production of custom skin buttons in flex. First, this is a button skin file:
<? xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx=" http://ns.adobe.com/mxml/2009 " xmlns:s=" library://ns.adobe.com/flex/spark "
xmlns:fb=" http://ns.adobe.com/flashbuilder/2009 " minWidth="21" minHeight="21" alpha.disabled="0.5">
<!--  host component -->
<fx:Metadata>
<! [CDATA[
[hostcomponent ("spark. Components. Button")] / / indicates that this is a button skin
]]>
</fx:Metadata>
<!--  states -->
<!-- Four states of buttons -- >
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!--  The appearance part defined in skinparts represents the text on the button -- >
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkSkin>
In flex4 0 API, open spark components. Button can see:
Here, several states of the button are defined, but the appearance part of the button refers to the text above the button.
Then I assign a fill background to the button:
<s:Rect id="buttonColor"
top="0" bottom="0"
left="0" right="0"
radiusY="50" radiusX="50"
width. over="900" width. down="700" >   
<s:fill>
<s:SolidColor color. up="#0074aa"
color. over="#64BC48"
color. down="#FF7256"/>
</s:fill>
At this time, when we apply this small skin, we will find that the text on the button is a little ugly. At this time, there is a trick to change the color of the label to white.
Next, add the animation when the state switches to the button:
<s:transitions>
<s:Transition fromState="up" toState="over">            
<s:Resize target="{buttonColor}"   widthBy="100"/>            
</s:Transition>
<s:Transition fromState="over" toState="up">   
<s:Resize target="{buttonColor}"   widthBy="-100"/>   
</s:Transition>
<s:Transition fromState="over" toState="down">   
<s:Resize target="{buttonColor}" widthBy="-100"/>   
</s:Transition>
</s:transitions>
Here I found a problem that I use these effects to work on the premise that your button width is fixed
<!-- The width of the button -- > cannot be set here
< s: button label = "custom button instance _flexdevelopment class"
Fontfamily = "bold" fontsize = "40"
top="10"  
skinClass="skins.really_defaultButton"
horizontalCenter="0" verticalCenter="0">
</s:Button>
The custom skin button is completed here.
)