flex按钮使用背景图片

基于美化的需要，有时候我会被要求给按钮贴上图片

 

下面以flex4中使用mx:Button为例：

-----------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          creationComplete="init()"
          width="100%" height="100%">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Style >
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        .myCustomButton {
            overSkin:Embed(source="styles/assets/submitBtn.gif");
            upSkin:Embed(source="styles/assets/submitBtn.gif");
            downSkin:Embed(source="styles/assets/submitBtn.gif");
        }
    </fx:Style >
    <fx:Script >
        <![CDATA[

            import flash.events.MouseEvent;

           
            import mx.controls.Alert;
            import mx.events.CloseEvent;

           
           
            private function init():void{
                    saveBtn.addEventListener(MouseEvent.CLICK,function():void{
                        //提交这里是调用html页面上的test函数进行具体业务操作
                        ExternalInterface.call("test","0");

                       
                    });
               
            }
          
    </fx:Script >
    <s:HGroup ><mx:Spacer/></s:HGroup>
    <s:HGroup >
        <mx:Spacer/>
        <mx:Button label="" styleName="myCustomButton" id="saveBtn" useHandCursor="true" buttonMode="true" width="80" height="25"/>
    </s:HGroup>
</s:VGroup>

 

这里按钮禁用时图片好像是不能显示出来