實(shí)例解析Flex鍵盤事件簡單應(yīng)用

作者：rp888 2010-07-29 10:40:12

你對Flex鍵盤事件的處理是否熟悉，本文通過一個鍵盤控制的小飛機(jī)，來說明在FLEX中對Flex鍵盤事件的監(jiān)聽和響應(yīng)處理。

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

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

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

編程思路

每個游戲首先就得有自己的運(yùn)行場景(背景)，我們使用Canvas作為小飛機(jī)運(yùn)行的容器。小飛機(jī)直接由一個Sprite類型對象繪制得到(通過載入圖形可以獲得更漂亮的元件)。當(dāng)上下左右鼠標(biāo)被點(diǎn)擊時，根據(jù)Flex鍵盤事件提供的鍵碼，相應(yīng)Flex鍵盤事件，移動小飛機(jī)元件在容器中的坐標(biāo)，獲得飛機(jī)移動的效果。當(dāng)接近容器的邊界時，不允許作把元件移出容器的動作，所以需要一個方法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="鼠標(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  
        {  
 
               //通過鍵盤上下左右鍵移動飛機(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ī)移動...";  
 
        }  
 
        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>