项目八 ActionScript应用
项目引入
ActionScript是Flash内置的编程语言,用它为动画编程,可以实现各种动画特效、对动画的良好控制、强大的人机交互及与网络服务器的交互功能。ActionScript使用英文单词和元件提供了一种为Flash动画设置指令的方法。它的存在确保了Flash动画较之普通的按照线性模式播放的动画具备强得多的人机交互功能。
任务一 ActionScript概述
1. 随处可见的ActionScript
1) ActionScript简介
ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言,它在Flash 内容和应用程序中实现了交互性、数据处理及其他许多功能。
ActionScript 是由 Flash Player 中的 ActionScript 虚拟机 (AVM) 来执行的。ActionScript 代码通常被编译器编译成字节码格式(一种由计算机编写且能够为计算机所理解的编程语言),如Adobe Flash CS3 Professional 或 Adobe® Flex™ Builder™ 的内置编译器或 Adobe® Flex™ SDK 和 Flex™ Data Services中提供的编译器。字节码嵌入SWF文件中,SWF文件由运行时环境 Flash Player 执行。
ActionScript 3.0 提供了可靠的编程模型,具备面向对象编程基本知识的开发人员对此模型会比较熟悉。ActionScript 3.0 中的一些主要功能包括以下几方面。
(1) 一个新增的 ActionScript 虚拟机,称为 AVM2,它使用全新的字节码指令集,可使性能显著提高。
(2) 一个更为先进的编译器代码库,它更为严格地遵循 ECMAScript (ECMA 262) 标准,并且相对于早期的编译器版本,可执行更深入的优化操作。
(3) 一个扩展并改进的应用程序编程接口 (API),拥有对对象的低级控制和真正意义上的面向对象的模型。
(4) 一种基于即将发布的 ECMAScript (ECMA-262) 第 4 版草案语言规范的核心语言。
(5) 一种基于 ECMAScript for XML (E4X) 规范(ECMA-357 第 2 版)的 XML API。E4X 是 ECMAScript 的一种语言扩展,它将 XML 添加为语言的本机数据类型。
(6) 一种基于文档对象模型 (DOM) 第 3 级事件规范的事件模型。
2) ActionScript的发展
(1) ActionScript 1.0简单、灵活、比较容易理解,既可以用原始的方式一个个地创建动画,又可以设置对象的事件处理函数。
早期Flash 3.0中的ActionScript 1.0语法冗长,主要应用是围绕帧的导航和鼠标的交互。这种状况一直持续到Flash 5.0。到Flash 5.0版本时,ActionScript已经很像JavaScript了,它提供了很强的功能和为变量的传输提供了语法。ActionScript同时也变成了一种prototype(原型)语言,类似于在JavaScript中的简单的OOP(面向对象编程)功能。
(2) ActionScript 2.0相对比较规范,是ActionScript 1.0的升级版。首次将OOP引入Flash。
Flash MX2004(7)中引入的ActionScript 2.0有两大改进,即变量的类型检测和新的class类语法的改进。ActionScript 2.0的变量类型会在编译时执行强制类型检测,这意味着在发布或编译动画时,任何指定类型的变量都会从众多的代码中剥离出来,检查是否与现有的代码存在矛盾冲突。如果在编译过程中没有发现冲突,那么将会创建SWF文件,没有任何不可理解变量类型的代码会运行。尽管这项功能对Flash Player的回放功能来说没有好处,但对于Flash创作人员来说它是一款非常好的工具,可以帮助调试更大、更复杂的程序。
在ActionScript 2.0中,新的class类语法用于在ActionScript 2.0中定义类,它类似于Java语言中的定义。尽管Flash仍不能超越自身的原型来提供真正的class类,但新的语法提供了一种非常熟悉的风格来帮助用户从其他语言上迁移过来,提供了更多的方法来组织分离As文件和包。
(3) ActionScript 3.0更加系统、规范。
ActionScript 3.0既是一种带有新的版本号的ActionScript 语言,又是一种全新的虚拟机。ActionScript 1.0和ActionScript 2.0都是使用AVM1(ActionScript 虚拟机1),因此它们在需要回放时本质上是一样的;而ActionScript 3.0运行在AVM2上一种新的专门针对ActionScript 3.0代码的虚拟机。基于上面的原因,ActionScript 3.0动画不能直接与ActionScript 1.0 和ActionScript 2.0动画通信(ActionScript 1.0和ActionScript 2.0的动画可以直接通信,因为它们使用的是相同的虚拟机;如果要ActionScript 3.0动画与ActionScript 1.0和ActionScript 2.0的动画通信,只能通过local connection),但是ActionScript 3.0的改变具有更深远的意义。
3) ActionScript 3.0新特性
相较于ActionScript 2.0,ActionScript 3.0具有如下一些新的特性和改动。
(1) 引入了package(包)和namespace(命名空间) 两个概念。其中 package用于管理类定义,防止命名冲突;而namespace用于控制程序属性方法的访问。
(2) 新增内置类型 int (32比特整数)和uint(非负32比特整数),用于提速整数运算。
(3) 新增is和as两个运算符来进行类型检查。其中is代替ActionScript 2.0中的instanceof来查询类实例的继承关系,而as则用于进行不抛出错误的类型转换。
(4) 新增 in 运算符用于查询某实例的属性或其prototype中是否存在指定名称的属性。
(5) 新增 for each语句用于循环操作Array及Object实例。
(6) 新增 const 语句用于声明常量。
(7) 新增 Bound Method 概念。当把一个对象的方法赋予另外一个函数变量时,此函数变量指向的是一个 Bound Method,以保证对象方法的作用域仍然维持在声明此方法的对象上。这相当于 Action Script 2.0 中的 mx.util.Delegate类,在 ActionScript 3.0 中这项功能完全内置在语言中,不需要额外写代码。其又包含以下几小点。
OOP方面的增强。 通过类定义而生成的实例,OOP在ActionScript 3.0中属于Sealed类型,即其属性和方法无法在运行时修改。这部分属性在ActionScript 2.0中是通过类的prototype对象来存储的,而在ActionScript 3.0中则是通过称为Trait的概念对象来存储管理的,无法通过程序控制。这种处理方式一方面减少了通过prototype继承链查找属性方法所耗费的时间;另一方面也减少了内存占用量,因为不用动态地给每一个实例创建 hashtable 来存储变量。如果仍然希望使用ActionScript 2.0中类实例在运行时的动态特性,则可以将类声明为dynamic。
API方面的增强。新增 Display API,使 ActionScript 3.0 可以控制包括 Shape、Image、TextField、Sprite、MovieClip、Video、SimpleButton、Loader在内的大部分 DisplayList 渲染单位。其中Sprite 类可以简单理解为没有时间轴的 MovieClip,适合用于作为组件等不需要时间轴功能的子类的基础。而新版的 MovieClip 也比 ActionScript 2.0 多了对Scene(场景)和 Label(帧标签)的程序控制。另外,渲染单位的创建和销毁通过联合 new 操作符及addChild/removeChild 等方法实现,类似 attachMovie 的旧方法已被舍弃,同时以后也无须处理深度值。
新增内置的 Regular Expressions (正则表达式)支持,能够让ActionScript 3.0高效创建、比较和修改字符串,以及迅速分析大量文本和数据以搜索、移除和替换文本模式。
新增 ECMAScript for XML(E4X)支持。E4X是ActionScript 3.0中内置的XML处理语法。在ActionScript 3.0中XML成为内置类型,而之前的ActionScript 2.0中XML的处理api转移到flash.xml.*包中,以保持向下兼容。
新增Socket类,允许读取和写入二进制数据,使通过AS来解析底层网络协议(如POP3、SMTP、IMAP、NNTP等)成为可能,使Flash Playe可以连接邮件服务器和新闻组。
新增 Proxy类来替代在 ActionScript 2.0中的Object. resolve功能。
新增对于Reflect (反射)的支持,相关方法包含在flash.util.*包中。
4) ActionScript的应用
可以使用ActionScript语句控制Flash动画中的对象,创建向导和交互元素;也可以扩展Flash制作高级交互动画和Flash交互网站。
ActionScript可以实现如对动画的播放控制、鼠标对对象的拖曳、游戏设计、交互网站制作等,如图8-1至图8-3所示。
2. ActionScript动作面板
在Flash CS5中,使用【动作】面板可以创建和编辑ActionScript代码。在Flash文档窗口中,选择【窗口】|【动作】命令或【F9】键可打开如图8-4所示的【动作】面板。

图8-1 对动画的播放控制

图8-2 鼠标对对象的拖曳

图8-3 交互网站制作

图8-4 【动作】面板
【动作】面板中各参数说明如下。
(1) 动作工具箱:可以通过双击或拖动的方式将其中的ActionScript元素添加到脚本窗口中,还可以使用【动作】面板工具栏中的
按钮将元素添加到脚本中。
(2) 脚本导航器:通过单击其中的项目,可以将与该项目相关的代码显示在脚本窗口中;通过双击其中的项目,可以对该项目代码进行固定操作。
(3) 脚本窗口:用于显示脚本的具体内容。
(4) 工具栏:用于编辑ActionScript命令式,工具如图8-5所示。

图8-5 工具栏
工具栏中主要按钮说明如下。
(1) 【将新项目添加到脚本中】
:单击该按钮,在弹出的菜单中选择动作语句,将语句添加到脚本窗口中。这些语句也可以从动作工具箱中选择。
(2) 【查找】
:用于查找并替换脚本中的文本。
(3) 【插入目标路径】
:用于为脚本中的某个动作设置绝对或相对目标路径。
(4) 【语法检查】
:用于检查当前脚本语法的错误,并在【编辑器错误】面板中显示错误信息。
(5) 【自动套用格式】
:用于对输入的ActionScript进行自动格式排列。
(6) 【显示代码提示】
:用于输入ActionScript时显示代码提示。
(7) 【调试】
:用于设置和删除断点,以便在调试时可以逐行执行脚本中的每一行。
(8) 【折叠成对大括号】
:用于在代码的大括号间收缩。
(9) 【折叠所选】
:用于在选择的代码间收缩。
(10) 【展开全部】
:用于展开当前脚本中所有折叠的代码。
(11) 【代码片段】
:单击该按钮,打开【代码片段】面板,使用该面板能添加影响对象在舞台上行为的代码及能在时间轴中控制播放头移动的代码。
(12) 【脚本助手】
:用于将动作工具箱中的选项添加到专门提供的界面中,这个界面包含文本字段、单选按钮和复选框,可以提示正确变量及其他脚本语言的构造。
(13) 【帮助】
:用于显示“脚本”窗格中所选ActionScript元素的参考信息。
3. ActionScript基本语法知识
1) 对象和类
在ActionScript中,每个对象都是由类定义的。可以将类视为某一对象的模板或蓝图,它的作用是定义对象的变量、常量及方法等。
ActionScript中包含许多属于核心语言的内置类。其中的某些内置类(如Number、Boolean和String)表示ActionScript中可用的基元值,而其他类(如Array、Math和XML)定义了属于ECMAScript标准的复杂对象。
2) 包
包是一个位于指定的类路径目录下的目录,其中包含一个或多个类文件,也可以包含其他的包(称为子包),每个子包都可以具有自己的类文件。用户创建类时,可将ActionScript类文件组织到包中。包用于通过有利于共享代码并尽可能减少命名冲突的方式将多个类定义捆绑在一起,而命名空间一般用于管理各个属性和方法的可见性。
3) 数据类型
数据类型包含以下两种类型。
(1) 基元数据类型:数字、文本、布尔值,这是语言的基本构成单元。基本数据类型有:boolean 、int、number、string、unit。
(2) 复杂数据类型:是相对于基元数据类型而言的。简单的复杂数据类型往往是由一些基元数据类型构成的。更高级一点的复杂数据类型,其组成元素也是复杂数据类型。复杂数据类型如MovieClip(影片剪辑元件)、TextField(动态文本字段或输入文本字段)、SimpleButton(按钮元件)、Date(日期和时间)等。
4) 变量的声明和使用
声明变量的格式如下。
(1) var 变量名:数据类型,如var a : Number;
(2) var 变量名:数据类型=值,如var a : Number=88;
var 是一个关键字,用于声明变量。
变量命名的规则如下。
(1) 使用有含义的英文单词作为变量名。
(2) 使用骆驼命名法。
(3) 变量名符合“min-length&&max-information”原则。所谓的“min-length&&max-information”原则,是指变量名的长度应当越短越好,变量含义描述得越清晰越好。
(4) 尽量避免在变量名中出现数字。
5) ActionScript 3.0的语法规则
(1) 区分大小写。ActionScript 3.0规定字母的大小写所表示的标识符不同。例如,num1和Num1是两个不同的变量。
(2) 点运算符。可以通过点运算符(.)来访问对象的属性和方法。例如,有以下类的定义。
该类中有一个name属性和一个methodl()方法,借助点运算符,并通过创建一个实例来访问相应的属性和方法,举例如下。
(3) 字面值和数组文本。字面值是指直接出现在代码中的值。如32、-4.3、name、null、undefined、true、false等都可以作为字面值。数组文本主要用于初始化数组,使用数组文本时,只需将其括在括号字符“[ ]”中,各数组元素之间用逗号隔开即可,如var abc:Array=[3,4,5,6,7]。
(4) 分号。可以使用分号字符(;)来终止语句。如果省略分号字符,则编译器会认为每行代码代表单条语句。
(5) 注释。ActionScript 3.0代码支持两种类型的注释,即单行注释和多行注释。编译器将忽略标记为注释的文本。
单行注释以两个正斜杠字符(//)开头并持续到该行的末尾。例如,
多行注释以一个正斜杠和一个星号(/*)开头,以一个星号和一个正斜杠(*/)结尾。例如,
/*这是一个可以跨多行
代码的多行注释。*/
任务二 使用Stop、Play动作控制动画播放
知识准备
1. 停止命令stop
停止命令stop的用法如下。
或者
注意:在stop之后有一对括号,ActionScript中所有命令都必须有这样一对括号,如果命令需要参数,则应该顺序写在括号里。命令的末尾有一个分号表示语句的结束。
2. 播放命令play
播放命令play的用法如下。
或者
任务实施
任务目标:使用play和stop语句控制电扇的转动和停止。
具体操作步骤如下。
(1) 启动Flash CS5程序,按【Ctrl+O】键打开文件“素材.fla”,如图8-6所示。

图8-6 打开素材
(2) 使用选择工具双击电扇图形区域,进入元件1编辑状态,如图8-7所示。
(3) 单击【新建图层】按钮添加一个新图层,命名为“播放按钮”。从库中拖入“but_play.gif”到舞台,并将其调整到合适的位置。选中导入的图,按【F8】键将其转换为按钮,如图8-8所示。

图8-7 元件1的编辑状态

图8-8 添加“播放按钮”
(4) 再单击【新建图层】按钮,添加一个新图层,命名为“停止按钮”。从库中拖入“but_stop.gif”到舞台,并将其调整到合适的位置。选中导入的图,按【F8】键将其转换为按钮,如图8-9所示。

图8-9 添加“停止按钮”
(5) 选中“播放按钮”图层,按【F9】键打开【动作】面板,输入以下代码:
此时的【动作】面板如图8-10(a)所示。
(6) 再选中“停止按钮”图层,按【F9】键打开【动作】面板,输入以下代码:
此时的【动作】面板如图8-10(b)所示。

图8-10 【动作】面板
(7) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。
任务三 使用gotoAndPlay动作创建下拉菜单
知识准备
与stop和play不同的是,gotoAndPlay和gotoAndStop命令包含了goto,即两个命令首先要实现跳转命令,然后才能停止或播放。gotoAndPlay和gotoAndStop都需要参数,有两种跳转方式。
1. 跳转到帧
格式如下。
其中,参数frame是指明跳转到的帧,它可以是帧编号,也可以是帧标签。
2. 不同场景间跳转
格式如下。
其中的参数scene是指明场景。
任务实施
任务目标:使用gotoAndPlay语句控制下拉菜单的弹出和收回。
具体操作步骤如下。
(1) 启动Flash CS5程序,按【Ctrl+O】键打开文件“素材.fla”,如图8-11所示。动画第1帧显示下拉菜单收回的效果,第2帧显示下拉菜单弹出的效果。
(2) 单击【新建图层】按钮,添加一个“图层2”,选中“图层2”的第1帧,按【F9】键打开【动作】面板,输入以下代码:
使动画播放到第1帧时停止,如图8-12所示。
(3) 选中“图层2”的第2帧,按【F6】键插入关键帧。再按【F9】键打开【动作】面板,输入以下代码:
使动画播放到第2帧时停止,如图8-13所示。

图8-11 打开素材

图8-12 添加stop动作

图8-13 【动作】面板
(4) 选中第1帧,在舞台中选中【菜单】按钮,按【F9】键打开【动作】面板,输入以下代码:
单击【菜单】按钮时,动画自动跳转到并播放第2帧,如图8-14所示。
(5) 选中第2帧,再在舞台中选中【菜单】按钮,按【F9】键打开【动作】面板,输入以下代码:
单击【菜单】按钮时,动画自动跳转到并播放第1帧,如图8-15所示。
(6) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。

图8-14 为第1帧的【菜单】按钮添加goto动作

图8-15 为第2帧的“菜单”按钮添加goto动作
任务四 使用getURL动作创建超链接
知识准备
getURL(url:String, [window:String, [method:String]]) : Void表示将来自特定 URL 的文档加载到窗口中,或者将变量传递到位于所定义的 URL 的另一个应用程序。若要测试此函数,请确保要加载的文件位于指定的位置。若要使用绝对 URL(例如,http://www.myserver.com),则需要网络连接。其中,各参数说明如下。
(1) url:String :可从该处获取文档的 URL。
(2) window:String [可选]:指定应将文档加载到其中的窗口或 HTML 帧。可输入特定窗口的名称,或者从以下保留目标名称中选择。
①_self 指定当前窗口中的当前帧。
②_blank 指定一个新窗口。
③_parent 指定当前帧的父级帧。
④_top 指定当前窗口中的顶级帧。
(3) method:String [可选]:用于发送变量的 GET 或 POST 方法。如果没有变量,则省略此参数。GET 方法将变量附加到 URL 的末尾,用于发送少量的变量。POST 方法在单独的 HTTP 标头中发送变量,用于发送长字符串的变量。
1. 连接到网站的语法格式
连接到网站的语法格式如下:
2. 打开系统盘的语法格式
打开系统盘的语法格式如下:
3. 启动系统程序的语法格式
启动系统程序的语法格式如下:
4. 写信(使用系统的OUTLOOK)的语法格式
写信(使用系统的OUTLOOK)的语法格式如下:
任务实施
任务目标:使用getURL语句使按钮连接到“新浪”网页。
具体操作步骤如下。
(1) 启动Flash CS5程序,按【Ctrl+O】键打开文件“素材.fla”,如图8-16所示。

图8-16 打开素材
(2) 单击舞台中的【点击我】按钮,按【F9】键打开【动作】面板,输入以下代码:
给该按钮创建超链接,如图8-17所示。

图8-17 添加getURL动作
(3) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。
深入解析
在以前的版本中,mouseMove事件不管鼠标在不在Flash动画内,只要移动鼠标,Mouse对象或MC的侦听器都会认为鼠标在移动并且接受这一事件 (MC不需要变为Mouse对象侦听器也可以动态接收鼠标事件)。而在ActionScript 3.0中,Mouse对象不再用于分派(dispatch)鼠标事件了。对mouseMove事件,可以侦听Sprites、MovieClips和stage这些InteractiveObject实例,也就是ActionScript 3.0中使用InteractiveObject来侦听鼠标事件,不再是在Mouse对象上添加侦听器。mouseMove事件只有当鼠标从InteractiveObject实例的一个区域移动到它的另一个区域时才会调用,如果想让鼠标在动画的任何地方的移动都能被检测到,就需要侦听stage。
让鼠标移动来拖动一个对象时,需要使用stage来发送事件。因为如果使用要拖动的对象作为事件发送器,当鼠标移出了拖动的对象,mouseMove事件就不再会被触发,拖动也就停止。
综合实训——制作百叶窗效果
任务目标:制作“百叶窗效果”。
具体操作步骤如下。
(1) 启动Flash CS5程序,按【Ctrl+N】键新建一个ActionScript 3.0的Flash文档。设置文档大小为“550×400”像素、舞台背景颜色和fps为默认值。
(2) 选择【文件】|【导入】|【导入到库】命令,打开【导入】对话框,选择文件图1.jpg、图2.jpg、图3.jpg和图4.jpg,导入库中,待用。导入后,【库】面板如图8-18所示。
(3) 选择“图层1”的第1帧,从库中拖出“图1.jpg”到舞台,全居中。单击舞台中的“图1”,按【F8】键将“图1”转换成名称为“元件1”的影片剪辑元件,如图8-19所示。

图8-18 【库】面板

图8-19 将“图1”转换成影片剪辑元件
(4) 选择“图层1”的第51帧,按【F7】键插入空白关键帧,从库中拖出“图2.jpg”到舞台,全居中。单击舞台中的“图2”,按【F8】键将“图2”转换成名称为“元件2”的影片剪辑元件,如图8-20所示。

图8-20 将“图2”转换成影片剪辑元件
(5) 使用同样的方法,分别在第101帧、第151帧拖入“图3.jpg”和“图4.jpg”,并转换成“元件3”和“元件4”的影片剪辑元件。在第200帧处按【F5】键插入帧。
(6) 新建图层,选择“图层2”的第1帧,从库中拖出“元件2”到舞台,全居中。单击该实例,在【属性】面板填写其实例名称为“mc”,如图8-21所示。

图8-21 为“元件2”命名为“mc”
(7) 使用同样的方法,分别在第51帧、第101帧、第151帧完成“元件3”、“元件4”、“元件1”的操作。在第200帧处按【F5】键插入帧。
(8) 图层1和图层2在第1帧、第51帧、第101帧、第151帧上的影片剪辑元件的排序如图8-22所示。

图8-22 影片剪辑元件的排序
(9) 新建图层,命名为“as”。选择“as图层”第1帧,按【F9】键打开【动作-帧】面板,输入以下代码,如图8-23所示。

图8-23 【动作-帧】面板
(10) 选择第1帧,单击右键打开快捷菜单,选择【复制帧】命令,再依次在第51帧、第101帧、第151帧处粘贴该帧。在第200帧处按【F5】键插入帧。
(11) 按【Ctrl+S】键保存文档,然后按【Ctrl+Enter】键对动画进行测试。本实例首尾时间轴如图8-24所示。

图8-24 本实例首尾时间轴