ActionScript 3.0基础教程2-Display List and Display Objects

作者: egoldy

性质: 原创

阅读次数: 14486

发表时间: 2007-03-23 17:22:36

在ActionScript 3.0中,最大的改变之一就是flash对可视内容渲染显示.现在在ActionScript 3.0中我们称之为Display List 和Display Object.在flash8版本之前你可能已经习惯了flash渲染显示内容的方式,但如果想要转到Actionscrpt 3.0 编程上来,理解Display List 和Display Object是非常必要的。下面我们将针对此内容进行一些探讨。

什么是Display List 和Display Object? 

Display List就是指在flash中的显示内容的层次关系。Display Object就是指层次关系中的内容元素。如下图所示：

依上图,除了我们看到的Display Objcet之外，我们还看到有Display Object Container.从字面意思上我们就可以理解出它是Display Object的容器。任何flash程序的根(root)都是一个Display Object Container.下面我们来分析Display List. 

Stage ----它包含了flash中的所有内容元素。相当于主时间线 
Instance of the main class of the swf file---------主类的实例，一旦实例化了主类，Display Object就会立即显示在Stage（主时间线）上。它相当于我们在flash9 属性面板中的Document Class输入框中输入的主类。 
Display Object---flash中各种类型的可视内容。 
Display Object Container—Display Object的容器。 
从上图的关系上，Display Object Container中你可以加入Display Object或是其它的Display Object Container作为它的子内容。 而Display Object是不能加入其它内容来做为子内容的。与此同时针对Display Object你可以让它显示，也可以不让它显示，也可以在不同的Display Object Container中移动。你不需要担心你新建的Display Object会被替换掉。与我们之前使用的Depth管理非常类似。 
需要注意的是Display Object和Display Object Container都是flash 9中的抽象类，你不能直接对它进行实例化，如new DisplayObject(),否则flash就会抛出错误。 
到目前为止，你可能要问，我们之前熟知的文字，图形，还有MoiveClip都在哪里呢，下面我们细致的来分析一下Display Object.如下图。

在上图上描述了Display Object 所指的内容。我们从上到下来分析。 
AVM1Movie----是指我们flash9之前版本所生成的影片文件。 
Bitmap------我们常用的位图 
InteractiveObject---交互对象。如samplebutton按钮，TextField.和DisplayObjectContainer. 
MorphShape----形为动画，需要注意是形变动画只能在flash ide中创建。 
Shape-----图形。 
StaticText----静态文本，如同MorphShape一样，只能在flash ide中创建。 
Video—视频 

Display Object中的interactiveObject.是指交互对象。它可以是按钮，交互文本也可以是DisplayObjectContainer. 如loader,Sprite,Stage 最后一层就是我们最熟悉的MoiveClip了。 
Sprite----它与MovieClip非常相似，它相当于一个没有时间线的MovieClip,而MoiveClip就如同我们熟知的那样，你可以通过代码控制其中的内容进行播放。说到最后仍是MoiveClip是最强大的。 

创建Display Object 

在ActionScrpt 2.0中我们在场景中创建MovieClip对象时，通常使用如下的方式。 
createEmptyMovieClip()----创建一个空的影片剪辑。 
createTextField()------创建一个文本域。 
而在ActionScript 3.0中我们都是通过构造实例的方式来创建的。如下。 
new MoiveClip() ----创建一个新的空的影片剪辑。 
new Sprite() ----创建一个新的空的sprite. 
new TextField()----创建一个新的空的文本域。 
new Shape() ------创建一个画布 
对于库中已有的元件处理方式如 
在ActionScript 2.0中，我们通常要为库中的元件命名为一个链接id.然后使用attachMovie()的方法来将它贴加到场景中。而在Actionscript 3.0中，我们仍要为其它指定id,只是这个id, 是做为一个类的名称，如下图所示：

注意到前面的标题为Class而不是上面的Identifier.在Actionscript 3中当你指定了类名称后，这个类可以有，也可以没有，当你没有编写名为Star.as的类时，在编译时flash会自动为你创建一个。接下来你仍要在代码 中使用new Star()构造实例的方式来创建。我们会现这种方式实际上就是Actionscrpt 2.0中的attachMovie(). 
当创建Display Object完成后，它并不会显示出来，你需要将它加入到Display List中后，它才会显示出来。在ActionScript 3.0中使用是addChild()方法。 

显示Display Object 

当我们创建了Display Object后，要显示出来需要将它加入到Display List中，使用addChild方法可以让它显示出来，当然你还可以将显示了的对象，重新让它不显示,将其移出Display List即可，如removeChild.我们通过一个简单的例子来说明。 
打开flash9,新建一个ActionScript.as 文件，将其保存为CircleShape.as。在其中写入如下代码：

package {    import flash.display.Sprite;    import flash.display.Shape;        public class CircleShape extends Sprite    {        public function CircleShape()        {            //创建Shape对象var myCircle:Shape = new Shape();            myCircle.graphics.beginFill(0xFF0000, 1);            myCircle.graphics.drawCircle(200, 150, 100);                    }    }} 

然后在新建一个flash文档，将其保存为CircleShape.fla.然后在主场景的属性的Document Class的输入框中输入类名称CircleShape,然后进行测试，测试完成后，你可能看不到任何内容。原因很简单，它并没有将创建好的shape对 象加入到Display List中，那么我们只需要添加一行代码addChild(myCircle),即可。如下。

package {    import flash.display.Sprite;    import flash.display.Shape;    public class CircleShape extends Sprite    {        public function CircleShape()        {            var myCircle:Shape = new Shape();            myCircle.graphics.beginFill(0xFFcc00, 1);            myCircle.graphics.drawCircle(200, 150, 100);            addChild(myCircle);                    }    }} 

保存你的更改，再次测试CircleShape.fla文件，你就可以看到效果了。 如下。

接下来我们打算在Actionscript 3.0 使用类似as2.0中的attachMovie的方法来测试，此法在前面有描述。在接下来的例子中我们要测试在Display Object中是否可以加入子内容。 
在上一个文件的基础上，将其另存为CircleShape2.fla.并在flash的主场景中，在属性面板上将Document Class修改为CircleShape2,打开原来的CircleShape.as文件，将其另存为CircleShape2.as,我们只需要修改 CircleShape2.as即可。接下来我们在场景中绘制一个星形，并在库中指定的它的class名为Star 
如下图所示：

我们计算要将这个星形贴加到已经绘制好的园形之内。打开CircleShape2.as文件，添加一些代码。

package {    import flash.display.Sprite;    import flash.display.Shape;            public class CircleShape2 extends Sprite    {                public function CircleShape2()        {            var myCircle:Shape = new Shape();            myCircle.graphics.beginFill(0xFFcc00, 1);            myCircle.graphics.drawCircle(200, 150, 100);            addChild(myCircle);                        //新增代码，构造Star实例var myStar = new Star();            myStar.x=150;            myStar.y=100;            //将Star加入到myCircle中            myCircle.addChild(myStar);                    }    }} 

保存此文件，回到CircleShape2.fla场景中，测试影片，你会在输出面板上看到一个错误信息。 

ReferenceError: Error #1069: 在 flash.display.Shape 上找不到属性 addChild，且没有默认值。 
    at CircleShape2$iinit() 
在flash.display.Shape上没有addChild属性，也就是说你不能在Shape中添加子内容。如我们在上面分析图解所提到 的，Display Object中不能添加Display Object和Display Object Container来做为Display Object的子内容。而Display Object Container 是可以的。那么我们换成Display Object Container试试，我们使用Sprite.将代码修改为如下。

package {    import flash.display.Sprite;    import flash.display.Shape;            public class CircleShape2 extends Sprite    {                public function CircleShape2()        {            var myCircle:Sprite = new Sprite();            myCircle.graphics.beginFill(0xFFcc00, 1);            myCircle.graphics.drawCircle(200, 150, 100);            addChild(myCircle);            //将库中的Star显示在屏幕上。var myStar = new Star();            myStar.x=150;            myStar.y=100;            myCircle.addChild(myStar);                                }            }} 

我们将代码的中一行var myCircle:Shape = new Shape()换成了var myCircle:Sprite = new Sprite().然后再次测试影片，你会发现它成功了。星形已经成功的加入到myCircle中，作为了它的子内容。如下。

这里我们还要注意一下，从库中将星形显示在屏幕上的方法，我们使用了new Star()构造实例，然后使用addChild()将它加入到Display List即可。 

Ps by egoldy: 在本教程，我们重点通过图示来理解Display List. Display Object以及Display Object和Display Object Container之间的关系。同时在ActionScript 3.0创建Display Object时均使用直接构造实例的方法，如new MovieClip(),new Shape(),new Sprite(),需要注意的另一点是Display Object和DisplayObjectContainer都是抽象类，你不能直接通过如new DisplayObject()来实例化它。在将库中的元件显示在场景中时，一是为其指定链接Class名称，在实际操作中如果没有写链接的外部类，那么 系统会动生成，二是在贴加到屏幕时，仍使用如new Star()构造实例的方法，然后使用addChild加入到Display List中即可显示出来。