二维动画设计软件应用（Animate 2022）（第2版） 教案 项目八 教案2-任务2、任务3 交互功能和影片输出

教学文件PAGE第5页，共5页授课教案教者：专业:课程：年级：课题交互功能和影片输出——任务2、任务3课程类型理实一体课时安排2授课班级授课时间授课地点【教学内容分析】：通过前面二维动画知识的学习，同学们已经具备了制作动画短片的基本技能。项目八主要学习的是动画交互功能的设置，任务2和任务3是非常典型的两个动画。认真完成这两个动画，可以很好的巩固交互功能设置的知识。项目八注重培养学生程序设计思维和严谨的工作态度。【学情分析】：学生为动漫专业二年级学生，有着良好的信息素养和审美能力，他们热爱动画与游戏设计专业，接受新知识速度快，且能够较为灵活的运用到动画设计中去，通过前面的学习，学生们已经对二维动画软件操作比较熟练。不足之处是不够细心，不够扎实，应在规范和细节方面夯实，力求在动画制作中精益求精。【教学目标】：知识与能力：能够按照任务要求添加代码，实现动画交互功能。过程与方法：通过自主探索，让学生经历“特殊→一般→特殊”的认知过程，完善认知结构，积累动画制作经验。课程思政：让学生知道“粒粒皆辛苦”，粮食生产不易，应该珍惜粮食。【教学重、难点】：教学重点：ActionScript语言和简单的程序编写方法教学难点：程序设计和添加方法【教学方法】：讲授法、演示法、任务驱动法【教学过程】：教学环节及时间分配教学内容师生互动教学手段设计意图一、课前提问：1.调出动作面板的快捷键是什么？2.手动键入代码需要注意什么？二、新课内容：1.任务2是在任务1模型动画的基础上进行的实际应用，需要实现两个交互功能，首先是为片头设计代码，实现点击“发射”按钮，播放动画。其次是为片尾设计代码，实现点击“再飞一次”按钮，动画重新播放。任务实施步骤1选择“文件”菜单→“打开”命令，打开“素材\项目八\任务2\“真人实拍互动动画素材.fla”文件，素材文件是完整的动画文件，包括片头、片尾两个创意按钮“发射”和“在飞一次”，我们需要做的是为动画添加交互代码。步骤2选择“发射”按钮，在右侧属性栏中，将实例名称修改为“fashe_mc”。在228帧处，选择“再飞一次”按钮，在右侧属性栏中，将实例名称修改为“zailai_mc”。步骤3选择第1帧，在舞台中选中“发射”按钮，按住快捷键【F9】调出“动作面板”，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。就可以在代码编辑区查看到调用的如下代码。/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/fashe_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(5);}根据动作设定的需要，修改两个位置，一个是在代码片段前加上“停止”代码“stop();”，让画面停留在第1关键帧的位置上。另一个是将数字“5”改为“2”，使单击元件实例时，动画从第2帧开始进行播放。修改后，代码编辑区中的代码如下：/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/stop();fashe_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(2);}此时会在时间轴的图层顶部自动生成一个Actions图层，用来存放代码，第1关键帧上出现了小写的字母“a”。步骤4“再飞一次”的动作设定是当动画结束的时候，点击“再飞一次”按钮，实现动画从头播放的效果。因此，需要在动画的最后一帧处，选中“再飞一次”按钮元件，按住快捷键【F9】，调出“动作”面板，在右上方找到“代码片段”按钮，点击打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。可以在代码编辑区查看到调用的代码。代码如下：/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/zailai_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(5);}与“发射”按钮的代码修改方法相似，需要修改两个位置，一个是在代码片段前加上“停止”代码“stop();”，让画面停留在最后一帧的位置上。另一个是将数字“5”改为“2”，使单击元件实例时，动画从第2帧开始重新播放。修改后，代码编辑区中的代码如下：/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/stop();zailai_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(2);}步骤5代码设置完成后，按组合快捷键【Ctrl+Enter】，运行动画，进行测试。2.任务3要实现的是时间轴上的任意跳转功能，动画源文件素材已经准备好，我们需要做的是为每个按钮添加正确的代码，实现跳转功能。任务实施步骤1选择“文件”菜单→“打开”命令，打开“素材\项目八\任务3\“原创角色展示素材.fla”文件。步骤2首先来了解素材动画的结构，三个按钮元件“淘气灰”、“小狐狸”、“小鱼儿”均放在“按钮”图层里。“角色”图层有四个关键帧，第1关键帧中放置三张角色正面图片，第2关键帧中淘气灰图片已经替换成了淘气灰转面动画影片剪辑。第4关键帧中，小狐狸图片已经替换成小狐狸转面动画影片剪辑。第6关键帧中，小鱼儿图片已经替换成小鱼儿转面动画影片剪辑。目前来看，四个关键帧中的内容表面上看是一样的，但是当运行动画之后，影片剪辑元件呈现的就是动态的效果。步骤3选择“淘气灰”按钮，在右侧属性栏中，将实例名称修改为“mao_mc”。选择“小狐狸”按钮，在右侧属性栏中，将实例名称修改为“huli_mc”。选择“小鱼儿”按钮，在右侧属性栏中，将实例名称修改为“yu_mc”。步骤4选择第1帧，在舞台中选中“淘气灰”按钮，按住快捷键【F9】，调出“动作”面板，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。就可以在代码编辑区查看到调用的如下代码。/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/mao_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(5);}根据动作设定的需要，将数字“5”改为“2”，使单击“淘气灰”按钮时，动画跳转到第2帧并播放。修改后，代码编辑区中的代码如下：/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/mao_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(2);}此时会在时间轴的图层顶部自动生成一个Actions图层，用来存放代码，第1关键帧上出现了小写的字母“a”。步骤5选择第1帧，在舞台中选中“小狐狸”按钮，按住快捷键【F9】调出“动作”面板，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。代码编辑区原有代码的下方会出现如下新代码。/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/huli_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(5);}根据动作设定的需要，将数字“5”改为“4”，使单击“小狐狸”按钮时，动画跳转到第4帧并播放。修改后，代码编辑区中的新代码如下：/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/huli_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(4);}步骤6选择第1帧，在舞台中选中“小鱼儿”按钮，按快捷键【F9】调出“动作”面板，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，选择ActionScrip文件夹→“时间轴导航”中的“单击以转到帧并播放”命令。代码编辑区原有代码的下方会出现如下新代码如下。/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/yu_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(5);}根据动作设定的需要，将数字“5”改为“6”，使单击“小鱼儿”按钮时，动画跳转到第6帧并播放。修改后，代码编辑区中的新代码如下：/*单击以转到帧并播放单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。可在主时间轴或影片剪辑时间轴上使用。说明:1.单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字5。*/yu_mc.addEventListener(MouseEvent.CLICK,fl_ClickToGoToAndPlayFromFrame);functionfl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void{ gotoAndPlay(6);}步骤7此时，跳转代码设置完成，但是还缺少一个关键的设置，就是为“角色”层的四个关键帧添加停止代码，选中“角色”图层第1帧，按快捷键【F9】，调出“动作”面板，找到面板右上方的“代码片段”按钮，打开“代码片段”面板，在英文输入法状态下键入代码“stop();”。同样的方法，为第2帧，第4帧和第6帧都加上“stop();”。时间轴效果如图8-19所示。图8-19时间轴效果步骤8代码设置完成后，按组合快捷键【Ctrl+Enter】，运行动画，进行测试。三、作品讲评展示利用大屏幕投影展示学生优秀动画作品。开展自我评价、同学互评、教师评价。四、小结通过作品展示讲评，同学们可以欣赏学习更优秀的设计作品，总结制作中存在的问题