本文和大家重點討論一下Flex鍵盤事件簡單應用，從最古老的計算機開始，鍵盤就是其最重要的輸入組成部分。對Flex鍵盤事件的響應處理一直是界面編程最重要的組成部分。

Flex鍵盤事件簡單應用――用鍵盤控制的小飛機

從最古老的計算機開始，鍵盤就是其最重要的輸入組成部分。對Flex鍵盤事件的響應處理一直是界面編程最重要的組成部分。本示例通過一個鍵盤控制的小飛機，來說明在FLEX中對Flex鍵盤事件的監聽和響應處理。

編程思路

每個游戲首先就得有自己的運行場景(背景)，我們使用Canvas作為小飛機運行的容器。小飛機直接由一個Sprite類型對象繪制得到(通過載入圖形可以獲得更漂亮的元件)。當上下左右鼠標被點擊時，根據Flex鍵盤事件提供的鍵碼，相應Flex鍵盤事件，移動小飛機元件在容器中的坐標，獲得飛機移動的效果。當接近容器的邊界時，不允許作把元件移出容器的動作，所以需要一個方法checkBoundary在元件移動前判斷移動是否是合法的。提供一個方法resume，讓元件能隨時回到其初始位置。
 
程序代碼

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> 
       <mx:Canvas id="canvas" x="128" y="49" width="271" height="313" backgroundColor="#d8e9e9" borderColor="#000000" borderStyle="solid"> 
       </mx:Canvas> 
       <mx:Label id="lblMsg" x="128" y="27" text="鼠標點擊一下屏幕開始" width="271"/> 
              <mx:Script> 
              <![CDATA[  
              import flash.events.KeyboardEvent;                 
 
              private var plane:Sprite;          
        private function init():void  
 
        {               //程序的初始化  
 
               loadPlane();  
               resume();  
               this.canvas.addEventListener(MouseEvent.CLICK,setCanvasFocus);  
               this.canvas.addEventListener(KeyboardEvent.KEY_DOWN,planeMove);  
        }  
        private function checkBoundary(direction:int):Boolean  
        {  
               //檢查邊界條件  
 
               switch(direction)  
               {  
                      case 37:  //左  
                      return (plane.x>5);  
 
                      case 38:  //上  
                      return (plane.y>5);  
                      case 39:  //右  
                      return (plane.x< canvas.width-40);  
                      case 40:  //下  
                      return (plane.y<canvas.height-40);  
               }  
               return false;  
        }  
 
        private function planeMove(e:KeyboardEvent):void  
        {  
 
               //通過鍵盤上下左右鍵移動飛機  
               var keycode:int=e.keyCode;  
               if(e.shiftKey && keycode==72)  
               {  
                      resume();//回到起點  
               }  
               if(!checkBoundary(keycode))  
               {  
                      return;  
               }  
 
               switch(keycode)  
               {  
 
                      case 37:  
 
                      plane.x-=5;  
 
                      break;  
 
                      case 38:  
 
                      plane.y-=5;  
 
                      break;  
 
                      case 39:  
 
                      plane.x+=5;  
 
                      break;  
 
                      case 40:  
 
                      plane.y+=5;  
 
                      break;  
               }  
 
        }  
        private function setCanvasFocus(e:MouseEvent):void  
 
        {  
               //設置焦點  
 
               this.canvas.setFocus();  
 
               this.lblMsg.text="用上下左右鍵控制飛機移動...";  
 
        }  
 
        private function loadPlane():void  
        {  
               //繪制飛機  
 
               plane=new Sprite();  
 
               var g:Graphics=plane.graphics;  
 
                     g.clear();  
 
                     g.lineStyle(4,0x000000,1);  
 
                     g.moveTo(16,0);  
 
                     g.lineTo(16,32);  
 
                     g.moveTo(16,16);  
 
                     g.lineTo(4,24);  
 
                     g.moveTo(16,16);  
 
                     g.lineTo(28,24);  
 
                     g.moveTo(16,32);  
 
                     g.lineTo(10,36);  
 
                     g.moveTo(16,32);  
 
                     g.lineTo(22,36);  
 
                     g.moveTo(0,0);  
 
                     //把飛機添加到屏幕中  
 
               this.canvas.rawChildren.addChild(plane);  
         }  
 
        private function resume():void  
        {  
 
               //設置飛機的初始位置  
               plane.x=canvas.width/2-16;  
               plane.y=canvas.height-40;  
        }  
              ]]> 
 
       </mx:Script>               
 
</mx:Application>   
 

 知識要點

1：Flex鍵盤事件分兩類KeyboardEvent.KEY_DOWN，KeyboardEvent.KEY_UP，分別對應鍵盤的按下和彈起事件；

2：通過查看Flex鍵盤事件參數的keyCode可以知道用戶按的是那個按鈕，能后作出對應的響應；

3：還可以通過查看Flex鍵盤事件參數的shiftKey,ctrlKey屬性值，獲得用戶是否同時按下了一些輔助功能鍵；

4：對象要獲得焦點后才能響應Flex鍵盤事件，這是新手很容易忽視的問題。

【編輯推薦】

1. Flex鍵盤事件的監聽機制
2. Flex鍵盤事件注意事項
3. 技術前沿 看Flex客戶端緩存技術如何使用
4. 12個Flex常用功能代碼再現
5. 學習筆記 Flex國際化如何支持其他語言