实例解析Flex键盘事件简单应用-flock键盘

本文和大家重点讨论一下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键盘事件，这是新手很容易忽视的问题。

【编辑推荐】