您好,欢迎访问三七文档
当前位置:首页 > 临时分类 > Animate-CC2017基础与实例教程-第6版第7章-综合实例
第7章综合实例通过前面几章的学习,我们已经掌握了AnimateCC2017的基本操作。本章将综合利用前面几章的知识,制作全Flash站点和动画片。本章重点:本例将制作一个Flash站点,如图7-1所示。通过本例的学习,读者应掌握网页的架构和常用脚本的使用方法。7.1天津美术学院网页制作要点:图7-1天津美术学院网页制作操作步骤:图7-2时间轴分布1)按快捷键〈Ctrl+F8〉,新建影片剪辑元件,名称为“泉动画”。然后单击“确定”按钮,进入其编辑模式。2)选择工具箱上的(椭圆工具)绘制一个圆形,然后按快捷键〈F8〉将其转换为图形元件“泉”。接着在“泉动画”元件中制作放大并逐渐消失的动画。此时,时间轴如图7-2所示。1.制作“场景1”整个网站共有8个场景。其中,“场景1”和“场景2”为Loading动画;“场景3”为主页;“场景4”~“场景8”为单击“场景3”中的按钮后进入的子页。3)按快捷键〈Ctrl+E〉,回到“场景1”,新建8个图层。然后将“泉动画”元件复制到不同图层的不同帧上,从而形成错落有致的泉水放大并消失效果,时间轴及效果如图7-3所示。图7-3时间轴及效果图7-4绘制直线4)选择工具箱上的(线条工具),在“图层1”上绘制一条白色直线,然后按快捷键〈F8〉将其转换为图形元件“线”。接着在工作区中复制一个“线”,并将两条白线放置到工作区的上方和下方。最后在“图层1”的第66帧按快捷键〈F5〉,从而将该层的总长度延长到66帧,时间轴及效果如图7-4所示。5)新建7个图层L、o、a、d、i、n、g,分别制作字母L、o、a、d、i、n、g逐个显现,然后逐个消失的效果,如图7-5所示。6)为了使文字Loading更加生动,下面分别选中字母g的上下两部分,然后按快捷键〈F8〉,将它们分别转换为“g上”和“g下”图形元件。接着新建“g下”层,将“g下”元件放置到该层,并制作字母g下半部分的摇摆动画,最终时间轴如图7-6所示。图7-5制作字母逐个出现的效果图7-6时间轴分布及效果图7-7新建“场景2”图7-8导入背景图片1)执行菜单中的“窗口|场景”命令,调出“场景”面板。然后单击(添加场景)按钮,新建“场景2”,如图7-7所示。接着按快捷键〈Ctrl+R〉,导入配套光盘中的“素材及结果\7.1天津美院网页制作\xiaoyuan.jpg”图片,作为“场景2”的背景,再将其中心对齐。最后将“图层1”图层命名为“背景”图层。再在“背景”图层的第105帧,按快捷键〈F5〉,插入普通帧,从而将“背景”图层的总长度延长到第105帧如图7-8所示。2.制作“场景2”2)新建4个图层,名称分别为H、e、r、e,在其中制作文字从场景外飞入场景的效果,如图7-9所示。图7-9制作文字从场景外飞入场景的效果3)绘制图形如图7-10所示,然后利用遮罩层制作逐笔绘制图形的效果。此时,时间轴分布如图7-11所示。图7-10绘制图形图7-11时间轴分布4)按快捷键〈Ctrl+F8〉,新建影片剪辑元件,名称为zhuan,然后单击“确定”按钮,进入元件的编辑模式。5)按快捷键〈Ctrl+R〉,导入由Cool3D软件制作的旋转动画图片,结果如图7-12所示。然后按快捷键〈Ctrl+E〉,回到“场景2”,将元件zhuan从库中拖入到舞台中。图7-12导入序列图片6)在“场景2”中制作其由小变大、由消失到显现,然后再由大变小开始旋转的效果,时间轴分布如图7-13所示。图7-13时间轴分布7)在“场景2”中添加“直线”和“文字”图层,然后分别制作背景图片上下边缘的白色直线效果和文字淡入动画,结果如图7-14所示。图7-14分别制作背景图片上下边缘的白色直线效果和文字淡入动画8)制作控制跳转的按钮。按快捷键〈Ctrl+F8〉,新建按钮元件,命名为“skip”,单击“确定”按钮,进入元件的编辑模式,接着制作不同状态下的按钮,结果如图7-15所示。图7-15制作在不同状态下的按钮“弹起”帧“指针经过”帧“按下”帧“点击”帧图7-16将skip”按钮元件拖入“场景2”中并将其“实例名称”命名为“skip”9)回到“场景2”,新建“skip按钮”图层,然后将“skip”元件拖入“场景2”中,并在“属性”面板中将其“实例名称”命名为“skip”,如图7-16所示。10)制作单击舞台中的“skip”按钮后直接跳转到下一场景(场景3)的效果。方法:选择舞台中的“skip”按钮实例,执行菜单中的“窗口|代码片段”命令,调出“代码片段”面板。然后在此面板的“ActionScript/时间轴导航/单击以转到场景并播放”命令处双击鼠标,如图7-17所示。此时会调出“动作”面板,并在其中自动输入动作脚本,如图7-18所示。同时会自动创建一个名称为“Actions”的图层,如图7-19所示。最后在“动作”面板中删除注释文字,再将脚本中的“场景3”改为“场景1”,此时最终脚本如下所示:图7-17在“单击以转到场景并播放”命令处双击鼠标图7-18调出“动作”面板,并在其中自动输入动作脚本图7-19自动创建一个名称为“Actions”的图层skip.addEventListener(MouseEvent.CLICK,fl_ClickToGoToScene_16);functionfl_ClickToGoToScene_16(event:MouseEvent):void{MovieClip(this.root).gotoAndPlay(1,场景3);}图7-17在“图层1”中直线运动动画1)新建“场景3”,然后将元件“线”拖入“场景3”。再将“图层1”图层命名为“下直线运动”图层,接着制作“线”元件从舞台下方运动到中央,再回到舞台下方的动画,如图7-20所示。3.制作“场景3”2)在“下直线运动”图层上方新建“上直线运动”图层,再次将元件“线”拖入“场景3”,并调整位置如图7-21所示。然后制作“线”元件从舞台上方运动到中央,再回到舞台上方保持静止状态的动画。图7-21在“图层3”放置“线”元件3)新建“背景”图层,然后将其移动到最下方。接着选择第10帧,按快捷键〈Ctrl+R〉,导入配套光盘中的“素材及结果\7.1天津美院网页制作\eye.jpg”图片作为背景图片,并将其置于底层。接着同时选择3个图层,在第74帧按快捷键〈F5〉,插入普通帧,结果如图7-22所示。4)在“上直线运动”图层上方新建“图标”图层,然后在第10帧按快捷键〈F7〉,插入空白关键帧,再将“zhuan”元件拖入“场景3”的左上角,如图7-23所示。图7-22添加背景图片图7-23将元件zhuan放置到“场景3”的左上角5)按快捷键〈Ctrl+F8〉,新建一个按钮元件,名称为“按钮1”,然后制作一个按钮,如图7-24所示。图7-24制作“按钮1”按钮元件“弹起”帧“指针经过”帧“按下”帧“点击”帧6)回到“场景3”,在“图标”图层上方新建“历史沿革”图层,然后在第10帧按快捷键〈F7〉,插入空白关键帧,再将“按钮1”元件拖入舞台中,并调整位置如图7-25所示。图7-25将“按钮1”元件放置到舞台中7)制作单击“场景3”中的“按钮1”按钮后会跳转到“场景4”的效果。方法:选中舞台中的“按钮1”按钮元件实例,然后在“属性”面板中将其“实例名称”命名为“lksz”,如图7-26所示。然后在“代码片段”面板的“ActionScript/时间轴导航/单击以转到场景并播放”命令处双击鼠标,如图7-27所示。此时会调出“动作”面板,并在其中自动输入动作脚本。同时会自动创建一个名称为“Actions”的图层,如图7-28所示。最后在“动作”面板中删除注释文字,再将脚本中的“场景3”改为“场景4”,此时最终脚本如下所示:图7-26在“属性”面板中将“按钮1”元件实例的“实例名称”命名为“lksz”图7-27在“单击以转到场景并播放”命令处双击鼠标图7-28自动创建一个名称为“Actions”的图层lksz.addEventListener(MouseEvent.CLICK,fl_ClickToGoToScene_15);functionfl_ClickToGoToScene_15(event:MouseEvent):void{MovieClip(this.root).gotoAndPlay(1,“场景4”);}8)利用与制作“按钮1”按钮元件同样的方法创建“按钮2”~“按钮5”按钮元件,如图7-29所示。“按钮2”按钮元件“按钮3”按钮元件“按钮4”按钮元件“按钮5”按钮元件图7-29创建“按钮2”~“按钮5”按钮元件9)在“场景3”中新建“历史沿革”、“师资与办学”、“与我联系”和“人才培养”4个图层,然后从“库”面板中分别将“按钮2”~“按钮5”拖入“场景3”的相应图层中,并放置到相应位置如图7-30所示。图7-30分别将“按钮2”~“按钮5”拖入“场景3”的相应图层中并调整位置10)选择舞台中的“按钮2”按钮实例,在“属性”面板中将其“实例名称”命名为“xsbg”,然后选择舞台中的“按钮3”按钮实例,在“属性”面板中将其“实例名称”命名为“szybx”,接着选择舞台中的“按钮4”按钮实例,在“属性”面板中将其“实例名称”命名为“ywlx”,最后选择舞台中的“按钮5”按钮实例,在“属性”面板中将其“实例名称”命名为“crpy”。11)制作单击“场景3”中的“按钮2”按钮后会跳转到“场景5”的效果。选中舞台中的“按钮2”按钮元件实例,然后在“代码片段”面板的“ActionScript/时间轴导航/单击以转到场景并播放”命令处双击鼠标,再在“动作”面板中删除注释文字,再将脚本中的“场景3”改为“场景5”,此时最终脚本如下所示:lsyg.addEventListener(MouseEvent.CLICK,fl_ClickToGoToScene_16);functionfl_ClickToGoToScene_16(event:MouseEvent):void{MovieClip(this.root).gotoAndPlay(1,场景5);}12)制作单击“场景3”中的“按钮3”按钮后会跳转到“场景5”的效果。选中舞台中的“按钮3”按钮元件实例,然后在“代码片段”面板的“ActionScript/时间轴导航/单击以转到场景并播放”命令处双击鼠标,再在“动作”面板中删除注释文字,再将脚本中的“场景3”改为“场景6”,此时最终脚本如下所示:lsyg.addEventListener(MouseEvent.CLICK,fl_ClickToGoToScene_16);functionfl_ClickToGoToScene_16(event:MouseEvent):void{MovieClip(this.root).gotoAndPlay(1,场景6);}13)制作单击“场景3”中的“按钮4”按钮后会跳转到“场景7”的效果。选中舞台中的“按钮4”按钮元件实例,然后在“代码片段”面板的“ActionScript/时间轴导航/单击以转到场景并播放”命令处双击鼠标,再在“动作”面板中删除注释文字,再将脚本中的“场景3”改为“场景7”,此时最终脚本如下所示:lsyg.addEventListener(MouseEvent.CLICK,fl_ClickToGoToScene_16);functionfl_ClickToGoToScene_16(event:MouseEvent):void{MovieClip(this.root).gotoAndPlay(1,场景7);}14)制作单击“场景3”中的“按钮5”按钮后会跳转到“场景8”的效果。选中舞台中的“按钮5”按钮元件实例,然后在“代码片段”面板的“ActionScript/时间轴导航/单击以转到场景并播放”命令处双击鼠标,再在“动作”面板中删除注释文字,再将脚本中的“场景3”改为“场景8”,此时最终脚本如下所示:lsyg.addEventListener(MouseEvent.CLICK,fl_ClickToGo
本文标题:Animate-CC2017基础与实例教程-第6版第7章-综合实例
链接地址:https://www.777doc.com/doc-8568522 .html