<mx:Button x="10" y="10" label="" upSkin="@Embed('imgs/mainButton_std.png')" overSkin="@Embed('imgs/mainButton_over.png')" downSkin="@Embed('imgs/mainButton_over.png')" disabledSkin="@Embed('imgs/mainButton_std.png')" creationComplete="mainButtonHitArea()" width="75" height="75" id="menuButton" enabled="true"/>
//mainButtonHitArea() : Is a generic function that generates the hit area
The problem im having is that, this method of creating a simple button with skin is being phased out : Infact it is no longer supported in flex 4.5 mobile projects.
So the question: Is there a simple way to perform this, with spark buttons (which is suppose to be the new way to go). As simple as possible.
Basically i only need a button with 2 images : down/over & up. And i want to keep the code as simple as possible : The new skinning methods, seems to really adds way too much lines for something that used to be as simple as the example above.
You can create a skin, i.e. (as MyButtonSkin.mxml):
<?xml version="1.0" encoding="utf-8"?> <s:SparkSkin name="MyButtonSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Button")] ]]> </fx:Metadata> <s:BitmapImage source.disabled="@Embed('assets/image1.png')" source.down="@Embed('assets/image2.png')" source.up="@Embed('assets/image3.png')" source.over="@Embed('assets/image4.png')" /> </s:SparkSkin>
Then you can assign that skin to some button:
<s:Button skinClass="MyButtonSkin"/>
Here's a basic image button that's more general:
ImageButtonSkin.mxml
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> <fx:Metadata> [HostComponent("com.instantdelay.flex.commons.ImageSkinnableButton")] </fx:Metadata> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:BitmapImage id="image" source.up="{getStyle('upImage')}" source.down="{getStyle('downImage')}" source.over="{getStyle('overImage')}" source.disabled="{getStyle('disabledImage')}" /> </s:SparkButtonSkin>
ImageSkinnableButton.as
[Style(name="upImage", inherit="no", type="Class")] [Style(name="downImage", inherit="no", type="Class")] [Style(name="overImage", inherit="no", type="Class")] [Style(name="disabledImage", inherit="no", type="Class")] public class ImageSkinnableButton extends Button { public function ImageSkinnableButton() { super(); setStyle("skinClass", ImageButtonSkin); } }
Then you can set the images as styles on the button in either CSS (preferred) or in mxml:
<commons:ImageSkinnableButton upImage="@Embed('imgs/mainButton_std.png')" overImage="@Embed('imgs/mainButton_over.png')" downImage="@Embed('imgs/mainButton_over.png')" disabledImage="@Embed('imgs/mainButton_std.png')" />
You can also define a ButtonImageSkin for the default spark.components.Button component, for example in the imageskins package:
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <s:states> <s:State name="up" /> <s:State name="over" /> <s:State name="down" /> <s:State name="disabled" /> </s:states> <s:BitmapImage source="{getStyle('backgroundImage')}"/> </s:SparkButtonSkin>
Simply define a style on the skin class itself, and bind the source of the image to it. Now, you can control the actual images using CSS pseudo selectors:
@namespace imageskins "imageskins.*"; s|Button { skinClass: ClassReference("imageskins.ButtonImageSkin"); } imageskins|ButtonImageSkin:up { backgroundImage: Embed(source="assets/images/button-up.png"); } imageskins|ButtonImageSkin:down { backgroundImage: Embed(source="assets/images/button-down.png"); } imageskins|ButtonImageSkin:over { backgroundImage: Embed(source="assets/images/button-over.png"); } imageskins|ButtonImageSkin:disabled { backgroundImage: Embed(source="assets/images/button-disabled.png"); }From http://stackoverflow.com/questions/6477137/flex-4-5-simple-spark-button-skinning