Bitmap Skinned Buttons

I was trying to make a skinnable application which had multiple buttons, but I didnt want to put a separate bitmap for each state of each button. I had one bitmap containing all the states of all buttons, something like the following.


I have made a custom "SkinnedButton" class which lets me use such skins. I just need to give the coordinates of the UP, DOWN, OVER and DISABLED states and an Image.

The code that produces this looks like this.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" width="100%" 
    height="100%">
        
    <mx:Canvas width="150" height="50" x="10" y="0">
    <mx:Image id="bkground" source="@Embed('background.png')"/>
    <mx:Image id="skin" source="@Embed('cbuttons.png')" includeInLayout="false" visible="false"/>

        <SkinnedButton id="bprev" x="0" y="0"
            upX="0" upY="0" downX="0" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="5"  />
        
        <SkinnedButton id="bplay" x="23" y="0"
            upX="23" upY="0" downX="23" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="5"  />
            
        <SkinnedButton id="bpause" x="46" y="0"
            upX="46" upY="0" downX="46" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="5"  />
            
        <SkinnedButton id="bstop" x="69" y="0"
            upX="69" upY="0" downX="69" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="15"  />
            
        <SkinnedButton id="bnext" x="92" y="0"
            upX="92" upY="0" downX="92" downY="18" 
            alpha="0" skin="{skin}" backgroundImage="{bkground}" width="23" height="18" cornerRadius="15"  />
    </mx:Canvas>

</mx:Application>

Code and Example