Flex AIR：用 mx:Image 实现的动态图片按钮

Spark 主题的 Button 控件在实现动态图片按钮时需要借助 Flash Catalyst 软件把每个图片转换成对应的 mxml 外观文本，不论加载效率，这种做法的门槛似乎有点高。本文使用一大一小两个PNG图片文件实现动态效果，这种方式比较原始，门槛比较低。但笔者估计，这种方式在内存加载效率上可能远不如 Spark 主题推荐的方式。

 

ButtonTest.mxml 的内容如下：

 

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            
            import nonamecat.common.style.ImageButtonStyle;
            
        ]]>
    </fx:Script>
    <mx:Image x="80" y="80" width="32" height="32" id="imgAdd" source="icon/add32.png" 
              mouseOver="ImageButtonStyle.onMouseMove(event,'icon/add48.png', 48)" 
              mouseOut="ImageButtonStyle.onMouseMove(event,'icon/add32.png', 32)"
              mouseDown="ImageButtonStyle.onClick(event)" 
              mouseUp="ImageButtonStyle.onClick(event)"/>
</s:WindowedApplication>

 

 

ImageButtonStyle.as 的内容如下：

 

 

package nonamecat.common.style
{
    import flash.events.MouseEvent;
    import mx.controls.Image;
    
    /**
     * 图像按钮的辅助行为
     */
    public class ImageButtonStyle
    {
        /**
         * 表示鼠标松开按键
         */
        public static var UP:int = -1;
        
        /**
         * 表示鼠标按下按键
         */
        public static var DOWN:int = 1;
        
        /**
         * 表示鼠标覆盖对象
         */
        public static var OVER:int = 2;
        
        /**
         * 表示鼠标离开对象
         */
        public static var OUT:int = 0;
        
        public function ImageButtonStyle()
        {
        }
        
        /**
         * 当鼠标移动经过对象上的时候激活的事件
         * 
         * @param event 鼠标事件
         * @param imageUrl 用于替换的图片的 Url
         * @param width 用于替换的图片的宽度
         * @param height 用于替换的图片的高度，如果忽略，则视为与宽度一致
         */
        public static function onMouseMove(event:MouseEvent, imageUrl:String, width:Number, height:Number=0):void
        {
            var button:Image = event.currentTarget as Image;
            if(button!=null)
            {
                var state:int;
                if(event.localX<=0||event.localX>=button.width||event.localY<=0||event.localY>=button.height)
                {
                    state = OUT;            
                }
                else
                {
                    state = OVER;
                }
                
                if(button.data!= state)
                {
                    button.data = state;
                    button.source=imageUrl;
                    
                    var oldWidth:Number = button.width;
                    var oldHeight:Number = button.height;
                    var newWidth:Number = width;
                    var newHeight:Number = height == 0 ? width : height;
                    
                    button.width=newWidth;
                    button.height=newHeight;
                    button.x=button.x-int((newWidth-oldWidth)/2);
                    button.y=button.y-int((newHeight-oldHeight)/2);
                    
                }
            }
            
        }
        
        /**
         * 当鼠标点击对象时激活的事件
         * 
         * @param button 图像按钮对象
         * @param event 鼠标事件
         */
        public static function onClick(event:MouseEvent):void
        {
            var button:Image = event.currentTarget as Image;
            if(button!=null)
            {
                var state:int;
                if(event.buttonDown)
                {
                    state = DOWN;    
                }
                else
                {
                    state = UP;
                }
                button.data = state;
                button.x=button.x+3*state;
                button.y=button.y+3*state;
            }
        
            
        }
    }
}