减小字体
增大字体- ·上一篇教程：AS3.0教程(4):爽快使用XML
- ·下一篇教程：蓝色人物绘制教程
用ActionScript 3.0建立视图元件
随着2003年Macromedia Flash MX 2004 的发布，ActionScript 2.0成为第一个在FLASH领域支持面向对象编程（OOP）语法的脚本语言. ActionScript 2.0 在FLASH 编程领域有显著的地位，但仍缺少程序员们期待的一些功能，这些功能在其他面向对象编程语言（C++，JAVA等）里很有用。 所有这些将随着ActionScript 3.0的出现而改变,ActionScript 3.0意味着对核心语言的了大幅度改进，同时对Flash Player API也作了几乎无保留性的修改.
年代在变， ActionScript 3.0 代表了有史来对FLASH编程几乎是最实质的改进.运行效率更高,很多特色, 容易使用,简洁, 还有ActionScript的混合代码可以方便的被布置（译者注：这里指代码界面分离的Document Class）.本文里我给出4个ActionScript版本的范例，来简单的演示视图元件的加载(Load),显示(Display), 获取(Crop)和添加边框在图象外围。在我的书Essential ActionScript 2.0里有介绍相关代码.本范例阐述了如何把代码转移到ActionScript 3.0上.
需求环境
开始前，你要安装这些软件或下载如下文件：
Flex Builder 2 (SDK Included)
Free Flex 2 SDK (Included with Flex Builder 2)
范例文件:
需要知识:
对 ActionScript 2.0和面向对象编程（OOP）比较熟悉
安装范例：
我已经为我将要出版的书建立好了所有的范例代码，暂时取名为Essential ActionScript 3.0, 使用Flex Builder 2这个ADOBE的新工具来开发ActionScript和Flex应用. 如果你希望运行本文的范例代码，你需要安装Flex Builder 2或免费版的Flex SDK.当然如果你只是好奇的想看下代码，你可以不用装Flex Bulider 2就拖动类(Class)文件到任何文本编辑软件里。
注意：本范例只用来演示，没有详细的每行注释来解释为何他们能运行。当然有意思的地方都适当的给了解释。
下载并解压缩范例文件。支持Action Script 2.0的文件代码在我的站点（http://www.moock.org/eas2/examples/）。moock_eas3_imageviewer.zip 这个文件包括2个目录: eas3_imageviewer 和 eas3_imageviewer_demos。你将在eas3_imageviewer文件夹下找到不同版本ImageViewer类的源代码。示例程序中使用的ImageViewer类在eas3_imageviewer_demos目录里. 表1 给出了eas3_imageviewer目录的纲要.
| 组件 | 描述 |
|---|---|
| /.settings/ | 被Flex Builder 2.0用来项目管理 |
| /bin/ | 项目输出（HTML文件，SWF文件） |
| /docs/ | 一些范例的解释 |
| /take1port/ | 第一个转换ImageViewer类为符合Action Script 3.0代码的版本。 （用Essential ActionScript 2.0这本书里的ActionScript 2.0的ImageViewer类作尽可能少的修改） |
| /take2/ | 第二个转换ImageViewer类为符合Action Script 3.0代码的版本。 |
| /take3/ | 第三个转换ImageViewer类为符合Action Script 3.0代码的版本。 |
| /take4/ | 第四个转换ImageViewer类和DragManager 类为符合Action Script 3.0代码的版本。 |
| .actionscriptProperties | 被Flex Builder 2.0用来项目管理 |
| .project | 被Flex Builder 2.0用来项目管理 |
在Flex Builder 2加载范例,跟着我做:
- 解压 Moock-eas3-imageviewer.zip 到你选择好的文件夹目录.
- 打开Flex Builder 2.0选择File > Import. 这将开启对话框
- 在选择mport source弹出菜单里，选Existing Projects into Workspace.
- 选择解压出的目录根（Root）为第一步里选的目录.
- 单击Finish.
要运行范例，跟着我做:
- 在Flex Builder 2导航面板, ImageViewerDemos 项目下面, 选择你想运行的项目(Take1PortDemo.as, Take1RewriteDemo.as, Take2Demo.as, Take3Demo.as, or Take4Demo.as).
- 单击工具条的按钮Run(一个白箭头外有绿圆圈).
从ActionScript 2.0 转移到 ActionScript 3.0
从ActionScript 2.0 的代码升级到ActionScript 3.0将导致对源代码一些改变。典型的情况是要稍微改动ActionScript 2.0程序代码来让它成功编译为ActionScript 3.0 的程序。当然代码本质上的修改可能会出现在利用新Flash Player API的这种情况。下面的几节描述了涉及到修改ImageViewer 各个不同版本到ActionScript 3.0的方法。
take1port的修改
take1port.ImageViewer 类包括ActionScript 2.0的 ImageViewer 类，最少需要修改使它通过编译且运行为ActionScript 3.0 类.
| 改动 | 描述 |
|---|---|
| 添加包（packages ）声明 | 所有的类现在在包（packages）里了. |
| 添加 import 声明 | 在Flash Player API 里类必须先imported然后才能使用. |
添加public 对类修饰 | 类现在有可视性了. |
更改构造函数的参数深度(depth parameters)的数据类型从Number 到int | int 允许整数 (32-位); 当浮点输入时抛出错误，这样也能提高性能。 |
修改container_mc property 为imgLoader | Loader 取代MovieClip 用来加载图片,因此需要修改名字和类型. |
替换target.createEmptyMovieClip() 为两个: new Loader() and target.addChildAt() | 所有对象在通过 new ClassName() 建立比通过 createEmptyMovieClip() 和createTextField()等要好; 对象添加到显示列表通过addChild() 或addChildAt(). |
替换loadMovie(URL) 为Loader.load(URLRequest(URL)) | 现在加载更加智能化了.所有的图形和SWF文件通过Loader加载.所有其他数据加载通过URLLoader. |
take1rewrite的修改
take1rewrite.ImageViewer 类包括ActionScript 2.0的 ImageViewer 类，要让它彻底利用新Flash Player 9 API的机能，需要让代码更现代些.
| 改动 | 描述 |
|---|---|
修改import flash.display.MovieClip 为 import flash.display.Sprite | MovieClip 不再需要.这个版本使用Sprite, Sprite比MovieClip 更简单的(像没有时间轴的图素). |
| 添加ImageViewer 为继承自Sprite | 作为 Sprite 子类, ImageViewer 的用例可以被直接添加到显示列表. |
| 从构造函数中移除目标（target）,参数深度( depth parameters ) | ImageViewer 现在是一个独立的显示对象,不依赖任何特定父类.外部代码可以添加他进入或从其他显示对象里移除他. 对象的Reparenting 添加了灵活性 |
修改target.addChildAt(imgLoader) 为addChild(imgLoader) | imgLoader 现在是 ImageViewer的一个子类,而非一个对象。这帮助整个包（package）独立, 而不是由几个外部显示对象组成。深度（Depth ）已经移除了，不在与其他相关了. 外部代码将添加ImageViewer 到所需要的深度（Depth ） |
