理解 Flash 中的 ActionScript 3 调试

调试是一个解决从应用程序已知问题或测试未知错误和性能问题的过程。这个过程一般最终决定了项目的成败。本文旨在帮助您理解调试过程以及在 Adobe Flash Professional CS5 中的 ActionScript 3 环境中进行开发的常见问题。

本文中的主体和工作流程建议针对设计人员和开发人员。您的目的是找出并解释问题、适应错误处理流程以及定义一个工作流程(用于在出错时解决错误)。您将使用 Flash Professional CS5 并体验与 Adobe Flash Builder 4 的全新集成效果。

注意:如果您使用的是 Flash CS4,请参阅本文的先前版本:理解 Flash CS4 Professional 中的 ActionScript 3 调试

为了使这个流程更形象,我提供了一系列范例文件,每个文件都包含一个受损版本和一个修复版本。修复版本可供参考,但您可以在阅读本文时了解具体的解决方法。

什么是错误?为什么挥之不去?

当开始使用 ActionScript 3 时,我留意到的第一点是它对输出错误的宽容度远不及 ActionScript 2。但这最终是一件好事,我已经习以为常,它甚至已成为我的优势。但有一点可以肯定,它与使用 ActionScript 2 截然不同。

本部分将概括您将处理哪些 Adobe Flash Player 问题以及如何在 Flash Professional 工作区中将它们形象化。

理解 ActionScript 3 环境

ActionScript 3 架构以一个新引擎 ActionScript Virtual Machine 2 为运行基础,它解决了先前版本的 Adobe Flash 中累积的许多历史问题。更新幅度很大,以至于它需要一个可在 Flash Player 9 及更高版本中查看的新文件格式。

有关全新 ActionScript 引擎的技术概述,请阅读以下文章:

在 Flash Professional CS5 中,ActionScript 3 环境分为两部分:ActionScript 3 FLA 文件和 ActionScript 3 编程语言。

默认情况下,当您在 Flash Professional 中创建新文件时,使用的是 ActionScript 3 FLA 文件。文件中的元素外观以及总体感觉与 ActionScript 2 FLA 文件相同,但 Flash Professional 工作区经过更新,可在 ActionScript 3 FLA 处于焦点时,显示 ActionScript 3 功能。最明显的是,您将看到“组件”面板中的整套组件都不同于以往。

处理 ActionScript 3 FLA 文件时,管理资源和创建元件的过程与 ActionScript 2 基本相同,但编码规则有所改变。您可以将代码沿时间轴添加到关键帧,或使用外部 ActionScript 文件将它链接到主时间轴或元件。(无法再将代码附加到舞台中的实例。)

发布影片时,ActionScript 代码将编译到生成的 SWF 文件中。ActionScript 3 编译器通过检查确保代码结构及代码分配都符合 ActionScript 3 语言严格的规则,从而处理 ActionScript 代码。

每次发布影片时,您通常都在编译时处理错误。

理解什么是错误

错误是 ActionScript 语言和编译器进程内建的通知。错误分三种:编译器错误、运行时错误(ActionScript 例外或错误事件)以及警告:

当发布文件并将 ActionScript 编译为 SWF 文件时,会发生编译器错误。编译器错误强制实施规则,这些规则允许 ActionScript 代码以最佳的期望方式运行。发生编译器错误时,SWF 文件将无法导出,直至修复错误。

在编译时之后的回放过程中发生问题时,ActionScript 对象将生成运行时错误。运行时错误以错误事件或包含错误描述对象的 ActionScript 例外形式出现。Flash Player 会尝试忽略运行时错误,让它们在后台静默失败,但是如果发生致命错误,它会在“输出”面板上显示大量消息并停止影片回放。

警告出现在编译时,但通常不会停止影片导出或回放。

如何解释错误和警告

首先要理解您在 Flash Professional 中看到的可视反馈类型。错误在工作区中将以两种形式之一出现:

  • “输出”面板
  • “编译器错误”面板

“输出”面板和“编译器错误”面板都出现在 Flash Professional 工作区中。我通常将这两个面板归入一组,并拖到第二台显示器的一侧。我的计划是自己可以在编译器错误形成时同时看到它们以及自己的跟踪动作,所以我会将这些面板放在视野内,而不受干扰。

看到这些形式的错误反馈时,您肯定会停下来读取相关的错误文本。文本可能不太容易理解,但通常总是足以为您指明方向。您还应当花点时间观察自己在文件中的位置。缺陷报告和调试的一个重要部分是能准确定义问题以及造成该问题的步骤。

编译器错误

编译器错误一般比运行时错误更容易处理,因为在发布过程中,可以借助指向问题源头的行号清晰地看到它们。将 ActionScript 代码编译到 SWF 文件时,会发生编译器错误。当您运行“测试影片”或“发布”命令时会发生这一情况(请参阅图 1)。

在 Flash Professional CS5 的“编译器错误”面板中可以看到一个编译器错误
图 1.在 Flash Professional CS5 的“编译器错误”面板中可以看到一个编译器错误

有关完整的错误类型列表,请参阅 Adobe Flash Platform 的 ActionScript 3 参考中的编译器错误

运行时错误

在调试播放器、独立播放器或 ActiveX 播放器中运行已发布的 SWF 文件时,会发生运行时错误(请参阅图 2)。运行时错误一般以某种形式告诉您应用程序存在问题。如果您对此不予理睬,Flash Player 会尝试允许脚本静默失败,但可能暂停 SWF 文件回放,从而导致无法预测的可视结果。

在 Flash Professional CS5 的“输出”面板中可以看到一个运行时错误
图 2.在 Flash Professional CS5 的“输出”面板中可以看到一个运行时错误

有关更多信息,请参阅 Adobe Flash Platform 的 ActionScript 3 参考中的运行时错误。有关运行时错误概念的进一步细分,另请参阅 ActionScript 3 开发人员指南中的错误处理基础知识

警告

当您发布 SWF 时,会出现警告,它们以某种形式告诉您违反了 ActionScript 中的某个规则,但严重程度还不足以导致错误(请参阅图 3)。我最常看到的是重复变量名以及旧版内容迁移问题的警告。

在 Flash CS4 的“输出”面板中可以看到一个警告消息
图 3.在 Flash CS4 的“输出”面板中可以看到一个警告消息

有关更多信息,请参阅 Adobe Flash Platform 的 ActionScript 3 参考中的编译时警告

性能问题

虽然评估性能以及处理性能问题在技术上与 ActionScript 错误及编译器错误无关,但它们是调试流程的一部分。即使设计人员和程序员可能对这个主题持不同的观点,它还是会影响他们。

常见的性能问题包括:

  • Flash Player 中影片剪辑超载
  • 矢量使用和位图缓存
  • Flash Player 9 和 10 中的硬件加速
  • 内容加载和垃圾回收

SWF 文件最常见的超载情况是过量使用影片剪辑或过多的重叠动画矢量。ActionScript 3 中提高了影片剪辑效率,允许在任何特定时刻使用几百个影片剪辑,但我发现矢量图形超载可能导致播放器在回放过程中播放不顺畅。要解决这个问题,通常需要根据图形的重叠方式、屏幕上动画的大小和数量以及所使用的不透明度找出问题。简化内容以及使用 Flash Player 的 BitmapData 类或位图缓存功能增加栅格优化有助于提高性能。

将 Flash Player 硬件加速功能与全屏渲染一起使用时,也会出现性能问题。较新的计算机以及设置为高清视频回放的计算机通常可以处理好硬件加速。但是,显卡较旧的计算机可能会遇到问题,这些问题与 Flash Player 如何使用计算机视频硬件进行图像缩放有关。症状可能表现为全屏模式中的图形扭曲、屏幕冻结或帧频变化。用户端的变通方法是关闭“Flash Player 设置”对话框中的硬件加速功能。

有关硬件加速相关问题的更多信息,请参阅 Tinic Uro 的博客文章解释部分此类问题

最后要提的是内容载入和缓存问题。Flash Player 使用垃圾回收例程,它们在尝试卸载内容时可能会导致问题。垃圾回收是 Flash Player 中的进程,它将不再使用的内容从内存中释放出来。如果内容仍有引用,Flash Player 将它视为正在使用。这可能影响嵌套 SWF 文件中的声音、视频和内容。例如,某些情况下,您要卸载正在播放声音或视频的 SWF 文件,即使屏幕已经不显示 SWF 文件,声音却没有停下。这类问题的解决方法是在卸载 SWF 文件之前尝试停止声音,或使用 Loader 对象中的 unloadAndStop API(Flash Player 10 或更高版本)。unloadAndStop 命令将强制 Flash Player 在卸载 SWF 文件时从内存中删除媒体。

垃圾回收会影响应用程序的性能。最佳做法是在尝试删除对象之前,删除对它的所有引用。这包括删除指定到该对象的所有事件监听器。

Flash Player 缺陷

Flash Player 小组致力于不断改进 Flash Player 的功能、性能和安全性。Flash Player 缺陷和已知问题会不断出现。这些情况的最佳处理方法是为找出和记录缺陷制定一个流程,以便您区分这是文件内部问题还是 Flash Player 的较大问题。发现问题后,我通常在社区中搜索相关文章。如果其他人遇到相同问题并且手足无措,我会开始查找 Adobe 的官方技术文件或缺陷报告。

如果可以确定您遇到的是播放器的已知问题,您的最佳选择通常是搜索一个变通方法或将问题作为文档问题进行处理。大多数情况下,缺陷可以得到解决,因为 Flash Player 会递增循环通过版本更新。

有关搜索现有缺陷和报告新缺陷的更多信息,请参阅文章 Flash Player 缺陷和问题管理系统介绍

设计人员的调试提示

虽然大多数情况下我在文本编辑器中编写 ActionScript 代码,我的所有 ActionScript 文件都关联到一个 ActionScript 3 FLA 文件和文档库。每个项目首先要处理图形生产并组织库中的资源。因此,根据我要执行的任务,我的职位在 ActionScript 程序员和用户界面设计员之间切换。

我发现从用户界面设计员的角度调试 ActionScript 3 FLA 文件时需要注意许多问题。大多数情况下,您的主要目标是理解 ActionScript 3 环境的期望以及代码的放置位置。并且,在将文件从 ActionScript 1/2 升级到 ActionScript 3 时,处理迁移问题是一个常见任务。

本部分概括了使用 ActionScript 3 FLA 文件中的资源时要处理的问题的类型,并且主要处理旧版 ActionScript 的迁移问题。

设计人员遇到的常见问题

设计人员的角色通常更侧重于资源管理和 FLA 文件制作,而不是复杂的编码语法。设计人员还需要处理一些编程要求和概念,因此必须具备一定的代码相关知识。

从设计角度出发,最常见的问题包括:

  • 代码位置错误
    • 代码无法再放入实例中
  • 与按钮及影片剪辑相关的错误
    • 缺少实例名
    • 实例名拼写错误
    • 实例名与帧脚本变量名冲突
    • 事件处理代码位置错误
  • 文本字段相关错误
    • 不再支持变量字段
    • 不再支持 URL 字段
  • 组件相关错误
    • UILoader 和 FLVPlayback 组件的载入错误
    • FLVPlayback 组件的视频错误
  • ActionScript 赋值相关错误
    • 导入类的可用性
    • 缺少变量声明、名称冲突和数据类型问题
    • 元件链接已替换为元件属性中的“类”字段
  • 性能问题
  • 旧版 ActionScript 的迁移问题

ActionScript 3 中的变化

ActionScript 3 环境实现了所有编码工作流程的标准化,这样可以消除旧版 ActionScript 的许多不一致性。这最终是件好事;但它也使 FLA 文件的设置方式发生了一些变化。

从设计人员的角度出发,最重要的变化包括以下几项:

  • 代码无法再放入影片剪辑或按钮实例中。ActionScript 3 中的所有代码位置必须沿时间轴(称为帧脚本)出现在关键帧或外部 ActionScript 文件中(称为 ActionScript 类)。
  • 事件处理结构已更新。它影响按钮和影片剪辑代码的处理方式。将事件处理函数指定到按钮和影片剪辑已发生变化。您无法再将代码附加到舞台中的实例。您将使用 addEventListener 方法将监听器一致指定到所有对象。(这样做的优势可能并不是立竿见影的,但系统要灵活得多。)
  • 在 Flash CS5 workspace 中以可视方式使用时间轴与之前基本相同,但 ActionScript 3 编程现在将时间轴视为显示列表。如果要处理使用 ActionScript 的实例,您需要注意显示列表的时间和用法。
  • ActionScript 3 中不再有元件链接。元件属性现在可以通过唯一类名(或类引用)标识。您可以在元件的“元件属性”对话框中,将 ActionScript 类指定到元件。还可以将 ActionScript 类指定到与主时间轴的“舞台”属性关联的“文档类”字段。

调试工具

Flash Professional CS5 提供一些工具,可使用它们管理文件资源和搜索问题区域:

  • Flash Professional 工作区、“动作”面板和跟踪动作
  • “影片浏览器”面板
  • 调试控制台、“变量”面板和“调试”菜单
  • “测试影片”命令和带宽设置

使用 Flash Professional 工作区浏览文件。您可以使用“影片浏览器”面板搜索资源(请参阅图 4)。可使用调试面板跟踪 ActionScript 变量和函数的问题。

“影片浏览器”面板允许您快速搜索资源和代码位置;将旧版 FLA 文件迁移到 ActionScript 3 格式时,它尤为实用
图 4.“影片浏览器”面板允许您快速搜索资源和代码位置;将旧版 FLA 文件迁移到 ActionScript 3 格式时,它尤为实用

预览工作成果以及检查错误和警告最快的方式是使用“控制”>“测试影片”命令。当 SWF 文件显示在调试面板中时,选择“视图”>“带宽设置”选项即可查看 SWF 文件的配置文件信息概况(请参阅图 5)。

使用“测试影片”时,“视图”菜单提供带宽设置
图 5.使用“测试影片”时,“视图”菜单提供带宽设置

提示:SWF 文件的“视图”菜单中还提供“模拟下载”和“模拟流”选项,但它们不精确。最好使用服务器上实时运行的文件执行基准测试。

调试工作流程

使用文件处理缺陷和问题是设计人员的日常工作的一部分。处理问题时,最好有一个井井有条的方法并在计划中规划好时间。

从设计角度出发,一个常见的工作流程可能包括:

  1. 找出问题(问题是什么?)。
  2. 找到问题源头(问题在哪里?)。
  3. 查找相关文档,定义解决方案选项。
  4. 根据需要,在一个单独文件中重构问题区域。
  5. 应用解决方案并测试工作成果(使用“测试影片”和带宽设置)。

提示:我发现在一个新文件中解决问题比在一个完整的项目中处理细节速度更快。定义问题后,获取一个用于单独文件的范例,然后将有效解决方案集成到您的项目中。

设计人员的调试范例

以下范例在您将文件从 ActionScript 1 或 2 迁移到 ActionScript 3 格式时,指导您逐步完成常规工作流程。提供的文件在 solutions 文件夹中包含各个范例的 ActionScript 2 版本和 ActionScript 3 版本。

这些步骤将指导您逐步将各个 ActionScript 2 FLA 文件迁移到 ActionScript 3 格式。您将看到错误、查找错误的源头并解决问题。

首先按照这些步骤操作:

  1. 从介绍页面下载 as3_debugging_issues_cs5.zip 文件(如果您还未这样做)。
  2. 将文件解压缩到桌面上的某个位置。在接下来的步骤中将要求您打开提供的特定文件。
  3. 如果需要参考,可以打开 solutions 文件夹中的成品文件。

范例 1:迁移变量

ActionScript 3 环境要求您使用 var 关键字声明所有变量实例,甚至在时间轴上。这是一个简单的想法,但在旧版 ActionScript 中它不在要求范围内。

除了添加 var 关键字,这个范例还说明如何处理数据类型以及引用 root  stage 对象的新方法。

按照这些步骤操作,更新一个包含过期帧代码的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打开文件 designer_sample1.fla。
  2. 运行“测试影片”即可查看有效的 ActionScript 2 文件。您会发现,主时间轴上的代码只是扭曲图像并将它放在舞台中央。
  3. 关闭 SWF 文件。
  4. 选择“文件”>“发布设置”,将该文件转换为 ActionScript 3 格式。在“发布设置”对话框中,单击“Flash”选项卡并将“脚本”菜单切换为“ActionScript 3”。单击“确定”。
  5. 再次运行“测试影片”。您会发现“编译器错误”面板中显示一个编译器错误和几个警告,并且 SWF 文件未能载入:

Symbol 'Circle', Layer 'actions', Frame 1, Line 2 1120: Access of undefined property _root.

  1. 首先要修复对 _root 的引用,它生成了第一个错误。您可以通过“位置”字段看到源头位于第 2 行 Circle 元件的时间轴中。双击舞台中的 Circle 实例进入它的时间轴,选择时间轴第一帧的动作关键帧。虽然您可以尝试使用对根或父级的参考,这种方法在 ActionScript 3 中的效果并不理想。从主时间轴代码中设置该实例的 alpha 属性效果更好(在该代码中设置它的大小和位置)。注释掉或删除第 2 行中的代码,然后返回主时间轴。
  2. 在剩余错误和警告行中往下。在主时间轴上选择动作关键帧。ActionScript 3 中的影片剪辑属性不再以下划线 (_) 开头。删除 x、y、宽度和高度属性前的下划线。
  3. 再次运行“测试影片”。您会发现“编译器错误”面板中出现一系列新的错误。这次又多了两个有待解决的问题。首先,需要使用 var 关键字声明时间轴上的每个变量。其次,对舞台高度和宽度的引用对于 ActionScript 3 而言格式不再正确:

Scene 1, Layer 'actions', Frame 1, Line 2 1120: Access of undefined property ovalWidth. Scene 1, Layer 'actions', Frame 1, Line 3 1120: Access of undefined property ovalHeight. Scene 1, Layer 'actions', Frame 1, Line 4 1120: Access of undefined property ovalAlpha. Scene 1, Layer 'actions', Frame 1, Line 7 1120: Access of undefined property ovalWidth. Scene 1, Layer 'actions', Frame 1, Line 8 1120: Access of undefined property ovalHeight. Scene 1, Layer 'actions', Frame 1, Line 9 1119: Access of possibly undefined property width through a reference with static type Class. Scene 1, Layer 'actions', Frame 1, Line 9 1120: Access of undefined property ovalWidth. Scene 1, Layer 'actions', Frame 1, Line 10 1119: Access of possibly undefined property height through a reference with static type Class. Scene 1, Layer 'actions', Frame 1, Line 10 1120: Access of undefined property ovalHeight. Scene 1, Layer 'actions', Frame 1, Line 11 1120: Access of undefined property ovalAlpha.

  1. 更新代码,使它与以下内容匹配:

// Settings var ovalWidth:Number = 400; var ovalHeight:Number = 100; var ovalAlpha:Number = .5; // Notice that alpha ranges from 0 to 1 // Set size circle_mc.width = ovalWidth; circle_mc.height = ovalHeight; circle_mc.x = (stage.stageWidth - ovalWidth) / 2; circle_mc.y = (stage.stageHeight - ovalHeight) / 2; circle_mc.alpha = ovalAlpha;

  1. 更新主时间轴的第 1 帧上的代码,使它与以下脚本匹配。请注意,attachMovie 命令已替换为新的关键字。现在以新方法创建包括元件实例在内的所有实例:

// Create first clip var circle1_mc:MovieClip = new CircleAS3(); circle1_mc.x = 100; circle1_mc.y = 50; addChild(circle1_mc); // Create second clip var circle2_mc:MovieClip = new CircleAS3(); circle2_mc.x = 300; circle2_mc.y = 50; addChild(circle2_mc);

  1. 再次运行“测试影片”。这次未出现任何错误。您可以根据 ActionScript 3 语法成功更新该文件。

范例 2:迁移按钮和影片剪辑代码位置

在 ActionScript 3 之前,将按钮事件处理代码和影片剪辑事件处理代码直接放到要影响的实例上很常见。这种方法有一个问题,即代码较难找到并且会分散到多个对象。

ActionScript 3 通过以下方法解决了这个问题:如果将代码放到对象实例上,则将它视为非法。这个概念很简单,但是如果您准备更新一个旧版文件或刚开始接触 ActionScript 3 环境,它会变成一个难题。

按照这些步骤操作,更新一个包含附加到实例的代码的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打开文件 designer_sample2.fla。
  2. 运行“测试影片”即可查看有效的 ActionScript 2 文件。注意,单击这两个按钮就可以开始和停止圆圈动画。
  3. 关闭 SWF 文件。
  4. 选择“文件”>“发布设置”,将该文件转换为 ActionScript 3 格式。在“发布设置”对话框中,单击“Flash”选项卡并将“脚本”菜单切换为“ActionScript 3”。单击“确定”。
  5. 再次运行“测试影片”。请注意“输出”面板中出现的警告:

Warning: Actions on button or MovieClip instances are not supported in ActionScript 3. All scripts on object instances will be ignored.

  1. 警告很明显,您忽略了放到实例上的代码。首先要找到代码的位置。这个范例很简单,您只需单击舞台上的对象并查看“动作”面板。在更复杂一些的文件中,您可以打开“影片浏览器”面板,在整个时间轴或库内的项中搜索代码位置。无论使用哪种方法,找到放到影片剪辑实例上的代码和各个按钮实例,然后在“动作”面板中删除 ActionScript。
  2. 在主时间轴中添加一个新层,将它命名为 actions
  3. 在 actions 层中选择关键帧,然后打开“动作”面板。单击面板底部的图钉图标钉住脚本。
  4. 单击开始按钮,并将代码剪切到剪贴板。将代码粘贴到“动作”面板中。为停止按钮和影片剪辑代码重复这个过程。
  5. 此时,您需要使用 ActionScript 3 语法重写代码。在动手之前,请确保舞台上的每个实例都有一个实例名;start_btnstop_btn  circle_mc
  6. 在“动作”面板中更新脚本,使它看上去像以下代码一样:

var animate:Boolean = false; var speed:Number = 10; // Enterframe... function enterFrameHandler(event:Event) { if( animate ){ circle_mc.x += speed; if( circle_mc.x >= stage.stageWidth ){ circle_mc.x = -circle_mc.width; } } } addEventListener(Event.ENTER_FRAME, enterFrameHandler); // Button events function clickHandler(event:MouseEvent) { if( event.target == start_btn ){ animate = true; }else if( event.target == stop_btn ){ animate = false; } } start_btn.addEventListener(MouseEvent.CLICK, clickHandler); stop_btn.addEventListener(MouseEvent.CLICK, clickHandler);

  1. 运行“测试影片”。使用针对 ActionScript 3 更新的代码语法和代码位置后,按钮和动画应当可以使用。
范例 3:迁移文本字段变量和链接设置

从 Macromedia Flash 5 开始已经不推荐对文本字段对象使用变量和链接字段,但我依然发现在更新旧版内容文件时,使用这个功能会遇到迁移问题。

按照这些步骤操作,更新一个包含不推荐文本字段的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打开文件 designer_sample3.fla。
  2. 运行“测试影片”即可查看有效的 ActionScript 2 文件。您会发现,每当单击按钮时,文本字段中的文本都会更新。如果要在浏览器中查看 SWF 文件,您可以单击字段激活嵌入的链接。
  3. 关闭 SWF 文件,并看一下 FLA 文件。
  4. 选择“文件”>“发布设置”,将该文件转换为 ActionScript 3 格式。在“发布设置”对话框中,单击“Flash”选项卡并将“脚本”菜单切换为“ActionScript 3”。单击“确定”。
  5. 再次运行“测试影片”。请注意“输出”面板中出现的警告:

Warning: Text field variable names are not supported in ActionScript 3. The variable buttonState used for an unnamed text field will not be exported. Warning: Actions on button or MovieClip instances are not supported in ActionScript 3. All scripts on object instances will be ignored.

  1. 通过警告可以发现这里出现两个问题。第一个问题是,文本字段实例使用了一个不受支持的功能。第二个问题是,事件代码直接放到了按钮上。
  2. 选择文本字段,然后在属性检查器中修改它的属性,即可重新设置文本字段的格式。将字段的“文本”类型从“动态”更改为“静态”,然后再改回“动态”。这个步骤可以清除与该字段关联的变量和链接数据。为字段指定<Instance Name> 字段中的实例名 status_txt
  3. 单击“字符样式”字段旁的“嵌入”按钮,选中“基本拉丁语”选项以嵌入 Arial 字样。这个步骤可以避免一个字体嵌入的相关警告。
  4. 选择“开始”按钮,使用“动作”面板从中删除代码。在属性检查器中将按钮实例命名为 start_btn
  5. 选择“停止”按钮,从中删除代码。将实例命名为 stop_btn
  6. 在主时间轴中添加一个新层,将它命名为 actions
  7. 在 actions 层中选择关键帧,然后在“动作”面板中输入以下代码:

// Button clicks set text field function clickHandler(event:MouseEvent):void { if( event.target == start_btn ){ status_txt.text = "Start"; }else if( event.target == stop_btn ){ status_txt.text = "Stop"; } } start_btn.addEventListener(MouseEvent.CLICK, clickHandler); stop_btn.addEventListener(MouseEvent.CLICK, clickHandler); // Text clicks launch link in browser function textClickHandler(event:MouseEvent):void { navigateToURL(new URLRequest("http://www.adobe.com"),"_blank"); } status_txt.addEventListener(MouseEvent.CLICK, textClickHandler);

  1. 运行“测试影片”。您应当看到文件可以正常运行并且不出错,按钮可以在单击时更新文本字段。单击文本字段启动 Adobe 站点。

范例 4:迁移链接设置和元件实例化

ActionScript 3 FLA 文件中的元件无法再使用链接标识符字段。而是借助元件属性中的“类”和“基类”字段采用一个相似的流程。

按照这些步骤操作,更新一个包含过期链接标识符的 ActionScript 2 文件:

  1. 在 Flash Professional CS5 中打开文件 designer_sample4.fla。
  2. 运行“测试影片”即可查看有效的 ActionScript 2 文件。注意,您可以单击某个圆圈并在舞台中拖动它。在本例中,通过一个外部 ActionScript 类 (Circle.as) 定义拖动功能,并通过元件的链接标识符属性将它指定到库中的 Circle 元件。
  3. 关闭 SWF 文件,并看一下 FLA 文件。
  4. 选择“文件”>“发布设置”,将该文件转换为 ActionScript 3 格式。在“发布设置”对话框中,单击“Flash”选项卡并将“脚本”菜单切换为“ActionScript 3”。单击“确定”。
  5. 再次运行“测试影片”。请注意“输出”面板中出现一个错误:

5007: An ActionScript file must have at least one externally visible definition.

  1. 这里要解决的第一个问题是 Circle.as 类是使用 ActionScript 2 语法编写的,因此当 ActionScript 3 编译器运行时,它会导致错误。在 Flash Professional 中打开 Circle.as 并检查该文件。
  2. 新建一个 ActionScript 文件,并将以下代码粘贴到其中:

package { import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class CircleAS3 extends MovieClip { //****************** // Constructor: public function CircleAS3() { trace("INIT: "+this.name); addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); } //****************** // Events: private function addedToStageHandler(event:Event):void { addEventListener(MouseEvent.MOUSE_DOWN, onPressHandler); stage.addEventListener(MouseEvent.MOUSE_UP, onReleaseHandler); } private function onPressHandler(event:MouseEvent):void { this.startDrag(false); } private function onReleaseHandler(event:MouseEvent):void { this.stopDrag(); } } }

  1. 比较代码。请注意类构造和事件处理函数赋值的差异。
  2. 将该文件另存为 CircleAS3.as,作为 FLA 文件保存在同一文件夹中。
  3. 右键单击“库”中的 Circle 元件,选择“属性”选项启动“元件属性”对话框。如果未显示“高级”选项,单击“高级”按钮可显示它们。请注意,ActionScript 2.0 链接标识符字段此时为禁用状态。将“ActionScript 3.0 类”字段更改为 CircleAS3。它针对您刚才创建的 ActionScript 3 类。
  4. 再次运行“测试影片”。这次请注意,您可以看到一系列与主时间轴的第 1 帧上的代码相关的错误。动态创建的实例还未声明它们的名称,并且 ActionScript 3 中不再提供 attachMovie  getNextHighestDepth 方法。需要重写这个脚本:

Scene 1, Layer 'actions', Frame 1, Line 4 1120: Access of undefined property circle1_mc. Scene 1, Layer 'actions', Frame 1, Line 5 1120: Access of undefined property circle1_mc. Scene 1, Layer 'actions', Frame 1, Line 10 1120: Access of undefined property circle2_mc. Scene 1, Layer 'actions', Frame 1, Line 11 1120: Access of undefined property circle2_mc.

  1. 更新主时间轴的第 1 帧上的代码,使它与以下脚本匹配。请注意,attachMovie 命令已替换为新的关键字。现在以新方法创建包括元件实例在内的所有实例:

// Create first clip var circle1_mc:MovieClip = new CircleAS3(); circle1_mc.x = 100; circle1_mc.y = 50; addChild(circle1_mc); // Create second clip var circle2_mc:MovieClip = new CircleAS3(); circle2_mc.x = 300; circle2_mc.y = 50; addChild(circle2_mc);

  1. 再次运行“测试影片”。这次,影片导出没有任何错误。

提示:ActionScript 3 语言实现了任务标准化。您将使用新的关键字为使用 ActionScript 的所有对象创建新实例。不再使用 attachMovie 和 createEmptyMovieClip 命令动态创建影片剪辑实例。

开发人员的调试提示

理解 ActionScript 3 FLA 文件环境是调试项目所必需的,但是理解它之后,它就变为一个相当简单的主题。如果要使用过多的代码,您将把大部分时间用于调试 ActionScript 相关问题。

本部分概括了在 Flash Professional 中使用 ActionScript 3 编程语言时您将处理的问题类型。

ActionScript 开发人员遇到的常见问题

ActionScript 3 开发人员在开发过程中通常会遇到错误和警告。一般而言,这没有什么可以担心的,您可以静静欣赏应用程序在开发过程中找出问题。

您通常需要处理与以下各项相关的错误和警告:

  • 编译时错误和运行时错误
  • 帧脚本错误和 ActionScript 类错误
  • 空的和未定义的数据错误
  • 类型错误
  • CPU 相关问题/垃圾回收问题

注意:有关 Flash Player 中的 CPU 问题和垃圾回收的更多信息,请参阅 Grant Skinner 的文章理解 Flash Player 9 中的垃圾回收

避免错误以及在出错时处理它们的最佳做法

您可以使用几种技术准备用于处理错误的 ActionScript 代码。通过实施适当的错误处理,您可以改善应用程序的性能和相关的用户体验:

  1. 定期测试工作成果。
  2. 尽可能多监听错误事件。
  3. 使用 try catch 语句处理 ActionScript 例外。

在编写 ActionScript 代码时经常运行“测试影片”命令,尽管这听上去很乏味。逐行测试更容易找出问题。当您熟悉 ActionScript 3 语言的来龙去脉后,就不必如此频繁地进行测试了。

ActionScript 中的对象通过错误事件或 ActionScript 例外提供错误通知。尽可能多监听错误及状态变化的相关事件。您不仅可以防止应用程序流中的意外奔溃,还可以访问计时钩(可使用它们在出现问题时提供适当的用户体验)。

当错误事件不可用时,可使用 try catch 语句处理 ActionScript 错误。您可能会问,“try catch 语句的使用密度应该为多少?”某些开发人员使用较多,而其他开发人员根本不使用这个功能。我通常会在问题区域附近放置 try catch 语句。

调试工具

ActionScript 程序员倾向于创造新的应用程序测试和调试方法。在 Flash Professional CS5 工作区中,您可以使用以下工具:

  • Flash Professional CS5 工作区
  • Flash Builder 4 工作区

有关 Flash Professional 中的 ActionScript 调试器面板和调试工作流程的完整概述,请参阅 Peter Elst 的文章ActionScript 3 调试器介绍

除了 Flash Professional 工作区,ActionScript 开发人员还将 Flash Builder 调试工具套件用于他们的 ActionScript 项目。Flash Builder 4 工具允许您以 Flex SDK 项目、ActionScript 项目或 Flash Professional 项目形式构建和调试 Flash 内容。Flash Professional CS5 与 Flash Builder 4 之间新的开发和调试工作流程有助于将代码更快地集成到 Flash 影片中并提供更多调试选项。您将在本文的最后部分仔细查看 Flash Builder 工作流程。

有关 Flash Builder 项目的概述,请参阅 Flash Builder 4 在线文档中的关于 Flash Builder 项目

调试工作流程

ActionScript 问题的调试工作流程类似于设计工作流程,唯一不同之处是与 FLA 相关问题相比,您更注重于查找代码问题。

要在 Flash Professional 中创作时调试 ActionScript 代码:

  1. 发布 FLA 文件。
  2. 观察“输出”和“编译器错误”面板中的错误。
  3. 在代码的可疑问题区域将断点添加到帧脚本或 ActionScript 类。
  4. 运行 ActionScript 3 调试器找出问题。
  5. 修复代码并测试输出。

要在 Flash Builder 中工作时调试 ActionScript 代码:

  1. 在 Flash Builder 中创建一个 Flash Professional 项目,将 Flash Builder 与您的 FLA 文件及项目文件夹关联在一起。
  2. 在 Flash Builder 中编写并编辑代码。
  3. 在编码时,使用 Flash Builder 中的“问题”面板找出问题。
  4. 启动 Flash 调试器调试 Flash Professional 中的运行时错误,或安装调试播放器并使用 Flash Builder 中的 Flash Debug 透视获得更多运行时调试工具。

要调试一个已部署到服务器的 SWF 文件:

  1. 在 Flash Professional 中编辑 ActionScript 3 发布设置属性。
  2. 启用远程调试。
  3. 将 SWF 文件发布到服务器。
  4. 在浏览器中右键单击 SWF 文件,启动远程调试器。
  5. 观察并找出问题。

提示:根据错误情况,您可能需要使用 ActionScript 3 调试器。当空值或堆栈溢出导出回放奔溃时,调试器最实用。

开发人员的调试范例

以下范例说明了 ActionScript 3 常见问题。每个范例带有两个文件,一个表明问题,另一个表明解决方法。以下步骤将指导您逐步解决各个问题。您将体验错误、找到错误来源并解决 ActionScript 的使用问题。

首先按照这些步骤操作:

  • 从介绍页面下载 as3_debugging_issues_cs5.zip 文件(如果您还未这样做)。
  • 将文件解压缩到桌面上的某个位置。在接下来的步骤中将要求您打开提供的特定文件。
  • 有关更多参考,请查看 solutions 文件夹中的成品文件。

范例 1:未定义的值和空值

您很可能经常遇到这个问题。如果尝试访问不存在的某个属性或函数,您将触发错误。这个问题一般很容易修复,但“输出”面板通常不会告诉您哪个属性未定义。这种情况下,最快的解决方法是使用 ActionScript 3 调试器找到问题的源头。

按照这些步骤操作,找到并解决值未定义的问题:

  1. 在 Flash Professional CS5 中打开文件 developer_sample1.fla。
  2. 运行“测试影片”即可查看范例。将显示一个错误,表明值为空或未定义。并且某个作者名显示为未定义:

TypeError: Error #1010: A term is undefined and has no properties. at developer_sample1_fla::MainTimeline/frame1()[developer_sample1_fla.MainTimeline::frame1:12]

  1. 关闭 SWF 文件。
  2. 查看 actions 层上的代码。很容易发现这个范例中有几个问题,但是如果列表较大、较复杂,要马上找到它们可能并不容易。可使用调试器搜索问题。单击第 12 行左侧的列,为脚本添加一个断点(请参阅图 6)。该步骤使调试器能停在代码执行的这一位置,以便您检查变量。

您可以将断点添加到脚本行号的左侧
图 6.您可以将断点添加到脚本行号的左侧

  1. 打开“变量”面板和调试控制台(如果它们尚未打开)。
  2. 选择“调试”>“调试影片”>“调试”(在 Flash Professional 中),启动调试器会话。请注意,“变量”面板在断点位置填入主时间轴上的有效变量(请参阅图 7)。扩展书籍列表并浏览值。您可以看到,列表只包含三项,而循环却设置为运行四次。这是错误的源头(并且,在调试器视图中,有一个箭头指向包含循环定义的代码行)。并且,第三项不包含作者值。单击“调试控制台”面板中的“结束调试会话”按钮以结束会话。

“变量”面板是检查影片中的变量状态的好方法;当搜索空值或未定义的值时,它尤为实用
图 7.“变量”面板是检查影片中的变量状态的好方法;当搜索空值或未定义的值时,它尤为实用

  1. 更新脚本,使它与以下内容匹配:

// Declare array variable var books:Array = new Array(); books.push({title:"ActionScript 3 Cookbook",author:"Joey Lott"}); books.push({title:"Essential ActionScript 3",author:"Colin Moock"}); books.push({title:"Adobe AIR 1.5 Cookbook",author:"David Tucker"}); // Loop through array and display text... var len:uint = 3; // it's better to use books.length here... for(var n:uint=0; n<len; n++) { books_txt.appendText(books[n].title+", by "+books[n].author+" "); }

  1. 再次运行“测试影片”。这次,脚本运行时未出现任何错误。

提示:前一个范例设计为生成一个错误。您通常不会为 len 变量硬编码一个值。您将使用数组的长度属性,使循环执行时不生成错误。

范例 2:显示列表参考和计时错误

使用 ActionScript 实例化的对象不会自动放到舞台(显示列表)。这个概念其实很实用,因为您现在可以在预处理例程变为可见之前运行它们;不过虽然很棒,您还是需要慢慢适应它。

您将使用 addChild 方法,将实例添加到时间轴的显示列表。一旦这样做,实例就可以访问舞台、根和父级属性。按照这些步骤操作,修复一个有显示列表实例化问题的文件:

  1. 在 Flash Professional CS5 中打开文件 developer_sample2.fla。
  2. 运行“测试影片”即可查看范例。请注意“输出”面板中出现一个显示列表相关错误。该错误未定义问题源头的确切位置,但它会提示您问题出在 getChildIndex 方法。接下来自然应当返回代码并搜索 ActionScript 语句:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller. at flash.display::DisplayObjectContainer/getChildIndex() at developer_sample2_fla::MainTimeline/frame1()

  1. 关闭 SWF 文件,并仔细研究一下主时间轴的第 1 帧上的脚本。您会发现,脚本新建了一个 Sprite 实例,然后尝试在显示列表中检索它的索引(之前称为深度)。问题在于,尚未将实例添加到舞台,所以显示列表中还没有它。
  2. 更新代码,使它与以下内容匹配:

// Create a black rectangle var myClip:Sprite = new Sprite(); myClip.graphics.beginFill(0); myClip.graphics.drawRect(0,0,100,100); myClip.graphics.endFill(); // Add the instance to the Stage addChild(myClip); // Get the instance's depth in the display list... var myClipDepth:uint = getChildIndex(myClip);

  1. 再次运行“测试影片”。这次您应当可以看到影片导出时没有错误,在舞台上显示一个黑色矩形。

提示:为了防止 ActionScript 类中出现显示列表计时问题,可使用 ADDED_TO_STAGE 事件延迟显示列表处理,直至将对象添加到舞台。

范例 3:类型错误

ActionScript 3 是一种严格的类型语言。要改善编译器的性能以及影片的运行时回放,最佳做法是在声明变量和函数时为它们设置数据类型。为声明添加数据类型将定义变量或函数将处理数据的类型。

提示:Flash Professional CS5 新增了一个功能,即在“动作”面板中为对象设置数据类型时,自动生成导入语句。

按照这些步骤操作,使用不正确的数据类型条目更新文件:

  1. 在 Flash Professional CS5 中打开文件 developer_sample3.fla。
  2. 运行“测试影片”即可查看范例。您会发现生成了 3 个编译器错误(请参阅图 8)。编译器错误的优点在于,它们会确切地告诉您代码中的问题源头在哪里。

“编译器错误”面板表明生成错误的代码的位置和行号
图 8.“编译器错误”面板表明生成错误的代码的位置和行号

  1. 关闭 SWF 文件。
  2. 在“编译器错误”面板中右键单击第一个错误的描述,然后选择“转到源”。将打开“动作”面板,并且突出显示addToScore 函数的右括号。您将从这里读取错误,并逐行往下修复代码。
  3. 更新代码,使它与以下脚本匹配。您会发现,score  increment 值更改为 Number 数据类型(Number而不是 uint,因为数字包含小数),并且函数的返回值更改为 void 数据类型(表示它不返回任何内容)。并且,事件对象更新为 MouseEvent 数据类型。这没有导致错误,因为 MouseEvent 是一个 Event,但它显然可以添色不少。

// Create Number variable var score:Number = 0; var increment:Number = .2; function addToScore(event:MouseEvent):void { score += increment; score_txt.text = "Score = "+score; } add_btn.addEventListener(MouseEvent.CLICK, addToScore);

  1. 再次运行“测试影片”。这次,影片导出时没有任何错误。

范例 4:IO 错误

当您尝试载入一个外部文件,但过程失败时会发生 IO 错误。在 ActionScript 3 中,您将使用错误事件或 try catch 语句优雅地处理这些错误,并为用户体验提供有意义的反馈。

按照这些步骤操作,处理载入 SWF 文件时产生的问题:

  1. 在 Flash Professional CS5 中打开文件 developer_sample4.fla。
  2. 运行“测试影片”即可查看范例。您会发现当脚本无法载入图像时出错。因为这是一个异步错误,所以最佳做法是使用 Loader 的 contentLoaderInfo IOError 事件和 HTTPStatus 事件。这可以解决当前生成的未处理的 IOErrorEvent:

Error opening URL 'http://www.dancarrdesign.com/images/test.jpg' Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.

  1. 关闭 SWF 文件。
  2. 更新第 1 帧上的代码,使它与以下脚本匹配。请注意,更新包含完成载入或失败尝试的事件处理函数:

import flash.events.*; function completeHandler(event:Event):void { // Add image to the Stage when loaded... addChild(event.target.content); } function statusHandler(event:HTTPStatusEvent):void { // Respond to status notifications... trace("HTTP Status: "+event.status); } function errorHandler(event:IOErrorEvent):void { // The image failed to load. Show feedback and proceed... trace("IOERROR: "+event.text); } // Create a Loader to load an image... var loader:Loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); loader.contentLoaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS, statusHandler); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorHandler); loader.load(new URLRequest("http://www.dancarrdesign.com/images/test.jpg"));

  1. 再次运行“测试影片”。您将看到脚本再次失败,但这次会触发一个跟踪动作,表明您可以控制事件。您将根据这一情况编写反馈,向用户明确表明发生的情况。

范例 5:安全错误

Flash Player 采用一个安全模型,它保护各个 SWF 文件和您的计算机免遭恶意攻击。如果所有文件运行在同一个域中,您一般不会遇到任何安全错误。但是,您可能希望将运行于不同域的不同服务器上的内容和数据聚合在一起。这种情况下,您很可能遇到安全错误。

按照这些步骤操作,解决数据载入安全问题:

  1. 在 Flash Professional CS5 中打开文件 developer_sample5.fla。
  2. 运行“测试影片”即可查看范例。影片尝试从我的服务器上的一个文件载入 XML 数据。因为我的域 dancarrdesign.com 位于您查看 SWF 文件所在的域之外,所以可能会出现安全问题。为了令情况更难以理解,除非在 Internet 上运行测试文件,否则您很可能不会遇到安全错误。这意味着当您在本地开发环境中测试文件时,文件使用的一组安全规则不同于从 Internet 运行时使用的规则。这种情况下的最佳选项是从为数据提供服务的域载入一个权限文件。
  3. 看一下提供的范例。在本例中,我载入一个名为 crossdomain.xml 的权限文件,它包含一个允许与所有域进行数据交换的全局标记。
  4. 关闭文件。

从不同的域载入数据或在载入其他 SWF 文件的一个 SWF 文件之间交叉编写脚本时,安全限制最为苛刻。从不同的域载入数据时,使用权限文件是最佳选项(提供的文件包含一个 crossdomain.xml 文件范例)。在 SWF 文件之间交叉编制脚本时,您可以在 ActionScript 中使用 Security 对象的 allowDomain 方法。

提示:我发现遇到安全问题时,我的应用程序会静默失败并且似乎无法解释。我通常假设这是一个安全相关问题并尝试允许权限,或者记录从 ActionScript 到 JavaScript 的调用,以在运行时暴露安全错误事件或类似的信息。您可以使用 ActionScript 中的 ExternalInterface 对象,或通过获取第三方资源设置这类记录例程。

使用 Flash Professional 和 Flash Builder 分析代码

Flash Professional CS5 为使用 ActionScript 3 调试器提供两个选项:可以从 Flash Professional 直接运行调试器,也可以通过从 Flash Builder 4 启动它来运行调试器。此外,Flash Builder 有一套自己的调试工具,它们可以与调试版 Flash Player 结合使用,为您提供更多调试选项。

Flash Professional CS5 与 Flash Builder 4 之间的全新集成旨在帮助您轻松发挥 Eclipse 文本编辑器的强大功能并完成 Flash Professional 中的常见任务。为了充分利用 Flash Builder,您将在 ActionScript 类中编写代码,它可以链接到 FLA 文件的主时间轴或 FLA 文件库中的任何影片剪辑元件。

本部分将向您展示调试器工作流程的不同选项。

在 Flash Professional 中查看动态应用程序中的变量状态

该范例说明如何使用 Flash Professional 浏览一个脚本,每当您单击舞台时,该脚本会随机生成一系列形状。效果相当不错,但是如果要分析生成的随机值以便对参数进行微调呢?您可以在循环中设置一个断点,它可以生成形状,以便您在调试器中执行时观察随机值的实时情况。

按照这些步骤操作,了解 ActionScript 循环内生成的变量值:

  1. 在 Flash Professional CS5 中打开文件 developer_sample6.fla 和 ShapeRamdomizer.as。
  2. 运行“测试影片”即可查看范例。您会发现屏幕上画了一个随机椭圆图案。单击舞台上的任何位置,可以看到该图案随机重画自己。
  3. 关闭 SWF 文件,并看一下文件 ShapeRandomizer.as。您会发现 draw 函数通过遍历一个循环生成形状。并且随机生成几个变量,用于定义形状的 xywidthheightcolor 和边框粗细。
  4. 在第 42 行左侧的列中单击,为该行添加一个断点。这样,每当您通过循环时,可以暂停调试播放器;并在同时取出变量状态。
  5. 返回文件 developer_sample6.fla。从“窗口”菜单打开“调试控制台”和“变量”面板(如果它们尚未打开)。
  6. 选择“调试”>“调试影片”>“调试”,启动调试会话。请注意,“变量”面板会更新显示第一次通过循环的随机值(请参阅图 9)。

“变量”和“调试控制台”面板过去在发生循环时逐步通过并分析变量状态
图 9.“变量”和“调试控制台”面板过去在发生循环时逐步通过并分析变量状态

  1. 单击“调试控制台”面板左上角的“继续”按钮进到下一个通过循环。重复该过程,并观察数字范围。您将根据它们决定变量设置是否生成您要的结果。
  2. 单击“结束调试会话”按钮关闭会话。
  3. 单击第 42 行中的断点以删除它。“动作”面板中的点此时应消失。

提示:您可以通过以下方法尝试变量值:在“变量”面板中更新变量值,然后进到代码执行。

有关使用 Flash Professional 调试器的更多信息,请参阅 Flash 在线文档的调试 ActionScript 3 部分。

从 Flash Builder 启动 ActionScript 3 调试器

Flash Builder 4 和 Flash Professional CS5 为新的编码工作流程创造了可能性,这些工作流程将 Flash Builder 用作文本编辑器,将 Flash Professional 用作内容编辑器。Flash Builder 用于快速编写 ActionScript 类,并根据需要调试代码。Flash Professional 用于管理内容和实施代码(通过将代码指定到 FLA 文件中的时间轴)。

这个范例说明如何使用上一个示例中使用的文件在 Flash Builder 中生成一个 Flash Professional 项目。这次,您将在 Flash Builder 中更新代码,从 Flash Builder 工作区启动 Flash Professional 调试器。

注意:该范例假设您的计算机上已安装 Flash Builder 4。

按照这些步骤操作,设置您的 Flash Builder 项目:

  1. 返回 Flash Professional CS5 中的文件 developer_sample6.fla。打开“属性”面板(如果它尚未打开),这样可以查看“文档”属性。
  2. 单击“属性”面板中的“类”字段旁的“编辑类定义”按钮(铅笔图标)。在“编辑 ActionScript 3.0 类”对话框中(请参阅图 10),选择“Flash Builder”并单击“确定”启动 Flash Builder。

“编辑 ActionScript 3.0 类”对话框显示将 Flash Builder 作为代码编辑器启动的选项
图 10. “编辑 ActionScript 3.0 类”对话框显示将 Flash Builder 作为代码编辑器启动的选项

  1. 当 Flash Builder 启动时,将显示“新建 Flash Professional 项目”对话框,要求您选择目标 FLA 文件。您的 FLA 文件已经选中,所以单击“完成”即可生成 Flash Professional 项目。
  2. 请注意,将自动生成一个与 FLA 文件同名的 ActionScript 文件,并打开文件 ShapeRandomizer.as 进行编辑。在 Flash Builder 中,可使用包资源管理器导航项目中的文件、使用“轮廓”窗格导航 ActionScript 类的部分、使用“问题”窗格在工作时找出问题(请参阅图 11)。

Flash Builder 4 工作区
图 11. Flash Builder 4 工作区

  1. 更新文件 ShapeRandomizer.as 中的代码,使它看上去像以下代码那样:

package { import flash.display.MovieClip; import flash.events.MouseEvent; public class ShapeRandomizer extends MovieClip { //******************* // Properties: private var _numShapes:uint = 25; private var _maxWidth:Number = 200; private var _maxHeight:Number = 200; //******************* // Constructor: public function ShapeRandomizer():void { draw(); // Initialize... stage.addEventListener(MouseEvent.MOUSE_DOWN, draw); } //******************* // Events: private function draw(event:MouseEvent=null):void { this.graphics.clear(); for(var n:uint=0; n<_numShapes; n++) { var w:Number = Math.random()*_maxWidth; var h:Number = Math.random()*_maxHeight; package x:Number = Math.random()*(stage.stageWidth/2); var y:Number = Math.random()*(stage.stageHeight/2); var c:Number = Math.random()*255; var b:Number = Math.random()*10; this.graphics.lineStyle(b, c); this.graphics.drawRect(x, y, w, h); this.graphics.endFill(); } } } }

  1. 从 Flash Builder 启动“测试影片”命令,测试更新。可以单击工具栏中的“在 Flash Professional 中测试影片”按钮,也可以像在 Flash 中那样直接按 Ctrl + Enter(Mac 中为 Cmd + Enter)。视图将切换回 Flash Professional,并且 SWF 文件像您期望的那样导出以上 FLA 文件。请注意形状渲染的变化。
  2. 关闭 SWF 文件。注意,您将自动返回 Flash Builder。

按照这些步骤操作,在 Flash Professional 中调试代码:

  1. 如果尚未这样做,请在 Flash Builder 中返回文件 ShapeRandomizer.as。首先,执行您在本部分的第一部分中执行的相同分析(仅限此次),从 Flash Builder 启动 Flash Professional 调试器。
  2. 要在 Flash Builder 中为脚本添加一个断点,双击 42(第 42 行)左侧的灰色区域。行号旁将出现一个点,表明已添加断点。
  3. 单击工具栏中的“在 Flash Professional 中调试影片”按钮(flash 和缺陷图标),在 Flash Professional 中启动调试模式。情况与之前示例相同。逐步通过循环,浏览随机生成的变量值。
  4. 单击调试器中的“结束调试会话”按钮以结束会话。注意,焦点将返回 Flash Builder 中的脚本。

在 Flash Builder 中使用“Flash 调试”透视进行代码分析和调试

至此,您已尝试 Flash Builder 与 Flash Professional 工作区的集成。您也可以使用 Flash Builder 4 的“Flash 调试”透视提供的扩展调试工具。Flash Builder 透视是有助于执行任务的一组面板。在上例中,您使用的是 Flash Builder 中的“Flash 透视”。如果切换到“Flash 调试”工作区(请参阅图 12),将显示一组新的调试视图。

Flash Builder 4 的“Flash 调试”透视
图 12.Flash Builder 4 的“Flash 调试”透视

“Flash 调试”透视包含以下视图:

  • 脚本视图:用于设置断点和编辑代码
  • 调试视图:用于控制代码执行,逐步通过断点
  • 变量视图:用于分析断点处的变量
  • 断点视图:用于管理断点
  • 表达式视图:用于通过定义待测试变量的表达式观察变量
  • 控制台视图:显示调试器的跟踪语句、运行时错误和消息

如您所见,Flash Builder 包含 Flash Professional 的基本调试元素,其中包括用于控制逐步通过断点的调试控制台,用于分析变量(发生断点或运行时错误处)的变量视图。Flash Builder 还通过添加工具扩展了调试可能性,这些工具允许您更细致地管理断点和设置条件断点。

要使用 Flash Builder 的调试工具,您首先需要安装调试版 Flash Player。调试播放器是标准 Flash Player 的一个变体,它允许您跟踪动作和调试功能,从而在浏览器中处理 SWF 文件。您可以使用 Flash Professional CS5 安装随附的安装程序或访问 Flash Player 下载站点安装调试播放器。

按照这些步骤操作,安装调试播放器:

  1. 关闭计算机上正在运行的所有应用程序。
  2. 从计算机卸载现有的 Flash Player 版本。
  3. 重新启动计算机。
  4. 打开计算机上的 applications 文件夹中的 Adobe Flash CS5 文件夹。依次导航到 Players 文件夹和其中的 Debug 文件夹。根据您的操作系统,启动 Windows 或 Mac 版安装程序(有关安装程序的更多详细信息,请参阅 Adobe Flash Player 10.1 Read Me.pdf 文件)。
  5. 在浏览器中浏览到某个 Flash 影片,确保安装成功。

注意:您可以根据需要在常规 Flash Player 和调试播放器之间随意切换。如果遇到问题,请参阅以下任何一个技术文件:

按照这些步骤操作,在“Flash 调试”透视中启动调试会话:

  1. 启动 Flash Builder 调试器很简单。在 Flash Builder 中的 Flash 透视中,选择包资源管理器中的 developer_sample6 项目。
  2. 单击工具栏中的“调试”按钮(缺陷图标)。请务必单击“在 Flash Professional 中调试”按钮,它显示为一个带有缺陷的 Flash 图标。
  3. 单击“调试”时,Flash Builder 将切换为“Flash 调试”透视并启动一个包含用于开始会话的 SWF 文件的浏览器。
  4. 您会发现,随机变量值像 Flash Professional 调试器中那样出现在“变量”视图中。单击“调试”视图中的“继续”按钮(播放图标),允许循环前进到下一个断点。请注意如何在“变量”视图中分析变量和更改变量值(请参阅图 13)。

调试会话过程中看到的“调试”和“变量”视图
图 13.调试会话过程中看到的“调试”和“变量”视图

  1. 单击“调试”视图中的“终止”按钮(停止图标)可结束调试会话。
  2. 最后,单击工具栏右上角的“Flash 透视”按钮,返回标准 Flash Professional 项目透视。您可以从这里运行“测试影片”命令,继续 Flash Professional 工作流程。

有关 Flash Builder 中的项目调试选项的更多信息,请参阅 Flash Builder 4 在线文档的调试应用程序部分。

后续工作

至此,您已经对 Flash Professional 和 Flash Builder 中与应用程序开发相关的常见问题及调试技术有了进一步了解。无论您是设计人员还是 ActionScript 程序员,这些工作流程都可以帮助您解决问题并在 ActionScript 3 环境中更自信地工作。

原文地址:https://www.cnblogs.com/chenhongyu/p/3290507.html