在 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[
//表明这是一个按钮皮肤
]]>
</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[
/ / 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.
)
页:
[1]