![Flash/Flex ActionScript 3.0交互式开发详解:语法基础、典型应用、视频网站实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/793/687793/b_687793.jpg)
第1章 ActionScript 3.0语言
ActionScript 3.0是一种脚本语言,伴随着Flash技术而诞生。本章将简单介绍ActionScript 3.0语言的特色及开发环境,使读者对ActionScript 3.0有整体的认识。
1.1 关于ActionScript 3.0
ActionScript 3.0是一种运行在Flash Player环境中的编程语言,由ActionScript虚拟机(AVM)执行。ActionScript 3.0版本提供了更好的面向对象思想的设计模型,使程序员更容易编写和设计复杂的代码。ActionScript 3.0提供了一些新的功能和特色,主要包括以下几点:
新增的虚拟机,命名为AVM2。其中使用了全新的字节码指令集,大大提高了性能。
密封类的引入。在ActionScript 3.0中,所有的类都是密封的,但是可以声明动态类。
ECMAScript for XML(E4X)标准化。新的E4X可以简化操作XML数据,使开发应用程序更加容易。
正则表达式的支持。ActionScript 3.0增加了对正则表达式的支持,可以更加快速地搜索字符串,使字符串的处理更加简化。
1.1.1 ActionScript的作用
Flash技术发展到现在,已经不只是局限于制作矢量动画。在绘图、网络、音频和视频等方面也有很强大的功能,很多复杂的、交互性强的功能的实现往往要依赖于ActionScript编程。
例如,在制作一个类似画图板程序的时候,如果不使用ActionScript编程,这种交互性极强的应用程序是很难实现的。画图板程序如图1.1所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0019_0006.jpg?sign=1738890285-iKIgk7mQSLPwL3uKlmngChgYTljb5l82-0-e4c0b03a952d016e468411dc2706570f)
图1.1 画图板
再例如,在音频制作方面,如果要把音频的声谱信息,用动画的形式表现出来,也需要用到ActionScript编程。声谱图像如图1.2所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1738890285-uLQRCuWT3o9ETX85lS50o83Hf479qad4-0-15cfe459402034c2ba215c90dedef06d)
图1.2 声谱图像
1.1.2 ActionScript的版本
相对于以前的ActionScript版本来说,ActionScript 3.0的代码编写能力得到大大的提高。ActionScript 3.0编写的代码,使新型的虚拟机AVM2的性能显著提高,执行速度比以前的版本要快10倍。除了性能之外,在面向对象方面也大大增强,增加了很多面向对象的设计思想。
ActionScript 3.0相比之前的版本,增加了很多新功能,这些新功能主要包括语法、面向对象和API三个方面。
语法方面增加的新功能主要包括以下几点:
Package(包)和namespace(命名空间)两个概念的引入。Package用来管理类定义,防止命名冲突,而namespace则用来控制程序属性方法的访问。
内置类型int(32比特整数)和uint(非负32比特整数)。增加这两个类型,主要是为了提高整数的运算速度。
* 类型标识。这个类型用来标识类型不确定的变量。
is和as两个运算符。这两个运算符主要用来进行类型检查。
in运算符。这个运算符用来查询某实例的属性,或其prototype中是否存在指定名称的属性。
for each语句。这个语句可以用来循环操作Array及Object实例。
const语句。这个语句表示常量。
Bound Method概念。当一个对象的方法被赋值给另外一个函数变量时,此函数变量指向的是一个Bound Method,以保证对象方法的作用域仍然维持在声明此方法的对象上。
可选参数。在方法声明中,允许参数有默认值,在调用方法时就不用指定该参数了。
在面向对象方面,通过类定义而生成的实例,在AS3中属于Sealed类型,即其属性和方法无法在运行时修改。
在Flash Player API方面增加的功能主要有以下几点:
显示列表API。增加了显示列表API,可以控制包括Shape、Image、TextField、Sprite、MovieClip、Video、SimpleButton、Loader在内的大部分DisplayList渲染单位。其中的Sprite类可以简单理解为没有时间轴的MovieClip,适合用来作为组件等不需要时间轴功能的子类的基础。
DOM3事件模型。与以前的版本相比,事件模型得到统一,使得事件使用更清楚、机制更加有效。
内置正则表达式。增加正则表达式的概念,使得字符串处理更加高效。
ECMAScript for XML(E4X)的支持。E4X的引入,使得处理XML格式的数据更加简便,更加高效。
套接字(Socket)类。增加此类,使得在进行Socket通信的时候,可以读取和写入二进制数据,也使解析底层网络协议(如POP3、SMTP、IMAP、NNTP等)成为可能。
代理(Proxy)类。此类主要替换之前版本的Object._resolve功能。
反射(Reflect)。反射可以扩展ActionScript 3.0应用程序的架构设计。
1.2 开发环境——Flash CS3环境配置
Flash CS3是最常用的一种ActionScript 3.0的开发环境,使用Flash CS3可以在其动作面板中输入ActionScript 3.0的代码,然后编译运行。
1.2.1 安装Flash CS3
Flash CS3是由Adobe公司开发的矢量动画软件。使用前,用户需要购买该软件。
下面以Flash CS3 Professional中文版为例,来讲解Flash CS3安装的具体操作,步骤如下所示。
步骤1 单击安装文件Setup.exe,弹出【正在初始化Adobe Flash CS3】对话框。
步骤2 初始化之后,弹出【许可协议】对话框,如图1.3所示。在图中右上角的下拉列表中,选择协议的显示语言。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0021_0008.jpg?sign=1738890285-gr290d8388Baxu45s1YSGkVJVVUj5MFp-0-2e14141f07ef2379f00b93d60b96682f)
图1.3 【许可协议】对话框
步骤3 单击【接受】按钮,弹出【安装选项】对话框,如图1.4所示。选项列表中有两项,默认是选中的,如果本机已经安装了其中的一个选项,可以把该项前面的选择勾掉。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1738890285-WQT5G2mPsTgXWIOtiUhHcnuHAGygmHLj-0-f63c9bd8ff085caf7d6ddde0d2475fee)
图1.4 【安装选项】对话框
步骤4 单击【下一步】按钮,弹出【安装位置】对话框,在选择框中列出了本地计算机的所有磁盘分区。单击【浏览】按钮,可以选择其他位置,如图1.5所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1738890285-RGDnjeJrZWMj1v9QwebzQIhh1ovEc13K-0-13e7ae2bba1703d7e87dba34c1c2902c)
图1.5 【安装位置】对话框
步骤5 单击【下一步】按钮,弹出【安装摘要】对话框。该对话框中列出了之前的安装选项信息,如图1.6所示。
步骤6 单击【安装】按钮,开始安装Flash CS3。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0023_0001.jpg?sign=1738890285-70uZhBPWiSMlmqRFR4qPaDZTC2mapGOo-0-53931f04c0ebc35fdc78f8df724c80ca)
图1.6 【安装摘要】对话框
步骤7 等待几分钟之后,弹出【安装完成】对话框,单击【完成】按钮,安装结束,如图1.7所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0023_0002.jpg?sign=1738890285-edaQgn3YV9VVt5x7YepWn2UqlQMpKs8z-0-ff78fa80616d6003787f7bed800d7ba5)
图1.7 【安装完成】对话框
步骤8 单击【开始】|【所有程序】|【Adobe Flash CS3 Professional】命令,打开Flash CS3的开发环境。Flash CS3开发环境界面如图1.8所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1738890285-ZnRo1SbKuygwvl1IvwRNWo80bq3YkwIG-0-7e5e01a987e33ae7d0c36b97e4212540)
图1.8 Flash CS3开发环境
1.2.2 配置Flash CS3
在Flash CS3开发环境中,按快捷键【F9】或者单击【窗口】|【动作】命令,会弹出动作面板。在动作面板中可以编写ActionScript的代码,也可以进行调试。动作面板如图1.9所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0024_0003.jpg?sign=1738890285-SV427HGfbkJOgCyKGOqIceYulYwxEYw5-0-f9d89e35b13c77f662be94d2b1b63b32)
图1.9 动作面板
在动作面板的左上方是ActionScript 3.0的动作词典,可以轻松查询到相关类的信息。右边的主界面就是编写代码的区域,编写时还有代码的智能提示。
在主界面的上方是一些功能按钮。其功能按钮的说明如下所示。
:选择需要的类的属性、方法或者事件。
:查找代码中的部分内容。
:插入目标路径。
:检查代码的语法是否正确。
:格式化代码。
:显示代码的智能提示。
:设置和移除断点。
:折叠大括号中的代码块。
:折叠所选的代码块。
:展开所有折叠的代码块。
:多行注释。
:单行注释。
:移除注释。
:显示和隐藏工具栏。
在功能按钮的右边是脚本助手。单击脚本助手按钮,可以打开脚本助手模式。脚本助手模式如图1.10所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0025_0029.jpg?sign=1738890285-kpJr5m1SkSRXwMiOvYhY9J0HE0mta5PI-0-c560555b8a3cc28ca9899ad916cbaeab)
图1.10 脚本助手模式
在脚本助手模式中,不需要手动编写代码,只需要选择相应选项的值,代码就会自动生成。
1.2.3 Flash下的第一个示例
下面是在Flash CS3开发环境中,编写ActionScript 3.0代码的示例,此示例的功能是输出一个字符串。其步骤如下所示:
步骤1 打开Flash CS3开发环境,在创建新项目的列表中,单击【Flash文件(ActionScript3.0)】选项。这样,就打开了开发环境的主界面。
步骤2 按快捷键【F9】或者单击【窗口】|【动作】命令,调出动作面板。
步骤3 在动作面板中,输入代码。代码如下所示。
trace("hello world!");
步骤4 单击上面一系列功能按钮中的检查语法按钮,以检查语法是否正确。
步骤5 按快捷键【Ctrl】+【Enter】或者单击【控制】|【测试影片】命令,测试影片。测试影片的效果如图1.11所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0026_0002.jpg?sign=1738890285-M5BMsuTYw4gHPyRYpFJr17mTrtiF6PV9-0-8a7984ce789b783270d6f0054abe164f)
图1.11 Flash下的第一个示例
1.2.4 Flash下的代码调试
在Flash CS3的动作面板中,可以设置代码行的断点,以跟踪调试代码。
在动作面板中输入以下代码:
var s:String = "hello"; trace(s);
双击第一行,在第一行设置断点,效果如图1.12所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0026_0004.jpg?sign=1738890285-GPl2y3n1O2YNrwtR13XD4mXghj20UhjI-0-20a1e45655b8d1948fb134e9e13dc887)
图1.12 设置断点
单击【调试】|【调试影片】命令,开始调试代码。这样就可以在调试面板监视变量值的变化。
调试面板如图1.13所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1738890285-RTprrBmR59SpAJojG3GFSZtqmXShd4ez-0-3822ef7f1d1c288915073ae1a7f27b33)
图1.13 调试面板
1.3 开发环境——Flex Builder环境搭建
除了Flash CS3开发环境可以编写ActionScript 3.0的代码外,Flex Builder也可以编写ActionScript 3.0的代码。使用Flex Builder 2可以建立一个ActionScript项目,在项目中创建ActionScript 3.0类文件,然后使用Flex Builder 2集成的编译器Flex 2 SDK编译代码。
1.3.1 安装Flex Builder
Flex Builder是由Adobe公司开发的创建Flex应用程序的软件。使用前,用户需要购买该软件。下面以Flex Builder 2英文版为例,讲解Flex Builder安装的具体操作,步骤如下所示:
步骤1 双击安装文件,出现初始化安装对话框。
步骤2 初始化完成之后,弹出【Adobe flex Builder 2 Installer】对话框。Flex Builder的开发是建立在Eclipse基础上的,所以,有两种安装方式。第一种方式是全新安装,即【Flex Builder and Flex SDK】选项。第二种方式是插件安装,即【Flex Builder Plug-in and Flex SDK】选项。默认是全新安装,如图1.14所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1738890285-97xTvGpXt2S1MK8qtppEtdYe4sJHpHBD-0-6d21fdb23e2833b92ad8518744cb7308)
图1.14 【Adobe flex Builder 2 Installer】对话框
步骤3 单击【Next】按钮,弹出【Introduction】对话框,其中列出了关于Flex Builder 2的介绍内容,如图1.15所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0028_0002.jpg?sign=1738890285-RtLSpWDd0mg420It9uBjuWWbmfx1ea4q-0-cab0abf1eb9de010820582868bb14359)
图1.15 【Introduction】对话框
步骤4 单击【Next】按钮,弹出【License Agreement】对话框,其中列出了软件许可协议的内容。最下面是两个选项:同意和不同意,如图1.16所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0028_0003.jpg?sign=1738890285-zya1gdJgSZMUD3QThejjXT9JjSn6kFKM-0-0fe7929e85f9520924dc9901fd64d8cc)
图1.16 【License Agreement】对话框
步骤5 选择同意,单击【Next】按钮,弹出【Choose Install Folder】对话框。单击【Choose】按钮,可以选择安装路径,单击【Restore Default Folder】按钮,可以恢复安装的默认路径,如图1.17所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0029_0001.jpg?sign=1738890285-RV5XlXY4UE9xfhXRv6xCekPVfI1YmznY-0-c652872c81cd57117f375e6a1f417388)
图1.17 【Choose Install Folder】对话框
步骤6 单击【Next】按钮,出现【Flash Player Installation】对话框。其中有两个选项,一个是Flash Player的IE版本,一个是Flash Player的Firefox版本,如图1.18所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0029_0002.jpg?sign=1738890285-WNHE6kvkq7JYMSXXT0ZZ86iVpzi9kBOP-0-b1611c2d13812ef5ce2e99245702bc57)
图1.18 【Flash Player Installation】对话框
步骤7 单击【Next】按钮,弹出【Pre-Installation Summary】对话框。其中列出了安装的目录、插件和安装需要的空间,如图1.19所示。
步骤8 单击【Install】按钮,开始安装。安装完成后,弹出【Install Complete】对话框,如图1.20所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0030_0001.jpg?sign=1738890285-VMTc8p8oHVAcvPROvTTt6cvDsi06z4OM-0-ddaedc9839a8115480a7328712c0d6f1)
图1.19 【Pre-Installation Summary】对话框
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0030_0002.jpg?sign=1738890285-832EVI34Pml3tIZs5N9XrbfXKiKgS05i-0-c632975bb284941080f2f1c35521c0a7)
图1.20 【Install Complete】对话框
步骤9 单击【Done】按钮,关闭【Install Complete】对话框。
步骤10 单击【开始】|【程序】|【Adobe】|【Adobe Flex Builder 2】命令,打开Flex Builder 2的开发环境。第一次启动的时候,会弹出【Flex Builder 2 Activation】对话框,要求输入Flex Builder 2和组件Charts的序列号,如图1.21所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0030_0003.jpg?sign=1738890285-thm2xA89DoeXy1J3H98ZGIhkBm4FPdzS-0-d802d564cecd26500665990cddba5c18)
图1.21 【Flex Builder 2 Activation】对话框
步骤11 输入正确的序列号之后,单击【OK】按钮,就可以看到完整的开发环境界面了。Flex Builder 2的开发环境界面如图1.22所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0031_0001.jpg?sign=1738890285-bBm408PFeNBPrDJSsCaM1EPOdXehlvie-0-45b51ddca2a98038e33eed6267348886)
图1.22 Flex Builder 2开发环境界面
1.3.2 配置Flex Builder
安装完Flex Builder后,可以按照需要进行配置。Flex Builder 2的配置主要包括项目配置和全局配置。
项目配置主要影响到当前项目的设置。单击【Project】|【Properties】命令,弹出【项目属性】对话框,其中的配置信息如下。
Info:可以设置文本的编码。
Builders:配置项目的编译信息。
Flex Applications:可以设置运行的默认文件。
Flex Builder Path:设置源文件的目录和库的目录。
Flex Compiler:设置Flex编译器的参数、Flash Player的版本号等。
Project References:可以引用其他的工程。
全局配置是整个Flex Builder开发环境的配置。单击【Windows】|【Preferences】命令,弹出【属性】对话框,其中的配置信息如下。
General:常用配置,主要配置编辑器和开发环境的信息。
Flex:主要配置调试和编辑器代码。
Help:主要配置帮助文档的显示,以及帮助文档的来源。
Install/Update:配置安装和升级的信息。
Run/Debug:配置运行和调试的信息。
Team:配置团队开发,CVS相关的信息。
1.3.3 Flex下的第一个例子
下面的示例使用Flex Builder 2开发一个简单的应用程序,输出一个字符串。示例的步骤如下所示:
步骤1 新建一个Flex项目。单击【File】|【New】|【Flex Project】命令,弹出【New Flex Project】对话框,如图1.23所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0032_0004.jpg?sign=1738890285-v9UXedYrDbqXBQYaZKTorjTaQnm2MK9y-0-0b447247e1d3c0f63bfce2100b8bf83d)
图1.23 新建ActionScript项目
步骤2 选择默认的选项,单击【Next】按钮,弹出提示输入项目名称等信息的对话框,如图1.24所示,输入项目名称和项目位置。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0032_0005.jpg?sign=1738890285-jAqdgWp5L46rdQw9UCSaIGtXOW0J6gFM-0-b6c800ff8b1ce20c7038c26f6fd888df)
图1.24 提示输入项目名称等信息
步骤3 单击【Next】按钮,弹出【Create a Flex project】对话框,默认即可,如图1.25所示。
步骤4 单击【Finish】按钮,创建项目完成。
步骤5 创建完成后,系统会自动生成相应的文件。其自动产生的目录和文件如图1.26所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0033_0001.jpg?sign=1738890285-y9ktMCnxmcU6ZDIb7EZ7cjbpICYVPP8k-0-b6e6c98665b06e4e93ddd34d3dd7b82c)
图1.25 【Create a Flex project】对话框
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0033_0002.jpg?sign=1738890285-ROZ4wBI7AHapQ74Wydb91YNRA6mKnEav-0-986770fdf3b638b77579442f7ec48f79)
图1.26 项目目录和文件列表
步骤6 打开HelloWorld.mxml文件,输入如下所示代码。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="InitPage();"> <mx:Script> <![CDATA[ import mx.controls.Alert; public function InitPage():void { // 提示框 Alert.show("Hello World!"); } ]]> </mx:Script> </mx:Application>
步骤7 单击【Run】|【Run HelloWorld】命令,编译代码并运行。运行效果如图1.27所示。
![](https://epubservercos.yuewen.com/925030/3590498803475201/epubprivate/OEBPS/Images/figure_0034_0001.jpg?sign=1738890285-TJUDYcPBwr96h0r36eoOScsRxZssvqIK-0-5448924a99707951b7c86b92b5a78e27)
图1.27 运行效果