AS3.0案例教程ppt课件.ppt

1、Flash 交互设计与制作,1,内容目录,面向对象基础,事件机制与应用,类绑定,视觉编程,调用其他,多媒体控制,2,案例1星星,1、熟悉as3.0代码基本编写思路 2、库元件的类绑定操作 3、ColorTransform与hitTestObject,3,案例2碰撞小球,库元件绑定深入认识 1、文档类与flash文件绑定后，类文件内可以直接通过实例名调用指向影片元件 2、时间轴代码：直接运用实例名 3、hitTestPoint和hitTestObject用法,4,案例3打飞机,绑定类访问影片子元件 1做影片剪辑 2 生成类文件 1）为子影片剪辑定义MovieClip类型 3构造函数调用初始化函数

2、init（） 4、function init（）影片剪辑播放；实现拖动；鼠标单击事件侦听 5、侦听函数实现子影片剪播放功能 6、扩展功能*:鼠标点击影片剪辑移动和旋转,5,案例四接苹果,1、编写苹果移动类文件 2、编写文档类文件 1）添加苹果 数组变量 利用随机数，限制苹果出现数量 If语句做判断，完成苹果添加 2）测试碰撞 添加一个影片容器 For循环，完成数组变量内容想影片容器的传递 If语句完成碰撞判断,6,2、编写文档类文件 3）移除苹果 显示列表中删除 从数组中删除 4)键盘控制篮子移动 If语句判断是否按下左右键，完成水平移动,7,案例四接苹果,3、反馈 1）定义一个记录分数的变量

3、，每当碰撞发生，变量加1 2）定义一个记录等级的变量，等级变化，运动速度也变化，故在Apple类文档内就完成速度变化函数 3）定义一个变量记录失败情况，没接住苹果数量，由苹果运动y轴方向边缘数值决定，并完成删除操作。 4）成功反馈，由分数决定。,8,案例四接苹果,作业：打气球,1、按照接苹果例子思路自己编写。 2、要求下次课，给大家讲解你编写的思路,9,阶段总结,游戏结构 1、状态类型 2、游戏频率 3、事件模型 4、反馈设置,10,阶段总结,一、添加对象 1、定义一个MovieClip类型容器，mc 2、定义一个数组 3、new 绑定flash文件库中元件类 3、限定添加条件，控制添加数量；

4、或者运用for循环，确定添加数量。将库元件实例添加到mc 4、添加对象到数组 5、确定对象x y坐标 6、将对象添加到显示列表,11,阶段总结,二、检测碰撞 1、分数加分 2、出现效果 3、删除对象,12,阶段总结,三、等级与速度 定义等级变量，通过获得分数情况，变量改变，与对象y轴移动发生关联,13,阶段总结,四、移除对象 一般在碰撞发生时移除碰撞对象，另外当运动出边界时也需要移除溢出对象 1、数组删除 2、从显示列表删除 mc.removeChild(arrappleidx); arrapple.splice(idx,1);,14,阶段总结,五、反馈 通过分数判断成功或者失败（案例是通过掉

5、的苹果数量判断失败），跳转到flash文件时间轴相应帧，出现反馈信息，采取动态文本方法。 六、结束游戏 结束游戏，移除侦听事件,15,阶段总结,六、游戏框架 1、包内变量定义在构造函数之前 2、构造函数完成初始化和帧频事件 3、帧频函数内，分别调用不同功能模块的函数,16,第二阶段 拼图游戏,一、所用基本知识 1、掌握类：Bitmap BitmapData geom graphics 2、显示对象层次问题 要点：draw () 方法 copyPixels () 方法 二、游戏开始 1、定义一系列变量和实例 2、构造函数完成添加图片 3、开始按钮侦听事件函数完成一些显示对象可见性控制与调用功能函

6、数,17,第二阶段 拼图游戏,二、游戏开始 4、画线 5、切割原始图片 每个图片， 对应着一定的 i和j 以及tile.index i=0,j=1, tile.index=1,18,19,lineSprite.graphics.moveTo(rectCanvas.x , rectCanvas.y + tileHeight*(i + 1); lineSprite.graphics.lineTo(rectCanvas.x + rectCanvas.width , rectCanvas.y + tileHeight*(i + 1);,i=0，1,2,tileWidth = rectCanvas.wi

7、dth/col; tileHeight = rectCanvas.height/col;,画线,第二阶段 拼图游戏,二、游戏开始 6、拖动图片 7、停止拖动 判断,20,var targetX:Number = tile.index % col * tileWidth + tileWidth/2 + rectCanvas.x; var targetY:Number = Math.floor(tile.index/col) * tileHeight + tileHeight/2 + rectCanvas.y;,trace( tile.index % col );1 trace( Math.flo

8、or(tile.index/col) );0,期末巩固练习,一、生成36个方格 1、flash文件 新建flash文件550*400，内新建影片元件。画50*50方形图放第一帧219帧放大小相同的不同图案图形，链接类。 2、建类文件 生成36个方格，内外for循环结构，确定每个方格坐标，添加显示列表。,21,期末巩固练习,二、随机生成18对图案 1、建立数组（cardlist）添加18对数字 构造函数内，for循环，添加18对数字;0,0,1,116,16,17,17. 2、循环创建36个影片，并生成图案 1）基本同上一个例子 2）生成0-35随机数,用到什么方法呢？ 3)随机取出数组中这18

9、对数字 4)防止重复出现数字，还需要 5)将影片剪辑的18个图像，成对显示,22,Math.floor Math.random 数组.length,r,cardlist.r,Splice（r,1）,期末巩固练习,二、随机生成18对图案 5)将影片剪辑的18个图像，成对显示 影片实例.gotoAndStop(变量); 影片实例添加到显示列表,23,卡的标记问题？动态对象属性问题？,期末巩固练习,三、游戏开始 1、对卡片添加鼠标侦听器 （evt:mouseEvent) evt:参数，类型：事件本身。也是一个对象，拥有一系列属性 evt.currentTarget:模糊对象，既是影片剪辑，又是显示对

10、象 var thiscard:Card=(evt.currentTarget as Card) 通过as指定类型为Card,24,期末巩固练习,25,2、游戏逻辑,状态1准备选第1张 firstcard=null secondcard=null,状态2准备选第2张 firstcardnull secondcard=null,期末巩固练习,26,2、游戏逻辑,状态3未配对成功 firstcardnull secondcardnull,状态4配对成功，消除 通过卡片的标号值判断,期末巩固练习,27,2、游戏逻辑,if （firstcard=null） 显示所点击第一张卡片 else if (sec

11、ondcard=null) 显示第二张卡片 if (firstcard.cardface = secondcard.cardface) 从显示列表删除这两张卡片removeChild（对象） else 两张卡片显黑 重新显示第一张 ,else if(firstcard = thiscard) 第一张显黑 置为空,重复点击,期末巩固练习,28,3、游戏封装,frame1,游戏介绍,开始游戏,frame2,frame3,游戏影片剪辑,再玩一次,游戏结束 界面,在此例子，文档类绑定到影片元件上。MoveClip(root).gotoAndStop(“over”);,影片剪辑加载，并运行 绑定文档类内

12、的构造 函数，然后运行游戏,游戏停止运行,期末巩固练习1,29,4、添加得分和时间(8) 4、1添加分数 1）确定奖励分数与扣除分数的机制 2）分数显示函数，每变化一次，就刷新显示分数 3）在程序中添加分数计算 注： 文本形式可采用动态文本或者代码添加。TextField 一般构造函数前定义变量，构造函数内初始化变量,4、2添加时间(帧频事件） 1）getTimer（）函数，返回自flash影片开始播放的毫秒数。 只需要相对的时间差就可以 2）设两个变量，获得游戏开始的时间，另外表达游戏持续时间 3）时间转化函数（由毫秒到分、秒显示计算123000ms） 4）时间显示文本显示内容 5）变量内容

13、由影片剪辑到根层级传递(见代码）,30,期末巩固练习1,期末巩固练习,31,5、添加游戏效果,5、1卡片翻转效果 1）新建一个Card类，实现翻转。十步实现翻转。设一个变量=10，递减 2）6-10步this.scaleX=0.8,0.6,0.4,0.2,0逐渐变小 3）5-1步相反this.scaleX=0,0.2,0.4,0.6,0.8,1 4）为5时，显示卡片图案 gotoAndStop(frame); 5）还有什么需要改进？,要实现中心翻转，影片元件中与注册点 对齐位置要改，坐标计算参考量要改,32,两张翻过来的卡片不匹配时，内层,5.2卡片浏览时间 卡片翻上以后，留有2秒钟时间供玩家

14、记忆，然后翻黑 1）使用Timer类完成此功能 2）函数添加在哪里？ 采用TimerEvent.TIMER_COMPLETE事件触发,期末巩固练习,期末巩固练习,33,5、添加游戏效果,不足2秒钟，继续点击其他对象怎么办 1）功能代码写在哪里 2）做几件事情？ 5、3添加声音 我们需要三种声音：点击第一张卡片，点击第二张卡片 匹配成功声音 1）导入到库，绑定链接 2）定义声音对象 3）函数实现播放,调用卡片翻黑函数 生成第一张，新一轮开始,翻了第二张不匹配之后，外层。,期末巩固练习2-记忆和推理,34,1、画灯与灯的颜色变化两个影片元件 2、类定义与声明变量 1）需要3个数组：灯对象列表；增长

15、序列，每次增加一个比对玩家点击情况的数组 2)两个文本; 屏幕上方提示信息下方显示灯的序列数 3）两个计时器：第一个将灯点亮第二个将灯熄灭 4）其他：字符串类型控制播放还是重复（使得程序易读，结构完善），存储对light影片引用的变量存储声音的数组,期末巩固练习2-记忆和推理,35,3、设置文本、灯和音频 1）构造函数：完成游戏界面初始化和音频文件的加载 2）添加文本：一个文本创建界面上方的文字；另一个用于显示当前序列的长度 3）加载音频，采用数组。音频文件命名方法note1.mp3-note5.mp3 4)添加灯，她们间隔排列在屏幕中央 5）准备第一轮序列数组，调用函数，开始第一轮游戏,期末

16、巩固练习2-记忆和推理,36,4、播放序列 任务：用来启动每一轮序列的播放。该函数随机添加一盏灯到序列，屏幕上方文字显示内容，接着启动显示序列的计时器（Timer类完成） 1)生成随机数0-4,添加到playorder数组中 2)显示文本内容 3)设置计算器，间隔为1秒，执行次数数组长度+1，计时器事件，启动计时器，执行事件函数,每秒调用一次函数，（event：TimerEvent)event.currentTarget即为Timer event.currentTarge.currentCount的值返回计时器执行的次数，将其保存 在变量中，通过此变量确定点亮哪盏灯,期末巩固练习2-记忆和推理

17、,37,5、重复序列 开始重复序列时，复制playorder列表。运用concat方法。 6、点亮与熄灭灯 点亮同时，启动一个计时器完成熄灭 7、接受与检查玩家交互情况 鼠标点击侦听事件，配对判断。,期末巩固练习2-记忆和推理,38,至此游戏结构梳理 1、构造器函数完成一系列变量和对象的初始化（灯与声音的添加） 2、next turn（）函数完成点亮序列准备事宜（产生随机数数组，启动计时器，并每秒调用一次计时器函数） 3、在计时器函数内，主要通过Timer对象的currentCount的返回值，完成点亮序列中哪盏灯与结束序列的代码运算 4、lightOn与lightOff完成点亮与熄灭灯。在l

18、ightOn（）内在启动一个计时器，完成lightOff 5、检查并反馈玩家点击灯情况。通过对鼠标点击事件侦听，并且在点击事件函数内完成配对判断与启动下一轮。,数学类计算,正弦函数和余弦函数 角度和位移之间的换算：rotation 与dx， dy的关系 Rotation（-180180.可以精确到0.01）,39,0,0,1,0 0,-1,0 180 ,0,-1 270 1.5,0,1 90 0.5,57 1.0r,0.54 0.84,单位是1，cos0=1dx sin0=0dy 物体rotation使用度（-180-180），数学函数 使用的是弧度 换算 度弧度 弧度=2*（度/360) 弧

19、度度 度=360*弧度/（2*）,小车旋转与前进,40,function movecar（） var speed:Number=5.0; var angle:Number=2*Math.PI*(car.rotation/360); var dx:Number=speed*Math.cos(angle); var dy:Number=speed*Math.sin(angle); car.x+=dx; car.y+=dy; 游戏具体结构参考代码,根据位置旋转角度,通过坐标算出角度，反正切函数 as中Math.atan2. var dx:Number=mouseX-pointer.x var dy:

20、Number=mouseY-pointer.y; var cursorAngle:Number=Math.atan2(dy,dx); var cursorDegrees:Number=360*(cursorAngle/(2*Math.PI); pointer.rotation;=cursorDegrees J结构参考代码,41,碰撞检测,两物体之间检测 hitTestObject，属于，DisplayObject 类。所有继承自显示对象类的子类，如MovieClip 、Bitmap, Video, TextField 等都可以使用。 sprite1.hitTestObject(sprite2)

21、,42,碰撞检测,两物体之间检测 hitTestPoint(x,y,true)，将 shapeFlag 设置为 true 意味着碰撞检测时判断影片中可见的图形，而不是矩形边界。 距离检测 var dx:Number = sprite2.x - sprite1.x; var dy:Number = sprite2.y - sprite1.y; var dist:Number = Math.sqrt(dx * dx + dy * dy); if (dist 80) trace(hit);,43,碰撞检测,两物体之间检测 距离检测,44,if (Point.distance(new Point(ca

22、r.x,.car.y), new Point(sprite2.x, sprite2.y) 50) trace(“hit ”); ,碰撞检测,两物体之间检测 定义矩形区域检测，可以进行更加详细的检测 var carRect = new Rectangle(car.x - 70 / 2,car.y - 70 / 2,70,70);,45,见帮助geom类,移动背景,46,事件机制,DOM3事件机制1、注册侦听器2、发送事件3、侦听事件4、移除侦听器 注册侦听器：指定发出事件由哪个对象哪个方法来完成 侦听器：也就是事件的处理者，在as3.0中是函数类型 事件在代码中表现为事件对象，为flash.ev

23、ents.Event类或其子类的实例，发送事件和侦听事件中的相关参数必须采用Event类型的事件对象。事件对象拥有Event类的属性和方法 侦听器中的this关键字，在类方法中使用，指向当前的类实例对象。使用在包外做侦听，指向Global。,47,事件流机制,事件流机制只与显示列表先关联。即在舞台上的显示对象,48,按钮文本,按钮所处的容器,再上一层父容器,再上一层,舞台（根容器）,鼠标 点击,目标阶段,冒泡阶段,捕获阶段,事件流机制,1、捕获阶段 一旦显示列表有一个对象被单击，FlashPlayer会发出一个事件对象。这个事件对象会按照显示列表，从根容器舞台开始一层层往下找，直到被单击的最里

24、层的显示对象。这个显示对象被称为目标对象。目标对象就是事件对象的target。捕获阶段包括从舞台根容器到目标对象的所有父级容器 2、目标阶段 当事件对象停留在目标对象时，这个时候就是目标阶段。 3、冒泡阶段 过了目标阶段，事件对象从目标对象再次沿着显示列表，往上移动,49,事件流机制,4、事件currentTarget属性和target属性 对于一个事件对象而言，有两个和事件目标相关的属性Target，表示事件的显示对象，一般处于最里层 一个是currentTarget对象，表示当前侦听事件的节点，往往是容器。只有添加侦听事件的显示对象和发生事件的显示对象为同一个时， currentTarge

25、t= target 5、侦听器的调用一般发生在冒泡阶段 见事件流例子,50,访问控制权限,Public ：完全公开，任何地方。任何对象都可以访问 internal :默认，包内可见。同一个包内的其他类也可以访问 Private：仅当前类可以成员可以访问,51,52,注册点,对象坐标：（100，80）,全局坐标（300,180） 鼠标在显示对象的坐标系中的坐标值 显示对象.mouseX=200 显示对象.mouseY=100 鼠标偏离当前对象注册点的横向和纵向距离 显示对象.x=100 显示对象.y=80 显示对象注册点离自己父容器注册点的横向与纵向距离,用ENTER_FRAME事件来判断到多少

26、帧之后再显示那个动画 追问 能否给个代码例子参考下? 回答 var i:int = 1;a.visible = false;a.stop();addEventListener(Event.ENTER_FRAME,onFrame);function onFrame(e:Event):voidi+;if(i=100)a.visible = true;a.play();,53,影片剪辑跳到主场景,MovieClip(parent).gotoAndPlay(6);/这是向上一级 thisparent.gotoAndPlay(6); /这是向上一级 或者thisroot.gotoAndPlay();/这

27、是跳到所在的根，或者MovieClip(root).gotoAndPlay();/这是跳到所在的根， 例如 主场景里第某帧的mc实例中，在mc最后一帧加上MovieClip(parent).gotoAndPlay(6);/就会跳到主场景第6帧播放,54,Math类,【使用Math.round()对一个数取整,四舍五入】 Math.round() trace(Math.round(204.499); /输出:204 trace(Math.round(401.5); /输出:402 【使用Math.floor()对一个数向下取整,就是只要整数部分而不理会小数分】 trace(Math.floor(

28、204.99); /输出:204 【使用Math.ceil()对一个数向上取整,只要小数部分不为零,整数部分就加1】 trace(Math.ceil(401.01); /输出:402 【产生一个随机数】 使用Math.random()产生一个伪随机数n,其中 0 = n 1,55,数组,concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。这个新数组是由两个数组组合而成的。 var foo:Array = A,B,C;var bar1:int = 1;var bar2:Array = 2,3,4;var bar3:Array = a,b,c;var newFoo:Array = foo.c