例 : SpriteArranger

SpriteArranger サンプルアプリケーションは、個別に説明した Geometric Shapes サンプルアプリケーション上に構築されます (例 : GeometricShapesを参照)。

SpriteArranger サンプルアプリケーションは、表示オブジェクトの操作に関する次のような概念を示しています。

このサンプルのアプリケーションファイルを入手するには、www.adobe.com/go/learn_programmingAS3samples_flash_jp を参照してください。SpriteArranger アプリケーションのファイルは、"Examples/SpriteArranger" フォルダに入っています。アプリケーションは、次のファイルで構成されています。

ファイル	説明
SpriteArranger.mxml または SpriteArranger.fla	Flash (FLA) または Flex (MXML) のメインアプリケーションファイル。
com/example/programmingas3/SpriteArranger/CircleSprite.as	画面上で円をレンダリングする Sprite オブジェクトの型を定義するクラス。
com/example/programmingas3/SpriteArranger/DrawingCanvas.as	キャンバスを定義するクラス。キャンバスは、GeometricSprite オブジェクトを格納する表示オブジェクトコンテナです。
com/example/programmingas3/SpriteArranger/SquareSprite.as	画面上で四角形をレンダリングする Sprite オブジェクトの型を定義するクラス。
com/example/programmingas3/SpriteArranger/TriangleSprite.as	画面上で三角形をレンダリングする Sprite オブジェクトの型を定義するクラス。
com/example/programmingas3/SpriteArranger/GeometricSprite.as	Sprite オブジェクトを拡張するクラス。画面上のシェイプを定義するのに使用されます。CircleSprite、SquareSprite、および TriangleSprite は、それぞれこのクラスを拡張します。
com/example/programmingas3/geometricshapes/IGeometricShape.as	すべての図形クラスによって実装されるメソッドを定義する基本インターフェイス。
com/example/programmingas3/geometricshapes/IPolygon.as	複数の辺を持つ図形クラスによって実装されるメソッドを定義するインターフェイス。
com/example/programmingas3/geometricshapes/RegularPolygon.as	シェイプの中心から対称の位置に等しい長さの辺を有する一種の幾何学図形。
com/example/programmingas3/geometricshapes/Circle.as	円を定義する一種の幾何学図形。
com/example/programmingas3/geometricshapes/EquilateralTriangle.as	正三角形を定義する RegularPolygon のサブクラス。
com/example/programmingas3/geometricshapes/Square.as	正四角形を定義する RegularPolygon のサブクラス。
com/example/programmingas3/geometricshapes/GeometricShapeFactory.as	指定された種類およびサイズでシェイプを作成するための "ファクトリメソッド" を含むクラス。

サブトピック

SpriteArranger クラスの定義

SpriteArranger アプリケーションを使用して、画面上の "キャンバス" に、各種表示オブジェクトを追加することができます。

DrawingCanvas クラスは、ユーザーが画面上のシェイプを追加できる描画領域、すなわち表示オブジェクトコンテナのタイプを定義します。これらの画面上のシェイプは、GeometricSprite クラスのいずれかのサブクラスのインスタンスです。

DrawingCanvas クラス

DrawingCanvas クラスは Sprite クラスを拡張するもので、この継承は次のように DrawingCanvas クラス宣言で定義されます。

public class DrawingCanvas extends Sprite

Sprite クラスは DisplayObjectContainer クラスと DisplayObject クラスのサブクラスであり、DrawingCanvas クラスは、これらのクラスのメソッドとプロパティを使用します。

DrawingCanvas() コンストラクタメソッドは、Rectangle オブジェクト、bounds を設定します。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 クラスの追加メソッドは、アプリケーションに対するユーザーの操作に基づいて呼び出されます。

GeometricSprite クラスとそのサブクラス

ユーザーがキャンバスに追加できる表示オブジェクトは、GeometricSprite クラスの次のいずれかのサブクラスのインスタンスです。

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 の各サブクラス内のオーバーライド定義の中でさらに改良されます。詳細については、この後のキャンバスへの表示オブジェクトの追加の節を参照してください。

キャンバスへの表示オブジェクトの追加

ユーザーが Add Shape ボタンをクリックすると、アプリケーションは 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() 関数の最後から 2 番目の行は、DisplayObject クラスから継承した表示オブジェクトの alpha プロパティを設定します。これにより、キャンバスに追加される表示オブジェクトはわずかに透明になり、ユーザーはその背後にあるオブジェクトを見ることができます。

addChild() メソッドの最後の行は、既に表示リストに載っている新しい表示オブジェクトを DrawingCanvas クラスのインスタンスの子リストに追加します。これにより、新しい表示オブジェクトがステージに表示されます。

アプリケーションのインターフェイスには、selectedSpriteTxt と outputTxt の 2 つのテキストフィールドが含まれています。これらのテキストフィールドのテキストプロパティは、キャンバスに追加されるかユーザーによって選択された 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() メソッドは、DisplayObjectContainer クラスから継承した numChildren プロパティを使用して 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() メソッドの呼び出しが最初でない場合、このメソッドは、単に DisplayObject クラスから継承した selectionIndicator シェイプの visible プロパティを次のように設定します。

this.selectionIndicator.visible = true;

hideSelected() メソッドは、前に選択されたオブジェクトの selectionIndicator シェイプを、その visible プロパティを false に設定することによって非表示にします。

また、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);

このイベントリスナーは、個々の GeometricSprite オブジェクト用でなく、DrawingCanvas オブジェクト用に設定されます。なぜなら、GeometricSprite オブジェクトは、ドラッグされた場合、マウスボタンが離されたときに、別の表示オブジェクト (別の GeometricSprite オブジェクト) の背後で終了する可能性があるからです。前景の表示オブジェクトは、マウスアップイベントを受け取りますが、ユーザーがドラッグしている表示オブジェクトは、それを受け取りません。DrawingCanvas オブジェクトにリスナーを追加すると、そのイベントが常に確実に処理されます。

onMouseUp() メソッドは GeometricSprite オブジェクトの onMouseUp() メソッドを呼び出し、後者のメソッドは GeometricSprite オブジェクトの stopDrag() メソッドを呼び出します。

表示オブジェクトのレイヤーの再配置

アプリケーションのユーザーインターフェイスには、Move Back、Move Down、Move Up、および Move to Front というラベルの付いたボタンが含まれます。ユーザーがこれらのボタンをクリックすると、アプリケーションは 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);
    }
}

このメソッドは、DisplayObjectContainer クラスから継承された setChildIndex() メソッドを使用して、表示オブジェクトを 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() メソッドと同様の働きをします。