flash动画制作11结束.ppt

,第11讲 综合实战演练,使用组件综合制作一个个人性格测试小软。使用遮罩动画制作一个片头动画。使用代码和动画结合的方式制作一个超酷的射击游戏。,11.1 Flash 应用程序开发个人性格测试系统 11.2 Flash 动画商业应用超炫广告片头设计 11.3 Flash 趣味游戏开发海防保卫战设计,本章大纲,11.1 Flash 应用程序开发个人性格测试系统,本综合案例将使用组件和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 个人性格测试题,（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.2 Flash 动画商业应用超炫广告片头设计,本例将使用各种动画方式来制作一个漂亮的广告片头，如图11-21所示。,1、素材准备。（1）新建一个Flash文档，设置文档【尺寸】为“750px465px”，【帧频】为“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”图层上绘制一个宽高为“49px67px”的矩形，在【变形】面板中设置【旋转角度】为“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帧处绘制一个宽高为“189px19px”的矩形，其位置坐标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帧处绘制一个宽高为“178px27px”的矩形，其位置坐标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帧处绘制一个宽高为“80px10px”的矩形，其位置坐标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帧处绘制一个宽高为“327.8px25.0px”的矩形，其位置坐标x、y分别为“26.6”、“364.0”，效果如图11-32所示。（22）在“遮罩3”图层的第58帧插入关键帧，设置矩形的高为“348.1”，其位置坐标x、y分别为“26.6”、“40.9”，效果如图11-33所示。,图11-32 第35帧处的遮罩图形,图11-33 第58帧处的遮罩图形,（23）在“遮罩3”图层第35帧第58帧之间创建形状补间动画，并锁定“遮罩3”、“花”和“丝带3”图层。（24）在“遮罩6”图层和“丝带6”图层的第59帧处分别插入关键帧，然后将【库】面板中名为“丝带6”的元件放置到“丝带6”图层的第59帧上，其位置坐标x、y分别为“169.3”、“48.9”。（25）使用同样的方法，在“遮罩6”图层的第59帧处绘制一个宽高为“91px15px”的矩形，其位置坐标x、y分别为“148.0”、“324.0”，效果如图11-34所示。（26）在“遮罩6”图层的第63帧插入关键帧，设置矩形的高为“42.0”，其位置坐标x、y分别为“150.0”、“28.0”，效果如图11-35所示。,图11-34 第59帧处的遮罩图形,图11-35 第63帧处的遮罩图形,（27）在“遮罩6”图层第59帧第63帧之间创建形状补间动画，并锁定“遮罩6”图层和“丝带6”图层。（28）在“遮罩7”图层和“丝带7”图层的第64帧处分别插入关键帧，然后将【库】面板中名为“丝带7”的元件放置到“丝带7”图层的第64帧上，其位置坐标x、y分别为“186.3”、“41.7”。（29）使用同样的方法，在“遮罩7”图层的第64帧处绘制一个宽高为“104.0px11px”的矩形，其位置坐标x、y分别为“172.0”、“70.0”，效果如图11-36所示。（30）在“遮罩7”图层的第68帧插入关键帧，设置矩形的高为“45.0”，其位置坐标x、y分别为“172.0”、“36.0”，效果如图11-37所示。,图11-36 第64帧处的遮罩图形,图11-37 第68帧处的遮罩图形,（31）在“遮罩7”图层第64帧第68帧之间创建形状补间动画，并锁定“遮罩7”图层和“丝带7”图层。（32）在“遮罩8”图层和“丝带8”图层的第69帧处分别插入关键帧，然后将【库】面板中名为“丝带8”的元件放置到“丝带8”图层的第69帧上，其位置坐标x、y分别为“229.3”、“40.8”。（33）使用同样的方法，在“遮罩8”图层的第69帧处绘制一个宽高为“140px20px”的矩形，其位置坐标x、y分别为“185.0”、“16.0”，效果如图11-38所示。（34）在“遮罩8”图层的第88帧插入关键帧，绘制一个宽高为“621”的圆形，其位置坐标x、y分别为“168.1”、“152.1”，效果如图11-39所示。,图11-38 第69帧处的遮罩图形,图11-39 第88帧处的遮罩图形,（35）在“遮罩8”图层第69帧和第88帧之间创建形状补间动画，并锁定“遮罩8”图层和“丝带8”图层。（36）在“文字1”图层第90帧处插入关键帧，然后将【库】面板中名为“文字1”的元件放置到“文字1”图层的第90帧上，其位置坐标x、y分别为“423.0”、“135.2”，并设置【Alpha】参数为“0%”。（37）在“文字1”图层第95帧处插入关键帧，设置舞台上“文字1”元件的位置坐标x、y分别为“425.0”、“135.2”，并设置【颜色】参数为“无”，效果如图11-40所示。（38）在“文字1”图层第125帧处插入关键帧，设置舞台上“文字1”元件的位置坐标x、y分别为“437.0”、“135.2”，效果如图11-41所示。（39）在“文字1”图层第125帧处插入关键帧，设置舞台上“文字1”元件的位置坐标x、y分别为“443.0”、“135.2”，并设置【Alpha】参数为“0%”。,图11-40 第95帧处的文字,图11-41 第125帧处的文字,（40）在“文字1”图层的第90帧第95帧、第95帧第125帧、第125帧第145帧处之间创建动作补间动画。（41）锁定“文字1”图层，在所有图层的第146帧处插入空白关键帧。（42）取消锁定“丝带1”“丝带8”以及“花”图层，然后将时间轴移动到第145帧处，按Ctrl+C快捷键复制舞台上所有的元件，然后锁定所有图层。（43）新建一个图层并重命名为“组合1”，在其第146帧处插入关键帧，选中“组合1”图层的第146帧，按Ctrl+Shift+V快捷键将刚刚复制的所有元件粘贴到当前位置。（44）选中“组合1”图层的146帧，按F8快捷键将其转换为影片剪辑元件，并命名为“组合1”。（45）在“组合1”图层的第160帧和第200帧处插入关键帧，设置第160帧处“组合1”元件的位置坐标x、y分别为“160.0”、“40.8”，效果如图11-42所示。设置第200帧处“组合1”，元件的位置坐标x、y分别为“760.0”、“40.8”，如图11-43所示。（46）在“组合1”图层的第146帧第160帧、第160帧第200帧处之间创建动作补间动画。（47）在“组合1”图层的第201帧处插入空白关键帧。,图11-42 第160帧处“组合1”元件的位置,图11-43 第200帧处“组合1”元件的位置,3、制作第2个场景动画。（1）在“组合1”图层上新建并重命名图层，然后将相应图层设置为遮罩层，直至图层效果如图11-44所示。,图11-44 图层效果五,（2）使用同样的方法对第2个场景的丝带图层和遮罩图层进行动画设置，【时间轴】效果如图11-45所示。,图11-45【时间轴】信息,4、制作第3个场景动画。（1）在“组合2”图层上新建并重命名图层，直至图层效果如图11-46所示。（2）在“放大图”图层的第386帧处插入关键帧。（3）将“组合2”元件复制到“放大图”图层的第386帧处，并打散“组合2”的所有元件，删除多余的图形，直到舞台上的效果如图11-47所示,在最后创建“组合2”元件时，一定要将“丝带13”元件接到舞台的右方。,图11-46 图层效果六,图11-47 第386帧处的图形,（4）在“放大图”图层的第410帧处插入关键帧，调整舞台上的图形，直到图形覆盖整个舞台。（5）在“放大图”图层的第411帧处插入空白关键帧，锁定“放大图”图层。（6）在“背景”图层的第411帧处插入关键帧，利用【矩形】工具，在【属性】面板中设置【笔触颜色】为“无”，设置【填充颜色】为“#ECDDB2”，并在舞台上绘制一个宽高为“750px465px”的矩形，并与舞台居中对齐，效果如图11-48所示。（7）在“背景”图层的第430帧处插入关键帧，设置舞台上图形的【填充颜色】为“#666666”，效果如图11-49所示。（8）在“背景”图层的第411帧第430帧之间创建形状补间动画。,图11-48 第411帧处的图形,图11-49 第430帧处的图形,（9）在“文字3”图层的第430帧处插入关键帧，然后将【库】面板中名为“文字3”的元件放置到“文字3”图层的第430帧上，其位置坐标x、y分别为“157.6”、“202.9”，并设置【Alpha】参数为“0%”。（10）在“文字3”图层的第440帧处插入关键帧，选中舞台上的“文字3”元件，将其整体大小设置为“98.6%”，其位置坐标x、y分别为“160.7”、“203.3”，并设置【颜色】参数为“无”，效果如图11-50所示,图11-50 第440帧处的图形,（11）在“文字3”图层的第475帧处插入关键帧，选中舞台上的“文字3”元件，将其整体大小设置为“93.6%”，其位置坐标x、y分别为“171.6”、“204.6”。（12）在“文字3”图层的第500帧处插入关键帧，选中舞台上的“文字3”元件，将其整体大小设置为“90%”，其位置坐标x、y分别为“179.3”、“205.7”，并设置【Alpha】参数为“0%”。（13）在“文字3”图层的第430帧第440帧、第440帧第475帧、第475帧第500帧处之间创建动作补间动画。（14）使用同样的方法，在“文字4”图层的第500帧第570帧之间创建“文字4”元件的动画效果。（15）在“文字4”图层的第571帧处插入空白关键帧。5、制作第3个场景动画。（1）在“文字4”图层上新建并重命名图层，直至图层效果如图11-51所示。,图11-51 图层效果,（2）在“标志”图层的第575帧处插入关键帧，然后将【库】面板中名为“标志”的元件放置到“标志”图层的第575帧上，将其整体大小设置为“200%”，其位置坐标x、y分别为“190.1”、“109.1”，并为元件添加滤镜效果，如图11-52所示。,#0099CC,图11-52 添加滤镜效果,（3）在“标志”图层的第585帧处插入关键帧，将其整体大小设置为“100%”，其位置坐标x、y分别为“282.6”、“141.2”，并为元件添加滤镜效果，设置模糊参数中的【模型X】和【模型Y】为“0”，效果如图11-53所示。（4）在“标志”图层的第575帧和第585帧之间创建动作补间动画。,图11-53 第585帧处的图形,（5）在“彩带”图层和“遮罩14”图层的第590帧处分别插入关键帧，然后将【库】面板中名为“绿色的丝带”的元件放置到“彩带”图层的第590帧上，其位置坐标x、y分别为“30.5”、“216.2”。（6）用同样的方法，在“遮罩14”图层的第590帧处绘制一个宽高为“35.5px222.8px”的矩形，其位置坐标x、y分别为“35.5”、“199.2”，效果如图11-54所示。（7）在“遮罩14”图层的第610帧插入关键帧，设置矩形的宽为“785.5”，其他参数不变，效果如图11-55所示。,图11-54 第590帧处的遮罩图形,图11-55 第610帧处的遮罩图形,（8）选中“遮罩14”图层的第610帧，按F9快捷键打开【动作-帧】面板，在窗口中输入“stop();”命令。（9）保存测试影片，一个漂亮的广告片头动画制作完成。,11.3 Flash 趣味游戏开发海防保卫战设计,本案例将使用大量的代码来制作一个“海防保卫战”的射击类小游戏，其设置思路及效果如图11-56所示。,图11-56 设计思路及效果,1、布置舞台。（1）新建一个Flash文档，设置文档【尺寸】为“650px450px”，【背景颜色】为“#000066”，【帧频】为“21fps”，其他文档属性使用默认参数。,（2）新建并重命名图层，直至图层效果如图11-57所示。,图11-57 新建图层,（3）执行【文件】/【导入】/【打开外部库】菜单命令，将教学资源中的“素材第11讲海防保卫战海防保卫战-素材.fla”文件打开，将其中的所有内容复制到当前【库】面板中。（4）在所有图层的第2帧处按F6快捷键插入关键帧。（5）然后在第2帧处，将【库】面板中的元件按照表11-2的要求拖入相应舞台，其最终效果如图11-58所示,表11-2 放置元件对照表,图11-58 布置舞台,（6）选择【文本】工具，在【属性】面板中设置【文字类型】为“动态文本”，【字体】为“迷你霹雳体”，【字体大小】为“30”，【字体颜色】为“#CCCCCC”，在“文字显示”图层上绘制两个动态文本框，并都输入“0”，然后分别设置【变量】值为“score”和“leaked”，如图11-59所示。,score,leaked,（7）在“大海”图层的第4帧处，按F5快捷键插入帧。（8）在“文字显示”图层的第3帧处按F6快捷键插入关键帧，然后选择【文本】工具，在【属性】面板中设置【文字类型】为“静态文本”，【字体】为“迷你霹雳体”，【字体大小】为“45”，【字体颜色】为“#FFFF00”，输入如图11-60所示的文字。（9）在“文字显示”的第4帧处按F6快捷键插入关键帧，然后修改文本为如图11-61所示的效果。,图11-59 新建动态文本框,（10）在“按钮”图层的第3帧处按F6快捷键插入关键帧，然后将【库】面板中的“再来一次”按钮拖入到舞台中设置到如图11-62所示的位置。,图11-60 输入文本,图11-61 修改文本,图11-62 拖入按钮,（11）选中舞台上的“再来一次”按钮，按F9快捷键打开【动作】面板，然后输入代码。,2、输入控制代码。（1）在“代码”图层的第2帧、第3帧、第4帧处插入关键帧。（2）在第1帧输入代码。,在教学资源“素材第11讲海防保卫战第1帧代码.txt”中提供了第1帧的代码。,（3）在第2帧输入以下代码。,在教学资源“素材第11讲海防保卫战第2帧代码.txt”中提供了第2帧的代码。,（4）在“代码”图层的第3帧和第4帧处输入以下代码（5）选中代码图层的第2帧，在【属性】面板中添加背景音乐，设置如图11-63所示。,图11-63 添加背景音乐,（6）在第2帧输入以下代码。,