flash 编程找茬儿.docx
《flash 编程找茬儿.docx》由会员分享，可在线阅读，更多相关《flash 编程找茬儿.docx（24页珍藏版）》请在冰点文库上搜索。
flash编程找茬儿
第1章
找茬儿
本章要点
本章将制作“找茬儿”游戏，游戏的内容是，在规定的时间内找到两幅图的不同点。
本章涉及的知识点主要有自定义变量并初始化，自定义函数，setInterval（）与clearInterval（）语句，隐形按钮的用法，游戏的初始化。
还涉及了用attachSound（）语句加载声音、用程序控制影片剪辑帧的跳转、for循环等知识。
本章内容主要包括
Ø自定义变量并初始化
Ø自定义函数
ØsetInterval（）与clearInterval（）语句
ØattachSound（）语句
Ø用程序控制影片剪辑帧的跳转
Ø倒计时的实现
实例说明
本例将制作一个简单的找茬儿游戏，从三幅图中任选一幅便可开始游戏，如图1.1所示。
在图1.2中，单击右图中与左图的不同之处（每幅图有五处不同），在规定的时间内全部找出后即完成游戏。
单击每幅图右下角的返回按钮可以返回开始界面，选择其他图，如果没有在规定的时间内找到5处不同或点错4次，游戏结束。
图1.1“找茬儿”游戏运行效果1
图1.2“找茬儿”游戏运行效果2
学习目标
通过本例的学习，应该掌握有关变量初始化、自定义函数、for循环的知识，学会用自定义函数和setInterval（）、clearInterval（）语句制作倒计时的方法，了解用隐形按钮制作鼠标的感应区域的方法、游戏初始化的方法、利用attachSound（）语句加载库中的声音的方法、用程序控制影片剪辑帧的跳转的方法等，为以后制作复杂的游戏奠定基础。
操作步骤
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”、“右图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按钮”元件
（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“错误”元件
（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所示。
图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帧之间制作一段内容为文字“GameOver”由小到大渐变的动画。
新建图层“重玩”，在该图层制作重玩按钮从左边到中间的动画，新建图层“声音”，插入声音“结束”，在第1帧和最后一帧添加“stop（）;”（见配套光盘中的“素材\第1章找茬游戏\影片剪辑.fla”），如图1.17所示。
（13）最后制作一个返回按钮，游戏结束后单击该按钮可以选择其他图（见配套光盘中的“素材\第1章找茬游戏\按钮.fla”），如图1.18所示。
图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（）{
//当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”。
（2）导入声音文件“倒计时”，在库面板中右击，从弹出的快捷菜单中选择“链接”命令，在弹出的“链接属性”对话框中单击复选框“为ActionScript导出”，在链接标识符一栏中输入“jishi”。
（3）在actions层中添加如下代码（如图1.21所示）：
图1.21在actions层上添加代码
time=20;
//给变量time赋初始值为20
shijiansound=newSound（）;
//定义Sound对象shijiansound
shijiansound.attachSound（"tishi"）;
//从库中附加声音文件tishi
functiondaojishi（）{
//自定义函数
if（time>0）{
time--;
//变量time的值递减
//当time递减到0时便停止
if（time<=10）{
//如果变量time小于或等于10时
shijiansound.start（0,1）;
//声音播放一次，如果需要循环播放，可将后面的数字1尽量变大
}
}
}
jishi=setInterval（daojishi,1000）;
//使用setInterval（）语句一秒钟调用一次daojishi函数
这个文件实现的效果是：
时间从20秒开始递减，当减到10秒之内时，发出提示的声音，直到递减为0。
提示
setInterval（）的作用是在播放SWF文件时，每隔一段时间就调用一次函数或对象。
使用它可以在一段时间内重复执行任何函数。
setInterval（）有两个参数，第一个是要调用的函数或对象，第二个是连续两次调用函数间隔的时间（以毫秒为单位）。
如果不需要再调用函数，可用clearInterval（）停止setInterval（）调用。
上面的代码就是利用setInterval（）语句1000毫秒（1秒）调用一次“daojishi（）”函数实现倒计时。
attachSound是将在id参数中指定的声音附加到指定的Sound对象。
该声音必须位于当前SWF文件的库中，并且已经在“链接属性”对话框中指定为导出。
必须调用Sound.start（）才能开始播放此声音。
Sound.start（）有两个参数，通过第一个参数可以设置从特定点开始播放声音，例如，如果有一个30秒的声音，而我们希望该声音从中间开始播放，可将此参数指定为15。
并非声音延迟15秒，而是从15秒标记处开始播放。
通过第二个参数可以指定声音连续播放的次数。
1.4游戏实现
（1）新建Flash文档，帧频设置为24帧/秒，将文档保存为“找茬游戏”。
将场景名称改为“start”，新建一个场景，命名为“game”。
切换到场景“start”。
把文件“鼠标划过图片效果.fla”中的三个影片剪辑元件“图1按钮”、“图2按钮”、“图3按钮”并排放在舞台下方，元件场景“start”的时间轴和舞台如图1.22所示。
图1.22“start”场景
（2）在影片剪辑“图1按钮”中添加如下代码（如图1.23所示）。
对其中的一些语句注释如下：
onClipEvent（enterFrame）{
//enterFrame事件，反复执行下面的代码
this.onRollOver=function（）{
//当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;
//则水平、垂直缩放比例递减
}
};
};
this.onRelease=function（）{
//onRollOut事件发生时，即玩家单击该影片剪辑时
_root.choose=1;
//变量choose等于1
};
}
图1.23在“图1按钮”上添加代码
图1.23中的第16行到第18行是刚加入的代码，它的作用是当单击这个影片剪辑时，将变量“choose”赋值为1。
将图1.23中的代码复制到其他两个影片剪辑上，改变一下变量“choose”的值，在“图2按钮”中将“choose”赋值为2，在“图3按钮”中将“choose”赋值为3。
（3）在actions图层的第1帧中添加如下代码（如图1.24所示）：
stop（）;
choose=0;
//初始化变量
onEnterFrame=function（）{
//反复执行下面的代码
if（choose==1）{
gotoAndStop（"game","yi"）;
}
//当choose为1时，跳转到场景game的yi帧上并停止
if（choose==2）{
gotoAndStop（"game","er"）;
}
//当choose为2时，跳转到场景game的er帧上并停止
if（choose==3）{
gotoAndStop（"game","san"）;
}
//当choose为3时，跳转到场景game的san帧上并停止
};
图1.24actions层第1帧中的代码
（4）切换到game场景，在“背景”图层放两个色块，上面是控制区，下面是操作区。
在“左图”图层放元件“左图1”，在“右图”图层放元件“右图1”，将实例命名为“youtu1”。
在“标识”层放元件“进度”和“错误”，将实例分别命名为“diffpoint”和“wrong”，在win和gameover图层分别放入游戏成功和失败的反馈元件“成功”和“失败”，实例分别命名为“over”和“good”。
在“返回”层放置按钮元件“返回”。
“边框”层放置一个黑色的框，刚好罩住整个舞台，使本来参差不齐的画面显得很整洁。
actions层暂时不添加内容。
在第1帧插入帧标签“yi”，当单击start场景中的第一幅图时便跳转到这一帧，此时的时间轴和舞台如图1.25和图1.26所示。
（5）新建图层“时间”，在舞台的右上角插入一个静态文本框“时间”和动态文本框，将动态文本框变量命名为“time”。
（6）新建图层“不同处”，将元件“隐形按钮MC”拖到舞台上，放到右边图和左边图中不同的5个位置，将5个实例分别命名为“diff1”、“diff2”、“diff3”、“diff4”和“diff5”，如图1.27所示。
图1.25game场景的时间轴
图1.26game场景的舞台
图1.27把元件“隐形按钮MC”放到两幅图的不同处
（7）双击进入元件“隐形按钮MC”的编辑窗口，在第1帧中的“隐形按钮”上添加代码，如图1.28所示。
当玩家点到“隐形按钮MC”，也就是玩家点到两幅图的不同之处时，标识错误的影片剪辑开始播放，把不同处圈起来，同时舞台上标识找到几处不同点的标识处增加一个蓝色的点，播放一次正确反馈的声音。
图1.28在按钮“隐形按钮”上添加代码
（8）在实例youtu1上添加代码，如图1.29所示。
图1.29实例youtu1上的代码
当玩家点到实例youtu1而没有点到diff1、diff2、diff3、diff4、diff5实例中的任何一个，即找错时，标识点错几次的实例就会多显示一个哭脸。
（9）在影片剪辑元件wrong的最后一帧添加以下代码：
_root.over.play（）;
//播放到最后一帧时游戏结束
（10）在actions图层中添加以下代码：
stop（）;
rightsound=newSound（）;
rightsound.attachSound（"dui"）;
//附加正确反馈声音
wrongsound=newSound（）;
wrongsound.attachSound（"cuo"）;
//附加错误反馈声音
shijiansound=newSound（）;
shijiansound.attachSound（"tishi"）;
//附加提示声音
functiondaojishi（）{
time--;
if（time<=10）{
shijiansound.start（）;
}
//当时间剩下10秒钟时播放提示的声音
}
//自定义倒计时函数
functionjieshu（）{
for（i=1;i<=5;i++）{
_root["diff"+i].bt.enabled=0;
}
}
//定义游戏结束后所有按钮都被禁用的函数
functionchushihua（）{
time=40;
//初始化时间
winlin=0;
//初始化winlin
loselin=0;
//初始化loselin
jishi=setInterval（daojishi，1000）;
//每秒钟调用一次daojishi函数
for（i=1;i<=5;i++）{
_root["diff"+j].gotoAndStop
（1）;
//diff1-diff5全部跳回第一帧
_root["diff"+i].bt.enabled=1;
//diff1-diff5恢复为启用状态
}
_root.youtu1.enabled=1;
//实例youtu1恢复为启用状态
_root.wrong.gotoAndStop
（1）;
//显示点错几次的影片剪辑跳回第1帧
_root.diffpoint.gotoAndStop
（1）;
//“进度”元件的实例“diffpoint”跳回第1帧
}
//自定义初始化函数，将所有的变量和实例都恢复到游戏前的状态
chushihua（）;
//调用chushihua函数
onEnterFrame=function（）{
if（（time==0||_root.wrong._currentframe==5）&&loselin==0）{
//如果时间为0或wrong到了最后一帧，并且loselin为0时
_root.over.play（）;
//播放游戏结束的反馈
clearInterval（jishi）;
//停止倒计时
_root.youtu1.enabled=0;
//youtu1变为被禁用状态
loselin=1;
//上面的条件不再成立，即上面三行只执行一次，不会重复被执行
jieshu（）;
//调用jieshu函数，所有按钮被禁用
}
if（_root.diffpoint._currentframe==6&&winlin==0）{
//如果diffpoint到了最后一帧，并且winlin为0时
_root.good.play（）;
//播放成功的反馈
clearInterval（jishi）;
//停止setInterval（）调用daojishi函数
_root.youtu1.enabled=0;
//youtu1变为被禁用状态
winlin=1;
//上面的条件不再成立，即上面三行只执行一次，不会重复被执行
jieshu（）;
//调用jieshu函数，所有按钮被禁用
}
};
（11）在“返回”按钮上添加代码，如图1.30所示。
图1.30“返回”按钮上的代码
（12）最后，在over元件中的“重玩”按钮上添加代码，如图1.31所示。
图1.31“重玩”按钮上的代码
至此，本游戏的第一幅图就完成了，其他两幅图的制作方法与第一幅图相同。
小结拓展
本章我们学习了怎样实现鼠标划过图片的效果，怎样实现倒计时的效果，还学习了使用setInterval（）语句每隔一段时间就调用一次函数，使用attachSound（）语句从库中调出声音等知识。
在两幅图的不同处，我们放置了设计好的影片剪辑，当玩家点击到这些影片剪辑时，游戏给出正确反馈。
点击其他位置时，给出错误反馈。
但要注意的是游戏成功和失败后，再重新开始时，变量的初始化，本例的初始化写在了chushihua函数中，当游戏开始时调用这个函数即可。
写程序时需要多次重复使用的语句最好编写成一个函数，也就是最好将程序模块化，这样不但避免了重复写相同的内容，而且提高了程序的可读
升级会员 