Anyone missed the old simple method for skinning a simple button?
<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"/>