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

Flex鍵盤事件簡單應(yīng)用――用鍵盤控制的小飛機(jī)

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

編程思路

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

<?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="鼠標(biāo)點(diǎn)擊一下屏幕開始" 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  
        {  
 
               //通過鍵盤上下左右鍵移動(dòng)飛機(jī)  
               var keycode:int=e.keyCode;  
               if(e.shiftKey && keycode==72)  
               {  
                      resume();//回到起點(diǎn)  
               }  
               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  
 
        {  
               //設(shè)置焦點(diǎn)  
 
               this.canvas.setFocus();  
 
               this.lblMsg.text="用上下左右鍵控制飛機(jī)移動(dòng)...";  
 
        }  
 
        private function loadPlane():void  
        {  
               //繪制飛機(jī)  
 
               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);  
 
                     //把飛機(jī)添加到屏幕中  
 
               this.canvas.rawChildren.addChild(plane);  
         }  
 
        private function resume():void  
        {  
 
               //設(shè)置飛機(jī)的初始位置  
               plane.x=canvas.width/2-16;  
               plane.y=canvas.height-40;  
        }  
              ]]> 
 
       </mx:Script>               
 
</mx:Application>   
 

 知識(shí)要點(diǎn)

1：Flex鍵盤事件分兩類KeyboardEvent.KEY_DOWN，KeyboardEvent.KEY_UP，分別對(duì)應(yīng)鍵盤的按下和彈起事件；

2：通過查看Flex鍵盤事件參數(shù)的keyCode可以知道用戶按的是那個(gè)按鈕，能后作出對(duì)應(yīng)的響應(yīng)；

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

4：對(duì)象要獲得焦點(diǎn)后才能響應(yīng)Flex鍵盤事件，這是新手很容易忽視的問題。

【編輯推薦】

1. Flex鍵盤事件的監(jiān)聽機(jī)制
2. Flex鍵盤事件注意事項(xiàng)
3. 技術(shù)前沿 看Flex客戶端緩存技術(shù)如何使用
4. 12個(gè)Flex常用功能代碼再現(xiàn)
5. 學(xué)習(xí)筆記 Flex國際化如何支持其他語言