1 / 64

第２单元　动画演出内容的编程设计

第２单元　动画演出内容的编程设计. 项目三　交互生日贺卡. 加入 移除演员. 在单击鼠标位置动态加入演员 发老虎演员素材 .fla 在单击实例时 , 移除 发斑马素材 .fla. §2-1 动画演员的增减. 改造项目１： 使演员数量进行动态变换 实现交互，鼠标单击加入老虎动物角色，增加 10 个时，出现瞄准器．移动瞄准器，单击后可删除已加入的老虎角色．. 准备素材 背景底图、老虎影片剪辑、瞄准器影片剪辑 实现思路 鼠标单击出现老虎角色的技术支持 将老虎元件属性定义为类，单击时不断创建该类的实例

rich
Download Presentation

第２单元　动画演出内容的编程设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第２单元　动画演出内容的编程设计 项目三　交互生日贺卡

  2. 加入\移除演员 • 在单击鼠标位置动态加入演员 • 发老虎演员素材.fla • 在单击实例时,移除 • 发斑马素材.fla

  3. §2-1动画演员的增减 • 改造项目１：使演员数量进行动态变换 • 实现交互，鼠标单击加入老虎动物角色，增加10个时，出现瞄准器．移动瞄准器，单击后可删除已加入的老虎角色．

  4. 准备素材 • 背景底图、老虎影片剪辑、瞄准器影片剪辑 • 实现思路 • 鼠标单击出现老虎角色的技术支持 • 将老虎元件属性定义为类，单击时不断创建该类的实例 • 定义事件(click)侦听器，编写监听函数copyMc()加入演员。并计数 • 当老虎数量达到10个时，不在增加老虎．用瞄准器删除老虎的技术 • 当计数到10个时，出现瞄准器，单击可以删除老虎演员 sh_mc.startDrag(true); 删除click侦听器； 重新注册侦听器，定义删除函数 当只剩最后一个老虎时，不再删除

  5. var m=1; stage.addEventListener(MouseEvent.CLICK,copyMc); function copyMc(me:MouseEvent){ var tCopyMc:tiger=new tiger(); tCopyMc.x=mouseX; tCopyMc.y=mouseY; this.addChild(tCopyMc); m=m+1; if (m>=11){ sh_mc.startDrag(true); stage.removeEventListener(MouseEvent.CLICK,copyMc); stage.addEventListener("click",delMc); function delMc(me:MouseEvent){ removeChild(DisplayObject(me.target)); m=m-1; if(m==1){ stage.removeEventListener("click",delMc);} }//增加了DisplayObject()函数,将隐匿的对象转换为显示对象 } } • 程序代码

  6. 事件的目标对象 target Event 类的target 和currentTarget属性 • target 属性存储对事件目标的引用 • currentTarget 属性存储对当前正在处理事件对象的显示列表对象的引用 • var circleMC:MovieClip = MovieClip(e.target) 还可以写成var circleMC:MovieClip = e.target as MovieClip 即声明一个名称为circleMC的MovieClip对象，让它等于一个也是MovieClip类型的对象 • MovieClip(e.target)相当于把e.target转化为MovieClip对象

  7. 库中定义影片剪辑类 • ８个随机彩色气泡鼠标跟随 • 技术实现要点： • 建立气泡影片剪辑 • 圆注册点不在中心位置，加滤镜阴影效果．制作位置移动动画 • ２.库中定义影片剪辑类ball • ３.注册帧频侦听事件 • ４.事件函数功能产生类ball的实例，改变其旋转度，颜色，使产生的ball实例变为可拖动． • ５.产生一定数量后，删除侦听器

  8. 初始化计数器i; 申请颜色变量myColor; 注册帧频事件侦听器; 定义事件函数copyball(); 是 i<8 否 产生新的气泡; 定义气泡的旋转度； 定义气泡的颜色； 将气泡添加到主时间轴中； 使气泡可拖动； i增加1; i=0; 移除帧频事件侦听器； 随机彩色气泡鼠标跟随 流程图

  9. 随机彩色气泡鼠标跟程序代码

  10. 创建显示列表 • 舞台是Stage类的实例，其属性是通过变量stage属性来引用． Stage类属于容器类，可以在舞台中添加其他显示实例． 　在默认情况下，主时间轴是显示实例，已添加在舞台中． • 任何一个显示实例肯定在一定的显示容器中，在实例化显示类时，要使用addChild()方法将显示实例添加到显示列表中． 添加和移除显示实例的方法 要检测显示容器中，有几个显示实例，可以用numChildren属性 容器名称.numChildren 给显示对象命名 显示对象变量．Name=“XXXX”

  11. stage root sp1 sp2 sp3 sp4 显示列表示例 var sp1:Sprite=new Sprite(); var sp2:Sprite=new Sprite(); sp2.name=“sp2”; var sp3:Sprite=new Sprite(); var sp4:Sprite=new Sprite(); Sp4.name=“sp2_sp4”;//name属性定义实例名 stage.addChild(sp1); this.addChild(sp2); sp2. addChild(sp3); sp2. addChild(sp4); trace(stage.numChildren);//检测某个容器有几个显示实例 trace(this. numChildren); trace(sp2. numChildren); 注意：程序创建的显示对象，不能通过简单的点语法来访问； 显示列表的实例是手工创建的影片剪辑实例时，可用点语法向下访问　

  12. MovieClip、Sprite、Shape的区别 • MovieClip：拥有一个时间轴，动态类 。三者都包括 graphics属性 • Sprite：不需要时间轴的对象的相应基类 ，是去掉了时间轴的MovieClip，不是动态类。对象是显示对象容器 ，Sprite对象支持鼠标单击事件 。 • Shape：创建简单形状 。Shape 对象比包含相同图形的 Sprite对象消耗的内存少 ，不支持鼠标单击事件(startDrag()) ，不是容器不能包含子显示对象。

  13. stage root sp1 sp2 sp3 sp4 上一级引用 • 从下向上访问：parent属性 trace(sp4. parent.name); trace(sp4. parent. Parent.name); 下一级引用 • getChildAt();据索引来访问 • getChildByName(name:String)；据实例名来访问 1 0

  14. 舞台内反复运动的足球 • 足球素材.fla（P36） • 通过帧频事件，以一定的增量不断改变影片剪辑的X、Y坐标． • If语句判断上下左右边界的处理 • Y<0 • Y>300 • X<0 • X>500

  15. with语句 • 多次参考元件的各个属性或方法，不需一再指定元件的名称。从而潜在地减少需要编写的代码量 with(实例名称){ 程序语句 } 示例：福到了 １.绘制影片剪辑，30*30正方形，在其上部 输入福字并旋转135度，名为m_mc,放于 场景在上角． ２.with (mymc) { x=100; y=100; scaleX=2; scaleY=2; alpha=0.9; rotation=45; }

  16. §2-2演员的动作表演 • 演员由远而近走来的效果(move源文件.fla） • 角色在场景中进行移动，同时有近大远小的效果． • 用with进行源文件的修改（ move.fla ）

  17. §2-2演员的动作表演 • 改造项目２演员按指定位置行走（xymove.fla) • 角色在场景中，能按照鼠标点击的位置进行移动，同时有近大远小的效果． • 参P42人物朝指定位置行走（女孩走路素材.fla）

  18. 准备素材 • 背景底图、女孩走路影片剪辑gril_mc • 实现思路 • 设定gril_mc的初始位置，定义目标位置，走路动作停止． • 设置侦听器函数，编写监听函数setXY，使女孩走路的目标位置由单击鼠标决定． • 设置enterFrame事件侦听器，编写女孩走到目标位置的实现方法．主要包括XY的变化，大小的变化．

  19. stage.addEventListener("enterFrame",moveGirl); function moveGirl(me:Event){ with(girl_mc){ if (y<moveL ){ if(x<myX ){ x=x+2; } else if(x>myX){x=x-2; } if(y<myY ){ y=y+2; height+=(height/120); width+=(width/120);} else if(y>myY){ y=y-2; height-=(height/120); width-=(width/120);} } else { stop();} if (y==myY && x==myX)｛ stop(); } } } var moveL=this.height-girl_mc.height; //this.height是场景中对象重叠时,最高的数据; girl_mc.x=250; girl_mc.y=18; var myX=girl_mc.x; var myY=girl_mc.y; girl_mc.stop(); stage.addEventListener("click",setXY); function setXY(me:MouseEvent ){ myX=this.mouseX; myY=this.mouseY; girl_mc.play(); } • 程序代码

  20. 作业完成 • 仿真３D角色移动，参见书P44

  21. 知识技能总结 • 计数器变量的定义 • var 变量名：数据类型 • 数据类型 • 简单类型５个： int(32有符号整数)．var a:int=3.45; var name:String=“fox” uint（32位无符号整数，非负整数）表示颜色值、键控代码值等 var color:uint=0xff9900; trace(color);输出表示十进制整数的颜色值 const KEY_A:uint=65;键A的代码值 Number浮点运算 对于浮点运算不能用＝＝判断２个数是否相等,浮点计算有误差 trace(0.15+0.15==0.3) true trace(0.1+0.2==0.3) false.

  22. 知识技能总结 • 数据类型 • 简单类型： Boolean布尔值．非此即彼的数据，取值ture,false; var isRight:Boolean =true; String类型，由单引号或双引号括起来的字符串 字符串的长度与索引： var name:String=“foxhhyy”; trace(name.length); 7 索引从０开始 trace(name.charAt(2)); x—返回指定位置索引的字符

  23. 函数类型 类类型 引用数据类型 接口类型 Object,MovieClip, SimpleButton,Error TextField,Date,Array Function,XML • 知识技能总结 • 数据类型 • 复杂数据类型： • 包与类 flash 包是 Flash CS 和 Flex 共用的包，是 AS 3 基础包 fl 包是 Flash CS 组件相关的包，Flash CS 专有包。 flash.utils包中的部分函数 AS3的顶级类 fl与flash部分包

  24. 知识技能总结 • 使用Stage类 • stage是Stage 类的实例，常用属性： • stage.frameRate；舞台帧速度 • stage.stageWidth,stage.stageHeight • stage.displayState;(“fullScreen”,”normal)” 示例（isFull.fla）：编程实现用单击方式改变全屏或退出全屏交互程序

  25. 知识技能总结 • stage.displayState;(“fullScreen”,”normal)” 示例（isFull.fla）：编程实现用单击方式改变全屏或退出全屏交互程序 var isFull:Boolean =false; stage.addEventListener("click",fullscreen); function fullscreen(me:Event ){ isFull=!isFull; if(isFull){ stage.displayState="fullScreen"; } else{ stage.displayState="normal"; } }

  26. 知识技能总结 • 使用MoiveClip类 • 用程序（编程绘制填充圆形.fla）实现在舞台上建立一个圆形r=15影片剪辑对象,填充为红色,边线粗细２，黑色。 • 用MoiveClip类的graphics属性绘制圆形． • 显示对象用addChild()添加到显示列表中 var c_mc:MovieClip=new MovieClip(); c_mc.graphics.lineStyle(2,0x000000); c_mc.graphics.beginFill(0xff0000); c_mc.graphics.drawCircle(250,175,15); addChild(c_mc);

  27. §2-2 演员的动作表演 • 项目２：持续旋转与变换颜色效果 • 绵羊角色会随着鼠标位置来改变自身的旋转角度大小，旋转速度与方向． • 其背后光束效果，会随机变换颜色 • rotation&chgcolor素材.fla

  28. 准备素材 • 背景底图 • 绵羊影片剪辑Sheep_mc • 光束color_mc • AS图层 • 实现思路 • 设定Sheep_mc的最大转速 • 设置侦听器函数，enterFrame事件．编写监听函数gotRot，使Sheep_mc的_rotation属性会根据当前鼠标的位置进行旋转． • 对象的旋转属性 • 指定影片剪辑的旋转角度．属性值在0～180顺时针方向 －180～0逆时针方向．超出范围时，数值加上或减去360的倍数即可．如：mc.rotation=450等于mc.rotation=90 • 实现光束颜色的随机改变．

  29. var maxSpeed:int = 60; this.addEventListener("enterFrame",goRot); function goRot(me:Event){ var difX =this.mouseX; var difY =this.mouseY; var num = difX + difY; num = Math.round(num/10); var speed = maxSpeed - num; sheep_mc.rotation += speed; //0-180顺时针,-180-0逆时针; //实现背景颜色1秒的变换 var color_array:Array=[0xff0000,0x00ff00,0xffff00,0x0000ff]; var my_color:ColorTransform=new ColorTransform(); var i:Number; i=Math.floor(Math.random()*color_array.length ); my_color.color=color_array[i]; color_mc.transform.colorTransform=my_color; } • 程序代码

  30. 知识技能总结 • 顶级类 • 数学Math Math类的属性称为类属性，通过类名来访问。常用属性和方法： Math.PI,Math.sin(), Math.cos(), Math.random(),Math.floor(), Math.round() Math.sin()\cos()是以弧度为单位，要将角度转为弧度： angle*Math.PI/180=angle*0.0174533; • 随机方法Math.random().返回０＜＝ Math.random()＜１小数. 如果得到A~B之间的随机数，用下面代码表示： A+(B-A)*Math.random(); 如： Math.random()*10+10;返回大于等于１０，小于２０的小数

  31. 知识技能总结 • 顶级类 • 数学Math.random()*取整方法 １.将小数赋值给int或uint类型的变量时，小数部分被忽略 var t:uint=Math.random()*11+10;//产生10到20间的整数，包括10、20 Var t:int=Math.random()*21-10;返回的数据范围是多少？ 2.Math.floor(3.59/-3.59) ; 返回小于等于最接近指定值的整数值．3/-4 3.Math.round(3.59/-3.5); 返回最接近指定值的整数值（较大）．4/-3

  32. 知识技能总结 • 取随机整数时，应使用floor（）方法而不是round（）方法进行随机取整． 例：for(var i:int=0;i<100;i++) trace(Math.round(Math.random() *21)); //返回包括２１在内的整数； 当random（）返回的小数大于20并小于20.5时，round（）取整为20；大于20.5取整为21;所以０的概率少了一半； trace(Math.floor(Math.random() *21)); //返回不包括２１在内的整数且随机数准确． 参见书P60实例

  33. 知识技能总结 • 顶级类 • 数组Array：将一系列数据有序地组织起来，进行批量的处理和操作。 var employee:Array=[“Adobe”,”Facebook”,”Apple”]或一系列颜色值 var employee:Array= new Array(); employee[0]= “Adobe”; employee[1]= “Facebook”; employee.length数组长度；数组下标从０

  34. 知识技能总结 • 调整颜色显示对象步骤** 调整Color属性 • ColorTransform类定义在flash.geom包中(flash.geom.ColorTransform).其方法可以调整显示对象的颜色．每个显示对象都有transform，ColorTransform属性． 1.先构造函数new ColorTransform() var myColor:ColorTransform= new ColorTransform()； 2.调整color属性设置颜色值 myColor.color=0xffffff; 3.将ColorTransform实例myColor重新分配给对象（transform.colorTransform） myObject.transform.colorTransform=myColor; 注意：颜色不会应用于MC的背景

  35. 知识技能总结 • 调整颜色显示对象步骤** 调整乘数属性和偏移属性（依鼠标改变颜色.fla） • 显示对象有多种颜色，不希望完全重新调整对象的颜色，而根据现有颜色来调整显示对象的颜色。ColorTransform有一组乘数属性和偏移属性进行此类调整。 1.乘数属性redMultiplier、greenMultiplier、blueMultiplier、alphaMultiplier可以将颜色调整或颜色转换应用于所有四种通道：红色、绿色、蓝色和 Alpha 透明度(在０－１范围取值，默认１正常)。增强或削弱显示对象上的某些颜色。 2.偏移属性redOffset 、greenOffset 、blueOffset 、alphaOffset额外增加对象上某种颜色值。 颜色属性面板-高级

  36. 画面颜色动态改变 bg_mc.addEventListener(MouseEvent.MOUSE_MOVE,rg); function rg(e:MouseEvent){ var ct:ColorTransform=new ColorTransform(); // 根据鼠标位置设置红色和绿色乘数，鼠标 x 轴位置控制红色；y 轴位置控制绿色 // 鼠标从图像左侧到右侧，红色值的范围从 0% 到 100%（从无红色到正常图像红色） // 鼠标从图像上方到下方，绿色值的范围从 0% 到 100%（从无绿色到正常图像绿色） ct.redMultiplier=this.mouseX/bg_mc.width; ct.greenMultiplier=this.mouseY/bg_mc.height; bg_mc.transform.colorTransform=ct; }

  37. 编程实现 • １.产生漫天雪花效果（复制雪花.fla，雪花飘起来.fla） • ２.子弹沿螺旋线运动效果（沿螺旋线运动的子弹sin().fla）

  38. 漫天雪花的编程思想 • 制作雪花影片剪辑元件，在库中设置属性类名：snow • 产生一个显示对象容器，以便将雪花实例放在该容器中 • 利用构造函数new产生２５０朵雪花实例，并修改他们的XY大小等属性，充满舞台． 让雪花飘 • 使雪花飘起来，利用帧频事件触发， • 定义侦听器 • 编写事件触发函数，不断改变雪花的Y属性

  39. for(var i:uint =1;i<250;i++) { var xue_mc:snow=new snow();//库中雪花剪辑元件,属性类名为snow; //xue_mc.name="xue"+String(i); xue_mc.x=640*Math.random (); xue_mc.y=480*Math.random (); xue_mc.scaleX=xue_mc.scaleY=Math.random(); addChild(xue_mc); xue_mc.addEventListener(Event.ENTER_FRAME,moveY); } function moveY(e:Event) { var speed:uint=e.target.width*Math.random()/5; e.target.y+=speed; if (e.target.y>480) { e.target.y=0; } }

  40. 作业：定制T恤颜色 • 编程实现以下功能 • 据用户对颜色的需求，决定T恤的颜色． • 要求可选颜色与书中的颜色至少有一半以上不同

  41. 实现步骤 • 建立１１个不同的颜色按钮，命名a_btn,b_btn…用属性面板调整色调并记录色调值． • 建立衣架和阴影的ＭＣ • 建立衣服影片剪辑cloth_mc，色调为红. • 编程程序 • 定义颜色数组，存放１１个按钮的颜色值 var color_array=[0xff0000,0x00ff00,0x0000ff,…] • 为１１个颜色按钮注册事件侦听器,事件为“click” a_btn．addEventListener(“click”,clothColor); • 事件处理函数 • 据用户单击的颜色，为衣服定制颜色 建立ColorTransform的实例对象 var myColor: ColorTransform=new ColorTransform(); 用分支语句判断myColor.Color的颜色值 将颜色值应用在衣服上 cloth_mc．Transform．ColorTransform＝myColor；

  42. 制作震动效果（发素材shake素材.fla） 技术要点： • 将震动影子对象置于顶层，透明度属性６０％，位置不重叠 • 使该对象与原对象位置随机进行微小动态变化 • 建立帧频事件侦听器 • 使震动影子对象的坐标位置随机微小变化

  43. 可调速的滑动广告牌 • 利用鼠标指针的X轴位置，决定广告牌的滑动方向（向左或向右）与滑动速度 • 案例制作要点(广告素材.fla) • 可视元素广告牌影片剪辑(六部影片画面，组合成３组) • 广告牌影片剪辑的移动速度由当前光标的位置确定 • (250-this.mouseX) /10；以舞台中心位置为中心 • 广告牌内容的无缝对接技术 • 左边X<0 • 右边X>850

  44. 项目三《水果丰收》Flash游戏制作 • 4369游戏公司委托XX小组开发一款网页游戏《水果丰收》，尺寸大小600*400,帧频24fps. • 水果有西瓜、桔子、火龙果、草莓（可以创新） • 游戏开始后，用鼠标移动舞台的小女孩（可以创新）接住从天而降的水果。水果的速度一轮比一轮快，4种水果的出现要随机。 • 接住西瓜6分，桔子2分，草莓1分，火龙果-3分。 • 游戏界面显示总分，时间100秒倒计时，时间到显示重玩一次，总分清零。 • 有声效加分(背景音乐、水果收获音效）

  45. 项目三　水果丰收Flash游戏制作 • 网页游戏《水果丰收》项目实施要求 • 分组进行，6人一组，自由组合。要求：男女搭配，特长搭配。 • 各自为小组起名，并设计小组LOGO。 • 选定项目组长（确保每位成员参与，明确分工）；确定演讲汇报员（制作PPT，汇报本组成果）； 确定记录员，记录小组会议讨论情况。 • 上交时间： 4.12各小组上交作品，演示答辨，小组间评价。

  46. 游戏实现思路 • 制作计分器影片剪辑 • 注册帧频事件侦听器，事件函数为文本框设置分数值parent.score • 制作计时器影片剪辑 • 初值hastime=100秒，开始时间值startime • 注册帧频事件侦听器,事件函数处理倒计时 hastime-Math.round(nowtime-startime)/1000) 倒计时为０，移除该侦听器 游戏转到结束场景；

  47. 游戏实现思路 • 制作影片剪辑水果对象类 • ４种水果各一帧 • 设置水果的初始位置在舞台上边缘之外 this.x = Math.random()*500+50;（５０－５５０间） this.y = -40; • 下落速度 speed = 5+Math.random()*30;（５－３５间） • 水果显示的各类和对应的分数 西瓜、桔子、草莓、火龙果出现的可能性10%,20%,30%,40%. 西瓜 桔子 火龙果 草莓 0.0 0.1 0.3 0.6 1.0

  48. 注册帧频事件侦听器； 事件函数： 设置下落速度 判断水果超出边界时，移除侦听器和水果对象； 否则，判断水果是否与小女孩手中的盘接触，是，加分；移除侦听和水果； k = Math.random(); if (k<0.1) { gotoAndStop(1); thisScore = root.S1; } else if (k<0.3) { gotoAndStop(2); thisScore = root.S2; } else if (k<0.6) { gotoAndStop(3); thisScore = root.S3; } else { gotoAndStop(4); thisScore = root.S4; }

  49. 游戏实现思路 • 规划主场景 • 第一帧内容，游戏标题，水果对应分数，开始按钮 • 第二帧内容，计时器、计分器、小女孩、分数显示，隐藏鼠标. startDrag(t/f,拖曳区域)；拖曳区域为矩形对象，指定拖曳影片剪辑时的限制范围 • 第三帧内容，不停地复制水果，形成大量水果下落效果 • 第四帧内容，最后统计最终得分，显示再玩一次。

  50. 碰撞检测 • 形状与形状碰撞hitTestObject(); • 如果２个对象在任意一点上重叠或交叉，该方法返回true;否则返回false。 注意：1.碰撞是以显示对象的外接矩形框是否重叠作为评判的依据。 2.剪辑对象运行时有旋转时，采用的是大虚线框作为冲突检测的矩形区域

More Related