表示オブジェクトの操作 -- Flex 2.01

ステージ、表示オブジェクト、表示オブジェクトコンテナ、および表示リストの基本概念を理解できたので、このセクションでは、ActionScript 3.0 での表示オブジェクトの操作について詳しく説明します。

サブトピック

DisplayObject クラスのプロパティとメソッド

表示オブジェクトはすべて DisplayObject クラスのサブクラスです。したがって、表示オブジェクトは DisplayObject クラスのプロパティおよびメソッドを継承します。継承したプロパティは、すべての表示オブジェクトに適用される基本プロパティです。たとえば、表示オブジェクトには、表示オブジェクトコンテナ内のオブジェクトの位置を指定する x プロパティと y プロパティがあります。

DisplayObject クラスにはコンストラクタ関数はありません。Sprite などの別のタイプのオブジェクト (DisplayObject 型のサブクラスであるオブジェクト) を作成し、new コンストラクタでオブジェクトをインスタンス化する必要があります。また、カスタム表示オブジェクトクラスを作成する場合は、たとえば、Shape クラスや Sprite クラスなど、使用可能なコンストラクタ関数を持ついずれかの表示オブジェクトサブクラスのサブクラスを作成する必要があります。

表示リストへの表示オブジェクトの追加

表示オブジェクトをインスタンス化すると、表示リスト上にある表示オブジェクトコンテナに表示オブジェクトインスタンスを追加するまで、表示オブジェクトは画面上 (ステージ上) に表示されません。たとえば、次のコードでは、コードの最後の行を省略すると myText TextField オブジェクトは表示されません。コードの最後の行で、this キーワードは、既に表示リストに追加されている表示オブジェクトコンテナを参照する必要があります。

import flash.display.*;
import flash.text.TextField;
var myText:TextField = new TextField();
myText.text = "Buenos dias.";
this.addChild(myText);

ステージにビジュアルエレメントを追加すると、このエレメントは Stage オブジェクトの "子" になります。アプリケーション内にロードされた最初の SWF ファイル (HTML ページに埋め込む SWF ファイルなど) は、自動的に Stage オブジェクトの子として追加されます。これは、Sprite クラスを拡張する型のオブジェクトです。

Adobe Flex Builder 2 で MXML タグを追加したり、Flash で描画ツールを使用したりするなど、ActionScript を使用しないで作成された表示オブジェクトは、表示リストに追加されます。これらの表示オブジェクトは ActionScript を使用して追加されていませんが、ActionScript からアクセスできます。たとえば、次のコードは、ActionScript ではなくオーサリングツールで追加された button1 というオブジェクトの幅を調整します。

button1.width = 200;

表示オブジェクトコンテナの操作

DisplayObjectContainer オブジェクトが表示リストから削除された場合、またはその他の方法で移動されたか変形された場合、DisplayObjectContainer 内の各表示オブジェクトも削除、移動、または変形されます。

表示オブジェクトコンテナは一種の表示オブジェクトで、別の表示オブジェクトコンテナに追加できます。たとえば、次の図は、アウトラインシェイプ 1 つと (PictureFrame 型の) 表示オブジェクトコンテナ 4 つを含む表示オブジェクトコンテナ pictureScreen を示します。

表示リストに表示オブジェクトを表示するには、表示リスト上にある表示オブジェクトコンテナに表示オブジェクトを追加する必要があります。これには、コンテナオブジェクトの addChild() メソッドまたは addChildAt() メソッドを使用します。たとえば、次のコードの最後の行がなければ、myTextField オブジェクトは表示されません。

var myTextField:TextField = new TextField();
myTextField.text = "hello";
this.root.addChild(myTextField);

このサンプルコードでは、this.root にこのコードを含む MovieClip 表示オブジェクトコンテナを指定します。実際のコードでは、別のコンテナを指定できます。

表示オブジェクトコンテナの子リスト内の特定の位置に子を追加するには、addChildAt() メソッドを使用します。子リスト内の 0 から始まるインデックス位置は、表示オブジェクトのレイヤー (前から後ろへの順) に対応しています。たとえば、次のような 3 つの表示オブジェクトがあるとします。各オブジェクトは、Ball と呼ばれるカスタムクラスから作成されました。

コンテナ内のこれらの表示オブジェクトのレイヤーは、addChildAt() メソッドを使用して調整できます。たとえば、次のようなコードがあるとします。

ball_A = new Ball(0xFFCC00, "a");
ball_A.name = "ball_A";
ball_A.x = 20;
ball_A.y = 20;
container.addChild(ball_A);

ball_B = new Ball(0xFFCC00, "b");
ball_B.name = "ball_B";
ball_B.x = 70;
ball_B.y = 20;
container.addChild(ball_B);

ball_C = new Ball(0xFFCC00, "c");
ball_C.name = "ball_C";
ball_C.x = 40;
ball_C.y = 60;
container.addChildAt(ball_C, 1);

このコードを実行した後、表示オブジェクトは次のように container DisplayObjectContainer オブジェクト内に配置されます。オブジェクトのレイヤーに注意してください。

表示オブジェクトのレイヤーの順序を確認するには、getChildAt() メソッドを使用します。getChildAt() メソッドは、メソッドに渡すインデックス番号に基づいてコンテナの子オブジェクトを返します。たとえば、次のコードは、container DisplayObjectContainer オブジェクトの子リスト内の異なる位置にある表示オブジェクトの名前を表示します。

trace(container.getChildAt(0).name); // ball_A
trace(container.getChildAt(1).name); // ball_C
trace(container.getChildAt(2).name); // ball_B

親コンテナの子リストから表示オブジェクトを削除すると、リスト上でそれより上位にあるエレメントの子インデックス内の位置がそれぞれ下がります。たとえば、引き続き前のコードを使用すると、次のコードは、子リスト内の下位にある表示オブジェクトが削除された場合、container DisplayObjectContainer 内の位置 2 にあった表示オブジェクトが位置 1 に移動することを示します。

container.removeChild(ball_C);
trace(container.getChildAt(0).name); // ball_A
trace(container.getChildAt(1).name); // ball_B

removeChild() および removeChildAt() メソッドは、表示オブジェクトインスタンスを完全に削除しません。コンテナの子リストから削除するだけです。インスタンスは、別の変数で参照できますオブジェクトを完全に削除するには、delete 演算子を使用します。

表示オブジェクトには親コンテナが 1 つだけあるので、その 1 つだけの表示オブジェクトコンテナに表示オブジェクトのインスタンスを追加できます。たとえば、次のコードは、表示オブジェクト tf1 が 1 つだけのコンテナ (この例では、DisplayObjectContainer クラスを拡張する Sprite) 内にあることを示します。

tf1:TextField = new TextField();
tf2:TextField = new TextField();
tf1.name = "text 1";
tf2.name = "text 2";

container1:Sprite = new Sprite();
container2:Sprite = new Sprite();

container1.addChild(tf1);
container1.addChild(tf2);
container2.addChild(tf1);

trace(container1.numChildren); // 1
trace(container1.getChildAt(0).name); // text 2
trace(container2.numChildren); // 1
trace(container2.getChildAt(0).name); // text 1

表示オブジェクトコンテナ内に含まれる表示オブジェクトを別の表示オブジェクトコンテナに追加すると、表示オブジェクトは最初の表示オブジェクトコンテナの子リストから削除されます。

表示リスト外にある表示オブジェクト、つまり Stage オブジェクトの子である表示オブジェクトコンテナ内に含まれていない表示オブジェクトは、"リスト外" 表示オブジェクトといいます。

表示リスト内の移動

既に見たように、表示リストはツリー構造です。ツリーの一番上には、複数の表示オブジェクトを含めることができるステージがあります。これらの表示オブジェクトは、それ自体が表示オブジェクトコンテナであり、別の表示オブジェクト、つまり表示オブジェクトコンテナを含めることができます。

DisplayObjectContainer クラスには、表示オブジェクトコンテナの子リストを使用して表示リスト内を移動するためのプロパティとメソッドが含まれています。たとえば、次のようなコードがあるとします。このコードは、2 つの表示オブジェクト title と pict を container オブジェクト (Sprite、Sprite クラスは DisplayObjectContainer クラスを拡張します) に追加します。

var container:Sprite = new Sprite();
var title:TextField = new TextField();
title.text = "Hello";
var pict:Loader = new Loader();
var url:URLRequest = new URLRequest("banana.jpg");
pict.load(url);
pict.name = "banana loader";
container.addChild(title);
container.addChild(pict);

getChildAt() メソッドは、特定のインデックス位置にある表示リストの子を返します。

trace(container.getChildAt(0) is TextField); // true

子オブジェクトに名前でアクセスすることもできます。各表示オブジェクトには name プロパティがあります。name プロパティを割り当てなかった場合は、Flash Player では "instance1" などのデフォルト値が割り当てられます。たとえば、次のコードは、getChildByName() メソッドを使用して "banana loader" という名前で子表示オブジェクトにアクセスする方法を示します。

trace(container.getChildByName("banana loader") is Loader); // true

getChildByName() メソッドを使用すると、getChildAt() メソッドを使用する場合よりパフォーマンスが低下します。

表示オブジェクトコンテナには表示リストの子オブジェクトとして別の表示オブジェクトコンテナを含めることができるため、ツリーのようにアプリケーションの表示リスト内を移動できます。たとえば、前述のコードの抜粋では、pict Loader オブジェクトのロード操作が完了すると、pict オブジェクトにビットマップである子表示オブジェクトがロードされます。このビットマップ表示オブジェクトにアクセスするために、pict.getChildAt(0) を記述することができます。また、container.getChildAt(0) == pict であるため、container.getChildAt(0).getChildAt(0) を記述することもできます。

次の関数は、表示オブジェクトコンテナから表示リストのインデントされた trace() を出力します。

function traceDisplayList(container:DisplayObjectContainer,
                                                indentString:String = ""):void
{
    var child:DisplayObject;
    for (var i:uint=0; i < container.numChildren; i++)
    {
        child = container.getChildAt(i);
        trace (indentString, child, child.name); 
        if (container.getChildAt(i) is DisplayObjectContainer)
        {
            traceDisplayList(DisplayObjectContainer(child), indentString + "    ")
        }
    }
}

Flex を使用している場合、Flex は多くのコンポーネント表示オブジェクトクラスを定義し、これらのクラスは DisplayObjectContainer クラスの表示リストアクセスメソッドをオーバーライドすることを知っておく必要があります。たとえば、mx.core パッケージの Container クラスは、(Container クラスによって拡張される) DisplayObjectContainer クラスの addChild() メソッドおよびその他のメソッドをオーバーライドします。addChild() メソッドの場合、Container クラスは、Flex で Container インスタンスにすべてのタイプの表示オブジェクトを追加できないように、このメソッドをオーバーライドします。この場合、オーバーライドされたメソッドでは、追加する子オブジェクトが mx.core.UIComponent オブジェクトの一種である必要があります。

Stage プロパティの設定

Stage クラスは、DisplayObject クラスのほとんどのプロパティとメソッドをオーバーライドします。オーバーライドされたプロパティまたはメソッドのいずれかを呼び出した場合、Flash Player は例外をスローします。たとえば、Stage オブジェクトは、アプリケーションのメインコンテナとして位置が固定されているため、x プロパティや y プロパティを持ちません。x プロパティおよび y プロパティは、コンテナを基準として表示オブジェクトの位置を参照します。Stage オブジェクトは別の表示オブジェクトコンテナに含まれていないため、この 2 つのプロパティは適用されません。

再生フレームレートの制御

Stage クラスの framerate プロパティは、アプリケーションにロードされたすべての SWF ファイルのフレームレートを設定するために使用します。詳細については、『ActionScript 3.0 リファレンスガイド』を参照してください。

フルスクリーンモードの操作

フルスクリーンモードでは、境界線、メニューバーなどを表示せずに、ビューアのモニタ全体に SWF を表示できます。Stage クラスの displayState プロパティは、SWF のフルスクリーンモードのオンとオフの切り替えに使用されます。displayState プロパティは、flash.display.StageDisplayState クラス内の定数で定義された値のいずれかに設定できます。フルスクリーンモードをオンにするには、displayState を StageDisplayState.FULL_SCREEN に設定します。

// mySprite は表示リストに既に追加されている Sprite インスタンスです。

mySprite.stage.displayState = StageDisplayState.FULL_SCREEN;

フルスクリーンモードを終了するには、displayState プロパティを StageDisplayState.NORMAL に設定します。

mySprite.stage.displayState = StageDisplayState.NORMAL;

フルスクリーンモードは別のウィンドウにフォーカスを切り替える、またはキーの組み合わせのいずれか (Esc キー (すべてのプラットフォーム)、Ctrl + W キー (Windows)、Cmd + w キー (Mac)、または Alt + F4 (Windows)) を押しても終了できます。

フルスクリーンモードのステージの拡大・縮小の動作は、通常モードのものと同じです。
拡大・縮小は、Stage クラスの scaleMode プロパティで制御されます。scaleMode プロパティが StageScaleMode.NO_SCALE に設定されると、ステージの stageWidth と stageHeight プロパティは SWF によって専有される画面のサイズに合わせて変更されます (この場合は画面全体)。

Stage クラスの fullScreen イベントを使用して、フルスクリーンモードのオン・オフを検出して、対応することができます。たとえば、この例のように、フルスクリーンモードにする、またはフルスクリーンモードを終了する際にアイテムの位置を変更する、画面にアイテムを追加する、または画面からアイテムを削除することができます。

import flash.events.FullScreenEvent;

function fullScreenRedraw(event:FullScreenEvent):void
{
    if (event.fullScreen)
    {
        // 入力テキストフィールドを削除する
        // フルスクリーンモードを閉じるボタンを追加する
    }
    else
    {
        // 入力テキストフィールドを再追加する
        // フルスクリーンモードを閉じるボタンを削除する
    }
}

mySprite.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenRedraw);

このコードに示されているように、fullScreen イベントのイベントオブジェクトは、flash.events.FullScreenEvent クラスのインスタンスであり、フルスクリーンモードが有効
(true) であるか無効 (false) であるかを示す fullScreen プロパティが含まれています。

ActionScript のフルスクリーンモードを操作する際には、以下の注意事項を考慮してください。

この他にも、理解する必要があるセキュリティ関連の制限がいくつかあります。これらについては、フルスクリーンモードのセキュリティで説明します。

表示オブジェクトのイベント処理

DisplayObject クラスは EventDispatcher クラスを継承します。つまり、どの表示オブジェクトでもイベントモデルに含めることができます (イベントの処理参照)。表示オブジェクトは、EventDispatcher クラスから継承された独自の addEventListener() メソッドを使用して、特定のイベントを受け取ることができます。ただし、これは、リスナーオブジェクトがそのイベントのイベントフローの一部である場合のみです。

Flash Player によってイベントオブジェクトが送出されると、そのイベントオブジェクトはステージからイベントが発生した表示オブジェクトへと往復します。たとえば、ユーザーが child1 という名前の表示オブジェクトをクリックすると、Flash Player により、ステージから表示リスト階層を下がって child1 表示オブジェクトまでイベントオブジェクトが送出されます。

次の図に示されているように、概念上イベントフローは 3 段階に分けられます。