Flex Paths and Button Skins
September 19, 2011 2 Comments
So you’re building a Flex application. And you want to skin your buttons. But, alas, you’re tired of rectangular buttons. Never fear, Flex paths are here.
First you need to define the coordinates of the vector shape you want to create.
<fx:Declarations> <fx:String id="arrowPath"> M 0 0 L 20 0 L 100 0 L 120 20 L 100 40 L 0 40 L 20 20 L 0 0 </fx:String> </fx:Declarations>
Then, you’ll need to create a Graphic object. You can use a scale9Grid to fit the width of the label text without distortion.
<s:Graphic includeIn="up" height="100%" width="100%" scaleGridTop="1" scaleGridBottom="39" scaleGridLeft="20" scaleGridRight="100"> <s:Path data="{arrowPath}"> <s:fill> <s:LinearGradient id="gradientUp" rotation="90"> <s:GradientEntry color="0x4e77b3"/> <s:GradientEntry color="0x345c98"/> </s:LinearGradient> </s:fill> <s:stroke> <s:LinearGradientStroke rotation="90"> <s:GradientEntry color="0x7399CF"/> <s:GradientEntry color="0xd3d3d3"/> <s:GradientEntry color="0x23467B"/> </s:LinearGradientStroke> </s:stroke> </s:Path> </s:Graphic>
You’re on a roll now, so you toss a few buttons into a button bar, back ‘em up so they saddle up next to each other, and you’ve got something like this:
Bada bing. Bada boom.