Question

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.

Answer 1

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"/>