Flash3.0AS3.0事件侦听机制

Flash动画设计与制作Lesson3事件侦听机制2/18/20251事件的根本概念事件对象每一个具体的事件都是一个对象每个事件对象不仅保存了关于当前时间的一组特定信息〔属性〕，还包含了用于操作该事件的几个方法。AS3中每个事件类中都定义了一系列事件类型，每个具体的事件对象都对应某一种类型。事件类EventEventKeyboardEventTextEventTimeEventContextMenuEventSoundEventMouseEvent…其他子类2/18/20252事件帧听过程1.确定事件目标一个用于作为事件发送目标的对象被称为事件目标2.注册事件侦听方法：addEventListener()可以在一个对象上注册假设干个事件帧听函数3.执行事件响应函数当事件目标在列表中查到与接收到的时间对象相对应的响应函数后，事件对象将作为一个参数传递给该函数，然后执行这个事件响应函数。2/18/20253事件侦听的语法结构1.注册事件侦听函数要且只能用addEventListener()方法publicfunctionaddEventListener(type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false):void用于控制在事件流的不同阶段响应事件控制侦听的优先级指定此侦听是否为弱引用表示特定事件类型的字符串事件处理函数的函数名函数的引用不要使用圆括号2/18/20254事件侦听的语法结构2.注销侦听函数removeEventListener()方法3.定义事件处理函数publicfunctionremoveEventListener(type:String,listener:Function,useCapture:Boolean=false):void2/18/20255event参数和this指针1.event参数当对象接收到某个事件后，它就把这个事件对象以参数的形式传递到相应的处理函数中，并调用这个函数。由于时间对象中包含了这个特定时间的所有信息，在处理函数里就可以利用参数访问到这个事件对象中包含的内容。测试一下吧2/18/20256event参数和this指针2.处理函数中的this指针关键字this指当前对象。在事件处理函数中使用this指针时，根据处理函数定义的位置不同，this所指的对象也有所区别。测试一下吧2/18/20257常用内建事件1.常用鼠标事件鼠标事件类MouseEvent是Event类的一个子类常用的属性10个常量，分别表示10种不同的鼠标事件范例：砸金蛋效果

设计过程动态绘制直线效果

设计过程2/18/20258常用内建事件2.常用键盘事件键盘事件类KeyboardEvent是Event类的一个子类常用的属性两个键盘事件类型KEY_DOWN和KEY_UP范例用键盘控制上下左右行走效果

关键代码发射子弹效果

设计过程2/18/20259常用内建事件3.Timer类及相关事件Timer不是事件类，但是可以触发和接受不同类型的事件。Timer用于在指定的时间序列上执行代码。当创立一个定时器类的对象后，同时就指定了两个数值：事件间隔和执行次数，之后可以注册一个事件侦听器，让处理函数按设定的时间间隔执行指定的次数。Timer类的常用属性与方法声明：publicfunctionTimer(delay:Number,repeatCount:int=0)Timer类可以播送和接受两个事件：timer和temerComplete〔在TimerEvent类中被定义为常量TIMER和TIMER_COMPLETE〕范例：自动图片浏览效果设计过程2/18/202510常用内建事件4.TextField类及相关事件用于创立可视的文本域可接收的事件范例：自动出题程序效果在60s内计算程序自动编写的20以内的加法算式，答对后自动生成下一题。设计过程：界面布局：5个静态文本框作为固定元素；5个动态文本框〔add1,add2,msg,rightNum,leftNum〕和1个输入文本框〔sum〕，作为程序中的动态信息显示局部。代码编写2/18/202511其他常用事件1.ENTER_FRAME事件〔进入帧事件〕在播放头进入一个新的帧的时候触发如果只有一帧，那么以帧速不断被触发。任何可视对象都可以接收这个事件。例：addEventListener(Event.ENTER_FRAME,handle);mc.addEventListener(Event.ENTER_FRAME,handle);2/18/202512其他常用事件2.ADDED事件在一个可视对象被添加到显示列表中触发。任何可视对象都可以接收这个事件。例：varmc1:mc=newmc();mc1.addEventListener(Event.ADDED,handle);functionhandle(e:Event){trace("mc1被添加到舞台上了！")}addChild(mc1);2/18/202513事件流1.根本概念当一个事件发生时，如果事件目标是显示列表上的对象，那么所有包含此对象的容器对象也会接收到这个事件，事件对象会在这些对象中顺次流动。事件对象的这种特性被称为事件流。mcmc1mc2stagemcmc1mc2①捕获阶段③上升阶段②目标阶段2/18/202514事件流2.相关属性3.事件流的应用addEventListener()方法中的useCapture决定当前对象在事件流的哪个阶段捕获制定类型的事件对象。useCapture为Boolean类型，默认为false，表示捕获事件流的第2和第3阶段；设置为true，那么表示只捕获事件流的第1阶段范例：事件流的测试2/18/202515默认行为当一个事件发生时，通常会伴随一个行为与之同时发生。当需要覆盖掉默认行为时，要调用事件对象的preventDefault()方法。属性cancelable，表示是否可以覆盖默认行为。范例：严格的密码输入效果设计过程1.在舞台上添加一个输入文本〔pwd〕作为密码输入框，两个动态文本〔c,str〕用于辅助显示输入的信息。2.添加代码：pwd.addEventListener(TextEvent.TEXT_INPUT,input);functioninput(e:TextEvent){e.preventDefault();c.text=e.text;if(e.text=="\n"&&str.text=="zhu"){ pwd.text="OK"; }else{str.appendText(e.text);}}2/18/202516自定义事件某些特定情况下需要自己定义事件，并在适当的时候播送一个对象需要接收某个自定义事件时，也必须调用addEventListener()方法注册自定义事件的帧听处理函数来响应这个事件。自定义一个事件时，可以直接调用Event类的构造函数Event()创立一个自定义类型的事件对象；或者扩展Event类，定义一个包含更多信息的Event类的子类，然后创立这个自定义事件类的对象。Event类的构造函数定义：只有EventDispatcher类或者其子类的对象才能播送和接收一个事件对象。如果要让一个对象向外播送一个事件对象，需要调用该类的dispathEvent方法。publicfunctionEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)publicfunctiondispatcchEvent(event:Event):Boolean这种方法需要一个Event类型的参数，即需要播送出去的事件对象。当调用这个方法以后，一个制定的事件对象就会被发送到以调用对象为事件目标的事件流中。2/18/202517自定义事件范例：公鸡母鸡效果设计过程1.界面设计：3个影片剪辑元件，分别命名cock,weasel,hen。前两个元件只有一帧，分别包含公鸡和黄鼠狼图片，hen有两帧，第1帧为母鸡图片和动态文本框〔msg〕，第2帧围绕文本框添加一个边框。在库中设置cock和weasel的连接类名。回到场景中，在舞台上放置3个元件的实例各一个，分别命名aCock,aWeasel,myHen。2.创立一个脚本文件myEvents.as，在这个文件中创立一个Event类的子类myEvents,后面程序中将要使用这个类创立事件对象，在舞台上的各对象间传递信息。3.创立一个脚本文件cock.as，其中定义了cock类，这个类和影片剪辑cock绑定的类。4.同样方法创立脚本文件weasel.as，其中定义weasel类，对应影片剪辑weasel.5.回到主场景，第1帧中输入代码2/18/202518自定义事件范例：元件循环计数效果设计过程：1.新建文件，创立小球从左到右运动的影片剪辑。运动共20帧，最后一帧添加代码：2.返回场景，将小球元件实例〔ball〕放在舞台上，添加一个动态文本框〔count〕，用来显示小球运动的次数。3.第1帧中输入代码dispatchEvent(newEvent("bit"));vari:uint;ball.addEventListener("bit",bitHd);functionbitHd(e:Event){ trace("havebit",++i,"times."); =String(i);}2/18/202519综合范例打地鼠效果设计过程打字游戏效果设计过程2/18/202520打地鼠设计过程this.mymm.gotoAndStop(1);this.dispatchEvent(newEvent("repeat",true));2/18/202521打地鼠设计过程2.场景设计：4个图层“背景〞、“鼠洞〞、“活动鼠〞和“信息〞老鼠实例myMmrun初始位于第一个洞口，舞台坐标为〔137,158〕。影片运行后，这个实例要随机出现在4个洞口中，所以要实现确定老鼠在其他洞口出现的具体位置。信息图层中两个动态文本，一个用于统计打中老鼠的数目〔okNum〕，一个用于统计老鼠出洞的总次数〔repeatNum〕。3.创立老鼠元件mm绑定的类。首先为元件mm创立一个与元件同名的连接类，然后新建一个mm.as脚本文件。类mm的主要功能就是侦听mm类对象上的两个鼠标事件。4.创立老鼠出洞元件mmrun绑定的类。首先为元件mmrun创立一个连接类名mmrun，然后新建一个mmrun.as。在mmrun类中注册该类对象上的鼠标单击事件，其处理函数向事件流再发出一个类型为ok的事件对象，此事件表示老鼠已经被击中，同时让与该类绑定的影片剪辑直接运行至第32帧，即回撤过程。5.返回主场景，在信息层第1帧添加代码。实现一，在影片的根上注册事件ok和repeat的侦听处理函数，二，随机为老鼠出现选择一个洞口。2/18/202522打字练习设计过程1.创立一个影片剪辑blam，气球和文本两个图层。制作气球爆炸的动画过程，图层“文本〞是一个放在气球上的动态文本框，实例名为t。气球图层的首尾两帧添加stop()。第1帧气球完好，第2帧开始破并最后一帧透明度变为0。再新建一个元件ball，在元件的舞台上放一个blam，实例名字仍为blam。然后制作这个气球从〔0,0〕位置上升到大于舞台高度的一段动画。2.创立与元件ball绑定的类。在库中为ball元件设置连接类名ball，建ball.as脚本文件。这个脚本文件中定义类ball，在这个类中完成三个任务：随机为气球中的文本框添加一个字母，侦听并处理该类对象添加到显示列表事件，侦听并处理舞台上的按键事件。如果气球出现在舞台上，所按键的字符和气球上的字符相同那么气球播放爆裂动画并消失。要使用当前对象(this)的stage属性在舞台上注册按键事件处理函数，而且必须是在对象已经添加到显示列表中以后才可以使用它的stage属性。3.回到主场景，在图层的第1帧添加代码，实现每隔1秒产生一个上升的气球。2/18/202523砸金蛋设计过程1.新建文件，创立影片剪辑元件egg，设置其连接类名为egg2.制作金蛋静止-摇晃-破裂-破碎显示文字的过程。三个图层：egg〔3个演变过程，第1帧帧标签start〕，text〔包含动态文本，实例名为t〕，as〔控制元件播放/停止的时间轴函数〕3.编码，创立egg.as脚本文件，编写代码4.回到影片文件的主场景，在舞台上并列添加4个金蛋元件的实例。2/18/202524package{ import; import; import; publicclasseggextendsMovieClip{ publicfunctionegg(){ this.addEventListener(MouseEvent.MOUSE_OVER,overEgg); this.addEventListener(MouseEvent.MOUSE_DOWN,downEgg); this.addEventListener(MouseEvent.MOUSE_OUT,outEgg); } privatefunctionoverEgg(e:MouseEvent){ this.gotoAndPlay(2); } privatefunctiondownEgg(e:MouseEvent){ this.removeEventListener(MouseEvent.MOUSE_OVER,overEgg); this.removeEventListener(MouseEvent.MOUSE_DOWN,downEgg); this.removeEventListener(MouseEvent.MOUSE_OUT,outEgg); if(Math.random()>0.9){ ="恭喜发财"; }else{ ="谢谢合作"; } this.gotoAndPlay("crack"); } privatefunctionoutEgg(e:MouseEvent){ this.gotoAndStop("start"); } }}2/18/202525绘制直线设计过程阶段1：在舞台上注册MOUSE_DOWN和MOUSE_UP两个事件，在MOUSE_DOWN事件处理函数中为画线做准备，在MOUSE_UP事件处理函数中画出直线段。直线段的起点和终点分别由鼠标按下和抬起时触发的两个事件对象确定。使用参数的localX和localY属性。〔事件发生在舞台上，所以此时本地坐标和舞台坐标一样〕代码：this.stage.addEventListener(MouseEvent.MOUSE_DOWN,downHd);this.stage.addEventListener(MouseEvent.MOUSE_UP,upHd);functiondownHd(e:MouseEvent){this.graphics.lineStyle(2,0xFF0000);this.graphics.moveTo(e.localX,e.localY)}functionupHd(e:MouseEvent){this.graphics.lineTo(e.localX,e.localY);}2/18/202526绘制直线设计过程阶段2：为了使鼠标按下并移动过程中随时能看见绘制的线条，可以在MOUSE_DOWN事件处理函数中在当前对象上注册一个ENTER_FRAME事件处理函数-enterHd()。将具体的画线动作移动到事件处理函数enterHd()中，而当鼠标抬起的时候，MOUSE_UP事件的处理函数upHd()只用于注销ENTER_FRAME事件。代码：效果this.stage.addEventListener(MouseEvent.MOUSE_DOWN,downHd);this.stage.addEventListener(MouseEvent.MOUSE_UP,upHd);functiondownHd(e:MouseEvent){this.graphics.lineStyle(2,0xFF0000);this.graphics.moveTo(e.localX,e.localY);addEventListener(Event.ENTER_FRAME,enterHd);}functionupHd(e:MouseEvent){removeEventListener(Event.ENTER_FRAME,enterHd);}functionenterHd(e:Event){this.graphics.lineTo(mouseX,mouseY);}2/18/202527绘制直线设计过程阶段3：为了在鼠标移动时一直使用同一个起始点坐标〔鼠标按下时确定的点〕，需要先定义一个对象来保存它。用MOUSE_MOVE事件代替ENTER_FRAME事件。首先要调用clear()方法来去除上次MOUSE_MOVE事件触发时绘制的线条。每次鼠标按下和抬起的过程都可以在舞台上绘制一条直线段，但是由于clear()方法的作用，舞台上最终只能保存最后一次绘制的线条。为了使影片可以绘制多条直线，程序中在MOUSE_MOVE事件处理函数里为每次绘图过程创立一个Sprite对象作为容器，然后在MOUSE_MOVE事件处理函数里，就在刚刚创立的容器中绘图。每条直线都有独立的容器对象，clear()方法只能去除本容器中的图形，实现绘制多条直线的效果。代码效果2/18/202528绘制直线设计过程varstartP:Object=newObject();varmyLine:Sprite;this.stage.addEventListener(MouseEvent.MOUSE_DOWN,downHd);this.stage.addEventListener(MouseEvent.MOUSE_UP,upHd);functionupHd(e:MouseEvent){this.stage.removeEventListener(MouseEvent.MOUSE_MOVE,moveHd);}functionmoveHd(e:MouseEvent){();myLine.graphics.lineStyle(2,0xFF0000);myLine.graphics.moveTo(starP.x,startP.y);myLine.graphics.lineTo(e.localX,e.localY);}functiondownHd(e:MouseEvent){myLine=newSprite();addChild(myLine);startP.x=e.localX;startP.y=e.localY;this.stage.addEventListener(MouseEvent.MOUSE_MOVE,moveHd);}2/18/202529键盘控制行走this.stage.addEventListener(KeyboardEvent.KEY_DOWN,movemc);functionmovemc(event:KeyboardEvent):void{if(event.keyCode==37){aubergine_mc.x-=10;}elseif(event.keyCode==39){aubergine_mc.x+=10;}elseif(event.keyCode==40){aubergine_mc.y+=10;}elseif(event.keyCode==38){aubergine_mc.y-=10;}};2/18/202530子弹发射设计过程stage.addEventListener(KeyboardEvent.KEY_DOWN,keydHd);functionkeydHd(e:KeyboardEvent){switch(e.keyCode){case37:mc.x-=3;break;case38:mc.y-=3;break;case39:mc.x+=3;break;case40:mc.y+=3;break;case70:varf:shot=newshot()f.x=mc.x;f.y=mc.y;addChild(f);break;default;}}效果2/18/202531子弹发射设计过程改进：定义一个数组缓存按下的键值，不同的键位对应不同的数组元素。当某个键按下时对应元素被赋值，松开时立即去除制定的元素。当有多个键被按下时，数组中就会有多个元素具有有效值，在此根底上依次读取数组中的值控制具体动作。varcodeArr:Array=newArray(2);stage.addEventListener(KeyboardEvent.KEY_DOWN,keydHd);stage.addEventListener(KeyboardEvent.KEY_UP,keyuHd);setInterval(run,10);functionkeydHd(e:KeyboardEvent){if(e.keyCode>=37&&e.keyCode<=40){codeArr[0]=e.keyCode;}else{codeArr[1]=e.keyCode;}}functionkeyuHd(e:KeyboardEvent){if(e.keyCode>=37&&e.keyCode<=40){codeArr[0]=0;}else{codeArr[1]=0;}}2/18/202532functionrun(){switch(codeArr[0]){case37:mc.x-=3;break;case38:mc.y-=3;break;case39:mc.x+=3;break;case40:mc.y+=3;break;}if(codeArr[1]==70){varf:shot=newshot()f.x=mc.x;f.y=mc.y;addChild(f);break;}}2/18/202533自动图片浏览设计1.舞台设计：舞台下部添加3个动态文本框，用于显示提示信息、当前已显示图片张数、图片总数，实例名分别为msg,currNum,totalNum。添加一个输入文本框〔实例名speed〕，用于等待用户输入图片浏览速度，默认为1〔每秒显示一幅图片〕。再添加静态文本〔速度〕和按钮〔实例名run，点击按钮开始浏览〕。2.图片元件设计：将准备好图片导入到库中，新建影片剪辑元件，将图片导入1-5帧，调整图片和舞台一样大小。第一帧stop，图片元件实例名为“picmc〞。3.代码编写：2/18/202534自动图片浏览设计varmyTimer:Timer;run.addEventerlistener(MouseEvent.MOUSE_DOWN,startRun);functionstartRun(e:MouseEvent){="";myTimer=newTimer(1000/unit(this.speed.text),picmc.totalFrames)myTimer.addEventListener(TimerEvent.TIMER,timerHd);myTimer.addEventListener(TimerEvent.TIMER_COMPLETE,endHd);myTimer.start();}funtiontimerHd(e:TimerEvent){);currNum.Text=);totalNum.text=);}functionendHd(e:TimerEvent){="图片播放完毕！";}2/18/202535自动出题代码编写varrightCount:uint;varaddNum:Object={a1:0,a2:0};addNum=getRandomOf(20);add1.text=addNum.a1;add2.text=addNum.a2;varmyTimer:Timer=newTimer(1000,60);myTimer.addEventListener(TimerEvent.TIMER，timeHd);myTimer.addEventListener(TimerEvent.TIMER_COMPLETE,timeComHd);myTimer.start();sum.addEventListener(TextEvent.TEXT_NPUT,inHd);sum.addEventListener(Event.CHANGE,chHd);2/18/202536自动出题代码编写functiontimeHd(e:TimerEvent){leftTime.text=String(60-e.target.currentCount);}functiontimeComHd(e:TimerEvent){sum.removeEventListener(TextEvent.TEXT_NPUT,inHd);sum.removeEventListener(Event.CHANGE,chHd);msg.text="测试结束！"；}functioninHd(e.TextEvent){msg.text="…";if(isNan(Number(e.text))){msg.text="输入非法字符，请更正！"；}else{msg.text="…";}}2/18/202537自动出题代码编写functiongetRandomOf(n:uint):Object{varaddnum.Object={a1:0,a2:0};addnum.a1=uint(Math.random()*n);do{addnum.a2=uint(Math.random()*n);}while(addnum.a1+addnum.a2>n);returnaddnum;}functionchHd(e:Event){if(Number(sum.text)==Number(add1.text)+Number(add2.text)){msg.text="正确";rightCount++;rightNum.text=String(rightCount);addNum=getRandomOf(20);add1.text=addNum.a1;add2.text=addNum.a2;sum.text="";}}2/18/202538myEvents.aspackage{ import; publicclassmyEventsextendsEvent{ publicstaticconstHELLO:String="hello"; publicvarmessage:String; publicfunctionmyEvents(type:String,msg:String){ message=msg; super(type); } }}2/18/202539cock.aspackage{ import; import; publicclasscockextendsMovieClip{ publicfunctioncock(){ this.addEventListener(MouseEvent.CLICK,clickHd); } privatefunctionclickHd(e:MouseEvent){ this.dipatchEvent(newmyEvents("hello","Ilovehen")); } }}2/18/202540weasel.aspackage{ import; import; publicclassweaselextendsMovieClip{ publicfunctionweasel(){this.addEventListener(MouseEvent.CLICK,clickHd); } privatefunctionclickHd(e:MouseEvent){ this.dispatchEvent(newmyEvents("hello","Ieathen")); } }}2/18/202541第1帧代码aCock.addEventListener(myEvents.HELLO,helloHd);aWeasel.addEventListener(myEvents.HELLO,helloHd);functionhelloHd(e:myEvents){ this.gotoAndStop(2); ="你说："+e.message+"\n"; if(e.targetiscock){ ("你是一只公鸡，^_^"); } if(e.targetisweasel){ ("你是只黄鼠狼，o_o"); } trace(e);}2/18/202542mm.aspackage{ import; import; publicclassmmextendsMovieClip{ publicfunctionmm(){ this.addEventListener(MouseEvent.MOUSE_OVER,overMM); this.addEventListener(MouseEvent.MOUSE_DOWN,downMM); } privatefunctionoverMM(e:MouseEvent){ this.gotoAndPlay(2);