Thanks! I dedicate this to you, http://www.youtube.com/watch?v=-Qae_TUTeGoHIYA!!!
On Wed, Mar 24, 2010 at 5:22 PM, Peter DeHaan <[email protected]> wrote: > > > The Spark BitmapImage component only supports embedded images in Flex > 4.0. > > You could use mx:Image instead if you want to use dynamically loaded > images, or you could check out Steven Shongrunden’s blog post, > http://flexponential.com/2010/03/17/using-non-embedded-images-in-a-spark-bitmapimage/and > see if that helps. > > > > Peter > > > > > > > > *From:* [email protected] [mailto:[email protected]] *On > Behalf Of *dorkie dork from dorktown > *Sent:* Wednesday, March 24, 2010 5:14 PM > *To:* [email protected] > *Subject:* Re: [flexcoders] Creating a Flex 4 button skin - need examples > > > > > > 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 > > > > >
