案例19：城市名片——脚本交互（课件）-《Animate CC动画制作案例教程》（电子工业出版社第2版）同步精品课堂

城市名片——脚本交互 -案例19- Animate CC动画制作案例教程 电工版第二版 案例描述 通过单击3个按钮，分别打开风景、视频、简介3个动画界面，声形并茂的呈现“城市名片”动画效果，如图所示。 案例分析 制作3个有声音、动态的按钮元件。 01 制作风景切换的动态效果，合理插入视频及图像。 通过编辑“代码片段”，实现用按钮控制界面切换的效果。 02 03 操作流程演示 第一部分 操作流程演示 1.在Animate中新建ActionSpript3.0文档，设置舞台大小为600×500像素。按【Ctrl+S】组合键保存文件，并命名为“城市名片.fla”。 操作流程演示 2.把“图层1”重命名为“背景”，导入图片素材“背景.jpg”至舞台，并将其缩放到与舞台相同的尺寸。将时间轴移至第181帧，按F5键插入帧。 操作流程演示 3.将素材图片“相框1.png”“相框2.png”“相框3.png”和声音文件“按钮声音.wav”导入库。新建按钮元件，命名为“按钮1”。将“相框1.png”拖入按钮编辑舞台。在“指针经过”帧处按F6键插入关键帧，在“按下”帧处按F5键插入帧，“按钮1”元件编辑舞台效果如图所示。 操作流程演示 4.在按钮编辑舞台的“图层1”上方新建“图层2”。在“指针经过”帧处插入关键帧，在“按下”帧处插入帧。利用“矩形工具”在“指针经过”关键帧中绘制一个颜色为#FF9933、Alpha值为70%的无边矩形。利用“文本工具”，输入大小为50pt、颜色为黑色、系列为华文隶书的文字“风景”，矩形及文字绘制效果如图所示。 操作流程演示 5.在“图层2”上方新建“图层3”，在“指针经过”帧处插入关键帧，将库中的“按钮声音.wav”拖入舞台。同时选中图层1、图层2“指针经过”帧中的对象，利用“任意变形工具”适当的旋转对象，对象旋转后效果如图所示。 操作流程演示 6. 用同样的方法，分别利用“相框2.png”“相框3.png”素材制作按钮2、按钮3，文字分别替换为“简介”“视频”。 操作流程演示 7. 返回场景1，在“背景”层上方新建“按钮”图层，分别将3个按钮拖入舞台，并调整其位置、大小及角度，按钮排列效果如图6-37所示。将播放头移至第181帧处，按F5键插入帧。 操作流程演示 8. 将素材“风景1.jpg”“风景4.jpg”“简介.png”“巴黎的春天.mp3”导入“库”。在“按钮”图层上方新建“对象”图层，将“风景1.jpg”拖入舞台并调整其大小及位置，调整后的效果如图所示。 操作流程演示 9. 在“对象”图层的第2帧处插入关键帧，将“风景1.jpg”替换为“简介.png”，图像效果如图所示。 操作流程演示 10. 将素材图像“风景2.jpg”“风景3.jpg”“风景4.jpg”分别转换为图形元件“风景2”“风景3”“风景4”。在“对象”图层的第3帧处插入关键帧，将“简介.png”替换为“风景2”图形元件(可借助绘图纸外观对齐对象)，插入图形元件后的效果如图所示。 操作流程演示 11. 在第30帧处插入关键帧，将“风景2”元件的Alpha值调整为15%。在第3~30帧之创建传统补间动画。 操作流程演示 12.在第31帧处插入关键帧，将“风景2”元件替换为“风景3”元件，保持Alpha值为15%，分别在第60帧、90帧处插入关键帧，调整第60帧处元件的Alpha值为100%。分别在第31~60帧、60~90帧之间创建传统补间动画。 操作流程演示 13.在第91帧处插入关键帧，将“风景3”元件替换为“风景4”元件，借鉴步骤12，在第91~150帧之间，制作“风景4”元件透明度变化的传统补间动画。 操作流程演示 14.在第151帧处插入关键帧，将“风景4”元件替换为“风景2”元件，保持Alpha值为15%。在第180帧处插入关键帧，将元件的Alpha值调整为100%，在第151~180帧之间创建传统补间动画。 操作流程演示 15.在第181帧处插入关键帧，将“风景2”元件删除。执行菜单“文件”→“导入”→“导入视频”命令，将视频“北京城市风光.flv”以“嵌入”的方式导入，此时“对象”图层中第181~440帧之间自动嵌入了该视频。分别在“背景”图层、“按钮”图层的第440帧处按F5键插入帧。调整插入视频的大小及位置，导入视频后的效果如图所示。 操作流程演示 16.在“对象”图层的上方新建“声音”图层，分别在该图层的第3帧、第180帧处插入关键帧。选中第3帧，将“库”中的“巴黎的春天.mp3”拖入舞台，时间轴效果如图6-43所示。打开声音属性面板，设置声音属性如图所示。 操作流程演示 17.将播放头移至第1帧处，打开代码片段面板。单击展开“时间轴导航”分类，双击“在此帧处停止”选项，在动作面板中，新添加的脚本高亮显示。此时时间轴自动创建新图层“Actions”，第1帧上出现一个“a”字，添加脚本后效果如图所示。 操作流程演示 18.将播放头分别移至第2帧、第180帧、第440帧处，为其添加“在此帧处停止”动作脚本。 操作流程演示 19.将播放头移至第1帧，分别将“按钮1”“按钮2”“按钮3”元件的实例命名为“a1”“a2”“a3”。选中舞台上的“按钮1”，打开代码片段面板，展开“时间轴导航”分类，如图6-45所示。双击“单击以转到帧并播放”选项，在动作面板新添加的脚本语句中，将播放的帧编号修改为“3”，添加脚本后效果如图所示。 操作流程演示 20.用同样的方法，将播放头移至第1帧，为“按钮2”“按钮3”元件添加动作脚本，让其分别转到第2帧、第181帧处播放，两按钮添加的脚本语句如图所示。 操作流程演示 21.按【Ctrl+S】组合键保存文件，按【Ctrl+Enter】组合键测试影片。播放效果如图所示。 分组实践 第二部分 分组实践 布置任务：在学生端电脑完成案例制作，可根据小组讨论结果适当添加有趣效果。 巩固练习 随堂练习 1. 在“城市名片”交互式动画中，用户点击不同按钮切换显示城市的不同风貌（如历史、美食、风景），实现这种交互功能的核心是（ ） A. 补间动画 B. ActionScript 3.0 脚本 C. 遮罩效果 D. 骨骼动画 【答案】B 【解析】 交互功能需要通过程序代码来响应用户操作（如点击）并控制动画播放逻辑（如跳转帧、显示/隐藏内容）。ActionScript 3.0 是Animate中用于实现此类交互的脚本语言。 随堂练习 2. 为舞台上名为“btn_history”的按钮添加点击事件监听器，使其被点击时跳转到“历史”标签帧，正确的代码是（ ） A. btn_history.onPress = function(){ gotoAndPlay("历史"); } B. btn_history.addEventListener(MouseEvent.CLICK, function(){ gotoAndPlay("历史"); }); C. btn_history.click = gotoAndPlay("历史"); D. if(btn_history.clicked){ gotoAndPlay("历史"); } 【答案】B 【解析】 在ActionScript 3.0中，为对象添加事件监听器的标准语法是：对象.addEventListener(事件类型, 事件处理函数);。MouseEvent.CLICK是点击事件，gotoAndPlay("历史")是跳转函数。 随堂练习 3. 要在动画开始时停止播放，等待用户交互，应该在时间轴的哪个位置添加什么代码？（ ） A. 在第一帧添加 play(); B. 在第一帧添加 stop(); C. 在最后一帧添加 stop(); D. 在按钮上添加 stop(); 【答案】B 【解析】 为了让动画一开始就暂停在第一帧，需要在时间轴的第一帧（或任何希望停止的帧）上添加 stop(); 语句。这通常写在关键帧的动作面板中。 随堂练习 4. 希望当鼠标滑过图片时，图片略微放大并显示介绍文字，应该监听的事件是（ ） A. MouseEvent.CLICK B. MouseEvent.MOUSE_OVER C. Event.ENTER_FRAME D. KeyboardEvent.KEY_DOWN 【答案】B 【解析】 MouseEvent.MOUSE_OVER 事件在鼠标指针进入对象区域时触发，非常适合用于制作鼠标悬停效果。 随堂练习 5. 代码片段面板的主要作用是（ ） A. 自动生成复杂的补间动画 B. 提供预设的、可复用的ActionScript代码块，帮助快速实现常见交互功能 C. 管理库中的资源 D. 导出动画视频 【答案】B 【解析】 代码片段面板包含分类整理好的常见ActionScript 3.0代码片段，用户可将其直接添加到项目中，然后根据需要进行修改，从而快速实现如跳转、加载、拖放等交互功能，降低编程门槛。 随堂练习 6.使用代码片段为按钮添加交互时，一个重要的前提是（ ） A. 按钮必须位于舞台中心 B. 按钮必须设置为动态文本 C. 按钮必须具有唯一的实例名称 D. 按钮必须转换为图形元件 【答案】C 【解析】 只有为舞台上的对象（如按钮）设置了唯一的“实例名称”，才能在ActionScript代码中通过这个名称来引用和控制它。这是使用代码片段和编写交互代码的基础。 THANKS 谢谢观看 $