在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中即可显示出来。