Flash CS3 文档

ActionScript 3.0 编程 > 显示编程 > 示例：SpriteArranger

示例：SpriteArranger

SpriteArranger 示例应用程序是在 GeometricShapes 示例应用程序（将单独进行介绍）的基础上构建的（请参阅示例：GeometricShapes）。

SpriteArranger 范例应用程序演示说明了处理显示对象的许多概念：

• 扩展显示对象类
• 在显示列表中添加对象
• 分层显示对象和处理显示对象容器
• 响应显示对象事件
• 使用显示对象的属性和方法

要获取该范例的应用程序文件，请访问 www.adobe.com/go/learn_programmingAS3samples_flash_cn。可在文件夹 Examples/SpriteArranger 中找到 SpriteArranger 应用程序文件。该应用程序包含以下文件：

子主题

定义 SpriteArranger 类

用户可以使用 SpriteArranger 应用程序在屏幕“画布”上添加各种显示对象。

DrawingCanvas 类用于定义绘制区（一种显示对象容器），用户可以在其中添加屏幕形状。这些屏幕形状是 GeometricSprite 类的其中一个子类的实例。

DrawingCanvas 类

DrawingCanvas 类扩展了 Sprite 类，此继承是在 DrawingCanvas 类声明中定义的，如下所示：

public class DrawingCanvas extends Sprite

Sprite 类是 DisplayObjectContainer 和 DisplayObject 类的子类，DrawingCanvas 类使用这些类的方法和属性。

DrawingCanvas() 构造函数方法设置 Rectangle 对象 bounds，它是以后在绘制画布轮廓时使用的属性。然后调用 initCanvas() 方法，如下所示：

this.bounds = new Rectangle(0, 0, w, h);
initCanvas(fillColor, lineColor);

如下面的示例所示，initCanvas() 方法用于定义 DrawingCanvas 对象的各种属性，这些属性作为参数传递给构造函数：

this.lineColor = lineColor;
this.fillColor = fillColor;
this.width = 500;
this.height = 200;

initCanvas() 方法随后调用 drawBounds() 方法，后者使用 DrawingCanvas 类的 graphics 属性绘制画布。graphics 属性继承自 Shape 类

this.graphics.clear();        
this.graphics.lineStyle(1.0, this.lineColor, 1.0);
this.graphics.beginFill(this.fillColor, 1.0);
this.graphics.drawRect(bounds.left - 1, 
                        bounds.top - 1, 
                        bounds.width + 2,
                        bounds.height + 2);
this.graphics.endFill();

DrawingCanvas 类的下列附加方法是根据用户与应用程序的交互进行调用的：

• addShape() 和 describeChildren() 方法，在在画布上添加显示对象中予以介绍。
• moveToBack()、moveDown()、moveToFront() 和 moveUp() 方法，在重新排列显示对象层中予以介绍。
• onMouseUp() 方法，在单击并拖动显示对象中予以介绍。

GeometricSprite 类及其子类

用户在画布上可以添加的每个显示对象都是 GeometricSprite 类以下某个子类的实例：

• CircleSprite
• SquareSprite
• TriangleSprite

GeometricSprite 类扩展了 flash.display.Sprite 类：

public class GeometricSprite extends Sprite

GeometricSprite 类包括所有 GeometricSprite 对象所共有的一些属性。这些属性是根据传递到构造函数的参数，在该函数中设置的。例如：

this.size = size;
this.lineColor = lColor;
this.fillColor = fColor;

GeometricSprite 类的 geometricShape 属性用于定义 IGeometricShape 接口，该接口定义形状的数学属性，但不定义其可视属性。实现 IGeometricShape 接口的类是在 GeometricShapes 范例应用程序中定义的（请参阅示例：GeometricShapes）。

GeometricSprite 类用于定义 drawShape() 方法，该方法在 GeometricSprite 的各子类的覆盖定义中已进一步精确定义。有关详细信息，请参阅后面的在画布上添加显示对象部分。

GeometricSprite 类还提供下列方法：

• onMouseDown() 和 onMouseUp() 方法，在单击并拖动显示对象中予以介绍。
• showSelected() 和 hideSelected() 方法，在单击并拖动显示对象中予以介绍。

在画布上添加显示对象

当用户单击“添加形状”按钮时，应用程序将调用 DrawingCanvas 类的 addShape() 方法。它通过调用其中一个 GeometricSprite 子类的相应构造函数来实例化新的 GeometricSprite，如下面的示例所示：

public function addShape(shapeName:String, len:Number):void
{
    var newShape:GeometricSprite;
    switch (shapeName)
    {
        case "Triangle":
            newShape = new TriangleSprite(len);
            break;
            
        case "Square":
            newShape = new SquareSprite(len);
            break;
            
        case "Circle":
            newShape = new CircleSprite(len);
            break;
    }
    newShape.alpha = 0.8;
    this.addChild(newShape);
}

每个构造函数方法都调用 drawShape() 方法，该方法使用类（继承自 Sprite 类）的 graphics 属性来绘制相应的矢量图形。例如，CircleSprite 类的 drawShape() 方法包括下列代码：

this.graphics.clear();
this.graphics.lineStyle(1.0, this.lineColor, 1.0);
this.graphics.beginFill(this.fillColor, 1.0);
var radius:Number = this.size / 2;
this.graphics.drawCircle(radius, radius, radius);

addShape() 函数的倒数第二行用于设置显示对象（继承自 DisplayObject 类）的 alpha 属性，所以画布上添加的每个显示对象都有一点儿透明，这样用户就可看见它后面的对象。

addChild() 方法的最后一行用于在 DrawingCanvas 类实例的子级列表中添加新的显示对象，该实例已经在显示列表中。这样会使新的显示对象出现在舞台上。

应用程序界面上包括两个文本字段 selectedSpriteTxt 和 outputTxt。这些文本字段的文本属性由已添加到画布中或由用户选择的 GeometricSprite 对象的信息更新。GeometricSprite 类通过覆盖 toString() 方法来处理这种信息报告任务，如下所示：

public override function toString():String
{
    return this.shapeType + “ of size “ + this.size + " at " + this.x + ", " + this.y;
}

shapeType 属性设置为每个 GeometricSprite 子类的构造函数方法中的相应值。例如，toString() 方法可能返回最近添加到 DrawingCanvas 实例中的 CircleSprite 实例的下列值：

Circle of size 50 at 0, 0

DrawingCanvas 类的 describeChildren() 方法通过使用 numChildren 属性（继承自 DisplayObjectContainer 类）设置 for 循环的限制，来遍历画布的子级列表。它会生成一个列出了每一子级的字符串，如下所示：

var desc:String = "";
var child:DisplayObject;
for (var i:int=0; i < this.numChildren; i++)
{
    child = this.getChildAt(i);
    desc += i + ": " + child + '\n';
}

生成的字符串用于设置 outputTxt 文本字段的 text 属性。

单击并拖动显示对象

当用户单击 GeometricSprite 实例时，应用程序将调用 onMouseDown() 事件处理函数。如下所示，此事件处理函数设置为侦听 GeometricSprite 类的构造函数中的鼠标按下事件：

this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);

onMouseDown() 方法随后调用 GeometricSprite 对象的 showSelected() 方法。如果是首次调用该对象的此方法，该方法将创建名为 selectionIndicator 的新 Shape 对象，并且使用 Shape 对象的 graphics 属性来绘制红色加亮矩形，如下所示：

this.selectionIndicator = new Shape();
this.selectionIndicator.graphics.lineStyle(1.0, 0xFF0000, 1.0);
this.selectionIndicator.graphics.drawRect(-1, -1, this.size + 1, 
this.size + 1);
this.addChild(this.selectionIndicator);

如果不是首次调用 onMouseDown() 方法，该方法仅设置 selectionIndicator 形状的 visible 属性（继承自 DisplayObject 类），如下所示：

this.selectionIndicator.visible = true;

hideSelected() 方法通过将其 visible 属性设置为 false 来隐藏以前所选对象的 selectionIndicator 形状。

onMouseDown() 事件处理函数方法还会调用 startDrag() 方法（继承自 Sprite 类），该方法包括下列代码：

var boundsRect:Rectangle = this.parent.getRect(this.parent);
boundsRect.width -= this.size;
boundsRect.height -= this.size;
this.startDrag(false, boundsRect);

这样，用户就可以在由 boundsRect 矩形设置的边界内在画布各处拖动选择的对象。

当用户松开鼠标按键时，将调度 mouseUp 事件。DrawingCanvas 的构造函数方法设置了下列事件侦听器：

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);

此事件侦听器是针对 DrawingCanvas 对象设置的，而不是针对单个 GeometricSprite 对象设置的。这是因为当拖动 GeometricSprite 对象时，松开鼠标后它可能会在另一个显示对象（另一个 GeometricSprite 对象）之后结束前景中的显示对象会收到鼠标弹起事件，但用户正在拖动的显示对象则不会收到。在 DrawingCanvas 对象中添加侦听器可以确保始终处理该事件。

onMouseUp() 方法调用 GeometricSprite 对象的 onMouseUp() 方法，后者又调用 GeometricSprite 对象的 stopDrag() 方法。

重新排列显示对象层

应用程序用户界面上包括标有“后移”、“下移”、“上移”和“移到最前”的按钮。当用户单击其中一个按钮时，应用程序将调用 DrawingCanvas 类的相应方法：moveToBack()、moveDown()、moveUp() 或 moveToFront()。例如，moveToBack() 方法包括下列代码：

public function moveToBack(shape:GeometricSprite):void
{
    var index:int = this.getChildIndex(shape);
    if (index > 0)
    {
        this.setChildIndex(shape, 0);
    }
}

该方法使用 setChildIndex() 方法（继承自 DisplayObjectContainer 类）确定显示对象位置在 DrawingCanvas 实例 (this) 的子级列表中的索引位置 0。

moveDown() 方法的作用类似，不同的是它将显示对象在 DrawingCanvas 实例的子级列表中的索引位置减少 1：

public function moveDown(shape:GeometricSprite):void
{
    var index:int = this.getChildIndex(shape);
    if (index > 0)
    {
        this.setChildIndex(shape, index - 1);
    }
}

moveUp() 和 moveToFront() 方法的作用与 moveToBack() 和 moveDown() 方法类似。

Flash CS3

评论添加到页面后给我发送电子邮件 | 评论报告

当前页: http://livedocs.adobe.com/flash/9.0_cn/main/00000174.html

添加评论