翻译：使用ActionScript 3加载图片和库资源

http://www.riameeting.com/node/943

原文地址：http://www.adobe.com/devnet/flash/quickstart/loading_images_library_as3.html

这个快速入门描述了您可以使用的几种策略，这些策略利用ActionScript 3来动态加载来自于您的资源库以及本地和远程位置的图片和资源。当您使用ActionScript时，您可以完全控制运行时这些资源什么时候以及如何展现，并且您还可以使用脚本来决定哪些图片资源是通过编码方式载入的。换句话说，您可以使用ActionScript将图片添加到时间轴或显示容器中，然后使用代码和事件处理器动态地改变它们的显示。

注：在Flash Professional创作环境中工作时，您可以从资源库中拖拽图片实例到舞台中，并让它们出现在输出的SWF文件中。当您使用ActionScript添加图片时，您实际上是将图片添加到了一个时间轴实例中。具体来说，帧是时间轴的一部分，您可以使用Actions（动作）面板将ActionScript代码与帧关联。这样时间轴会成为使用ActionScript添加的显示对象的父容器，除非另一个显示对象容器被指定（正如本文后续部分中所描述的那样）。

此快速入门文章解释了如何添加您的资源库中的已有资源，以及如何使用ActionScript 3从您的硬盘中的一个本地文件夹或者一个远程URL加载资源。

添加一个影片剪辑到当前时间轴
所有的显示项目(图像、影片剪辑和其它SWF文件)都必须被添加到我们在ActionScript文档中称为“显示列表”的对象中，以使得它们能够出现在SWF输出文件中。从根本上说，显示列表是能够在运行时显示给用户的项目的一个层次结构，这个层次结构有助于确定显示项目之间的关系。在ActionScript中，您可以使用addChild()命令将一个显示项目添加到显示列表中。您也可以对当前时间轴或者另一个目标实例的时间轴使用addChild()。此外，您还可以对一个显示容器使用addChild()，这个显示容器本质上成为了一个“父”显示对象。您对一个显示容器所作的改变，例如重新设置它的位置，同样也会改变容器内的“子”对象的显示。

注：Stage类是DisplayObjctContainer的子类，但是我们不推荐在您的脚本中使用Stage.addChild()语法。最好的实现方式是使用addChild()或者DisplayObjectContainer.addChild()将项目添加到显示列表中，以便对您的显示对象进行灵活的和可预见性的管理。

示例
下面这个来自于bee.fla的例子从资源库中获取了一个名为bumblebee的影片剪辑，并在当前时间轴创建了一个它的实例：

1.打开bee.fla并选择Control（控制）> Test Movie（测试影片）来查看显示出来的蜜蜂动画。
2.如果您想在自己的文件中重新创建其中的功能，您需要创建一个新的Flash文件(ActionScript 3)并将该文件保存在您的硬盘中。
3.在这个时候，您可以选择从bee.fla中复制现有的bumblebee影片剪辑，或在资源库中创建您自己的"bumblebee"影片剪辑。
4.要在资源库中创建一个全新的影片剪辑，您需要选择您在第2步中所创建的FLASH文件的资源库，然后选择Insert（插入） > New Symbol（新符号），或者使用键盘快捷键Ctrl + F8(Windows) 或 Command + F8(Mac OS)。在出现的Create New Symbol（创建新符号）对话框中，输入如下信息：
Name（名称）: bumblebee

Type（类型）: Movie Clip





5.点击这个Export for ActionScript选项旁边的复选框，然后点击OK按钮。Flash CS4会显示一条警告信息，提示您它会自动为这个影片剪辑创建一个类，除非您之前已经在首选项中设置了不显示此信息。




6.点击OK按钮来关闭这个消息窗口。
注：一个ActionScript类是完成当前任务所必需的，所以这是我们所期望的行为。然而，Flash Professional自动生成的类是不能被编辑的，它们仅供Flash创作工具在发布SWF文件时使用，理解这一点是非常重要的。

7.请根据您自己的喜好来对这个bumblebee影片剪辑进行设计；如果仅仅是为了达到这篇快速入门文章的目的，即使是画一个简单的形状也是可以的。 在您将图形内容添加到bumblebee影片剪辑之后，点击场景1链接返回到主时间轴。
8.选择时间轴的第一帧，然后按F9键(Windows)或Option+F9键(Mac OS)来打开Actions（动作）面板。 将如下代码添加到Script（脚本）窗口中：

var mybee:bumblebee = new bumblebee();  addChild(mybee);

9.选择Control（控制）> Test Movie（测试影片）或者按下Ctrl+Enter键(Windows)或Command+Return键(Mac OS)来测试影片。
结果


要下载源文件和所有的例子，请下载本页面顶部的loading_images_library.zip示例文件。 Flash Professional CS5版本的FLA文件的文件名是以"_CS5"结尾的。 在第8步中显示的代码示例中，第一行使用var语句来为bumblebee影片剪辑实例指定一个名称。第二行使用addChild()命令将实例mybee添加到显示列表中。当没有指定显示容器时(如上面的例子所示)，影片剪辑实例会被添加到当前帧的时间轴。

也就是说，在添加影片剪辑时您有两种选择：

1.addChild (mybee)：添加名为mybee的影片剪辑实例到时间轴的当前帧。
2.yContainer.addChild(mybee)：将影片剪辑实例添加到DisplayObjectContainer类的myContainer对象实例中。在使用addChild()将myContainer添加到显示列表中之前，影片剪辑mybee是不会被添加到显示列表中的。这种实现方式的例子将会在本文的下一节中给出。
高级示例
现在您已经将影片剪辑实例添加到了时间轴上，接下来您可以使用ActionScript来指定它的属性甚至创建动态内容。请参考我们提供的movingbee.fla文件，该文件实现了一只大黄蜂跟随用户鼠标进行移动的例子。这个movingbee.fla文件使用了事件处理和函数语句。通过打开Actions（动作）面板，可以在Script（脚本）窗口中查看这些代码。您可以阅读Flash Professional在线文档中的ActionScript 3.0 Developer's Guide （ActionScript 3.0开发者指南）或者查看Event handling in ActionScript 3（ActionScript 3中的事件处理）来了解更多有关编写事件处理器和函数的信息。


下面的例子显示了一个影片剪辑的拖拽和释放。使用您的鼠标拖拽蜜蜂；当您释放鼠标时，蜜蜂就会停止跟随鼠标指针。请参考我们所提供的drag_and_drop_bee.fla文件以获得ActionScript代码。打开Actions（动作）面板，在Script（脚本）窗口中可以查看这些代码。


要下载源文件和所有的例子，请下载本页面顶部的loading_images_library.zip示例文件。 Flash Professional CS5版本的FLA文件的文件名是以"_CS5"结尾的。

添加一个影片剪辑到一个容器
DisplayObjectContainer对象（和继承自DisplayObjectContainer类的类所创建的对象）可以包含零个或多个显示项目。 当您移动该容器时，容器对象中的所有显示项目都会随着该容器进行相应的移动。

示例
在我们所提供的beeContainer.fla示例文件中，bumblebee影片剪辑实例myBee是一个名为mySprite的Sprite对象的子元素。您可以使用一个Sprite对象作为一个显示容器，因为Sprite类继承自DisplayObjectContainer类。

请下载并打开beeContainer.fla文件来查看第1帧的代码示例：

var myBee:bumblebee = new bumblebee(); 
//创建一个能够作为myBee的容器的显示对象 
var mySprite:Sprite = new Sprite();
//将myBee添加为mySprite的一个子对象  
mySprite.addChild(myBee); 
//将mySprite添加到显示列表中 
addChild(mySprite);   
stage.addEventListener(MouseEvent.CLICK, clickhandler);
//在一次鼠标点击后移动mySprite容器 
function clickhandler(e:MouseEvent):void 
{
	mySprite.x = 100;
	mySprite.y = 100; 
} 

注：请记得将显示对象容器添加到显示列表中。在上面的例子中，显示对象容器是通过下面这行代码被添加到显示列表中的：

addChild(mySprite);

这个提醒在一个简单的例子中看来似乎是显而易见的，但是您创建的显示对象和显示对象容器越多，这个步骤就越容易被忘记。 如果您在测试您的SWF文件时在显示对象的显示方面遇到了问题，请检查并确认您已经将正确的显示对象容器添加到了显示列表中。

请按照以下步骤将bumblebee影片剪辑添加到一个容器中：

1.创建一个新的Flash文件(ActionScript 3)，同时保持beeContainer.fla文件是打开的。
2.使用资源库中的弹出式菜单来选择beeContainer.fla库。
3.将bumblebee影片剪辑从资源库中拖拽到舞台上。
4.将资源库中的弹出式菜单设置回您的新文件的库，并且请注意bumblebee影片剪辑(以及相关的资源)现在已经显示在当前文件的库中了。
5.从舞台中删除bumblebee影片剪辑。
6.选择时间轴的第1帧。复制并粘贴上面显示的脚本到Script（脚本）窗口中。将图层1重命名为Actions。
7.可选操作：创建一个新图层，并将它拖拽到Actions图层的下方。重命名图层2为Text。当Text图层的第1帧被选中时，使用Text工具在舞台上输入如下内容：Click to move mySprite, the movie clip container, to position (100, 100).
8.通过选择Control（控制） > Test Movie（测试影片）或者按下Ctrl+Enter键(Windows)或者Command+Return键(Mac OS)来测试影片。
结果


要下载源文件和所有的例子，请下载本页面顶部的loading_images_library.zip示例文件。 Flash Professional CS5版本的FLA文件的文件名是以"_CS5"结尾的。

Flash Player播放SWF文件。 默认情况下，bumblebee影片剪辑会被显示在舞台的左上角。 代码中的一个事件监听器被设置用来对鼠标点击作出响应，所以当您点击舞台上的任何地方时，bumblebee影片剪辑的注册点都将被重新定位到距离舞台顶部100个像素和距离舞台左边100个像素的位置。

从资源库中添加一张图片到时间轴中
Flash Professional CS4将资源库中的图片视为BtimapData对象，这意味着动态创建图片实例比影片剪辑实例更需要技巧。顾名思义，一个BitmapData对象包含了一个位图中的每个像素的信息 – 也就是生成一个位图图片的数据。然而，BitmapData类的实例不是显示对象(请参见flash.display.BitmapData来获得更多信息)，并且BtimapData类也不是从DisplayObject类继承来的。您不能将一个BitmapData对象添加到显示列表中。所以，为了将一个资源库中的图片实例放置到时间轴中，首先您需要创建一个Bitmap对象(请参见flash.display.Bixtmap文档)。Bitmap对象是继承自DisplayObject类的，您可以用它们来引用BitmapData对象的信息。Bitmap对象是显示对象，它可以引用BitmapData对象的图片数据，并且bitmap对象可以被添加到显示列表中。

也就是说，关键点如下：

1.Flash Professional资源库中的图片是BitmapData对象
2.BitmapData对象不能被添加到显示列表中
3.Bitmap对象可以被添加到显示列表中，并且可以引用BitmapData对象的信息
4.您可以创建一个Bitmap对象来包含来自于BitmapData实例的数据
5.您可以将Bitmap对象添加到显示列表中
示例
下面的例子描述了一个资源库中的位图图片如何被添加到显示列表中。 addbee.fla示例文件对这个例子进行了说明。

将一张图片作为单一的平面位图导入到资源库中(您可以使用buzz.png)。
注：当您导入PNG文件时，一个名为Symbol 1的图形符号将被自动添加到资源库中。

1.右键单击（或按住Control键单击）这个图片，并且从上下文菜单中选择Properties（属性）菜单项。
2.单击复选框，选中Export for ActionScript（输出为ActionScript）和Export in Frame 1（输出到第一帧）选项。
3.使用类名myBitmapData代替Class（类）文本框中的内容，而不是buzz.png。（保留默认的基类名称，它已经被正确地预先填写为flash.display.BitmapData。）




4.点击OK按钮。正如预期的那样，Flash Professional将会显示一条信息，提示它会自动生成myBitmapData类。 这一步是完成任务所必需的。 再次点击OK按钮关闭消息窗口。
5.选择主时间轴中的第1帧，然后打开Actions（动作）面板。 添加以下ActionScript代码到Script（脚本）窗口中：

// myBitmapData是资源库中的BitmapData符号的类名。
//创建一个名为myBitmapDataObject的新的myBitmapData对象实例: 
var myBitmapDataObject:myBitmapData = new myBitmapData(100, 100);
// 创建一个名为myImage的位图对象实例来包含位图数据: 
var myImage:Bitmap = new Bitmap(myBitmapDataObject); 
// 将myImage添加到当前时间轴的显示列表中
addChild(myImage);

通过选择Control（控制） > Test Movie（测试影片）或者按Ctrl + Enter键(Windows)或Command+Return键(Mac OS)来测试影片。
注：在Flash Professional CS4中，您需要在ActionScript中提供位图图片的宽度和高度，即使它已经在库资源中被进行了设置。奇怪的是，虽然要求提供这些值，Flash Professional CS4还是会忽略它们。如果您尝试在新的BitmapData(width, height)语句中改变宽度和高度值，Flash Professional CS4会忽略它们并保持原来的尺寸。位图图片的尺寸是由资源库中的图片决定的，并且舞台上实例的尺寸是基于资源库中的图片的实际尺寸的。Flash Professional CS5不会要求您提供宽度和高度值。

结果





要下载源文件和所有的例子，请下载本页面顶部的loading_images_library.zip示例文件。 Flash Professional CS5版本的FLA文件的文件名是以"_CS5"结尾的。

Flash Player会播放这个SWF文件，在默认情况下，bumblebee.png位图图片会显示在舞台的左上角。 当您发布SWF文件时，Flash Professional会自动为BitmapData对象创建一个类。 正如前面所提到的，由Flash Professional生成的类是不可编辑的，并且仅供Flash Professional在发布SWF文件时使用。

此外，请记住，通过编写略有不同的代码可以通过多种方式来达到同样的目标。 如果您愿意，您可以选择编写更简洁的ActionScript代码。 例如，前面的代码示例中包含了一些清晰定义的步骤，这些步骤可以被简化为以下的单行语句：

addChild(new Bitmap(new myBitmapData(100, 100))); 

从一个外部文件加载一个图片
外部图片(例如存在于您的本地机器中或者已经被上传到一个远程域中的图片文件)是被作为BitmapData对象实例直接引用的。 正如前面所提到的，您不能将一个BitmapData对象实例添加到显示列表中，因此您需要创建一个显示对象(一个继承自DisplayObject类的类的实例)来引用位图数据。 然后将这个显示对象添加到显示列表中。

上一小节中描述了如何使用Bitmap对象实例来引用位图数据，以及如何将Bitmap对象实例添加到显示列表中。为了引用存在于当前文档的资源库之外的图片文件，首先您要创建一个新的Loader对象实例。Loader类非常有用，因为他继承自DisplayObject类(请参见flash.display.Loader)，您可以将Loader对象实例添加到显示列表中。

示例
下面的例子展示了如何利用一个Loader实例将本地文件系统中的一个图片添加到显示列表中。 addFlowersLoaer.fla示例文件对这个例子进行了说明。

请下载addFlowersLoader.fla文件，打开它，然后在Script（脚本）窗口中查看时间轴的第1帧的代码：

//创建一个Loader实例 
 var myImageLoader:Loader = new  Loader(); 
 //创建一个URLRequest实例来指定图片源  
var myImageLocation:URLRequest = new  URLRequest("flowers.jpg");  
 // 从Loader实例中的图片源载入位图数据
  myImageLoader.load(myImageLocation); 
 // 将Loader实例添加到显示列表中
 addChild(myImageLoader); 

现在，请执行下列步骤：

1.创建一个新的Flash文件（ActionScript 3）并且将其保存在一个名为loader的文件夹中。
2.请下载这个例子的示例文件，并且将flowers.jpg图片的副本存放在FLA文件所在的loader文件夹中。（您可以使用自己的JPEG图片，但是这个图片必须被命名为flowers.jpg，并且与Flash文件放在同一文件夹中。）
3.选择时间轴的第1帧，然后将以上示例代码复制到Script（脚本）窗口中。
4.通过选择Control（控制） > Test Movie（测试影片）或者按Ctrl + Enter键(Windows)或Command+Return键(Mac OS)来测试影片。
结果



要下载源文件和所有的例子，请下载本页面顶部的loading_images_library.zip示例文件。 Flash Professional CS5版本的FLA文件的文件名是以"_CS5"结尾的。

当Flash Player播放SWF文件时，位图图片flowers.jpg被默认显示在舞台上。 由于ActionScript正在加载一个外部图片文件，该图片的文件名和文件位置与新的URLRequest对象的参数所提供的路径相匹配是非常重要的，下面这行代码指定了这个新的URLRequest对象：

注：您还可以把这个外部文件放在包含Flash文件的目录的子文件夹内。下面的代码将会加载存在于名为images的子文件夹中的flowers.jpg文件：

var myImageLocation:URLRequest = new URLRequest("images/flowers.jpg"); 

理解Loader、Bitmap和BitmapData对象之间的关系
前面的例子是比较简单和基本的(每次您需要加载一个外部图片时，您可以继续创建新的Loader对象实例)，您还可以采用其它一些更健壮的策略。 创建更加灵活和高效的Loader对象要求对加载过程有比较透彻的了解。

在Loader对象实例中，被引用图片的位图数据存放在一个Bitmap对象中。 Loader对象将图片作为位图数据进行加载，但随后会将数据存放在一个Bitmap对象中(再次说明，一个Bitmap对象会引用一个BitmapData对象)。 Bitmap对象实例是Loader对象实例的内容(子元素)。 这个结构的层次看起来像是这样的：Loader对象 > Bitmap对象 > BitmapData对象。

Loader对象现在是图片数据的主要显示对象。被引用图片的信息，例如它的URL或者它加载时使用的任何查询变量，可以使用ActionScript通过Loader对象的contentLoaderInfo属性获取。

注：在flash.display.LoaderInfo.init事件被派发之前，图片的宽度和高度等属性是不能被已载入的图片或正在加载图片的loader对象访问的。如果您尝试在addChild()语句之后去获取或者设置宽度或者高度值，您将会获得0值(属性设置不会起作用)，因为从本地或者远程文件系统读取文件需要一定的时间。所以，请在LoaderInfo.init或者LoaderInfo.complete事件处理器中为已载入的图片设置属性。

下面的例子比前面的例子要复杂得多，但是它表明位图数据是包含在一个Bitmap对象实例中的图片数据（而不是一个图片本身的实例）。 而且，它也表明Bitmap对象实例是Loader对象实例的子对象。 这个示例使用一个单一的Loader对象实例来引用单一图片的位图数据，然后重用这个图片数据在舞台上创建多个Bitmap对象实例。 因此，您可以独立操作每个Bitmap对象实例，并获得更多控制。

注：BitmapData对象实例的改变，例如使用类似BitmapData.setPixel()或者BitmapData.draw()等方法所引起的改变，会反映在每个引用BitmapData对象实例的Bitmap对象实例中。

这个例子简单地对外部图片进行了一次调用。 在数据初始载入之后，Flash Player可以多次重用图片数据。 对图片文件的单一调用比多次调用更加有效，并且这个方法在创建更为复杂的需要重复使用同一个图片文件的Flash应用程序时尤其有用。 下面的示例可以创建多个Loader对象实例以及独立操作每个Loader对象实例，这个例子的目的是演示如何利用Loader、Bitmap和BitmapData之间的关系来节省内存和加载时间。

具体来说，下面的例子定义了一些用于所提供的代码中的函数的变量。并且为LoaderInfo.complete事件建立了一个监听器。ldr.load()语句一次性地载入了一个外部图片的位图数据(flowers.jpg)并保存在Loader对象实例中。当load方法完成图片数据的载入后，Loader对象实例会自动创建一个内部的Bitmap对象来存储和显示已载入的位图数据，并将位图信息保存在它自己的ldr.content属性中。然而，这个content属性具有DisplayObject的数据类型，因为一个Loader对象可以载入图片和SWF文件。因此，下面的例子使用一个as操作符来保存图片数据到一个自定义的Bitmap数据类型的bmp变量中。然后，位图数据被用来显示五个独立的Bitmap对象实例，来构成一个立方体的每个面(除了前面)。

示例
bee_in_a_box.fla示例文件对这个例子进行了说明。 请下载bee_in_a_box.fla并打开该文件。 查看位于时间轴第1帧的代码：

// 为外部图片文件名创建一个变量
var IMAGE_URL:String=new String("flowers.jpg");
// 创建一个loader对象来载入图片数据 
var ldr:Loader = new Loader();
// 为每个添加到显示列表的图片实例创建变量，这些图片将形成一个立方体，我们需要5个实例，分别用来作为立方体的各个侧面，除了前面： 
var bitmap1:Bitmap;
var bitmap2:Bitmap;
var bitmap3:Bitmap;
var bitmap4:Bitmap;
var bitmap5:Bitmap;
// 创建一个变量来将bumblebee影片剪辑保存在资源库中。资源库中的影片剪辑被设置为  export for  ActionScript（导出为ActionScript）
var mybee:bumblebee = new bumblebee();
// 建立一个事件监听器用来在图片数据完全载入之后创建舞台上的图片实例    
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, addSides);
// 从图片文件载入图片数据   
ldr.load(new URLRequest(IMAGE_URL));
// 在COMPLETE 事件被发送之后, 开始创建舞台中已导入的图片实例 
function addSides(evt:Event):void {
	// 使用as操作符将loader数据传输给一个Bitmap对象   
	var bmp:Bitmap=ldr.content as Bitmap;
	// 创建一个位图实例
	bitmap1=new Bitmap(bmp.bitmapData);
	// 旋转该实例来创建3D效果   
	bitmap1.rotationX=90;
	// 将该实例添加到显示列表中    
	addChild(bitmap1);
	bitmap2=new Bitmap(bmp.bitmapData);
	bitmap2.z=400;
	bitmap2.rotationY=90;
	addChild(bitmap2);
	bitmap3=new Bitmap(bmp.bitmapData);
	bitmap3.z=400;
	addChild(bitmap3);
	bitmap4=new Bitmap(bmp.bitmapData);
	bitmap4.z=0;
	bitmap4.x=400;
	bitmap4.rotationY=270;
	addChild(bitmap4);
	bitmap5=new Bitmap(bmp.bitmapData);
	bitmap5.y=400;
	bitmap5.z=400;
	bitmap5.rotationX=270;
	addChild(bitmap5);
	// 现在立方体的侧面完成了，需要添加bumblebee影片剪辑了，请您在立方体侧面完成之后再添加bumblebee影片剪辑，这样它会显示在立方体的前面    
	addBee();
}
// 这个函数将bumblebee影片剪辑的实例从资源库中添加到显示列表中。   
function addBee():void {
	mybee.x=100;
	mybee.y=100;
	addChild(mybee);
}

通过选择Control(控制) > Test Movie(测试影片)来测试影片。 或按Ctrl + Enter键（Windows）或Command+Return键（Mac OS）来运行SWF文件。

现在，请执行下列步骤：

1.创建一个新的Flash Professional文件（ActionScript3），然后将其保存在包含名为flowers.jpg的位图图片的文件夹中。
2.使用Library弹出式菜单选择bee_in_a_box.fla库。 将bumblebee影片剪辑拖拽到舞台上。 然后，重新设置弹出式菜单以显示当前文件的资源库(请注意bumblebee影片剪辑和相关的资源现在已经在当前文件的资源库的列表中被显示出来了)。 删除舞台上的bumblebee影片剪辑。
3.选择时间轴的第1帧，并且复制前面的代码示例到Script（脚本）窗口中。
4.通过选择Control（控制） > Test Movie（测试影片）或者按Ctrl + Enter键(Windows)或Command+Return键(Mac OS)来测试影片。
结果





要下载源文件和所有的例子，请下载本页面顶部的loading_images_library.zip示例文件。 Flash Professional CS5版本的FLA文件的文件名是以"_CS5"结尾的。

Flash Player播放SWF文件。 五个独立的Bitmap对象实例显示了来自于外部的flowers.jpg文件的数据，以形成立方体的各个面(除了前面)。 然后来源于资源库的bumblebee影片剪辑被加载，并且被显示在盒子的中间位置。