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

作者: egoldy

性质: 原创

阅读次数: 19937

发表时间: 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就是指层次关系中的内容元素。如下图所示:

/media/upload/2007/03/23/displayList.jpg

依上图,除了我们看到的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中即可显示出来。

 

源文件下载

讨论此教程
 

服务项目_SERVICE

关于我们

万博思图(北京)信息技术有限公司,专业的flash,flex开发团队,5年经验。公司致力于互联网上的业务的开展,对于互动网站行销,互联网应用程序开发有成熟的解决方案。我们关注互联网市场动态,关注新技术,更注重在新的领域不断探索发现。
万博思图业务内容主要包括企业品牌Flash网站开发,企业形象宣传Flash设计,动画,多媒体演示,Flex企业级应用程序开发,拥有众多成功案例,欢迎来电咨询。
 
COPYRIGHT BY WEBSTUDIO INTERACTIVE DESIGN Co.,Ltd. ALL RIGHTS RESERVED.
公司地址: 北京市朝阳区朝外SOHO D 座727室 邮编: 100026 EMAIL: WEBSTUDIO@WEBSTUDIO.COM.CN
电话: 010-59070059 / 010-86390986-802  手机: 13693660520 传真: 010-59070059-801
京公网安备:110108006741      京ICP备08002333号-4
王先生