站内搜索:     
站点首页破釜学院网页制作FlashAction应用 → 用ActionScript 3.0建立视图元件
正在加载相关信息.....
Web 站内搜索
用ActionScript 3.0建立视图元件
】【打印】【加入收藏】【关闭收藏到新浪ViVi】【收藏到365KEY】 浏览字号:
日期:2006-07-17 人气: 出处:闪吧 作者: Colin Moock

随着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目录的纲要.

表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加载范例,跟着我做:

  1. 解压 Moock-eas3-imageviewer.zip 到你选择好的文件夹目录.
  2. 打开Flex Builder 2.0选择File > Import. 这将开启对话框
  3. 在选择mport source弹出菜单里,选Existing Projects into Workspace.
  4. 选择解压出的目录根(Root)为第一步里选的目录.
  5. 单击Finish.

要运行范例,跟着我做:

  1. 在Flex Builder 2导航面板, ImageViewerDemos 项目下面, 选择你想运行的项目(Take1PortDemo.as, Take1RewriteDemo.as, Take2Demo.as, Take3Demo.as, or Take4Demo.as).
  2. 单击工具条的按钮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 类.

表2.  take1port.ImageViewer 类改动
改动 描述
添加包(packages )声明 所有的类现在在包(packages)里了.
添加 import 声明 在Flash Player API 里类必须先imported然后才能使用.
添加public 对类修饰 类现在有可视性了.
更改构造函数的参数深度(depth parameters)的数据类型从Numberint int 允许整数 (32-位); 当浮点输入时抛出错误,这样也能提高性能。
修改container_mc propertyimgLoader 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的机能,需要让代码更现代些.

表3. take1rewrite.ImageViewer 类的改动
改动 描述
修改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代码更现代些

表4. take2.ImageViewer 类改动
改动 描述
添加import flash.geom.Rectangle ImageViewer 使用Rectangle 图素化图片.
移除深度(depth)属性imageDepth, maskDepth, and borderDepth addChild() 自动处理深度,所以深度类属性不需要了
添加border 属性来包括边框形状 可视元件建立时,可以独立管理,然后有需要时继承。不必永久性插入一个可视元件继承到Movie Clip层.
添加 wh 属性 在这个版本的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 添加了预加载的支持

表5. take3.ImageViewer 类的改动
改动 描述
改动createTextField() 调用为loadStatus_txt = new TextField();

TextField 用例现在被 new建立

设置autoSize 为 extFieldAutoSize.LEFT 
使用常量取代字符串 "left"
许多字符串值现在存为常量从而能够进行类型检查
修改MovieClipLoader 事件句柄等同于Loader 注意本闭包方式允许当维持被定义对象的引用时传递一个函数到addEventListener()

ImageViewer 版本4的改动

ActionScript 3.0 第4个版的ImageViewer 是一个与ActionScript 2.0 不同的版本,他使用新的一种方式来添加视图元件的拖放函数。

 

接着该去干什么

本文已经撇去了对ActionScript 3.0中什么是新的介绍.要了解更多的,请阅读 ActionScript 3.0 总概 和访问 ActionScript 技术中心.

要更多的范例和文章,请浏览 开发者中心blog aggregator. 并且锁定我的下本书, Essential ActionScript 3.0!

关于作者

Colin Moock 是一个充满激情和创意的独立网页设计师。他是为FLASH编程指南的ActionScript for Flash MX: The Definitive Guide (O'Reilly & Associates, 2003, 2001) 和 Essential ActionScript 2.0 (O'Reilly Media, Inc., 2004)全世界著名的作者
自从1995以网络职业化以来, Moock 维护着网络上最有价值的FALSH开发者网站, www.moock.org. Colin花了大部分时间来探索用Unity来开发多媒体应用程序, moock.org's 完善的商业化框架来配布Macromedia Flash.的多媒体应用程序
 
译者网站:http://hexun.com/QuantumFlash/default.html
关于翻译中的可能出现的问题欢迎交流讨论

>>>> 进入论坛交流 <<<<