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

案例19：城市名片——脚本交互 一、单项选择题 1. 在“城市名片”交互式动画中，用户点击不同按钮切换显示城市的不同风貌（如历史、美食、风景），实现这种交互功能的核心是（ ） A. 补间动画 B. ActionScript 3.0 脚本 C. 遮罩效果 D. 骨骼动画 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("历史"); } 3. 要在动画开始时停止播放，等待用户交互，应该在时间轴的哪个位置添加什么代码？（ ） A. 在第一帧添加 play(); B. 在第一帧添加 stop(); C. 在最后一帧添加 stop(); D. 在按钮上添加 stop(); 4. 希望当鼠标滑过“美食”图片时，图片略微放大并显示介绍文字，应该监听的事件是（ ） A. MouseEvent.CLICK B. MouseEvent.MOUSE_OVER C. Event.ENTER_FRAME D. KeyboardEvent.KEY_DOWN 5. 代码片段面板的主要作用是（ ） A. 自动生成复杂的补间动画 B. 提供预设的、可复用的ActionScript代码块，帮助快速实现常见交互功能 C. 管理库中的资源 D. 导出动画视频 6. 使用代码片段为按钮添加交互时，一个重要的前提是（ ） A. 按钮必须位于舞台中心 B. 按钮必须设置为动态文本 C. 按钮必须具有唯一的实例名称 D. 按钮必须转换为图形元件 7. 要实现点击一个按钮后，舞台上的一座地标建筑开始旋转，应该（ ） A. 为按钮添加事件监听器，在监听函数中为建筑实例添加补间动画 B. 为建筑添加点击事件 C. 将建筑和按钮放在同一个影片剪辑里 D. 无法用脚本控制旋转 8. 在ActionScript 3.0中，用于在输出面板显示调试信息的关键字是（ ） A. alert() B. console.log() C. trace() D. print() 9. 如果希望“城市导航地图”上的一个区域在鼠标点击后，地图平滑缩放到该区域，这需要结合（ ） A. 简单的帧跳转 B. ActionScript的Tween类或补间动画与脚本的结合 C. 仅使用遮罩动画 D. 使用骨骼动画 10. 对于需要加载外部城市数据的复杂交互项目，最合适的ActionScript类是（ ） A. MovieClip B. URLLoader C. TextField D. Sound 二、判断题 1. ActionScript代码只能写在时间轴的关键帧上。（ ） 2. 使用代码片段面板时，生成的代码通常可以直接运行，无需任何修改。（ ） 3. 可以为动态文本（TextField）实例添加 MouseEvent.CLICK 事件监听器，使其具有按钮一样的点击交互性。（ ） 4. 一个影片剪辑实例内部的时间轴动画，不能通过外部脚本（如主时间轴上的代码）来控制其播放或停止。（ ） 5. 在Animate CC中，可以为HTML5 Canvas文档类型编写JavaScript代码来实现交互，而不一定使用ActionScript。（ ） 三、填空题 1. 为舞台上的对象添加交互代码，必须首先为其设置一个唯一的 ________。 2. 使动画停止在当前帧的ActionScript命令是 ________。 3. 响应鼠标点击的事件类型是 MouseEvent.________。 4. 用于在输出面板显示调试信息的函数是 ________。 5. 代码片段面板的作用是提供可复用的 ________ 代码块。 四、简答题 1. 描述使用代码片段面板，为一个名为“btn_scenery”的按钮添加“点击后跳转到‘风景’帧并停止”功能的完整步骤。 2. 如何利用ActionScript，实现当用户鼠标在“城市地图”上移动时，屏幕角落动态显示当前鼠标所指区域的名称？ 3. 在团队协作开发一个复杂的“智慧城市”交互展示项目时，如何规划和构建ActionScript代码，以保证代码的可维护性、可扩展性和团队协作效率？ 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $ 案例19：城市名片——脚本交互 一、单项选择题 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代码中通过这个名称来引用和控制它。这是使用代码片段和编写交互代码的基础。 7. 要实现点击一个按钮后，舞台上的一座地标建筑开始旋转，应该（ ） A. 为按钮添加事件监听器，在监听函数中为建筑实例添加补间动画 B. 为建筑添加点击事件 C. 将建筑和按钮放在同一个影片剪辑里 D. 无法用脚本控制旋转 【答案】A 【解析】 交互逻辑是：用户与按钮交互（点击），触发代码（事件监听函数），代码控制目标对象（建筑实例）的属性（如rotation属性）或触发其已有动画。可以通过代码直接修改rotation属性，或通过代码控制一个已做好的旋转补间动画的播放。 8. 在ActionScript 3.0中，用于在输出面板显示调试信息的关键字是（ ） A. alert() B. console.log() C. trace() D. print() 【答案】C 【解析】 trace() 函数是ActionScript中专用于调试的工具，可以将括号内的任何表达式的结果输出到Animate的“输出”面板中，便于检查变量值或程序执行流程。 9. 如果希望“城市导航地图”上的一个区域在鼠标点击后，地图平滑缩放到该区域，这需要结合（ ） A. 简单的帧跳转 B. ActionScript的Tween类或补间动画与脚本的结合 C. 仅使用遮罩动画 D. 使用骨骼动画 【答案】B 【解析】 平滑缩放动画涉及对象属性（scaleX, scaleY, x, y）的连续变化。这可以通过ActionScript的Tween类（如TweenLite）动态创建补间，或者事先做好补间动画并用脚本控制其播放（play(), stop()）来实现。 10. 对于需要加载外部城市数据的复杂交互项目，最合适的ActionScript类是（ ） A. MovieClip B. URLLoader C. TextField D. Sound 【答案】B 【解析】 URLLoader 类用于从指定的URL加载数据（如文本、二进制数据或URL编码变量）。它可以用来加载外部的JSON、XML或文本文件，从而动态更新动画内容，实现数据与表现的分离。 二、判断题 1. ActionScript代码只能写在时间轴的关键帧上。（ ） 【答案】错 【解析】 ActionScript代码主要写在时间轴的关键帧上（最常见），但也可以写在外部.as类文件中，并通过文档类或元件链接与FLA文件关联，实现更结构化、可复用的代码管理。 2. 使用代码片段面板时，生成的代码通常可以直接运行，无需任何修改。（ ） 【答案】错 【解析】 代码片段提供的是通用模板。应用后，几乎总是需要用户根据自己项目的实际情况进行修改，最常见的就是修改对象的实例名称、URL地址、目标帧标签或函数名称等，否则代码可能无法工作。 3. 可以为动态文本（TextField）实例添加 MouseEvent.CLICK 事件监听器，使其具有按钮一样的点击交互性。（ ） 【答案】对 【解析】 动态文本（以及输入文本、静态文本）本质上也是InteractiveObject的子类，可以像按钮和影片剪辑一样，响应鼠标事件（如CLICK, MOUSE_OVER等）。但需要确保其selectable属性为false（默认），否则点击会进入文本选择模式。 4. 一个影片剪辑实例内部的时间轴动画，不能通过外部脚本（如主时间轴上的代码）来控制其播放或停止。（ ） 【答案】错 【解析】 完全可以。只要该影片剪辑实例有实例名称（如mc_city），就可以通过主时间轴上的代码访问其方法和属性。例如，mc_city.stop(); 可以停止该影片剪辑内部的时间轴播放。 5. 在Animate CC中，可以为HTML5 Canvas文档类型编写JavaScript代码来实现交互，而不一定使用ActionScript。（ ） 【答案】对 【解析】 当创建新文档时选择“HTML5 Canvas”类型，Animate会提供一个用于编写JavaScript代码的“动作”面板。此时，交互逻辑需要使用JavaScript和CreateJS库来实现，而不是ActionScript。 三、填空题 1. 为舞台上的对象添加交互代码，必须首先为其设置一个唯一的 ________。 【答案】实例名称 2. 使动画停止在当前帧的ActionScript命令是 ________。 【答案】stop(); 3. 响应鼠标点击的事件类型是 MouseEvent.________。 【答案】CLICK 4. 用于在输出面板显示调试信息的函数是 ________。 【答案】trace() 5. 代码片段面板的作用是提供可复用的 ________ 代码块。 【答案】ActionScript 四、简答题 1. 描述使用代码片段面板，为一个名为“btn_scenery”的按钮添加“点击后跳转到‘风景’帧并停止”功能的完整步骤。 【答案】 1. 准备按钮：确保舞台上有一个按钮元件实例，并在属性面板中将其“实例名称”设置为“btn_scenery”。 2. 定义帧标签：在时间轴上，找到希望跳转到的“风景”内容开始的帧，选中该关键帧。在属性面板的“标签”部分，为“名称”输入“风景”。此时该帧上会出现一面小红旗和标签名。 3. 选择关键帧添加代码：在时间轴上，选中一个关键帧（通常是第一帧，或按钮所在的那一帧），确保播放头会经过此帧以执行代码。 4. 打开代码片段面板：通过“窗口 > 代码片段”打开面板。 5. 查找并应用片段：在面板中展开“动作”或“时间轴导航”类别，找到“单击以转到帧并停止”片段。双击该片段，或选中后点击面板上的“添加到当前帧”按钮。 6. 修改生成的代码：此时动作面板会自动打开，并插入了一段类似以下的代码： actionscript btn_scenery.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame); function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void { gotoAndStop(5); // 这里的数字需要修改 } 7. 关键修改：将函数体内的 gotoAndStop(5); 中的数字 5 修改为你的目标帧标签名，即 gotoAndStop("风景");。 （注意：如果片段生成的函数名或实例名与你实际的不符，也需要相应修改） 8. 测试：保存文件，按Ctrl+Enter测试影片。点击“btn_scenery”按钮，动画应该会立即跳转到标记为“风景”的帧并停止播放。 2. 如何利用ActionScript，实现当用户鼠标在“城市地图”上移动时，屏幕角落动态显示当前鼠标所指区域的名称？ 【答案】 思路：为“城市地图”影片剪辑添加鼠标移动事件监听，根据鼠标坐标判断所指区域，并更新一个动态文本框的内容。 步骤： 1. 准备地图：将城市地图转换为一个影片剪辑元件，实例名称设为“map_mc”。确保地图上有明确的、可区分的区域（可以是地图内的子影片剪辑，或通过坐标范围定义）。 2. 准备信息显示框：创建一个动态文本框，实例名称设为“info_txt”，放在舞台角落。 3. 编写代码（放在主时间轴第一帧）： actionscript // 为地图添加鼠标移动监听 map_mc.addEventListener(MouseEvent.MOUSE_MOVE, onMapMouseMove); // 初始隐藏或清空信息 info_txt.text = ""; function onMapMouseMove(event:MouseEvent):void { // 获取鼠标在地图内部的相对坐标 var localX:Number = map_mc.mouseX; var localY:Number = map_mc.mouseY; var regionName:String = ""; // 方法A：如果地图内区域是独立的子影片剪辑（实例名如area1_mc, area2_mc） // 可以遍历这些子区域，用hitTestPoint检测碰撞（略复杂）。 // 方法B：根据坐标范围简单判断（适用于区域规则的情况） if (localX > 100 && localX < 200 && localY > 50 && localY < 150) { regionName = "历史街区"; } else if (localX > 300 && localX < 400 && localY > 80 && localY < 180) { regionName = "中央公园"; } else { regionName = ""; // 不在定义区域 } // 更新显示 info_txt.text = regionName; } 4. 优化：可以考虑添加一个延迟或取消事件，避免文字更新过于频繁导致闪烁。也可以为info_txt添加淡入淡出效果。 3. 在团队协作开发一个复杂的“智慧城市”交互展示项目时，如何规划和构建ActionScript代码，以保证代码的可维护性、可扩展性和团队协作效率？ 【答案】 1. 代码结构规划： 采用文档类（Document Class）：这是最佳实践。创建一个外部的.as文件（如Main.as）作为主程序的入口。在FLA文件的属性面板中，将“文档类”设置为Main。这样所有主时间轴的代码都集中在这个类中，与时间轴分离，便于版本管理和团队协作。 模块化与类设计：将不同的功能模块封装成独立的类。例如： CityDataManager.as：负责加载和处理城市数据（JSON/XML）。 UIManager.as：管理所有界面元素（按钮、面板）的创建和事件绑定。 AnimationController.as：控制各种补间动画、3D效果的播放逻辑。 每个城市模块（如交通、环保）也可以有自己的视图类（TrafficView.as, EnvironmentView.as）。 2. 团队协作策略： 版本控制系统：必须使用Git等版本控制工具管理FLA文件和所有的.as源代码文件。特别注意FLA文件是二进制文件，合并冲突困难，应约定由专人负责FLA的整合，或尽量将视觉元素也通过代码（如Sprite, MovieClip）动态创建。 编码规范：制定并遵守统一的命名规范（如变量骆驼命名法、类名帕斯卡命名法）、注释规范和文件结构规范。 接口与通信：定义清晰的模块间通信接口。例如，使用自定义事件（Event）在模块间传递消息，而不是直接互相引用，降低耦合度。 3. 提高可维护性与可扩展性： 配置数据外部化：将所有可能变化的数据（如城市介绍文字、图片URL、按钮位置、颜色方案）抽取到外部的XML或JSON配置文件中。代码只负责逻辑，改变内容时只需修改配置文件，无需改代码和重新发布FLA。 资源动态加载：使用Loader或URLLoader动态加载图片、声音、甚至子SWF模块。这样主文件体积小，加载快，并且可以随时更新某个模块的资源而不影响整体。 设计模式的应用：在合适的地方应用设计模式，如使用“观察者模式”处理事件，使用“单例模式”管理全局配置，使用“状态模式”管理应用的不同视图状态（如浏览模式、详情模式）。 4. 开发与调试流程： 单元测试：为关键的业务逻辑类编写单元测试（可以使用FlexUnit等框架）。 调试工具：善用trace()和Flash Debug Player进行调试。为关键流程添加详细的日志输出。 代码审查：建立代码审查机制，确保代码质量，并促进团队成员间的知识共享。 通过以上规划，可以将一个复杂的交互项目从“一堆堆在时间轴上的代码”转变为一个结构清晰、职责分明、易于协作和维护的软件工程。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $