Not sure if it is the best/correct way, but this seemed to work for me based on
my 2 second testing...
Short answer:
<s:BitmapImage source="@Embed('assets/images/close_button_up.png')"
source.over="@Embed('assets/images/close_button_over.png')"
source.down="@Embed('assets/images/close_button_down.png')" />
Long answer:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button#closebutton {
skinClass: ClassReference("ClButtonSkin");
}
</fx:Style>
<s:Button id="closebutton"
left="12"
top="11"
buttonMode="true"
useHandCursor="true"
mouseChildren="false"/>
</s:Application>
<?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">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<!-- host component -->
<fx:Metadata>
[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"];
override public function get colorizeExclusions():Array {
return exclusions;
}
override protected function initializationComplete():void {
useChromeColor = true;
super.initializationComplete();
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number) : void {
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr) {
cornerRadius = cr;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private var cornerRadius:Number = 2;
]]>
</fx:Script>
<s:BitmapImage source="@Embed('assets/images/close_button_up.png')"
source.over="@Embed('assets/images/close_button_over.png')"
source.down="@Embed('assets/images/close_button_down.png')" />
<!-- layer 8: text -->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="10" right="10" top="2" bottom="2" />
</s:SparkSkin>
From: [email protected] [mailto:[email protected]] On Behalf
Of dorkie dork from dorktown
Sent: Wednesday, March 24, 2010 4:28 PM
To: [email protected]
Subject: [flexcoders] Creating a Flex 4 button skin - need examples
If my button skin was like this in Flex 3:
<fx:Style>
Button.closebutton {
upSkin: Embed(source="assets/images/close_button_up.png");
downSkin: Embed(source="assets/images/close_button_over.png");
overSkin: Embed(source="assets/images/close_button_down.png");
selectedUpSkin: Embed(source="assets/images/close_button_up.png");
selectedDownSkin: Embed(source="assets/images/close_button_up.png");
selectedOverSkin: Embed(source="assets/images/close_button_up.png");
}
</fx:Style>
<s:Button style="closebutton"
left="12"
top="11" buttonMode="true" useHandCursor="true" mouseChildren="false"/>
Now, I've tried to do the same thing in a Flex 4 button skin and there
is SOOOO much code and all of it is FXG. I've read it and understand
it but when I've created my own and stripped all the FXG out there are
issues with resizing, issues with positioning (on mouse over) and
more.
Will someone please create an example equivalent to what the Flex 3
code above is doing?
ddfd
