画面全体にスクロールバーをつけるやり方

画面全体にスクロールバーをつけるやり方をどなたかお教えいただけませんでしょうか？

そしてそのスクロールバーが一番下までスクロールした時点でボタンが可動するような仕組みを作りたいのですが…

どなたか宜しくお願い致します。

僕の使っているものはMacromedia　Flash 8です。

No.1 回答者： DPE 回答日時： 2007/01/23 20:17

_root の _x と _y プロパティを書き換えるとムービー全体が移動します。

ただし、スクロールバーやボタンも _root の子であるために同時に移動してしまいます。
そこで、ムービー全体を移動した後で、スクロールバーとボタンの座標を_root が移動した分だけ元に戻すようにします。
画面全体が移動してもスクロールバーとボタンだけは常に同じ位置に留まり続けるので、ムービー全体がスクロールしたように見えるかと思います。


作る前にレイアウトをきっちり決めてください。
スクロール対象は１番下に透明な四角形（もしくは背景用の画像など）を敷いてこの上に文字や画像を並べると、大きさを考えやすくなります。

ステージの一部をボタンを表示する領域にします。
このボタンは、ムービークリップの中に入れ子にします。
親であるムービークリップは先のコンテンツと同じ要領で、１番下に背景を敷いてその上のレイヤーにボタンを配置します。
ステージに配置した時に、この背景は余白としての役割を果たします。
スクロール対象の上にムービークリップの背景部分が上書きされて表示されるので、ボタンの表示部分とスクロールする部分が違う部品になっているように見えるというわけです。

-------------------------------------------------------------------

とりあえず、以下のレイアウトの作例を考えます。
スクロールは縦方向とします。

　・ステージの大きさは幅×高さ = 200 px × 150 px
　・コンテンツ表示領域は高さが 100 px ( Y = 0 ～ 99 ）、残りはボタンを常時表示しておくためのスペース
　・スクロール対象であるコンテンツは高さが 500 px（表示領域の５枚分のサイズ）


今回の作例では重ね順が大切です。
重ね順はレイヤーの順序を利用して決めます。

ムービーのレイヤーは次のような構成にします。
この重ね順は編集時のレイヤーの順序と同じです。

　アクション　　：スクリプトを書きます。
　スクロールバー： UIScrollBar コンポーネントのインスタンスを置きます。
　ボタン表示領域：ボタンのムービークリップ（ボタン＋余白）を置きます。
　コンテンツ　　：スクロールさせるテキストや絵などを置きます。
　背　景　　　　：スクロール対象の大きさを固定させるための背景です。


まず、”背景”レイヤーに 200 px × 500 px の、線のない四角形を描画します。幅は特に関係ありませんから、表示領域と同じサイズにしなくても結構です。
これより上のレイヤーに文字や絵などを描画してください。
”コンテンツ”と”ボタン表示領域”レイヤーの間であれば、レイヤーを分けて置いても構いません。

次に、UIScrollBar コンポーネントのインスタンスをステージ右上に配置します。配置するレイヤーは”スクロールバー”です。
「プロパティ」パネルのＨ：の項目に数値を入力し、表示領域の高さ（この例では 100 px ）に合わせてください。
スクロールバーもスクリプトで制御するので、インスタンス名が必要です。仮に” sc_bar ”とします。


ムービークリップシンボルを１つ、新規に作成します。
シンボルの１番下のレイヤーに 200 px × 50 px の塗りだけの四角形を描画し、これより上のレイヤーにボタンのインスタンスを配置してください。
このボタンにインスタンス名を付けてください。仮に” btn ”とします。

できたムービークリップのインスタンスを、”ボタン表示領域”レイヤーの、ステージの下端（ X = 0 、Y = 100 の地点）に配置します。
これにもインスタンス名を付けてください。仮に” btn_area ”とします。


以上で準備は完了です。
次はスクリプトを書きます。

**************************************

スクリプトは全て、メインのタイムラインに書きます。

（↓各行頭に全角のスペースが入っています。コピーする際はご注意ください）


　/////////////////////////////////////////////////////
　//初期設定
　/////////////////////////////////////////////////////

　//表示領域とスクロール対象の高さ
　area_h = 100;
　object_h = 500;

　//１ページあたりの表示量と、スクロールバーが返す最大値
　page_h = area_h;
　sc_max = object_h - area_h;

　//もとの画面位置とスクロール量を記憶する変数
　org_y = 0;
　scroll_y = 0;


　/////////////////////////////////////////////////////
　//スクロールバーの設定とスクロール処理
　/////////////////////////////////////////////////////

　//スクロールバーが返す値を設定
　sc_bar.setScrollProperties( page_h , 0 , sc_max );

　//スクロールバーが動いた時の処理
　sc_listener = new Object();
　sc_listener.scroll = function( info:Object )
　{
　　var sc_obj;

　　//スクロールバーの参照を格納
　　sc_obj = info.target;


　　//スクロール前のムービー全体の位置を保存しておく
　　org_y = _root._y;

　　//スライダの位置に応じて、画面全体を縦に移動
　　_root._y = -sc_obj.scrollPosition;

　　//画面が移動した分だけ、
　　//スクロールバー自身とボタン表示領域の位置を戻す
　　scroll_y = org_y - _root._y;
　　sc_obj._y += scroll_y;
　　btn_area._y += scroll_y;


　　//スライダが一番下に来ていたらボタンを有効にする
　　if( sc_obj.scrollPosition >= sc_max )
　　{
　　　btn_area.btn.enabled = true;
　　　btn_area.btn._alpha = 100;
　　}
　　//それ以外の時は無効にしておく
　　else
　　{
　　　btn_area.btn.enabled = false;
　　　btn_area.btn._alpha = 30;
　　}
　};

　//リスナーオブジェクトを登録
　sc_bar.addEventListener( "scroll" , sc_listener );


　/////////////////////////////////////////////////////
　//ボタンの初期設定
　/////////////////////////////////////////////////////

　//ボタンを無効（無効の間は薄表示）にしておく
　btn_area.btn.enabled = false;
　btn_area.btn._alpha = 30;

　//ボタンが押された時の処理
　btn_area.btn.onRelease = function()
　{
　　/*ここに、ボタンがクリックされた時の処理を書く*/
　};



マスクを使っていないため「ムービープレビュー」では画面からはみ出す部分が見えてしまい、分かりにくいかもしれません。
「パブリッシュ」で HTML ファイルに配置してブラウザで再生するか、スタンドアロンプレイヤーで確認してみてください。

**************************************

スクロールバーの原理は、スライダが動いた方向と逆の向きにスクロール対象を動かすというものです。

UIScrollBar では、スライダの位置に応じたある値を取得できる仕組みになっています。
この値そのものに特定の意味はありません。
何の意味を持たせるかは自由です。

例えば、テキストフィールドと関連付けた時に返してくる値はテキストフィールドの行で、範囲は 1 ～ maxscroll です。
テキストフィールドに関連付けると、返す値の範囲はテキストフィールドの大きさやフォントサイズ・行数などから自動的に設定されます。
スライダを操作すると、スクロールバーはスライダの座標から返す値を割り出します。そして、関連付けられているテキストフィールドの scroll プロパティを書き換え、該当する箇所を変更しています。


スクロールバーが返す値の範囲は setScrollProperties というメソッドで設定できます。
今回はスクロールバーで動かす対象がテキストフィールドではないため、値の範囲を自分で定義しなければなりません。
スクロールバーからどんな値を受け取り、それをどのようにスクロール処理に反映するかが、腕の見せ所なのです。

setScrollProperties の引数は３つです。

　・第１引数
　　　１ページあたりの表示量。主にスライダの大きさに影響を与えます。
　・第２引数
　　　スクロールバーが返す最小値。 0 未満にはできません。通常は 0 です。
　・第３引数
　　　スクロールバーが返す最大値。縦のスクロールバーの場合は、スライダが下端にある時の値です。


今回は、スクロールバーから返される値を直接スクロール処理に反映できるように値を決めます。

スライダが上端にある時、スクロール対象はステージの上端（ Y = 0 ）にあればいいので、第２引数は 0 にします。

ちょっと頭を使うのが第３引数です。
この値は、スクロール対象と表示領域の大きさから決めます。
スライダが下端にある時は、スクロール対象の下端が、表示領域の大きさの分だけ表示されるということです。
スクロールバーから返される数値をもとにこの位置を割り出せるように、最大値を決めます。
文字だけでは分かりにくいかと思いますので、図に描いて考えてみてください。


スクロールバーが返す値を決めたら、あとは、スライダが動くたびにスライダの位置に応じた値を見て、それとは逆の方向にスクロール対象を移動させるだけです。
今回はムービー全体を縦スクロールということで、_root の _y 座標を書き換えます。

スライダが動いたかどうかは、UIScrollBar コンポーネント（を制御しているクラス）が持っている scroll というイベントを利用して検出します。
スクロールバーが返す値は、scrollPosition プロパティに入っています。
スライダが下端にあるかどうかは、scrollPosition の値が setScrollProperties の第３引数に設定した値に達しているかどうかで判断できます。

冒頭にも書きましたように、スクロールバーもボタンも _root の子であるために、_root ごと動かすとこの２つも同時に動いていってしまいます。
そこで、まず、_root を移動する前に _y の値を保存しておきます。
移動後の座標と保存しておいた座標の差だけスクロールバーとボタンがズレてしまったということですから、この２つをその移動量だけ改めて移動して位置を戻します。


最後に、ボタンはムービークリップシンボルの中の入れ子になっていますので、ターゲットパスにご注意ください。

-------------------------------------------------------------------

・・・とまあ、力技ではありますけれど、一応、ムービー全体をスクロールバーで動かすことは可能です。
ですが、一般的には、スクロール対象をムービークリップとして作り、マスクを利用して一部分だけを表示しながら移動させる方法をとります。
スクロール対象のムービークリップだけが移動するのであれば、移動した分だけスクロールバーとボタンを戻すといった余計な手間をかける必要もなくなります。

Flash のムービークリップやステージは無限に大きくできるわけではありません。
また、静止テキストが多すぎると処理が重くなったり、字が重なって表示されることがあります。
スクロールバーでスクロールさせる対象の大きさはほどほどにしましょう。


長くなってすみませんでした。
不明な点がありましたら補足してください。