1.2 任务2——ActionScript 3.0小试牛刀

1.2.1 知识储备——Flash CS6动作面板

Flash能够创建基于ActionScript 3.0的SWF文件，要实现脚本编程，可以在Flash的动作面板中进行。Flash动作面板实际上是一个功能齐全的代码编辑器，为程序开发者提供一个在Flash进行代码编写的场所。

在Flash CS6中，可以执行菜单“窗口”→“动作”命令或者快捷键<F9>来打开动作面板，如图1-8所示，动作面板的各个部分功能如下。

图1-8　动作面板

• 版本过滤：对于不同的应用程序环境，可以使用的语句是不同的，Flash CS6支持9种语言，分别为ActionScript 1.0&2.0、ActionScript 3.0、Flash Lite 1.0 ActionScript、Flash Lite 1.1 ActionScript、Flash Lite 2.0 ActionScript、Flash Lite 2.1 ActionScript、Flash Lite 3.0 ActionScript、Flash Lite 3.1 ActionScript和Flash Lite 4.0 ActionScript。例如在为最新手机编写Flash程序的时候，就不能使用Flash内置类了，这时只要将AS版本过滤设置为“Flash Lite 4.0 ActionScript”，就可以将不符合要求的内容过滤掉。

• 动作工具箱：列出了经过AS版本过滤之后的所有动作，单击文件夹图标“”可以将其展开或者折叠，双击条目图标“”可以将其添加到脚本窗口中，鼠标右键单击条目，在弹出的快捷菜单中选择“查看帮助”命令，可以在帮助面板中查看该条目的详细说明。

• 脚本导航器：脚本语言支持的对象是可以相互嵌套的。在比较大的程序中，往往会有四、五层甚至上十层的对象嵌套。这样一来，在撰写脚本的时候，经常要去搞清楚对象之间的嵌套关系。使用脚本导航器，就可以一目了然地看清楚它们之间的嵌套关系，并且快速地选中对象。

• 功能菜单：单击“功能菜单”按钮可以打开面板的功能菜单，对面板外观和行为进行进一步的设置。

• 脚本窗口：这是用来编写代码的主要部分，用户可以直接输入脚本代码，在脚本窗口的正上方，有许多工具栏按钮，这些工具是在ActionScript命令编辑时经常用到的，其功能如表1-1所示。

表1-1　工具栏按钮功能表

1. 使用代码提示

对于初学者来说，编写ActionScript 3.0代码时，使用代码提示是一个很好的主意，有两种不同的使用提示的方法。

（1）工具提示样式的代码提示

在需要括号的元素，例如当输入“trace(”的时候，Flash会显示如下代码提示，如图1-9A所示。这样可以根据提示输入相应的代码，以提高用户编写脚本的速度。要使代码提示消失，可以输入右括号“）”或者用鼠标左键单击该语句之外的地方。

图1-9　使用代码提示

（2）使用菜单样式的代码

当需要为变量申明数据类型时，输入“：”的时候，Flash会显示如下代码提示，如图1-9B所示。当实例化某个类对象，需要调用该类的具体方法时，输入“。”后，Flash也会显示代码提示，如图1-9C所示。可用向上或向下箭头键选择要使用的属性和方法，要使代码提示消失，可以选择需要的属性，或者用鼠标左键单击语句之外的地方。

2. 使用脚本助手

在使用ActionScript 3.0脚本的时候，可以借助“脚本助手”来编写代码。在使用过程中，脚本助手会提供一个输入参数的窗口，用户并不需要知道详细的语法规则，只要知道自己在完成项目的时候会用到哪些函数就足够了。在动作面板中单击“脚本助手”按钮，在“脚本助手模式”和“普通模式”之间切换，如图1-10所示。

图1-10　使用脚本助手

经验技巧

可以看到在此模式下，用户不能直接在代码编辑区域手工输入代码，完整的代码是通过填写上方的几个文本框，再由系统生成，也可以从左侧“动作工具箱”或者单击“将新项目添加到脚本中”按钮选择适当的项目添加到代码中来。动作面板的这个“脚本助手”曾在Flash MX2004中被抛弃，由于在这个模式下用户无法灵活地编辑代码，所以在逐渐熟悉ActionScript3.0之后，还是使用普通模式来编辑代码效率更高。

1.2.2 案例剖析——DIY第一个ActionScript 3.0程序

ActionScript 3.0的脚本编写功能超越了以前的所有版本，使其能够方便地编写各种大型的面向对象的复杂程序。早期版本的ActionScript代码可以写在帧、按钮、影片剪辑、as文件等位置，而ActionScript 3.0代码的位置发生了重大的改变，只能写在时间轴的帧上及as文件中。在Flash CS6中有两种方式写入ActionScript 3.0代码：一种是在时间轴的关键帧中写入ActionScript 3.0代码，另一种是在外面写成单独的ActionScript 3.0类文件再和Flash库元件进行绑定，或者直接和文件绑定. fla，可以根据具体的开发目标和环境来选择不同的方法。

1. 在时间轴中写入代码

可以在时间轴任意图层上的任意关键帧写入脚本代码，我们来小试牛刀，来创建一个简单的Hello World程序：

　　trace(＂Hello Word.＂);

这样，我们就创建了第一个ActionScript 3.0程序。trace()是最常用的函数之一，它的功能是将括号中的内容从输出面板中输出，要测试它，可以选择“控制”→“测试影片”→“测试”命令，或者通过快捷键<Ctrl+Enter>进行，此时开始编译fla文件，该示例源文件为HelloWorld1.fla，运行生成HelloWorld1.swf文件。

现在找到输出面板，即使之前输出面板是关闭着的，它也会弹出。但是它常常是一块很小的面板，所以很容易在不注意的时候出现在屏幕的角落，甚至以一组面板的形式伴随着时间轴出现，如图1-11所示输出面板显示第一个ActionScript 3.0程序的结果。

图1-11　输出面板显示程序结果

尽管从技术上看这个Hello World程序确实输出了Hello World，但这只是在Flash CS6测试环境看到的结果。如果将此程序生成的HelloWorld1.swf文件嵌入浏览器中运行，屏幕上将不会显示任何结果，需要再做点工作，来创建真正的Hello World程序。若想在屏幕上也显示Hello World，需要重新输入以下代码：

　　varmyText:TextField = new TextField();
　　myText.text = "Hello World.";
　　addChild(myText);

程序注释

第1行关键字var会告诉编译器正在创建了一个名为myText的变量，类型为TextField（文字字段），它是一个用来保存文本的容器。第2行将要输出的语句Hello World赋予文本字段。第3行将文本字段添加至舞台。在ActionScript3.0中创建文本字段这类对象时，它们并不会自动添加至舞台，需要自行添加，当你日后想要一组对象一起显示，或不希望所有对象直接出现在舞台上时，这会非常有用。当输入以上代码时，Flash CS6会自动在代码上方加入一行：

　　importflash.text.TextField;

这是因为，当Flash CS6发现的Flash影片正使用TextField对象时，它会默认引用ActionScript3.0类库的相关内容，引入类库后，程序就能创建TextField对象了。

在第一次使用myText变量之前，关键字var会告诉编译器程序正在创建一个名为myText的变量，冒号及类型名（TextField）则告诉编译器程序创建的这个变量是何种类型。

知识卡片

Camel Case命令规则：Camel Case是实例命名的最佳方法，该命名规则解决了多个字母连接在一起时的格式问题，它易读并且可被ActionScript所接受。Camel Case规则规定实例名的第一个字母小写，每两个单词间首字母大写。例如“my text”，Camel Case规则将它写成myText，第一个单词my，首字母不大写，第二个单词text，首字母大写，并直接连接在my后面，不需要空格。Camel Case规则是程序员公认的最佳规则，它适用于ActionScript以及其他的编程语言。

此程序的运行结果就是以默认的字体在屏幕的左上角显示一行小小的Hello World，示例的源文件为HelloWorld2.fla，如图1-12所示。

图1-12　屏幕输出程序结果

2. 使用文档类

ActionScript 3.0的一个新特色就是文档类，也就是把外部的ActionScript 3.0类文件和fla文件进行绑定，编译的时候将SWF文件看做类的一个实例。

现在使用文档类的方法来创建HelloWorld程序，在Flash CS6中执行“文件”→“新建文件”命令，在弹出的“新建文件”对话框中选择类型为“ActionScript文件”，单击“确定”按钮将创建一个脚本文件，在脚本文件编辑状态下没有时间轴，没有舞台，只有一个类似动作面板的文本编辑器，可以在编辑区域中输入代码，如图1-13所示。

图1-13　编辑脚本文件

脚本窗口是一个项目的代码编辑区，在这里可以实现定义变量，声明函数，自定义一个类等所有ActionScript 3.0所允许的语法。在脚本窗口中输入相关ActionScript 3.0代码后，执行“文件”→“保存”命令，项目将被保存为*.as格式的文件。

程序注释

类文件的开始部分都先声明这是一个package（包），其中包含一个类（class），然后定义程序中所需要用到的ActionScript部分。类是Flash对象的另一种表现方式，这些对象既可以是图形元件，也可以是影片本身，也经常把类看作是对象的代码部分，在后面的项目中我们会重点来学习，在此不再介绍。

创建完HelloWorld3.as文件后，需要创建HelloWorld3.fla来运行以上代码。虽然不需要在此影片的时间轴上添加任何操作，但需要为它分配一个文档类，由此指定控制影片的ActionScript文件。单击Flash CS6的舞台，属性面板会显示出来，在该面板中指定文档类，在“类”栏内输入类名“HelloWorld3”，如图1-14所示。

图1-14　影片的文档类为HelloWorld3

设置好后影片会加载并运行HelloWorld3.as文件，测试影片时，播放器会将as类文件的内容编译至影片中，影片运行时会初始化文档类，调用HelloWorld3.as并输出文本Hello World。

经验技巧

虽然ActionScript 3.0支持把代码写在时间轴中，但在实际应用中，如果把很多的代码都放入时间轴中，会导致代码很难管理。或者说，用类来组织大量的代码更为合适，因为类代码都是放在称为“脚本文件”的外部文件（.as）中保存的。除了把代码放在时间轴上，还可以把代码放在外部文件中，例如放在服务器的txt文件中，然后把这些外部数据加载到fla文件里。

以往都是在时间轴上写代码，编写的程序一般只有多层一帧的特点，其中最顶层专门来放置代码。在这种模式中，假如程序比较大，需要几百行代码来实现，甚至更多，代码全部放在同一个地方，光是查看就很不方便，需要打开Flash软件，然后找到帧及动作面板，最后进行翻页查看代码。实际上，对于一个代码较多的程序，可以把代码分成几个大的功能模块，每个模块代码放在一个as文件中，这样不管是查看还是进行其他的管理都较方便。

1.2.3 知识储备——代码片断面板

代码片断面板是Flash CS5开始新增的一个面板，其作用是将Flash存储的一些可重用的代码存储和管理在一起，随时供用户调用。非专业ActionScript 3.0程序员使用这些现在的代码块，即可轻松使用ActionScript 3.0，同时也可以利用它来学习ActionScript 3.0。在Flash执行“窗口”→“代码片段”命令，即可打开代码片段面板，利用此面板，可以添加能影响行为的代码，添加能在时间轴中控制播放头移动的代码，如图1-15所示。

图1-15　代码片断面板

与Flash CS5相比，Flash CS6的代码片断面板新增加了专门用于移动设备和AIR应用程序的代码片段，更好地进行交互设计。在该面板中，显示了当前存储的代码片段的分类列表，单击分类的目录，即可查看该分类下的所有代码片段。除此之外，代码片段面板还提供了3个按钮，其功能如表1-2所示。

表1-2　代码片断面板按钮功能表

单击“选项”按钮后，用户可在弹出的菜单中选择如下9条代码片段的操作命令。

• 创建新代码片段：在当前选定的类型中创建一个新的代码片段。

• 编辑代码片段XML：编辑所选的自定义代码片段。

• 删除代码片段：删除所选的代码片段。

• 刷新：更新代码片段列表。

• 重置为默认XML：清除所有自定义代码片段，并恢复所有对内置代码片段的修改。

• 显示所有警告对话框：在使用代码片段时显示警告对话框。

• 导入代码片段XML：导入已储存的代码片段。

• 导出代码片段XML：导出当前选择的代码片段。

• 帮助：使用代码片段帮忙。

Flash使用XML格式的文档存储代码片段的各种内容，因此用户可将代码片段导出为XML格式文件，也可将外部的代码片段XML文件导入到Flash中。

1.2.4 案例剖析——【功夫Show】

【任务背景】在没有接触脚本之前会发现动画在播放过程中，整个动画播放完毕后，又会从第1帧开始重新播放，一遍又一遍，除非把它关闭，不能控制动画的进程，无法与动画互动。“素材与源文件\项目1初识ActionScript 3.0\[素材]功夫show.fla”也同样如此，利用Flash CS6强大的代码片断面板，可以快速插入动作脚本，控制动画的播放，案例的效果如图1-16所示。

图1-16　【功夫Show】

【任务要求】通过提供的素材，使用代码片段面板在时间轴上快速调用动作脚本，从而控制动画的开始播放与重新播放，实现动画的交互。

【案例效果】素材与源文件\项目1初识ActionScript 3.0\功夫show.swf

【案例：功夫Show】操作步骤如下：

（1）执行菜单“文件”→“打开”命令，在弹出的对话框中选择“配套光盘\项目1初识ActionScript 3.0\素材和源文件\[素材]功夫Show.fla”。

（2）选择图层“按钮”的第1帧，为了让动作脚本控制该帧的按钮，必须先给舞台上的按钮实例起一个名字，选中舞台上按钮元件“开拍板”，在其属性面板“实例名称”文本框中填写“play_btn”，这就是按钮的实例名称，如图1-17所示。

图1-17　命名按钮元件实例名称

注意：对于按钮对象的相关操作，要注意以下三个方面。

① 在AS2.0中，代码的绑定对象比较丰富，可以是帧、按钮或者影片剪辑，如果希望一个按钮会发出响应动作，就直接给按钮加上代码；如果希望一个影片剪辑会发出响应动作，就直接给影片剪辑加上代码。这样的好处是灵活实用，类似于设计师的思维方式。而在AS3.0中，代码只能添加在帧中，如果希望一个按钮会发出响应动作，就必须给按钮设置一个实例名称，然后在按钮所在的时间轴中，选中一个帧，在里面添加代码。这样的好处是代码便于统一管理，也提高了代码的工作效率和可维护性。

② AS3.0对大小写敏感，也就是说，程序会严格区分大小写，把“play_btn”“PLAY_btn”、“Playr_btn”等当作不同的控制对象，所以在编写脚本语言的时候，一定要注意字母的大小写。

③ 对于这个实例中的按钮，可以起名叫“play”“playbtn”“btn”等，但是在这里使用了“play_btn”，它的名字使用了后缀“_btn”。在编写程序的时候，Flash会据此认出它是一个按钮。当输入“。”的时候，Flash就会自动打开列表，让我们在里面进行选择，而不必进行繁琐的键入。如果按钮的名称是“play”或者“playbtn”等不带“_btn”后缀的，就没有这个触发功能了，这就是使用特定后缀的好处。

（3）选择图层“按钮”的第520帧，选中舞台上按钮元件“重新播放”的实例，在其属性面板“实例名称”文本框中填写“replay_btn”。

（4）选择图层“AS3.0”的第1帧，执行“窗口”→“代码片段”命令，打开代码片段面板，在“时间轴导航”目录下，双击“在此帧处停止”项目，代码片段将被复制到动作面板中，具体的代码内容如下：

　　/* 在此帧处停止
　　Flash 时间轴将在插入此代码的帧处停止/暂停。
　　也可用于停止/暂停影片剪辑的时间轴。
　　*/
　　
　　stop();

（5）在舞台上选择按钮元件“开拍板”的实例，在代码片段面板“时间轴导航”目录下，双击“单击以转到此帧并播放”，具体的代码内容如下：

　　/*单击以转到帧并播放
　　单击指定的元件实例会将播放头移动到时间轴中的指定帧并继续从该帧回放。
　　可在主时间轴或影片剪辑时间轴上使用。
　　说明:
　　
　　单击元件实例时，用希望播放头移动到的帧编号替换以下代码中的数字 5。
　　*/
　　
　　play_btn.addEventListener(MouseEvent.CLICK,
fl_ClickToGoToAndPlayFromFrame);
　　
　　function fl_ClickToGoToAndPlayFromFrame(event:MouseEvent):void
　　
　　{
　　 gotoAndPlay(5);
　　}

（6）将第二段代码中“gotoAndPlay(5);”修改为“gotoAndPlay(2);”，以满足控制动画播放的需要，以同样的方法在图层“AS3.0”的第520帧处添加代码片段，也可以将其中注释性的文字删除，修改后代码内容如下：

　　stop();
　　
　　replay_btn.addEventListener(MouseEvent.CLICK,
fl_ClickToGoToAndPlayFromFrame_2);
　　function fl_ClickToGoToAndPlayFromFrame_2(event:MouseEvent):void
　　{
　　 gotoAndPlay(1);
　　}

（7）按下快捷键<Ctrl+S>保存文件，然后执行“控制”→“测试影片”命令，或按下快捷键<Ctrl+Enter>，测试动画文件的效果，效果如图1-16所示。

1.2.5 任务拓展——ActionScript 3.0首选参数

Flash是目前应用最广泛的ActionScript开发环境。在编写ActionScript代码时，可以通过Flash的首选参数对ActionScript代码的格式、关键字颜色等进行设置，以符合用户的习惯，提高代码编写的效率。在Flash CS6中，与ActionScript相关的首选参数主要包括两类：

1. ActionScript参数

ActionScript参数的作用是设置Flash CS6在编写ActionScript代码时显示代码的参数。在Flash CS6中执行“编辑”→“首选参数”命令，即可打开名为“首选参数”的对话框。选择左侧列表菜单中的“ActionScript”选项，即可打开ActionScript参数的选项面板，如图1-18所示，在ActionScript参数对话框中，包含如下选项。

图1-18　ActionScript参数设置

• 自动右大括号：当输入左大括号后，按回车键后自动添加右大括号。

• 自动缩进：为便于阅读和理解程序的源代码，多数编程语言都会按照一定的格式进行书写。例如，为嵌套关系的语句块进行句首缩进处理。选中该选项后，Flash CS6可以自动在用户换行时将代码缩进。

• 制表符大小：设置新行中缩进的字符数。

• 代码提示：在输入代码时启用代码提示。

• 缓存大小：设置缓存的文件数，输入数值在1～2000。

• 延迟：代码提示出现的延迟。

• 字体：在脚本窗口和脚本文件窗口中显示的字体和大小。

• 样式：在脚本窗口和脚本文件窗口中显示的字体样式。

• 使用动态字体映射：所选字体中呈现每个字符。如不选该选项，则Flash会替换上一个包含必须字符的系列。

• 打开/导入：定义打开或导入ActionScript时使用的字符编码。

• 保存/导出：定义保存或导出ActionScript时使用的字符编码。

• 重新加载修改的文件：定义脚本文件在被修改、移动或删除时Flash CS6进行的操作。包括3个选项：“总是”表示不显示警告，直接加载新文件；“从不”表示不显示警告，文件仍保持当前状态；“提示”表示显示出警告的对话框，由用户选择进行的操作。

• 类编辑器：设置类编辑器的不同软件，可以选择Flash CS6和Flash Builder。

• 语法颜色：选择相应背景或文本的颜色。

• 语言：单击这些按钮打开ActionScript 设置对话框，从中可以设置ActionScript 2.0类路径或ActionScript 3.0的源路径、库路径和外部库路径。

• 重置为默认值：单击该按钮，将恢复所有选择为Flash最初的设置。

2. 自动套用格式参数

自动套用格式参数的作用是定义当用户在动作面板或脚本窗口中单击“自动套用格式”按钮时格式化代码的方式。Flash CS6支持对格式化代码进行6种设置，并提供预览，如图1-19示，在“自动套用格式”对话框中，包含如下选项。

• 在if、for、switch、while等后面的行上插入：选中该选项后，代码格式化时将在条件语句和循环语句后换行。

• 在函数、类和接口关键字后面的行上插入：选中该选项后，代码格式化时将在函数等语句块之前进行换行。

• 不拉近}和else：选中该选项后，代码格式化时将在函数等语句块之后进行换行。

• 函数调用中在函数名称后插入空格：选中该选项后，代码格式化时会在函数的名称和语句块的大括号间插入空格。

• 运算符两边插入空格：选中该选项后，代码格式化时会在所有运算符两边插入空格。

• 不设置多行注释格式：由于ActionScript支持一句代码多行显示，因此不推荐为代码添加多行注释。选中该选项，则在自动套用格式时忽略多行注释。

图1-19　自动套用格式参数设置

知识卡片

代码注释通常为一行或多行文本内容，通过特殊的符号标识以防止被Flash程序编译。在ActionScript 3.0中，代码注释可以分为两种，即行注释和块注释。行注释是指允许出现在单行中的注释文本，其通常以双斜杠“//”作为标识符。块注释则为大面积的注释，通常是一行或者多行注释，位于一个函数或一段代码之前，其通常以斜杠“/”加星号“*”起始，以星号“*”加斜杠“/”结尾。注释语句在动作面板和脚本窗口显示的颜色增色均为灰色，也可以通过首选参数设置注释语句显示的颜色。虽然大量详细的注释可以使代码更清晰，但过多的注释往往会造成程序编译效率低下，而且Flash的自动套用格式尚不完善，因此如非必要，应尽量少使用块注释。

1.2.6 任务拓展——ActionScript 3.0测试及调试

没有哪一个程序员能写出完善的代码，即便他拥有丰富的编程经验，因此我们必须边写代码，边进行测试和调试。

1. 程序的测试

程序中的错误分为语法错误和逻辑错误两种，对于语法错误，可以简单的通过单击面板菜单中的“语法检查”按钮进行检测，可以准确地指出错误的类型和位置。

新建一个Flash文档bug.fla，打开动作面板输入如下代码：

　　function f( var p1:int, var p2:uint){
　　 　trace(p1,p2);
　　}
　　f(2,4)

程序注释

这段代码的本意是调用自定义的函数，输出两个参数值。单击“语法检查”按钮或按组合键<Ctrl+Enter>测试影片，发现发生了编译错误，如图1-20所示。双击任意一个错误提示，对应错误信息的出错代码会被反显，可使用户迅速定位错误发生的位置。通过检查发现函数声明中两个var是多余的，删除后测试影片正常。开发过程中，建议使用trace语句，这样一些运行结果可以显示在输出面板，方便检查语句。

图1-20　编译错误

2. 程序的调试

在Flash环境下，可以在影片运行时使用调试器来检查代码，调试程序最简单的方法是设置断点。选中一行代码，然后在菜单中选择“调试”→“切换断点”命令进行设置，同样可以选中一行代码后按下<Ctrl+B>组合键来添加或删除断点。如图1-21所示，DebugExample.as文件中设置了一个断点，在脚本窗口的第8行代码的左边有一个小圆点。这个程序创建了10个文本字段，分别显示0-9的数字，并且垂直排列在屏幕的左边。

图1-21　设置断点

设置好断点后，就可以通过选择“调试”→“调试影片”→“调试”命令（而不用选择“控制”→“测试影片”→“测试”命令）来测试影片。当程序执行到断点所在的行时，它就会停止并在多个调试窗口中显示各种信息。

断点设置在第8行，如果选择“调试”→“调试影片”命令，那么除了运行影片外，还会出现一整套调试面板，图1-22显示了这些面板。

图1-22　调试面板显示了关于程序状态的各种信息

界面左上方调试控制台面板有五个按钮，功能分别如下。

• ：“继续”按钮，它使影片从停下的地方继续运行。

• ：“结束调试会话”按钮，它终止调试会话，并使影片之后以非状态运行。

• ：“跳过”按钮，执行当前代码行，并向下继续，如果当前代码行调用了其他函数，则运行调用的函数。

• ：“跳入”按钮，它使调试进入当代代码行上的函数，重复单击“跳入”按钮，会逐步运行函数中的每一行，而不是跳过函数调用。

• ：“跳出”按钮，跳出当前函数，可以单击此按钮结束当前函数，然后继续上一步的函数高度。

经验技巧

单击“跳入”按钮，调试进入showNumber函数，并继续向下运行几行，可以从变量面板中观察值，也可以打开变量i，查看文本字段的所有属性，如图1-23所示。在变量面板中双击列表中的某个变量可以对变量值进行修改，新值将在接下来的代码执行时被使用。单击变量面板右上角的按钮，在打开的下拉列表中选择相对应的选项可以对面板列表中显示的变量类型进行设置。界面的左上方显示了当前运行的程序，目前程序处于showNumber函数，该函数由类的构造函数调用，一个函数可以在多处调用，这对于编程是非常方便的。

图1-23　调试面板显示了逐步调试程序的过程