Thanks Peter. That worked as is but when I removed the embed directive it
seemed does not show anything. I tried this:
<s:BitmapImage source="assets/images/close_button.png"
source.over="assets/images/close_button.png"
source.down="assets/images/close_button.png"
width="13" height="13" minHeight="13" minWidth="13"/>
Thanks for your help so far. Any idea to get this to work without embedding?
On Wed, Mar 24, 2010 at 4:49 PM, Peter DeHaan <[email protected]> wrote:
>
>
> 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
>
>
>
