// IndexedRadioButtonGroup.as
package com.designoidgames.ui
{
    import flash.events.Event;
    import flash.utils.getTimer;
 
    import mx.core.IFlexDisplayObject;
 
    import spark.components.RadioButtonGroup;
 
    public class IndexedRadioButtonGroup extends RadioButtonGroup
    {
 
        public function IndexedRadioButtonGroup(document:IFlexDisplayObject=null)
        {
            super(document);
        }
 
        public function getCurrentIndex():int{
            for(var i:int=0;i
<this.numRadioButtons;i++){
                if(getRadioButtonAt(i) == this.selection){
                    return i;
                }
            }
 
            return -1;
        }
 
        public function selectIndex(index:int):void{
            selection = getRadioButtonAt(index);
            dispatchEvent(new Event(Event.CHANGE));
        }
 
        public function moveLeft(ignoreEnabled:Boolean=false):void{
            var index:int = getCurrentIndex();
            index = Math.max(0, index-1);
            if(getRadioButtonAt(index).enabled || ignoreEnabled){
                selectIndex(index);
            }
        }
 
        public function moveRight(ignoreEnabled:Boolean=false):void{
            var index:int = getCurrentIndex();
            index = Math.min(numRadioButtons-1, index+1);
            if(getRadioButtonAt(index).enabled || ignoreEnabled){
                selectIndex(index);
            }
        }
 
    }
}

// MovieClipButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx" useHandCursor="true" buttonMode="true">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
 
    <fx:Script>
        <![CDATA[
            public var source:Class;
        ]]>
    </fx:Script>
 
</s:Button>

// StaticButtonSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
 
<!--- The default wireframe skin class for the Spark Button component.
        Skin classes in the wireframe package are useful for using as a simple base for a custom skin.
 
       @see spark.components.Button
 
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                    creationComplete="creationCompleteHandler(event)" alpha.disabled="0">
    <fx:Metadata>
        [HostComponent("com.designoidgames.ui.MovieClipButton")]
    </fx:Metadata>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            private var mc:MovieClip;
 
            override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void{
                super.stateChanged(oldState,newState,recursive);
 
                if(mc==null) return;
 
                mc.gotoAndStop(newState);
            }
 
            protected function creationCompleteHandler(event:FlexEvent):void{
                mc = new (hostComponent as MovieClipButton).source();
                mcHolder.addChild(mc);
 
                mc.gotoAndStop(currentState);
 
                if(hostComponent.label) mc.label.text = hostComponent.label;
            }
 
        ]]>
    </fx:Script>
 
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <s:SpriteVisualElement id="mcHolder"/>
 
</s:SparkButtonSkin>