用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 ） |
ImageViewer 版本2的改动
take2.ImageViewer 类包括ActionScript 2.0的 ImageViewer 类，要做一小点基本设计上的改进，需要让代码比原来的ActionScript 2.0代码更现代些
| 改动 | 描述 |
|---|---|
添加import flash.geom.Rectangle |
ImageViewer 使用Rectangle 图素化图片. |
移除深度（depth）属性imageDepth, maskDepth, and borderDepth |
addChild() 自动处理深度，所以深度类属性不需要了 |
添加border 属性来包括边框形状 |
可视元件建立时，可以独立管理，然后有需要时继承。不必永久性插入一个可视元件继承到Movie Clip层. |
添加 w 和h 属性 |
在这个版本的ImageViewer 里尺寸和位置可以处理了，而不是在ImageViewerDeluxe 子类.添加这些属性是对ImageViewer API 总的的清理(和ActionScript 3.0 特色无关). |
添加默认的构造函数参数值(x:Number = 0, 等) |
当参数（args ）错误号被提供时ActionScript 3.0会抛出错误 。默认值让外部代码调用构造函数而不用参数，这样可以让本版本的代码被老版本的代码（第一个版本）使用。 |
添加setPosition() 和setSize() 方式 |
这是对ImageViewer API 总的的清理(和ActionScript 3.0 特色无关). |
buildViewer 不再接受x, y, w, 和h 参数 |
建立，位置，修改大小现在是独立的任务.这是对ImageViewer API 总的的清理(和ActionScript 3.0 特色无关). |
移除 createMainContainer() |
图片容器（container ）现在是ImageViewer 类自身 (因为e ImageViewer 继承自Sprite). |
修改createImageClip() 为createLoader() |
Loader 用来替代MovieClip. |
移除createImageClipMask() |
在ActionScript 3.0里, scrollRect 可以图素化一个显示对象,所以不需要分隔的遮罩图素.（ 当ImageViewer 被画时(通过 draw().scrollRect() 就设好了） |
createBorder() 不再绘制边框 |
这是对ImageViewer API 总的的清理(和ActionScript 3.0 特色无关). |
添加draw() 方式 |
图象获取和边框的绘制现在在 draw() 里，draw() 被 setSize() 调用且任何时候被看到时都要更新。 |
移除setMask 从 loadImage() |
在被加载的内容到达前 scrollRect 可以被放置在 Loader |
ImageViewer 版本3的改动
take3.ImageViewer 添加了预加载的支持
| 改动 | 描述 |
|---|---|
改动createTextField() 调用为loadStatus_txt = new TextField(); |
|
设置autoSize 为 extFieldAutoSize.LEFT 使用常量取代字符串 'left' |
许多字符串值现在存为常量从而能够进行类型检查 |
修改MovieClipLoader 事件句柄等同于Loader |
注意本闭包方式允许当维持被定义对象的引用时传递一个函数到addEventListener() |
ImageViewer 版本4的改动
ActionScript 3.0 第4个版的ImageViewer 是一个与ActionScript 2.0 不同的版本，他使用新的一种方式来添加视图元件的拖放函数。
网站导航：（教案、试题、课件请在这里查找）
