表示オブジェクトのパンとスクロール

表示させたい領域に対して大きすぎる表示オブジェクトがある場合、scrollRect プロパティを使用して、表示オブジェクトの可視領域を定義できます。また、ユーザー入力に応じて scrollRect プロパティを変更することで、コンテンツの左右のパンや上下のスクロールが可能になります。

scrollRect プロパティは、Rectangle クラスのインスタンスです。Rectangle クラスは、矩形領域を単一のオブジェクトとして定義する場合に必要な値を結合するクラスです。最初に表示オブジェクトの可視領域を定義するには、新しい Rectangle インスタンスを作成し、これを表示オブジェクトの scrollRect プロパティに割り当てます。その後でスクロールまたはパンするには、scrollRect プロパティを個別の Rectangle 変数に読み込み、目的のプロパティを変更します (たとえば、パンするには Rectangle インスタンスの x プロパティを、スクロールするには y プロパティを変更します)。次に、この Rectangle インスタンスを scrollRect プロパティに再度割り当て、変更された値を表示オブジェクトに通知します。

たとえば、次に示すコードでは、SWF ファイルの境界内には収まらない高さが設定された bigText という名前の TextField オブジェクトに対する可視領域を定義します。up と down という 2 つのボタンがクリックされると、TextField オブジェクトのコンテンツを上下にスクロールさせる関数が呼び出されます。この関数は、scrollRect Rectangle インスタンスの y プロパティを変更することによってスクロールを行います。

import flash.events.MouseEvent;
import flash.geom.Rectangle;

// TextField インスタンスの初期可視領域を次のように定義する。
// 左 : 0、最上部 : 0、幅 : TextField の幅、高さ : 350 ピクセル。
bigText.scrollRect = new Rectangle(0, 0, bigText.width, 350);

// TextField をビットマップとしてキャッシュすることにより、パフォーマンスを改善する。
bigText.cacheAsBitmap = true;

// [up] ボタンがクリックされると呼び出される
function scrollUp(event:MouseEvent):void
{
    // 現在のスクロール矩形にアクセスする。
    var rect:Rectangle = bigText.scrollRect;
    // 矩形の y 値を 20 だけ減らすと、結果として
    // 矩形は 20 ピクセルだけ下方に移動する。
    rect.y -= 20;
    // 矩形を TextField に再割り当てし、変更を "適用" する。
    bigText.scrollRect = rect;
}

// [down] ボタンがクリックされると呼び出される
function scrollDown(event:MouseEvent):void
{
    // 現在のスクロール矩形にアクセスする。
    var rect:Rectangle = bigText.scrollRect;
    // 矩形の y 値を 20 だけ増やすと、結果として
    // 矩形は 20 ピクセルだけ上方に移動する。
    rect.y += 20;
    // 矩形を TextField に再割り当てし、変更を "適用" する。
    bigText.scrollRect = rect;
}

up.addEventListener(MouseEvent.CLICK, scrollUp);
down.addEventListener(MouseEvent.CLICK, scrollDown);

上記の例に示すように、表示オブジェクトの scrollRect プロパティを操作する場合、cacheAsBitmap プロパティを使用して、Flash Player が表示オブジェクトのコンテンツをビットマップとしてキャッシュするように指定するのが最適な方法です。こうすると、Flash Player は、表示オブジェクトがスクロールされるたびに、そのコンテンツ全体を再描画する必要がなくなります。代わりに、キャッシュされたビットマップを使用して、必要な部分だけを画面に直接レンダリングできます。詳細については、表示オブジェクトのキャッシュを参照してください。