搜索
学习目标第11讲综合实战演练使用组件综合制作一个个人性格测试小软。使用遮罩动画制作一个片头动画。使用代码和动画结合的方式制作一个超酷的射击游戏。•11.1Flash应用程序开发──个人性格测试系统•11.2Flash动画商业应用──超炫广告片头设计•11.3Flash趣味游戏开发──海防保卫战设计本章大纲11.1Flash应用程序开发──个人性格测试系统本综合案例将使用组件和AS代码来制作一个完整的个人性格测试小软件，其设置思路及效果如图11-1所示。图11-1设计思路及效果1、制作背景。（1）新建一个Flash文档，文档属性使用默认参数。（2）将教学资源中的“素材\第11讲\个人性格测试\个人性格测试素材.fla”的外部库文件打开，将其中的“背景”元件直接拖入到舞台中，并相对舞台居中对齐，效果如图11-2所示。（3）将默认“图层1”重命名为“背景”层，并在第11帧处插入帧。（4）新建图层并重命名图层，直至图层效果如图11-3所示。图11-2导入背景图11-3图层效果一2、布置舞台。（1）由于本案例是制作一个个人性格测试，所以这里为读者提供所需的试题，如表11-1所示。表11-1个人性格测试题1．在下列几个未来职业中，你会选择：A.秘书文员B.替身演员C.军人2．如果你所在的球队输了球，你会怎样表现：A.沮丧之极，抱怨运气欠佳B.一笑置之，认为胜负乃兵家常事C.怒气难平，发誓以牙还牙3．你发现考卷上一道题答错了，考师却给了你满分，你于是：A.偷偷把考卷藏起来，没人时把考卷上的错误纠正B.告诉老师，请他扣去你的分数C.弄懂那道题的正确解法后，就把这事忘到九霄云外4．还在读书的你偷偷喜欢上班里一个女孩子，你会：A.在日记里记下你的秘密，独自相思，整天胡思乱想B.给她写信，或约会她，表白你的好感C.设法把注意力转移到学习上，打算毕业后再去发展这段感情5．好朋友误会了你，怀疑你们的友谊，你会：A.他不仁，我不义，既相疑就不再交往B.对朋友做个解释，消除误会C.心平气和，却更加真诚地对待你的朋友6．爸爸、妈妈吵架的时候，你会：A.冷眼旁观，不闻不问B.找奶奶或外婆来镇住他们C.谁有理论就帮谁7．你认为男孩子做家务活：A.跌身份、丢面子B.没有办法，无可奈何之举C.替父母减轻一些负担8．你答应了同学去参加他的生日派对时，可那天正好弄到了一张你最崇拜的歌星演唱会门票，你将会：A.宁肯失约，也不能错过演唱会B.看过演唱会后匆匆赶到同学家C.把门票送给别人，去参加派对9．你最着迷的项目是：A.骑自行车B.田径运动C.足球10．晚上你回家的路上，碰到一群流氓纠缠邻居的女孩，你会：A.躲开B.跑回去告诉她家里人C.立即报案，然后不自量力而又不顾一切地冲上去救人（2）选择【文本】工具，在【属性】面板中设置【笔触颜色】为“#990000”，【笔触高度】为“20”，【字体】为“方正静蕾简体”，【文字类型】为“静态文字”（读者可以设置为自己喜欢的字体或者自行购买外部字体库），然后在“题目”图层上输入第1题的问题，并调整文本区域大小，得到如图11-4所示的效果。（3）在“题目”图层的第2帧处按F6快捷键插入关键帧，然后修改文本内容为第2题的问题，效果如图11-5所示。图11-4输入问题图11-5修改文字内容（4）使用相同的方法依次将剩余的题目的问题输入到舞台上，并在第11帧处插入空白关键帧，得到如图11-6所示的舞台效果。（5）打开【组件】面板，将“RadioButton”组件拖入到“选项”图层上，并复制出两个，调整其位置最后得到如图11-7所示的效果。图11-6图层效果二图11-7放置组件（6）选中“选项”图层的第2帧～第10帧，然后按F6快捷键插入关键帧，再选中第11帧按F7快捷键插入空白关键帧，此时图层效果如图11-8所示。（7）逐帧查看选项和题目的位置是否合理，如果不合理请读者自行调节，如第8帧就需要将选项向舞台下方移动，移动后得到如图11-9所示的效果。（8）将“Button”组件拖入到“按钮”图层上，然后在【参数】面板中修改“Button”组件的【label】为“下一题”，【实例名称】为“nextTest”,得到如图11-10所示的效果。图11-8图层效果三图11-9调整选项位置【参数】面板舞台效果图11-10放置按钮（9）在“按钮”图层的第11帧处按F6快捷键插入关键帧，修改该帧处“Button”组件的【label】为“再来一次”，【实例名称】为“again”，如图11-11所示。【参数】面板舞台效果图11-11修改“Button”参数（10）在“结果”图层的第11帧处插入关键帧，选择【文本】工具，在【属性】面板中设置【文本类型】为“动态文本”，【笔触颜色】为“#990000”，【笔触高度】为“20”，【字体】为“方正静蕾简体”，在“结果”图层上绘出一个动态文本框，如图11-12所示的效果。（11）选中绘制的“动态文本”，在【属性】面板中设置其【实例名称】为“result”，如图11-13所示。（12）此时舞台及时间轴效果如图11-14所示。图11-12制作动态文本框图11-13置动态文本属性舞台效果时间轴效果图11-14信息3、输入控制代码。（1）返回“选项”图层的第1帧，选中舞台从上到下的第1个“RadioButton”组件，如图11-15所示，然后按F9快捷键打开【动作】面板，输入代码，如图1-16所示。选中此组件图11-5选择组件图11-6输入代码一（2）选中舞台从上到下的第2个“RadioButton”组件，然后在【动作】面板中输入代码，如图11-17所示。（3）选中舞台从上到下的第3个“RadioButton”组件，然后在【动作】面板中输入代码，如图11-18所示。这里为“RadioButton”组件输入代码是根据表11-1中提供试题的选择答案和选项顺序来书写的。请在书写代码时注意问题和选项要匹配。图11-17输入代码二图11-18输入代码三（4）选择“选项”图层的第2帧，利用相同的方法在该帧设置“RadioButton”组件的控制代码，如图11-19所示。图11-19设置第2帧处“RadioButton”组件的代码相信通过第1帧和第2帧处“RadioButton”组件的代码书写，读者应该已经掌握了“RadioButton”代码的书写方法，后面请读者根据表11-1来自行书写剩余“RadioButton”组件代码。（5）选中“AS”图层的第1帧，按F9快捷键打开【动作-帧】面板，输入代码。教学资源中的“素材\第11讲\个人性格测试\第1帧代码.txt”文件中提供了第1帧的代码。4、在“AS”图层的第11帧处插入关键帧，然后输入代码。教学资源中的“素材\第11讲\个人性格测试\第11帧代码.txt”文件提供了第11帧的代码。（1）保存测试影片，依次查看“RadioButton”组件是否将所有的选项内容显示出来，如果没有，则需要调整“RadioButton”的宽，如图11-20所示。已未调整已调整图11-20调整“RadioButton”组件宽度（2）调整完成后，一个个人性格测试系统也制作完成。11.2Flash动画商业应用──超炫广告片头设计本例将使用各种动画方式来制作一个漂亮的广告片头，如图11-21所示。1、素材准备。（1）新建一个Flash文档，设置文档【尺寸】为“750px×465px”，【帧频】为“30fps”，文档其他属性使用默认参数。放置元件制作遮罩动画放置第二场元件显示主题制作文字特效制作遮罩动画图11-21效果图（2）新建并重命名图层，然后将相应图层设置为遮罩层，直至图层效果如图11-22所示。执行【文件】/【导入】/【打开外部库文件】菜单命令，将教学资源中的“素材\第11讲\广告片头.fla”文件打开，将库中所有元件复制到当前库中，效果如图11-23所示。图11-22图层效果四图11-23复制外部库元件2、制作第一个场景动画。（1）在所有图层的第610帧处插入帧。（2）将【库】面板中名为“丝带1”的元件放置到“丝带1”图层的第1帧上，其位置坐标x、y分别为“0”、“340.4”。（3）选择【矩形】工具，在【属性】面板中设置【笔触颜色】为“无”，【填充颜色】为“绿色”，启用【对象绘制】功能，在“遮罩1”图层上绘制一个宽高为“49px×67px”的矩形，在【变形】面板中设置【旋转角度】为“－30度”，然后在【属性】面板中设置其位置坐标x、y分别为“－77.5”、“341.3”，效果如图11-24所示。在（4）“遮罩1”图层的第9帧插入关键帧，利用【任意变形】工具调整矩形的形状，效果如图11-25所示。图11-24第1帧处的遮罩图形图11-25第9帧处的遮罩图形这里在调整矩形形状时，利用【任意变形】工具下的【扭曲】工具进行调整，直到遮住“丝带1”元件。（5）在“遮罩1”图层第1帧～第9帧之间创建形状补间动画，并锁定“遮罩1”图层和“丝带1”图层。（6）在“遮罩2”图层和“丝带2”图层的第10帧处分别插入关键帧，然后将【库】面板中名为“丝带2”的元件放置到“丝带2”图层的第10帧上，其位置坐标x、y分别为“27.6”、“339.5”。（7）使用同样的方法，在“遮罩2”图层的第10帧处绘制一个宽高为“189px×19px”的矩形，其位置坐标x、y分别为“13.0”、“315.0”，效果如图11-26所示。（8）在“遮罩2”图层的第19帧插入关键帧，设置矩形的高为“106”，其他参数不变，效果如图11-27所示。图11-26第10帧处的遮罩图形图11-27第19帧处的遮罩图形（9）在“遮罩2”图层第10帧～第19帧之间创建形状补间动画，并锁定“遮罩2”图层和“丝带2”图层。（10）在“遮罩5”图层和“丝带5”图层的第20帧处分别插入关键帧，然后将【库】面板中名为“丝带5”的元件放置到“丝带5”图层的第20帧上，其位置坐标x、y分别为“139.7”、“339.6”。（11）使用同样的方法，在“遮罩5”图层的第20帧处绘制一个宽高为“178px×27px”的矩形，其位置坐标x、y分别为“103.0”、“415.9”，效果如图11-28所示。（12）在“遮罩5”图层的第29帧插入关键帧，设置矩形的高为“114”，其位置坐标x、y分别为“103.0”、“329”，效果如图11-29所示。图11-28第20帧处的遮罩图形图11-29第29帧处的遮罩图形（13）在“遮罩5”图层第10帧～第19帧之间创建形状补间动画，并锁定“遮罩5”图层和“丝带5”图层。（14）在“遮罩4”图层和“丝带4”图层的第30帧处分别插入关键帧，然后将【库】面板中名为“丝带4”的元件放置到“丝带4”图层的第30帧上，其位置坐标x、y分别为“168.1”、“339.1”。（15）使用同样的方法，在“遮罩4”图层的第30帧处绘制一个宽高为“80px×10px”的矩形，其位置坐标x、y分别为“148.0”、“324.0”，效果如图11-30所示。图11-30第30帧处的遮罩图形（16）在“遮罩4”图层的第34帧插入关键帧，设置矩形的高为“44.8”，其他参数不变，效果如图11-31所示。图11-30第34帧处的遮罩图形（17）在“遮罩4”图层第30帧～第34帧之间创建形状补间动画，并锁定“遮罩4”图层和“丝带4”图层。（18）在“遮罩3”图层、“丝带3”图层和“花”图层的第35帧处分别插入关键帧，然后将【库】面板中名为“丝带3”的元件放置到“丝带3”图层的第35帧上，其位置坐标x、y分别为“145.6”、“48.9”。（19）将【库】面板中名为“图片1”的元件放置到“花”图层的第35帧上，其位置坐标x、y分别为“45.9”、“56.5”，然后选中舞台上的“图片1”元件，设置【亮度】为“－100%”，然后在“花”图层的第58和75帧处插入关键帧，设置第58帧处元件的【亮度】为“－40%”，设置第75帧处元件的【颜色】为“无”。（20）在“花”图层的第35帧～第58帧、第58帧～第75帧处创建动作补间动画。（21）在“遮罩3”图层的第35帧处绘制一个宽