Flex4之制作具有光泽的Button按钮
Flex4之制作具有光泽的Button按钮
Flex4.0较之Flex3.0的一大特点就是：皮肤与组件分离。Flex4.0让你能过更自由的去独立设计组件的皮肤，而不是通过CSS。今天我和大家分享一下如何利用Flex4.0中skinClass制作具有光泽的Button组件。
图示如下：
buttonSkin.mxml:
<?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the Spark Button component.
@see spark.components.Button
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<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[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/* Define the skin elements that should not be colorized.
For button, the graphics are colorized but the label is not. */
static private const exclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
// var cr:Number = getStyle("cornerRadius");
//
// if (cornerRadius != cr)
// {
// cornerRadius = cr;
// shadow.radiusX = cornerRadius;
// fill.radiusX = cornerRadius;
// lowlight.radiusX = cornerRadius;
// highlight.radiusX = cornerRadius;
// border.radiusX = cornerRadius;
// }
//
// if (highlightStroke) highlightStroke.radiusX = cornerRadius;
// if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
// if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
// private var cornerRadius:Number = 2;
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Ellipse width="100%" height="100%">
<s:fill>
<s:RadialGradient focalPointRatio="0.7" rotation="90">
<s:GradientEntry color="0xffffff" color.over="0xffffff"/>
<s:GradientEntry color="0xcccccc" color.over="0x68cff0" />
<s:GradientEntry color="0x818286" color.over="0x0c96d5"/>
</s:RadialGradient>
</s:fill>
<s:filters>
<s:GlowFilter color="0xcccccc" color.over="0x818286" blurX="15" blurY="15" inner="true"/>
</s:filters>
</s:Ellipse>
<s:Ellipse width="70%" height="50%" top="3" horizontalCenter="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xf1f1f1" alpha="0.8"/>
<s:GradientEntry color="0xf1f1f1" alpha="0.2"/>
</s:LinearGradient>
</s:fill>
</s:Ellipse>
<!-- layer 8: text -->
<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<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>
