互动媒体制作实验报告 .pdf

上海建桥学院本科实验报告课程名称：互动媒体制作学号：姓名：专业：数字媒体艺术班级：指导教师：课内实验目录及成绩序号实验名称页码成绩1 交互事件动画（星星亮满天）12 文字回合类游戏制作43 找茬类小游戏74 碰撞类游戏制作11信息技术学院2012年 12 月1 日名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 49 页 - - - - - - - - - 上海建桥学院实验报告课程名称：互动媒体制作实验类型：验证型实验工程名称：交互事件动画（星星亮满天）实验地点：多媒体机房实验日期：2013年 3 月 7 日一、实验目的和要求1、 熟悉的运用；2、 巩固 AS3.0 的程序结构和基本语法；3、 能够创建和调用系统函数；4、 能够熟练运用程序基本结构；5、 制作满足相应指标要求的正确运行的小游戏；二、实验内容和原理1、 使用显示对象、对象点击事件、三大元件等编写交互功能2、 程序的基本结构包括：顺序结构、选择结构、循环结构3、 事件函数： MouseEvent事件类4、 时间函数： Timer 类三、主要仪器设备或环境PC机；Flash cs5.5 （或以上）；Photoshop cs5 （或以上） ；移动终端 5 套。四、操作方法与实验步骤1、确定游戏的主题（名称、色彩配置、主题思想、使用方法等）名称：星星亮满天色彩配置：深邃的天空 +颜色随机的星星主题思想：在背景天空区域，左键单击星星出现，并且颜色随机使用方法：鼠标左键单击2、确定游戏的设计流程图名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 49 页 - - - - - - - - - 3、游戏素材的采集、导入或制作导入图片 bg，并转成元件导入图片星光，并制作成动画4、关键的操作步骤（含主要代码）及技巧星光转换成元件，并制作动画，达到星星从大到小，从小到大的变化。然后将此元件再次转换，并再次制作动画，共5帧，每帧星星颜色不一样。在 bg上的天空上制作一个遮罩层mc ，并对 mc 添加一个鼠标监听。mc.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2)。function fl_MouseClickHandler_2(event:MouseEvent):void var mystar:star=new star() 。mystar.x=mouseX。mystar.y=mouseY 。/改大小 /颜色mystar.stop() 。var randomNum:int=Math.floor(Math.random()*5+1) 。mystar.width=mystar.height=Math.random()*60+30。mystar.gotoAndStop(randomNum) 。addChild(mystar)。trace(已单击鼠标 )。 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 49 页 - - - - - - - - - 五、实验结果注：可用贴图的方式1、主要使用的 AS3.0 的知识点添 加 鼠 标 监 听 、 实 例 对 象 显 示 在 鼠 标 点 击 的 位 置 （ mystar.x=mouseX。mystar.y=mouseY。 ） 、数学函数（随机数、向下取整） 、gotoAndStop 2、小游戏的效果（至少给出3 个，含制作过程及结果）名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 49 页 - - - - - - - - - 六、实验归纳总结注：包括制作过程中出现的问题，实验心得体会及改进意见等在老师的带领下完成了此次小游戏，初次体验到Flash 的神奇，特别是随机数的出现。在这种浓烈的兴趣下，我将更认真的学习Flash 。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 49 页 - - - - - - - - - 上海建桥学院实验报告课程名称：互动媒体制作实验类型：设计型实验工程名称：文字回合类游戏制作（面向过程及时间函数）实验地点：多媒体机房实验日期： 2013年 3 月 21 日一、实验目的和要求1、 巩固面向对象编程的相关概念；2、 构造函数的创建和使用；3、 事件处理机制及 Event类的创建、使用（事件侦听器） ；4、 能够熟练运用鼠标事件；5、 制作满足要求的动画效果；二、实验内容和原理1、 使用事件驱动编写AS3.0 应用程序（物体移动等的动画效果）2、 鼠标事件：CLICK 、MOUSE_MOVE 、 MOUSE_OVER 、MOUSE_OUT 、MOUSE_WHEEL 等3、 键盘事件： KeyboardEvent.KEY_DOWN(UP) 等4、 时间函数： TimerEvent.TIMER 、TimerEvent.TIMER _COMPLETE 三、主要仪器设备或环境PC机；Flash cs5.5 （或以上）；Photoshop cs5 （或以上） ；移动终端 5 套。四、操作方法与实验步骤1、确定作品的主题（名称、色彩配置、主题思想、使用方法等）名称：勇者斗恶龙主题思想：为了描写战斗，对勇者与恶龙设置特性，如名字，攻击力，防御力以及速度，运行游戏，出现打斗文字。使用方法：结果显示在输入框里2、主题作品的设计运行游戏后，勇者与恶龙轮流发动攻击，最后得出胜负。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 49 页 - - - - - - - - - 3、素材的导入或制作没有素材的导入4、关键的操作步骤（含主要代码）及技巧var hero:Object = new Object()。var monster:Object = new Object() 。hero.name = 勇者。hero.HP = 500 。hero.ATT = 90。hero.DEF = 88。hero.AGI = 60。hero.skill1 = 普通攻击 。hero.skill2 = 飞刃闪 。hero.skill3 = 极光剑 。monster.name = 恶龙。monster.HP = 1000 。monster.ATT = 120。monster.DEF = 100 。monster.AGI = 22。monster.skill1 = 攻击。monster.skill2 = 龙尾击 。monster.skill3 = 毁灭光线 。var timer:Timer = new Timer(1000)。timer.addEventListener(TimerEvent.TIMER, round) timer.start()。function whoAttacks(a:Object,b:Object):Array 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 49 页 - - - - - - - - - return a.AGI*Math.random() b.AGI*Math.random() ? a,b:b,a 。 function round(e:TimerEvent):void var damage:Number 。var skillIndex:uint 。var roundFight:Array = whoAttacks(hero,monster)。var attacker:Object = roundFight0。var defender:Object = roundFight1。damage = attacker.ATT*Math.random() - defender.DEF * Math.random() 。if(damage = 0) damage = 0 。else damage = Math.ceil(damage) 。 defender.HP -= damage 。if(damage attacker.ATT / 3) skillIndex = 1。else if(damage attacker.ATT *2/ 3) skillIndex = 2。else skillIndex = 3。 trace(attacker.name + 向 + defender.name + 发动了+attackerskill+skillIndex + ,+ defender.name + 损失了 + damage + 点HP!)。if(defender.HP = 0) trace(defender.name + 终于支持不住 ,倒下了 !n+ attacker.name + 取得了胜利 !) 。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 49 页 - - - - - - - - - timer.removeEventListener(TimerEvent.TIMER, round)。trace(nGame Over)。return。 trace(hero.name + HP: + hero.HP + t+ monster.name + HP: + monster.HP) 。 五、实验结果注：可用贴图的方式1、主要使用的知识点使用事件驱动编写AS3.0 应用程序（物体移动等的动画效果）鼠 标 事 件 ： CLICK 、 MOUSE_MOVE 、 MOUSE_OVER 、 MOUSE_OUT 、MOUSE_WHEEL 等键盘事件： KeyboardEvent.KEY_DOWN(UP) 等时间函数： TimerEvent.TIMER、TimerEvent.TIMER _COMPLETE 2、作品的效果图（至少给出3 个，含制作过程及结果）名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 49 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 49 页 - - - - - - - - - 六、实验归纳总结注：包括制作过程中出现的问题，实验心得体会及改进意见等大体上了解到我们平常玩的回合游戏的制作过程，很有趣，我很喜欢这个。不过我想要是加上图片和效果的话，难度会提升很多。上海建桥学院实验报告课程名称：互动媒体制作实验类型：设计型实验工程名称：找茬类事件点击类小游戏实验地点：多媒体机房实验日期：2013年 4 月 15 日一、实验目的和要求1、 巩固 AS3.0 中核心类及显示对象的相关概念；2、 学会 MovieClip 类、Sprite 类的创建及使用；3、 学会 AS3.0 中创建动画的几种方式；4、 能够熟练运用显示对象的属性；5、 能够熟练运用 timer 类创建动画（效果）；6、 制作满足相应要求的交互动画；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 49 页 - - - - - - - - - 二、实验内容和原理1、 确定内容健康的主题2、 相关素材的准备3、 制作交互动画的流程图（分镜头脚本）4、 运用 Timer 类控制显示对象的属性来制作交互动画三、主要仪器设备或环境PC机；Flash cs5 （或以上） ；Photoshop cs5 （或以上）；移动终端 5 套；数码照相机 1 台；数码摄像机 1 台；数位板 1 个。四、操作方法与实验步骤1、确定主题、设计流程图主题：找茬游戏设计流程图：2、游戏整体流程拆分游戏开始初始化：开始按钮定义、开始界面的设置、初始化数值游戏主题部分：添加三个文本框，一个计分数，一个倒计时，一个统计剩余几个错找到几个错。 添加 Timer 时间监听，用来倒计时。对 cuowumian、cuo1、cuo2、cuo3.、cuo4.、cuo5 添加鼠标事件监听， MouseEvent.CLICK。游戏结束部分： 移除游戏主体页面上所有东西，移除监听。 根据找出的错的个数判断是否通关，并显示在名为tf 的文本框里。添加一个Restart按钮，实现重玩的功能。3、三大游戏流程部分功能实现游戏开始初始化、开始界面的设置。myStartView =new StartView()。addChild(myStartView)。myStartView.x = stage.stageWidth / 2 。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 49 页 - - - - - - - - - myStartView.y = stage.stageHeight / 2 。游戏正式界面设置function gameStart() scoreField=new TextField()。scoreFn()。addChild(scoreField)。myGameView=new GameView()。addChild(myGameView)。myGameView.x = stage.stageWidth / 2 。myGameView.y = stage.stageHeight / 2 。allTimer = 10。timer = new Timer(1000,20)。timer.addEventListener(TimerEvent.TIMER,timerFn)。timer.start()。timeField=new TextField()。timeField.autoSize = center。timeField.text = 你还有 + allTimer + 秒。timeField.x = 400。addChild(timeField)。myGameView.cuo1.stop() 。myGameView.cuo2.stop() 。myGameView.cuo3.stop() 。myGameView.cuo4.stop() 。myGameView.cuo5.stop() 。myGameView.cuowumian.addEventListener(MouseEvent.CLICK,mianFn) 。myGameView.cuo1.addEventListener(MouseEvent.CLICK,cuo1Fn) 。myGameView.cuo2.addEventListener(MouseEvent.CLICK,cuo2Fn) 。myGameView.cuo3.addEventListener(MouseEvent.CLICK,cuo3Fn) 。myGameView.cuo4.addEventListener(MouseEvent.CLICK,cuo4Fn) 。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 49 页 - - - - - - - - - myGameView.cuo5.addEventListener(MouseEvent.CLICK,cuo5Fn) 。 游戏结束function endGame() removeChild(myGameView)。removeChild(scoreField)。removeChild(timeField)。myGameView.cuowumian.removeEventListener(MouseEvent.CLICK,mianFn) 。tf=new TextField()。tf.width = 300。if (score=5) tf.text = 恭喜你通关了 。 else tf.text = 很遗憾，请大侠重新来过。 var format:TextFormat = new TextFormat() 。format.font = _sans。format.color = 0 xFF0000。format.size = 50。format.underline = true。tf.x=(stage.stageWidth-tf.width )/2。tf.y=(stage.stageHeight-tf.height )/2 。tf.autoSize = center。tf.defaultTextFormat = format。addChild(tf)。myGameView.cuowumian.removeEventListener(MouseEvent.CLICK,mianFn) 。myEndBt=new Button()。addChild(myEndBt)。myEndBt.label = Restart。myEndBt.x=(stage.stageWidth-myEndBt.width )/2。myEndBt.y = 300。myEndBt.addEventListener(MouseEvent.CLICK,restartFn) 。 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 49 页 - - - - - - - - - 4、游戏主体部分操作步骤（含主要代码）及技巧import fl.controls.Button。import flash.events.MouseEvent 。import flash.utils.Timer。import fl.motion.MotionEvent 。import flash.text.TextField。import flash.display.Sprite。import flash.text.TextField。import flash.text.TextFormat。var allScore:int = 5。var myStartBt:Button。var myStartView:StartView。var myGameView:GameView。var myEndBt:Button。var timer:Timer。var score:int。var scoreField:TextField。var tf:TextField。var allTimer:int。var timeField:TextField。init() 。/游戏开始初始化function init() /开始按钮定义myStartBt=new Button ()。addChild(myStartBt)。myStartBt.x=(stage.stageWidth-myStartBt.width )/2 。myStartBt.y = 300。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 49 页 - - - - - - - - - myStartBt.label = Start。myStartBt.addEventListener(MouseEvent.CLICK,myStartBtFn)。/开始界面的设置。myStartView =new StartView()。addChild(myStartView)。myStartView.x = stage.stageWidth / 2 。myStartView.y = stage.stageHeight / 2 。/数值初始化score = 0 。 function myStartBtFn(e:MouseEvent ) removeChild(myStartBt)。removeChild(myStartView)。myStartBt.removeEventListener(MouseEvent.CLICK,myStartBtFn )。gameStart() 。 /游戏正式界面设置function gameStart() scoreField=new TextField()。scoreFn()。addChild(scoreField)。myGameView=new GameView()。addChild(myGameView)。myGameView.x = stage.stageWidth / 2 。myGameView.y = stage.stageHeight / 2 。allTimer = 10。timer = new Timer(1000,20)。timer.addEventListener(TimerEvent.TIMER,timerFn)。timer.start()。timeField=new TextField()。timeField.autoSize = center。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 49 页 - - - - - - - - - timeField.text = 你还有 + allTimer + 秒。timeField.x = 400。addChild(timeField)。myGameView.cuo1.stop() 。myGameView.cuo2.stop() 。myGameView.cuo3.stop() 。myGameView.cuo4.stop() 。myGameView.cuo5.stop() 。myGameView.cuowumian.addEventListener(MouseEvent.CLICK,mianFn) 。myGameView.cuo1.addEventListener(MouseEvent.CLICK,cuo1Fn) 。myGameView.cuo2.addEventListener(MouseEvent.CLICK,cuo2Fn) 。myGameView.cuo3.addEventListener(MouseEvent.CLICK,cuo3Fn) 。myGameView.cuo4.addEventListener(MouseEvent.CLICK,cuo4Fn) 。myGameView.cuo5.addEventListener(MouseEvent.CLICK,cuo5Fn) 。 function timerFn(e:TimerEvent) allTimer-。timeField.text = 你还有 + allTimer + 秒。if (allTimerstage.stageWidth |this.xstage.stageHeight |this.ystage.stageWidth |this.xstage.stageHeight |this.y0) clear() public function fl_SetKeyPressed(event:KeyboardEvent):void switch (event.keyCode) case 38 : upPressed = true 。break。case Keyboard.DOWN : downPressed = true 。break。case Keyboard.LEFT : 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 31 页，共 49 页 - - - - - - - - - leftPressed = true 。break。case Keyboard.RIGHT : rightPressed = true 。break。 。public function fl_UnsetKeyPressed(event:KeyboardEvent):void switch (event.keyCode) case Keyboard.UP : upPressed = false 。break。case Keyboard.DOWN : downPressed = false 。break。case Keyboard.LEFT : leftPressed = false 。break。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 32 页，共 49 页 - - - - - - - - - 。case Keyboard.RIGHT : rightPressed = false 。break。 public function clear() this.removeEventListener(Event.ENTER_FRAME, fl_MoveInDirectionOfKey) 。stage.removeEventListener(KeyboardEvent.KEY_DOWN, fl_SetKeyPressed) 。stage.removeEventListener(KeyboardEvent.KEY_UP, fl_UnsetKeyPressed) 。this.parent.removeChild(this) public function changeBig() this.scaleX*=1.5。this.scaleY*=1.5。timer=new Timer(1000,3)。timer.addEventListener(TimerEvent.TIMER,timerFn)。timer.start()。 public function timerFn(e:TimerEvent) changeSmall()。 public function changeSmall() this.scaleX/=1.5。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 33 页，共 49 页 - - - - - - - - - this.scaleY/=1.5。timer.stop()。timer.removeEventListener(TimerEvent.TIMER,timerFn)。 随机自动出来的篮球代码：package import flash.display.MovieClip。import flash.events.Event 。public class Qiu extends MovieClip var QiuDirection:int =Math.floor(Math.random()*4) var xyDirection:int=0 var speedX var speedY var temp:int=Math.floor(Math.random()*2) var num:Number=1。public function Qiu() this.addEventListener(Event.ADDED_TO_STAGE,ADFn) this.addEventListener(Event.ENTER_FRAME,timeFn) xyDirection=(temp =0) ? 1:-1 public function ADFn(e:Event) this.removeEventListener(Event.ADDED_TO_STAGE,ADFn) switch(QiuDirection) case 0: this.x=Math.random()*stage.stageWidth this.y=0 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 34 页，共 49 页 - - - - - - - - - this.speedX=Math.random()*4*xyDirection this.speedY=Math.random()*4 break case 1: this.x=0 this.y=Math.random()*stage.stageHeight this.speedX=Math.random()*4 this.speedY=Math.random()*4*xyDirection break case 2: this.x=Math.random()*stage.stageWidth this.y=stage.stageHeight this.speedX=Math.random()*4*xyDirection this.speedY=Math.random()*(-4) break case 3: this.x=stage.stageWidth this.y=Math.random()*stage.stageHeight this.speedX=Math.random()*(-4) this.speedY=Math.random()*4*xyDirection break public function timeFn(e:Event) /*trace(this.parentgoal)*/ 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 35 页，共 49 页 - - - - - - - - - if(this.hitTestObject(this.parentgoal) myClearAll() 。 else this.x+=this.speedX*num this.y+=this.speedY*num if(this.xstage.stageWidth |this.ystage.stageHeight) clear() public function myClearAll() this.parentclearALL() public function clear() this.removeEventListener(Event.ENTER_FRAME,timeFn) this.parent.removeChild(this) 道具的代码：package import flash.display.MovieClip。public class Dao extends Qiu public function Dao() / constructor code 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 36 页，共 49 页 - - - - - - - - - /override 表示重写父类方法override public function myClearAll() this.parentgoal.changeBig() clear()。/继承于 Qiu，所以有 clear() 五、实验结果注：可用贴图的方式1、素材外部调用的实现2、游戏主体部分功能实现（给出关键部分功能代码，含制作过程及结果）package import flash.display.MovieClip。import flash.events.* import flash.events.KeyboardEvent import flash.ui.Keyboard import flash.utils.Timer。public class Goal extends MovieClip var upPressed:Boolean = false 。var downPressed:Boolean = false 。var leftPressed:Boolean = false 。var rightPressed:Boolean = false 。var timer:Timer。public function Goal() this.addEventListener(Event.ADDED_TO_STAGE,ADFn)。 public function ADFn(e:Event) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 37 页，共 49 页 - - - - - - - - - this.removeEventListener(Event.ADDED_TO_STAGE,ADFn)。this.addEventListener(Event.ENTER_FRAME, fl_MoveInDirectionOfKey) 。stage.addEventListener(KeyboardEvent.KEY_DOWN, fl_SetKeyPressed) 。stage.addEventListener(KeyboardEvent.KEY_UP, fl_UnsetKeyPressed) 。 public function fl_MoveInDirectionOfKey(event:Event) if (upPressed) this.y -= 5。 if (downPressed) this.y += 5。 if (leftPressed) this.x -= 5。 if (rightPressed) this.x += 5。 if(this.xstage.stageWidth |this.xstage.stageHeight |this.ystage.stageWidth |this.xstage.stageHeight |this.y0) clear() public function fl_SetKeyPressed(event:KeyboardEvent):void switch (event.keyCode) case 38 : upPressed = true 。break。case Keyboard.DOWN : downPressed = true 。break。case Keyboard.LEFT : 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 43 页，共 49 页 - - - -