Flash快速入门：使用ActionScript3编程 - 在Flash中使用ActionScript3载入图片和库资源
出自9RIA.com WIKI
Flash快速入门：使用ActionScript3编程
在Flash中使用ActionScript3载入图片和库资源
这个快速入门描述了几种策略，你可以用于动态加载图片和从库中加载资源，既可以是从本地加载也可以从远程加载。 当你使用ActionScript时，你完全可以控制什么时候什么资源在运行时出现，并且你可以使用脚本来决定哪些图片资源是程式化载入。 换句话说，你可以使用ActionScript载入图片到时间轴上或者显示容器中，然后使用代码和事件处理程序动态的改变他们的显示。
注意：当在Flash创作环境中时，你可以从库中拖拽图片示例到舞台上，让他们出现在输出的SWF文件中。 当你使用ActionScript来添加图片时，你实际上也是将图片添加一个实例到时间轴上。具体来说，帧是时间轴的一部分，你可以使用动作面板将ActionScript代码与帧关联。 因此，时间轴成了用ActionScript添加的显示对象的父容器，除非另一个显示对象被指定（将在后文中介绍）。
本文解释了如何添加存在与你库中的资源，以及怎么使用ActionScript3从你本地磁盘的本地目录中或者一个远程URL中载入资源。 我将包括下列具体例子：
- 添加一个影片剪辑到当前时间轴
- 添加一个影片剪辑到一个容器
- 添加一个库中的图片到舞台上
- 载入外部图片文件
- 理解Loader，Bitmap和BitmapData对象之间的关系
目录 |
添加一个影片剪辑到当前时间轴
在我们的ActionScript中，所有可视项(图像，影片剪辑和其他SWF文件)必须加入称之为“显示列表”中，以便在输出SWF文件时出现。基本上，显示列表是一个层次的项，它可以在运行时显示给用户，同时，这个层次帮助确定了一个显示项与其他显示项直接的关系。 在ActionScript中，你可以使用addChild()命令将一个显示项加入显示列表中。 您可以使用addChild （ ）对当前时间或时间轴的另一个目标实例。 此外，你可以在一个显示容器中使用addChild()，这个显示容器基本上就成为了一个“父”显示对象。 针对一个显示容器的改变，例如重新设置它的位置，同样也会改变在容器内的“孩子”的显示。
注意：Stage类是DisplayObjectContainer的子类，但是我们不推荐在脚本中使用Stage.addChild()语法。 最好的做法是使用addChild()或者DisplayObjectContainer.addChild()来讲项添加到显示列表中，以灵活并可预计的管理你的显示对象。
示例
下面的例子从bee.fla的库中导入一个名为bumblebee的影片剪辑，并在当前时间轴创建了一个它的实例：
- 打开bee.fla，选择 控制 > 测试影片 来查看出现的蜜蜂动画。
- 如果你想在你自己的文件中重新创建功能，创建一个新的Flash文件(ActionScript3)，将文件保存在你的硬盘中。
- 在这个时候，你可以选择从bee.fla中拷贝已经存在的bumblebee影片剪辑或者在库中创建你自己的"bumblebee"影片剪辑。
- 为了建立一个全新的影片剪辑在库中，选择你在第二步中创建的FLASH文件的库，然后选择 插入 > 新元件，或者使用键盘快捷键Ctrl + F8(Windows) 或 Command + F8(Mac OS)。 在出现的创建新元件的对话框中输入如下信息：
- 名称: bumblebee, 类型: Movie Clip
-
- 5. 点击这个选项旁边的复选框：作为ActionScript导出，然后点击确定。 Flash CS4显示一条信息，提醒你会自动为这个影片剪辑创建一个类，除非你在前面设置了你自己的偏好以不显示此讯息。
-
- 6. 点击确定关闭消息窗口。
注意：ActionScript类在这个工作中是必须的，所以这是所期望的行为。 然哦，理解通过Flash CS4自动获得的类不能被编辑的，这点是很重要的；他们仅仅用于Flash创作工具在发布SWF文件时使用。
- 7. 根据你自己的喜好创建bumblebee影片剪辑的设计，这篇快速入门文章的目的，即使是一个简单的形状也是不错的。 当你将图像内容添加到bumblebee影片剪辑中之后，点击场景1回到主时间轴。
- 8. 选择时间轴的第一帧，按F9键(Windows)或Option+F9键(Mac OS)来打开动作面板。 将如下代码添加到脚本窗口中：
var mybee:bumblebee = new bumblebee(); addChild(mybee);
- 9. 选择 控制 > 测试影片 或者按下 Ctrl+Enter(Windows)或者 Command+Return(Mac OS)来测试影片。
结果
http://wwwimages.adobe.com/www.adobe.com/devnet/flash/quickstart/loading_images_library_as3/bee.swf
要下载源文件和所有的例子，请点击[这里]。
在第八步的代码示例中，第一行使用var声明来制定一个实例名给bumblebee影片剪辑。 第二行使用addChild()命令将实例mybee加入显示列表。 当没有明确指定显示容器时(如上面的例子)，影片剪辑实例是被添加到时间轴的当前帧。
换句话说，你有两个选择添加影片剪辑：
- addChild (mybee) ：添加命名为mybee的影片剪辑实例到时间轴的当前帧。
- myContainer.addChild(mybee)：将影片剪辑实例添加到DisplayObjectContainer类的实例myContainer对象中。 影片剪辑mybee还没有被加入显示列表直至使用addChild()将myContainer加入显示列表中。 如何实现这个选择的例子将在下一段给出。
高级示例
现在你已经将影片剪辑实例添加到了时间轴上，你可以通过ActionScript指定属性和动作，甚至创建动态内容。 参见提供的movingbee.fla实例文件，一个雄蜂跟随用户鼠标移动的例子。 movingbee.fla文件使用了事件处理和函数声明。 打开动作面板审查脚本窗口中的代码。 你可以了解更多有关写事件处理和函数处理的文章，通过阅读在线文档的<ActionScript3编程>或者回顾事件处理快速入门的文章。
下面是一个显示影片剪辑拖放的示例。使用鼠标拖拽蜜蜂；当你释放鼠标时，蜜蜂就会停止跟随指针。 请参阅文件drag_and_drop_bee.fla提供的脚本。 打开动作面板查看脚本窗口中的代码。
要下载源文件和所有的例子，请点击[这里]。
添加一个影片剪辑到一个容器
DisplayObjectContainer对象（和继承自DisplayObjectContainer类所创建的对象）可以包含零个或多个显示项。 就像你移动容器一样，所有在容器对象中的显示项相对容器移动。
示例
在提供的示例beeContainer.fla文件中，bumblebee影片剪辑实例myBee是Sprite对象的一个名为mySprite的子实例。 你可以将Sprite对象作为一个显示容器，因为Sprite类继承自DisplayObjectContainer类。
下载并打开beeContainer.fla文件，查看示例中第一帧代码：
var myBee:bumblebee = new bumblebee();
//create a display object that can be the container for myBee
var mySprite:Sprite = new Sprite();
//add myBee as a child of mySprite
mySprite.addChild(myBee);
//add mySprite to the display list addChild(mySprite);
stage.addEventListener(MouseEvent.CLICK, clickhandler);
//move the container mySprite after a mouse click
function clickhandler(e:MouseEvent):void
{
mySprite.x = 100;
mySprite.y = 100;
}
注意：要记得将显示对象容器加入到显示列表。 在上面的例子中，显示对象容器通过下面这句被加入到显示列表中：
addChild(mySprite);
虽然这个提醒在一个简单的例子中似乎很明显，当你创建了越多的显示对象和显示对象容器时，这步越容易忽视。 如果你在测试你的SWF文件时使得显示对象出现有问题，检查确认你将正确的显示对象容器加入了显示列表。
请按照如下步骤将bumblebee影片剪辑加入容器：
- 创建一个新的Flash文件(ActionScript3)，虽然beeContainer.fla文件也已经打开。
- 使用库的下拉菜单来选择beeContainer.fla的库。
- 将bumblebee影片剪辑从库中拖放到舞台上。
- 通过库的下拉菜单选择回到你新文件的库，注意一下bumblebee影片剪辑(及相关的素材)现在已经列在当前文件的库中了。
- 删除舞台上的bumblebee影片剪辑。
- 选择时间轴的第一帧。 拷贝并粘贴上面显示的脚本到脚本窗口中。重命名层1为Actions。
- 可选项：创建一个新层，并将它拖到Actions层下方。 重命名层2为Text。 当Text层的第一帧被选中，使用Text工具在舞台上输入如下内容：点击并移动mySprite，也就是影片剪辑容器到（100，100）坐标位置。
- 选择 控制 > 测试影片 或者按下 Ctrl+Enter(Windows)或者 Command+Return(Mac OS)来测试影片。
结果
要下载源文件和所有的例子，请点击[这里]。
Flash Player播放SWF文件。 默认情况下，bumblebee影片剪辑显示在舞台的左上角。 在代码中，一个事件侦听器用于响应鼠标点击，所以当你点击舞台的的任何地方时，bumblebee影片剪辑的注册点都被重新定位到距离舞台上方100个像素，距离舞台左边100个像素的位置。
从库中添加一个图片到时间轴上
Flash CS4把库中的图片看作是一个BtimapData对象，这意味着图片实例和影片剪辑实例相比，动态创建时要麻烦点儿。 顾名思义，一个BitmapData对象包含了位图中每个像素的信息 -- 获得一个位图的数据。 然而，BitmapData类的实例不是一个显示对象(参阅flash.display.BitmapData获得更多信息)，BtimapData类不是从DisplayObject类继承的。 你不知将一个BitmapData对象加入显示列表。 因此，为了将一个库中的图片实例放到时间轴上，你首先需要创建一个Bitmap对象(参阅flash.display.Bitmap文档)。 Bitmap对象是从DisplayObject类继承来的，你可以使用他们引用BitmapData的信息。 Bitmap对象是显示对象，它可以引用BitmapData对象的图片数据，并且bitmap对象可以被加入显示列表。
换句话说，关键点如下：
- Flash CS4库中的图片是BitmapData对象
- BitmapData对象不能被添加到显示列表
- Bitmap对象可以被添加到显示列表，并且可以引用BitmapData对象信息
- 你可以创建一个Bitmap对象来包含从BitmapData实例获取到的数据
- 你可以将Bitmap对象添加到显示列表
示例
下面的例子描述了如何将一个库中的位图图像加入到显示列表中。 这个例子中addbee.fla文件中有展示。
- 导入一张图片作为单一文件到库中，设置为位图(你可以使用buzz.jpg)。
- 注意：当你导入PNG文件时，一个称为Symbol1的图形符号自动被添加到库中。
- 右键单击（或Control键单击）图片，并从上下文菜单中选择属性。
- 单击复选框，使得导出为ActionScript和导出为第一帧选项可用。
- 使用myBitmapData来代替类文本框中的buzz.png。 （保持缺省基类名称，预先填入的flash.display.BitmapData是正确的）。
- 单击“确定”。 正如预期的那样，Flash CS4将会显示信息，它会自动地获取myBitmapData类。 这一步是必要的工作。 再次单击确定关闭消息窗口。
- 选择主时间轴第1帧，打开动作面板。 添加如下ActionScript代码到脚本窗口：
// myBitmapData is the class name for the BitmapData symbol in the library // Create a new myBitmapData object instance called myBitmapDataObject var myBitmapDataObject:myBitmapData = new myBitmapData(100, 100); // Create a bitmap object instance called myImage to contain the bitmap data var myImage:Bitmap = new Bitmap(myBitmapDataObject); // Add myImage to the display list of the current Timeline addChild(myImage);
- 选择控制 > 测试影片或者按Ctrl + Enter键( Windows)或Command+Return(Mac OS)来测试影片。
- 注意：在ActionScript中你需要提供位图图像的宽高，即使它已经作为库文件存在。 奇怪的是，尽管这些值被要求提供，Flash CS4也还是会忽略他们。 如果你尝试在new BitmapData(width, height)语句中改变高宽值，Flash CS4会忽略他们并保持原来的尺寸不变。 位图图像的大小是由库中的图像确定的，舞台上实例的大小是基于库中图像的实际大小。
结果
http://www.adobe.com/devnet/flash/quickstart/loading_images_library_as3/addbee.swf
要下载源文件和所有的例子，请点击[这里]。
Flash Player播放SWF文件，根据预设的，bumblebee.png位图图像会显示在舞台的左上角。当你发布SWF文件时，Flash CS4自动地为BitmapData对象创建了一个类。 正如前面提到的，由Flash CS4获取到的类是不可编辑的，并且当发布成SWF文件时仅仅只对Flash CS4的使用有效。
此外，请记住，仍然有很多方法，通过编写略有不同的代码达到同样的目标。 如果愿意，你可以选择编写更多简明的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文件，打开它，查阅一下在时间轴第1帧的脚本窗口中的代码：
//create a Loader instance
var myImageLoader:Loader = new Loader();
//create a URLRequest instance to indicate the image source
var myImageLocation:URLRequest = new URLRequest("flowers.jpg");
// load the bitmap data from the image source in the Loader instance
myImageLoader.load(myImageLocation);
// add the Loader instance to the display list
addChild(myImageLoader);
现在，请执行下列步骤：
- 创建一个新的Flash文件（ActionScript3 ）并保存在一个文件夹命名为Loader。
- 下载这个例子的实例文件，将flowers.jpg副本放到FLA文件旁边的loader文件夹中。 （你可以使用你自己的JPEG图片，但是必须命名为flowers.jpg并且存在于Flash文件的同一目录下。）
- 选择时间轴第1帧，拷贝示例代码到脚本窗口。
- 选择控制 > 测试影片或者按Ctrl + Enter键( Windows)或Command+Return(Mac OS)来测试影片。
结果
要下载源文件和所有的例子，请点击这里。
当Flash Player的播放SWF文件，位图图像flowers.jpg显示默认显示在舞台上。 当使用ActionScript载入外部图像文件时，非常重要的是文件名和文件位置要与URLRequest参数的路径匹配，在这行代码中：
var myImageLocation:URLRequest = new URLRequest("flowers.jpg");
注意：您还可以把外部文件放在包含Flash文件的子文件夹内。 下面的代码将加载存在于子文件夹中的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属性访问到。
注意：一些属性，像宽度和高度，对于载入的图片或者正在载入图片的loader是不能访问的，知道flash.display.LoaderInfo.init事件触发。 如果你尝试在addChild()语句后去get或者set宽或者高，你将获得0(设置属性将无法执行)，因为从本地或者远程文件系统载入文件是需要一定时间的。 所以，在LoaderInfo.init或者LoaderInfo.complete事件处理器中为载入的图像设置属性。
下面的例子会比前面的复杂得多，但是它表明，位图数据是包含在一个Bitmap对象实例中的图像数据。 而且，它也表明，Bitmap对象实例是Loader对象实例的子对象。 这个示例使用了一个单一的Loader对象实例来引用单一的图像位图数据，然后重复使用图像数据来创建多个Bitmap对象实例中舞台上。 因此，你可以独立的操作每个Bitmap对象，获得更多的控制。
注意：更改BitmapData对象实例，例如使用类似于BitmapData.setPixel()或者BitmapData.draw()方法改变结果，会反映在每个引用了BitmapData对象实例的Bitmap对象实例中。
这个例子简单的调用了外部图片。数据初始化载入之后，FlashPlayer可以多次重复使用图像数据。 一个单一对图片文件的调用比多次调用更有效，这个方法在创建更为复杂的需要重复利用同一个图像文件的Flash应用时尤其有用。 尽管下面的示例可以创建多个Loader对象实例，并且独立地操作每个Loader对象实例，这个例子的目的是演示你如何利用Loader，Bitmap，和BitmapData关系以节约内容和装载时间这个优点。
具体来说，下面的例子定义了一些变量用于提供的代码中的函数。 为LoaderInfo.complete事件建立了一个侦听器。 ldr.load()语句一次载入了一个外部图片的位图数据(flowers.jpg)保存在Loader对象实例中。 当load方法完成载入图片数据后，Loader对象实例自动的创建一个外部Bitmap对象来存储和现实载入的位图数据，保存位图信息在它自己的ldr.content属性中。 然而，content属性有数据类型DisplayObject，因为一个Loader对象可以载入图片和SWF文件。 因此，下面的例子使用一个操作数来保存图片数据到一个自定义的Bitmap数据类型的bmp变量中。 位图数据被五个独立的Bitmap对象实例显示，形成立方体的各个面(除前面)。
示例
这个示例由bee_in_a_box.fla示例文件说明。 下载bee_in_a_box.fla并打开文件。 查阅一下位于时间轴第1帧的代码：
//establish a variable for the external image file name
var IMAGE_URL:String = new String("flowers.jpg");
//create a loader object to load the image data
var ldr:Loader = new Loader();
//create variables for each instance of the image to add to the display list
//these images will form a cube, we need 5 instances
//one for each side except the front
var bitmap1:Bitmap;
var bitmap2:Bitmap;
var bitmap3:Bitmap;
var bitmap4:Bitmap;
var bitmap5:Bitmap;
//create a variable to hold an instance of the bumblebee movie clip in the library
//the movie clip in the library is set to export for ActionScript
var mybee:bumblebee = new bumblebee();
//set up an event listener to create instances of the image on the stage
//after the image data is completely loaded
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, addSides);
//load the image data from the image file
ldr.load(new URLRequest(IMAGE_URL));
//after the COMPLETE event is fired, start creating instances of the imported image on the stage
function addSides(evt:Event):void {
//use the as operator to cast the loader data to a Bitmap object
var bmp:Bitmap = ldr.content as Bitmap;
//create a bitmap instance
bitmap1 = new Bitmap(bmp.bitmapData);
//rotate the instance to create a 3D effect
bitmap1.rotationX = 90;
//add the instance to the display list
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);
//now that the sides of the cube are complete, add the bumblebee
//you add the bumblebee after the sides so it displays
//in front of the cube
addBee();
}
//this function adds an instance of the bumblebee movie clip from the Library
//to the display list.
function addBee(): void {
mybee.x = 100;
mybee.y = 100;
addChild(mybee);
}
选择 控制 > 测试影片来测试影片。 或按Ctrl + Enter键（ Windows ）或Command+Return（Mac OS ）来运行SWF文件。
现在，请执行下列步骤：
- 创建一个新的Flash文件（ActionScript3 ） ，然后将其保存在包含了位图图像命名flowers.jpg的文件夹中 。
- 使用库弹出式菜单选择bee_in_a_box.fla库。 将bumblebee影片剪辑拖拽到舞台上。 然后，重置弹出式菜单以显示当前文件的库(注意bumblebee影片剪辑和相关的素材资源已经在当前文件库的列表中列出)。 删除舞台上的bumblebee影片剪辑。
- 选择时间轴的第1帧，拷贝前面的代码示例到脚本窗口。
- 选择控制 > 测试影片或者按Ctrl + Enter键( Windows)或Command+Return(Mac OS)来测试影片。
结果
http://www.adobe.com/devnet/flash/quickstart/loading_images_library_as3/bee_in_box.swf
要下载源文件和所有的例子，请点击这里。
Flash Player播放SWF文件。 五个独立的Bitmap对象实例显示了外部flowers.jpg文件的数据，作为立方体的每个面(除了前面)。 库中的bumblebee影片剪辑被加载，并被定位在盒子的中间位置。
欲了解更多信息
想要了解更多关于显示对象和显示容器 - 并凉席了解ActionScript可视化对象的管理，可参考Programming ActionScript3 for Flash在线文档中后续的章节：
- 显示编程
- 事件处理章节
- "处理影片剪辑"章节的为ActionScript到处库元素段落
- "处理位图"章节Bitmap和BitmapData类段落
相关Flash快速入门文章
- 嵌入字体(为Flash CS4更新的)
- 用ActionScript3载入图像和库资源(新)
- 事件处理
- 显示对象编程
- 创建一个简单的ActionScript3的类
- 处理元件和文档类
- 数组编程
关于作者
Dave Jacowitz就职于Adobe平台文档团队，这个团队提供了Programming ActionScript3和ActionScript语言手册(还有很多其他东西)。 当不处理Flash，Flex或者ActionScript时，Dave会弹吉他，旅行，并且喜欢和他的妻子与孩子一起去徒步旅行和露营。 他喜欢薄荷巧克力冰淇淋芯片。 还有许多。
Trevor McCauley是Adobe公司的一位质量工程师，大量地与Flash和Fireworks打交道。 在进入Adobe之前，他作为一名开发人员在一个多媒体和基于web的制作公司工作。 在他空闲时间，Trevor为他自己的个人网站-senocular.com，开发Flash和Fireworks内容，并活跃于和Flash相关的论坛站点，如Kirupa.com，ActionScript.org，FlashKit.com和UltraShock.com。