t’s recommended to use same SDK version components in same file, so I skin a button in Flex SDK 4 using only Spark components.
In Halo we use to add an icon to a button using icon property:
<mx:Button width="120" icon="@Embed(source='ico/add-blue.gif')" label="New comment" />
In Spark we have to skin our button in order to put an icon on the button. I made a skin for a button with round corners and an icon that will be changed as well as background color on different states.
<?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" alpha.disabled="0.5"> <fx:Metadata> [HostComponent("spark.components.Button")] fx:Metadata> <fx:Script> [CDATA[ static private const exclusions:Array = ["labelElement"]; override public function get colorizeExclusions():Array { return exclusions; } ]]> fx:Script> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> s:states> -- UP SKIN--> <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="up" > <s:stroke> <s:Stroke color="#999999" alpha="1"/> s:stroke> <s:fill> <s:LinearGradient rotation="90"> <s:entries> <s:GradientEntry ratio="0" alpha="1" color="#EE9819"/> <s:GradientEntry ratio="1" alpha="1" color="#FAE38F"/> <s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/> <s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> s:entries> s:LinearGradient> s:fill> s:Rect> -- Over SKIN--> <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="over" > <s:stroke> <s:Stroke color="#999999" alpha="1"/> s:stroke> <s:fill> <s:LinearGradient rotation="90"> <s:entries> <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/> <s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/> <s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/> <s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> s:entries> s:LinearGradient> s:fill> s:Rect> -- DOWN SKIN--> <s:Rect radiusX="8" radiusY="8" width="120" height="30" includeIn="down" > <s:stroke> <s:Stroke color="#999999" alpha="1"/> s:stroke> <s:fill> <s:LinearGradient rotation="-90"> <s:entries> <s:GradientEntry ratio="0" alpha="1" color="#8EB3E7"/> <s:GradientEntry ratio="1" alpha="1" color="#DCEBFE"/> <s:GradientEntry ratio="0" alpha="1" color="#FFFFFF"/> <s:GradientEntry ratio="1" alpha="0" color="#FFFFFF"/> s:entries> s:LinearGradient> s:fill> s:Rect> -- UP ICON --> <s:BitmapImage source="@Embed('ico/add-blue.gif')" verticalCenter="0" left="5" includeIn="up" /> -- OVER ICON --> <s:BitmapImage source="@Embed('ico/add-green.gif')" verticalCenter="0" left="5" includeIn="over" /> -- DOWN ICON --> <s:BitmapImage source="@Embed('ico/add-red.gif')" verticalCenter="0" left="5" includeIn="down" /> -- Text SKIN--> <s:SimpleText id="labelElement" textAlign="center" verticalAlign="middle" lineBreak="toFit" truncation="1" color="0x000099" horizontalCenter="0" verticalCenter="1" left="25" right="10" top="2" bottom="2"> s:SimpleText> s:SparkSkin >
I’m not a good designer but I will make a round button, just as an example, in order to see how to skin a button, and to let you understand the Flex SDK 4 graphic possibilities:
<?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" minWidth="60" minHeight="60" alpha.disabled="0.5"> <fx:Metadata> [HostComponent("spark.components.Button")] fx:Metadata> <fx:Script> [CDATA[ static private const exclusions:Array = ["labelElement"]; override public function get colorizeExclusions():Array { return exclusions; } ]]> fx:Script> <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:stroke> <s:Stroke color="#cccccc" alpha="1" weight="1" /> s:stroke> <s:fill.up> <s:RadialGradient> <s:entries> <s:GradientEntry color="0x0000AA" ratio="0" alpha=".5"/> <s:GradientEntry color="0xAAAAAA" ratio="0.8" alpha=".5"/> s:entries> s:RadialGradient> s:fill.up> <s:fill.over> <s:RadialGradient> <s:entries> <s:GradientEntry color="0xAA0000" ratio="0" alpha=".5"/> <s:GradientEntry color="0xAAAAAA" ratio="0.8" alpha=".5"/> s:entries> s:RadialGradient> s:fill.over> <s:fill.down> <s:RadialGradient> <s:entries> <s:GradientEntry color="0x00AA00" ratio="0" alpha=".5"/> <s:GradientEntry color="0xAAAAAA" ratio="0.9" alpha=".5"/> s:entries> s:RadialGradient> s:fill.down> s:Ellipse> <s:SimpleText id="labelElement" textAlign="center" verticalAlign="middle" lineBreak="toFit" truncation="1" color="0xFFFFFF" fontWeight="bold" rotation.up="180" rotation.over="0" rotation.down="0" rotation.disabled="180" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"> s:SimpleText> s:SparkSkin>
Please download the project and have a look around.
0 comments:
Post a Comment