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;
            }
        
            
        }
    }
}