ScrollPane コンポーネントの使用

ロードされた領域に収まらない大きなコンテンツを表示する場合、ScrollPane コンポーネントを使用します。例えば、大きなイメージがあり、アプリケーションに小さなスペースしかない場合でも、ScrollPane にロードすれば表示できます。 ScrollPane には、ムービークリップ、JPEG、PNG、GIF、および SWF ファイルをロードできます。

ScrollPane や UILoader などのコンポーネントには、コンテンツのロードがいつ完了したかを判別できる complete イベントがあります。ScrollPane コンポーネントや UILoader コンポーネントのコンテンツにプロパティを設定する場合は、 complete イベントをリスンし、イベントハンドラーでプロパティを設定します。例えば、次のコードでは、Event. COMPLETE イベントのリスナと、ScrollPane のコンテンツの alpha プロパティを 0.5 に設定するイベントハンドラーを作成します。

function spComplete(event:Event):void{ 
aSp.content.alpha = .5; 
} 
aSp.addEventListener(Event.COMPLETE, spComplete);

ScrollPane にコンテンツをロードするときに位置を指定する場合は、その位置 (X 座標および Y 座標) を 0, 0 と指定する必要があります。例えば、次のコードでは、ボックスが 0, 0 の位置に描画されるため、ScrollPane が正しくロードされます。

var box:MovieClip = new MovieClip(); 
box.graphics.beginFill(0xFF0000, 1); 
box.graphics.drawRect(0, 0, 150, 300); 
box.graphics.endFill(); 
aSp.source = box;    //load ScrollPane

詳しくは、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の ScrollPane クラスを参照してください。

ScrollPane コンポーネントのユーザー操作

ScrollPane は有効または無効にすることができます。 無効な ScrollPane は、マウスおよびキーボードからの入力を受け付けません。フォーカスを取得している ScrollPane では、次のキーを使用した操作が可能です。

キー

説明

下向き矢印

コンテンツを垂直方向に 1 行上にスクロールします。

上向き矢印

コンテンツを垂直方向に 1 行下にスクロールします。

End

コンテンツを ScrollPane の一番下に移動します。

左向き矢印

コンテンツを水平方向に 1 行右にスクロールします。

右向き矢印

コンテンツを水平方向に 1 行左にスクロールします。

Home

コンテンツを ScrollPane の最上部に移動します。

End

コンテンツを ScrollPane の一番下に移動します。

Page Down

コンテンツを垂直方向に 1 ページ上にスクロールします。

Page Up

コンテンツを垂直方向に 1 ページ下にスクロールします。

ユーザーはマウスを使用し、コンテンツ上および垂直スクロールバーや水平スクロールバー上で ScrollPane を操作することができます。 scrollDrag プロパティが true に設定されている場合、ユーザーは、マウスを使用してコンテンツをドラッグできます。コンテンツ上で表示されるハンドポインターは、ユーザーがそのコンテンツをドラッグできることを示しています。 他の多くのコントロールとは異なり、アクションはマウスボタンが押されると発生し、ボタンが離されるまで継続します。 コンテンツに有効なタブストップが指定されている場合は、 scrollDrag を false に設定する必要があります。そうしないと、マウスでコンテンツをクリックするたびにスクロールドラッグが実行されます。

ScrollPane コンポーネントのパラメーター

プロパティインスペクターまたはコンポーネントインスペクターで、ScrollPane の各インスタンスに設定できるパラメーターは、 horizontalLineScrollSize horizontalPageScrollSize horizontalScrollPolicy、scrollDrag、source、verticalLineScrollSize、verticalPageScrollSize および verticalScrollPolicy です。これらの各パラメーターには、対応する同名の ActionScript プロパティがあります。これらのパラメーターに設定できる値については、「 Adobe Flash Professional CS5 用 ActionScript 3.0 リファレンスガイド 」の ScrollPane クラスを参照してください。

ActionScript を記述すると、ScrollPane コンポーネントのプロパティ、メソッド、およびイベントを使用して、コンポーネントのこれらのオプションやその他のオプションを制御できます。

ScrollPane コンポーネントを使用したアプリケーションの作成

次の手順は、オーサリング時に ScrollPane コンポーネントをアプリケーションに追加する方法を示しています。 この例では、 source プロパティで指定されたパスから ScrollPane に画像をロードします。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ScrollPane コンポーネントをコンポーネントパネルからステージまでドラッグし、インスタンス名を aSp にします。

  3. アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。

    import fl.events.ScrollEvent; 
     
    aSp.setSize(300, 200); 
     
    function scrollListener(event:ScrollEvent):void { 
        trace("horizontalScPosition: " + aSp.horizontalScrollPosition +  
         ", verticalScrollPosition = " + aSp.verticalScrollPosition); 
    }; 
    aSp.addEventListener(ScrollEvent.SCROLL, scrollListener); 
     
    function completeListener(event:Event):void { 
        trace(event.target.source + " has completed loading."); 
    }; 
    // Add listener. 
    aSp.addEventListener(Event.COMPLETE, completeListener); 
     
    aSp.source = "http://www.helpexamples.com/flash/images/image1.jpg";
  4. 制御/ムービープレビューを選択して、アプリケーションを実行します。

ActionScript を使用した ScrollPane インスタンスの作成

この例では、ScrollPane を作成し、そのサイズを設定して、 source プロパティを使用してイメージをロードします。さらに、リスナを 2 つ作成します。 1 番目のリスナは、 scroll イベントをリスンし、ユーザーが垂直方向または水平方向にスクロールしたときに、イメージの位置を表示します。2 番目のリスナは、 complete イベントをリスンし、イメージのロードが完了したことを通知するメッセージを出力パネルに表示します。

この例では、ActionScript を使用して ScrollPane を作成し、150 ピクセル (幅) × 300 ピクセル (高さ) の MovieClip (赤色のボックス) を配置します。

  1. 新しい Flash (ActionScript 3.0) ドキュメントを作成します。

  2. ScrollPane コンポーネントをコンポーネントパネルからライブラリパネルにドラッグします。

  3. DataGrid コンポーネントをコンポーネントパネルからライブラリパネルにドラッグします。

  4. アクションパネルを開いて、メインタイムライン内でフレーム 1 を選択し、次の ActionScript コードを入力します。

    import fl.containers.ScrollPane; 
    import fl.controls.ScrollPolicy; 
    import fl.controls.DataGrid; 
    import fl.data.DataProvider; 
     
    var aSp:ScrollPane = new ScrollPane(); 
    var aBox:MovieClip = new MovieClip(); 
    drawBox(aBox, 0xFF0000);    //draw a red box 
     
    aSp.source = aBox; 
    aSp.setSize(150, 200); 
    aSp.move(100, 100); 
     
    addChild(aSp); 
     
    function drawBox(box:MovieClip,color:uint):void { 
                box.graphics.beginFill(color, 1); 
                box.graphics.drawRect(0, 0, 150, 300); 
                box.graphics.endFill();         
    }
  5. 制御/ムービープレビューを選択して、アプリケーションを実行します。