Flex4のカスタムコンポーネントでスキンを使用する

スキンを適用したボタンの一部を拡大するパターン

main.mxml

<s:Application>
    <local:CustomButton skinClass="CustomSkin"/>
</s:Application>

CustomButton.as

public class CustomButton extends Button{
    [SkinParts(required="true"]
    /** スキン側で<s:BItmapImage id="image"/>と定義したらセットされる */
    public var image:BitmapImage;

    public function CustomButton(){
        super();
        addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
        addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
    }

    protected function mouseOverHandler(event:MouseEvent):void{
        if(image != null){
            image.scaleX = 1.2;
            image.scaleY = 1.2;
        }
    }
    protected function mouseOutHandler(event:MouseEvent):void{
        if(image != null){
            image.scaleX = 1.0;
            image.scaleY = 1.0;
        }
    }
}

CustomSkin.mxml

<s:Skin>
    <fx:Metadata>
        [HostComponent("spark.components.RadioButton")]
    </fx:Metadata>
    <s:states>
        <s:State name="disabled"/>
        <s:State name="down"/>
        <s:State name="over"/>
        <s:State name="up"/>
    </s:states>
    <s:BorderContainer width="100" height="30" backgroundColor="0xFF0000" cornerRadius="10">
        <!--  CustomBottonでスキンとして設定される項目 -->
        <s:BitmapImage id="image" source="@Embed('xxxx.png')"/>
    </s:BorderContainer>
</s:Skin>