flash 编程——找 茬 儿
- 格式：doc
- 大小：1.44 MB
- 文档页数：19
第1章
找 茬 儿
本章要点
本章将制作“找茬儿”游戏，游戏的内容是，在规定的时间内找到两幅图的不同点。
本章涉及的知识点主要有自定义变量并初始化，自定义函数，setInterval()与clearInterval()语句，隐形按钮的用法，游戏的初始化。还涉及了用attachSound()语句加载声音、用程序控制影片剪辑帧的跳转、for循环等知识。
本章内容主要包括
自定义变量并初始化
自定义函数
setInterval()与clearInterval()语句
attachSound()语句
用程序控制影片剪辑帧的跳转
倒计时的实现 范例导航系列丛书 互动游戏制作范例导航
2 范例导航系列丛书 1章 找茬儿
3 实例说明
本例将制作一个简单的找茬儿游戏，从三幅图中任选一幅便可开始游戏，如图1.1所示。在图1.2中，单击右图中与左图的不同之处(每幅图有五处不同)，在规定的时间内全部找出后即完成游戏。单击每幅图右下角的返回按钮可以返回开始界面，选择其他图，如果没有在规定的时间内找到5处不同或点错4次，游戏结束。
图1.1 “找茬儿”游戏运行效果1
图1.2 “找茬儿”游戏运行效果2
学习目标
通过本例的学习，应该掌握有关变量初始化、自定义函数、for循环的知识，学会用自定义函数和setInterval()、clearInterval() 语句制作倒计时的方法，了解用隐形按钮制作鼠标的感应区域的方法、游戏初始化的方法、利用attachSound()语句加载库中的声音的方法、用程序控制影片剪辑帧的跳转的方法等，为以后制作复杂的游戏奠定基础。 范例导航系列丛书 互动游戏制作范例导航
4 操作步骤
1.1 素 材 准 备
1. 图形素材
这个游戏共用了两张图，一张是开始界面的背景图，另一张是第一幅图的背景。可以通过网络或素材光盘取得图片，再通过Photoshop或Fireworks对图片进行修改(见配套光盘中的“素材\第1章 找茬游戏\图片”)。
2. 声音素材
这个游戏用到的声音有找到不同时的声音“对”，找错时的声音“错”，时间剩10秒后倒计时的声音“倒计时”，还有成功和失败后发出的声音“成功”和“失败”(见配套光盘中的“素材\第1章 找茬游戏\声音”)。
3. 元件素材
(1) 新建影片剪辑元件“左图1”，将图层名改为“图”，在该图层绘制一幅图，为了整齐、美观，在“遮罩”图层绘制一个矩形，并把“遮罩”图层设置为遮罩层，如图1.3所示。
图1.3 “左图1”元件
用同样的方法，制作元件“左图2”、“左图3”(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，如图1.4和图1.5所示。
(2) 打开库面板，在元件“左图1”上右击，在弹出的快捷菜单中选择“直接复制”命令，在弹出的“直接复制元件”对话框中将元件名改为“右图1”，进入元件“右图1”的编辑窗口，将图稍加改动。用同样的方法，在元件“左图2”和“左图3”的基础上再复制出两个影片剪辑元件并修改，分别命名为“右图2”、“右范例导航系列丛书 1章 找茬儿
5 图3”，每幅图有5处不同，可以自行设计(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，如图1.6～图1.8所示。
图1.4 “左图2”元件
图1.5 “左图3”元件
图1.6 “右图1”元件
图1.7 “右图2”元件
图1.8 “右图3”元件
(3) 新建一个影片剪辑元件，命名为“图1按钮”，将图层名改为“图”，将元件“左图1”放在该层，将大小设置为原来的50%。新建一层给图加一个阴影(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，如图1.9所示。
图1.9 “图1按钮”元件 范例导航系列丛书 互动游戏制作范例导航
6 (4) 用同样的方法制作“图3按钮”两个影片剪辑元件(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)。
(5) 新建一个影片剪辑元件并命名为“进度”，将图层名改为“灰点儿”，在第1帧画5个灰色的小圆点儿，新建图层并命名为“亮点”，在该图层的第2帧绘制一个蓝色的小圆点儿，覆盖第1个灰点儿，后面的每一帧都比前一帧多一个蓝点儿，逐个将灰点儿覆盖，第6帧蓝色的小点儿全部将灰色点儿覆盖，在actions层的第 1帧添加“stop();”语句(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，如图1.10所示。
图1.10 “进度”元件
这个元件的作用是标识玩家已经找到了几处不同。
(6) 新建一个影片剪辑元件，命名为“错误”，将图层名改为“笑脸”，在该图层绘制4个笑脸。新建一个图层并命名为“哭脸”，在该图层绘制一个哭脸，后面的每一帧都比前一帧多一个哭脸。第5帧哭脸全部将笑脸覆盖，在actions层的第 1帧添加“stop();”语句，在最后一帧添加代码：
_root.over.play();
//播放到最后一帧时游戏结束，播放失败的反馈
如图1.11所示(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，这个元件的作用是标识玩家找错了几次。
图1.11 “错误”元件 范例导航系列丛书 1章 找茬儿
7 (7) 新建一个影片剪辑元件，命名为“标示”，制作一段画圆圈的动画。在最后一帧添加“stop();”(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，元件及时间轴如图1.12所示。
图1.12 “标示”元件
(8) 新建一个按钮元件，命名为“隐形按钮”，在“点击”帧中绘制一个矩形(见配套光盘中的“素材\第1章 找茬游戏\按钮.fla”)，如图1.13所示。
图1.13 “隐形按钮”元件
提 示
按钮的时间轴只有4帧，第1帧是鼠标触发前的状态，第2帧是鼠标经过时的状态，第3帧是鼠标按下后的状态，最后一帧中的内容不会显示，只是一个感应区域。如果前三帧是空的，只有第4帧有内容，那么这个按钮在舞台上是一个浅蓝色的区域，预览时是看不到的。在游戏中多被用于不可见的感应区域。
(9) 再新建一个影片剪辑元件，命名为“隐形按钮MC”，在第1帧放入按钮“隐形按钮”，将实例命名为“bt”，在第2帧放入元件“标示”，在第1帧添加“stop();”
(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，如图1.14所示。 范例导航系列丛书 互动游戏制作范例导航
8
图1.14 “隐形按钮MC”元件
(10) 制作成功的反馈。新建一个影片剪辑元件并命名为“成功”，在第2帧到第18帧之间制作一段文字“Good”由小到大的动画，在“声音”图层的第2帧插入声音“成功”，在第1帧和最后一帧添加“stop();”(见配套光盘中的“素材\第1章
找茬游戏\影片剪辑.fla”)，如图1.15所示。
(11) 制作一个重玩按钮，游戏结束后单击该按钮可以重新开始(见配套光盘中的“素材\第1章
找茬游戏\按钮.fla”)，如图1.16所示。
图1.15 “成功”元件
图1.16 重玩按钮
(12) 制作失败的反馈。先新建一个影片剪辑元件并命名为“失败”，将图层名改为“over”，在该层的第1帧到第18帧之间制作一段内容为文字“Game Over”由小到大渐变的动画。新建图层“重玩”，在该图层制作重玩按钮从左边到中间的动画，新建图层“声音”，插入声音“结束”，在第1帧和最后一帧添加“stop();”(见配套光盘中的“素材\第1章 找茬游戏\影片剪辑.fla”)，如图1.17所示。
(13) 最后制作一个返回按钮，游戏结束后单击该按钮可以选择其他图(见配套光盘中的“素材\第1章 找茬游戏\按钮.fla”)，如图1.18所示。 范例导航系列丛书 1章 找茬儿
9
图1.17 “失败”元件
图1.18 返回按钮
至此，游戏要用到的元件就完成了。
1.2 鼠标划过图片效果
当玩家将鼠标移到一个图上时，这个图逐渐变大，而鼠标移开图后又恢复原来的状态，有利于玩家看清图而做出相应的选择。
(1) 新建Flash文档，背景颜色设置为“#00CCFF”，帧频设置为30帧/秒，将文档保存为“鼠标划过图片效果”(见配套光盘中的“素材\第1章 找茬游戏\鼠标划过图片效果.fla”)。把三个影片剪辑元件“图1按钮”、“图2按钮”和“图3按钮”并排放在舞台居中的位置，在“图1按钮”上添加如下代码(如图1.19所示)：
图1.19 在影片剪辑元件“图1按钮”上添加代码
onClipEvent (enterFrame) {
//enterFrame事件，反复执行下面的代码
this.onRollOver = function() { 范例导航系列丛书 互动游戏制作范例导航
10 //当onRollOver事件发生时，即玩家将鼠标移到该影片剪辑上
this.onEnterFrame = function() {
//反复执行下面的代码
if (this._xscale<=110) {
//如果这个影片剪辑的水平缩放比例小于110
this._xscale = this._yscale += 2;
//则水平、垂直缩放比例递增
}
};
};
this.onRollOut = function() {
//相应地，当onRollOut事件发生时，即玩家将鼠标移开该影片剪辑
this.onEnterFrame = function() {
if (this._xscale>=100) {
//如果这个影片剪辑的水平缩放比例大于100
this._xscale = this._yscale -= 2;
//则水平、垂直缩放比例递减
}
};
};
}
(2) 将第(1)步中在“图1按钮”上添加的代码分别复制到其他两个影片剪辑的动作面板上。预览一下，我们需要的效果已经实现了(见配套光盘中的“素材\第1章 找茬游戏\鼠标划过图片效果.fla”)，如图1.20所示。
图1.20 鼠标划过图片效果
1.3 倒计时的实现
(1) 新建Flash文档，背景颜色设置为“#66CCFF”，大小设置为280×200像素，将文档保存为“倒计时”(见配套光盘中的“素材\第1章 找茬游戏\倒计时.fla”)。将图层名改为“倒计时”，插入一个静态文本“倒计时”，新建图层“txt”，在该图层插入一个动态文本，将变量名命名为“time”。
