您的位置:首页 > 移动开发

让你的动画响应键盘事件KeyboardEvent

2011-04-06 16:07 375 查看
接过来上边的例子 使用左右方向键来控制这个动画

 

由于需要使用一个停止的动作 所以在图像中加入了站立的帧

 

方法没有太大变化  使用了KeyboardEvent事件 整个过程十分简单

 

使用按键按下事件来让人物跑动 并判断方向 按键抬起停止人物动作

 

注:在这里 取人物原图的时候 绘制了两次, 主要用来使人物图像 Alpha为0的部分不显示  方便显示后面的背景

人物图像白色部分其实是透明 不是白色  

 





 

代码如下

package com.my.game
{
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IEventDispatcher;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.utils.getTimer;

public class Element extends Sprite
{

[Bindable]
[Embed(source="/FlexTest/bin-debug/resources/image2.png")]
private var _ElementImage:Class;

private var ElementImage:BitmapData;
private var sourceElementImage:BitmapData;

private var timer:int = 0;
private var frame:int = 0;

public var running:Boolean = false;
public var direction:int = 0;

public function Element()
{
super();
Init();

}

private function Init():void
{

var d:DisplayObject = new _ElementImage() as DisplayObject;

sourceElementImage = new BitmapData(d.width,d.height,true);
//只绘制ALPHA层 用于背景图的显示
sourceElementImage.draw(d,null,null,flash.display.BlendMode.ALPHA);
//然后绘制图像
sourceElementImage.draw(d);

ElementImage = new BitmapData(100,111,true);
//初始化位置
this.x = 200;
this.y = 100;
//初始化计时器
timer = getTimer();
//加入一个监听
this.addEventListener(Event.ENTER_FRAME, Run);
}

private function Run(event:Event):void
{
//判断是否跑动
if(running)
{
//80毫秒一帧
if(getTimer()-timer>10)
{
if(frame>6) frame=1;
redraw(new Rectangle(frame*100,direction*100,100,111));
timer = getTimer();
frame++;

//人物在 0 - 800 范围内时 跑动 人物宽度为100

if(direction==1&&this.x>=0)
{
this.x -=15;
}
else if(direction==0&&this.x<=900)
{
this.x +=15;
}
else
{
running = false;
}
}
}
else
{
//当人物不在跑动中 显示站立图像
redraw(new Rectangle(0,direction*100,100,111));
}

}

private function redraw(rect:Rectangle):void
{
ElementImage.copyPixels(sourceElementImage,rect,new Point(0,0),null,null,false);
this.graphics.clear();
this.graphics.beginBitmapFill(ElementImage, null, false, false);
this.graphics.drawRect(0, 0, 100, 111);
this.graphics.endFill();
}
}
}


 

程序入口 这里加入了Welcome视图作为欢迎界面

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
frameRate="40"
currentState="Welcome"
>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<!--[CDATA[
import com.my.game.Element;
import mx.events.FlexEvent;

private var e:Element;

protected function application1_keyDownHandler(event:KeyboardEvent):void
{

//判断左右键
if(event.keyCode == 37 || event.keyCode == 39 )
{
var num:Number = event.keyCode;
switch(num)
{
case 37:
e.running = true;
e.direction = 1;
break;
case 39:
e.running = true;
e.direction = 0;
break;

}
}

}

protected function application1_keyUpHandler(event:KeyboardEvent):void
{
e.running = false;
}

protected function button1_clickHandler(event:MouseEvent):void
{
this.currentState="Main";
this.addEventListener(KeyboardEvent.KEY_DOWN,application1_keyDownHandler);
this.addEventListener(KeyboardEvent.KEY_UP,application1_keyUpHandler);
this.setFocus();
e = new Element();
sp.addChild(e);
}

]]-->
</fx:Script>
<s:states>
<s:State name="Main" />
<s:State name="Welcome"/>
</s:states>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<s:SpriteVisualElement id="sp" includeIn="Main" depth="10"></s:SpriteVisualElement>
<mx:Image includeIn="Main" x="7" y="6" source="@Embed(source='/FlexTest/bin-debug/resources/bg.png')"/>
<s:Button x="71" y="54" label="Start" click="button1_clickHandler(event)" includeIn="Welcome"/>
</s:Application>


 

完成后的效果



 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息