ホーム >> 左脳Script >> Adobe Flash >> Action Script >> Action Script 3 で 自作ScrollBar

Action Script 3 で 自作ScrollBar


スクロールバー。垂直スクロールバーが vScrollBar、水平スクロールバーが hScrollBar です。
内部構造としては、基礎となるSpriteの上に、「上下のボタンSimpleButton」「バーのドラッグ領域Sprite」「バーのSimpleButton」から成ります。 以下用法仕様。

仕様

コンポーネント使用に当っての仕様。vScrollBar、hScrollBar 自体は、Spriteを継承して作られています。
vScrollBar、hScrollBar 仕様
コンストラクタ
バーの長さ:Numberバーの物理的な長さ。垂直スクロールバーなら縦幅。水平バーなら横幅。
最小値:Numberパラメータ最小値。デフォルトは0。
最大値:Numberパラメータ最大値。デフォルトは1。
初期値:Numberパラメータ初期値。デフォルトは0。
ページサイズ:Numbeドラッグバーの長さ。デフォルトは1。
ラインサイズ:Number上下のボタン操作時の移動量。デフォルトは1。
プロパティ
pos:Numberバーの値(min<=pos<=max)。
min:Number最小値。
max:Number最大値。
page:Numberページサイズ。
line:Numberラインサイズ。
enable:Boolean有効/無効指定。無効にすると表示はグレーアウトされ、イベントが抑制される。
width:Numberコンポーネント幅。
height:Numberコンポーネント高さ。
イベント
Event.CHANGEバー移動時にイベント。


デモサンプル

"This is ScrollBar Sample Flash."
上部の Enable チェックで、下部のラジオボタンのグループの有効/無効を制御できます。
Enable チェックのある領域を囲む、垂直スクロールバーと水平スクロールバーのパラメータを変更できます。

  • ページサイズ
    右上のラジオボックスに「Page=*」とあるので変更してみましょう。スクロールバーのバー部分の幅が変わります。上記仕様のpageプロパティを変更する事でバーの幅を変える事ができます。

  • ラインサイズ
    右上のラジオボックスのグループの一つ下に、「Line=*」があります。ここで、スクロールバーのラインサイズの変更ができます。実際のラインサイズは、lineプロパティ で操作します。
    ラインサイズとは、スクロールバーの上下、又は左右の端についているボタンで操作した際のバーの移動量です。
    基本的には、名前の通りページサイズより小さな値を設定するのが、ユーザービリティから言っても理にかなっているのですが、現時点でプログラムによる値の制限はされていません。

  • 最大値、最小値
    下部の水平スクロールバーで、最大値、最小値を変更できます。変更がリアルタイムで更新される様子を観察できるでしょう。最小値、最大値のパラメータ設定が、矛盾した(最小値>最大値になる設定をした)場合、スクロールバーは無効状態になりバーの操作が出来なくなります。
    この場合は、矛盾しないパラメータが設定されれば再び有効状態に復帰します。
    この無効状態を enableプロパティ で知る事は出来ません。直接、minプロパティmaxプロパティ を調べてください。

パラメータが多い為、ごちゃごちゃしていますが、いろいろ弄って動作を確かめてみて下さい。

また今回、スクロールバーの機能実現にに当り、以下の記事を参考にしました。
  • スクロールバー作成のバーのドラッグ部分にて「マウスのキャプチャー範囲の為、StageにaddEventListenerする」を参考にしました。

    以下引用:
    Stageオブジェクトに逐一addEventListener。実はこれ、FlashPlayerの描画領域を超えて、さらにはブラウザのウィンドウ領域を超えてマウスイベントが拾えるすぐれものtips。StageオブジェクトのMOUSE_MOVEとMOUSE_UPはStageからのドラッグだとイベントを送出するらしいです。

    マウスキャプチャー参考:http://kozy.heteml.jp/l4l/2008/03/actionscript3.html


以下、デモ用コード。

//  スクロールバーデモ
private var cb:CheckBox;
//
private var vs:vScrollBar;
private var hs:hScrollBar;
private var tfv:TextField;
private var tfh:TextField;
//  ページサイズ選択
private var rd_page1:RadioButton;
private var rd_page2:RadioButton;
private var rd_page3:RadioButton;
//  ラインサイズ選択
private var rd_line1:RadioButton;
private var rd_line2:RadioButton;
private var rd_line3:RadioButton;
//  最小値変更用
private var tf_min:TextField;
private var hs_min:hScrollBar;
//  最大値変更用
private var tf_max:TextField;
private var hs_max:hScrollBar;
//
private function demo():void 
{
    cb  =   new CheckBox(<font size = "12" >Enable</font>.toXMLString(),true);
    addChild(cb);
    cb.addEventListener(Event.CHANGE, scrollBar_enable);
    //
    tfv =   new TextField();
    tfv.x   =   0;
    tfv.y   =   20;
    tfv.width   =   100;
    tfv.height  =   20;
    tfv.text    =   "v:";
    addChild(tfv);
    tfh =   new TextField();
    tfh.x   =   0;
    tfh.y   =   40;
    tfh.width   =   100;
    tfh.height  =   20;
    tfh.text    =   "h:";
    addChild(tfh);
    //  ページサイズ変更のラジオボタン
    rd_page1    =   new RadioButton("Page=10", "g_page", false, 80);
    rd_page1.x  =   120;
    addChild(rd_page1);
    rd_page1.addEventListener(Event.CHANGE, page1);
    rd_page2    =   new RadioButton("Page=100", "g_page", true, 80);
    rd_page2.x  =   120;
    rd_page2.y  =   20;
    addChild(rd_page2);
    rd_page2.addEventListener(Event.CHANGE, page2);
    rd_page3    =   new RadioButton("Page=200", "g_page", false, 80);
    rd_page3.x  =   120;
    rd_page3.y  =   40;
    addChild(rd_page3);
    rd_page3.addEventListener(Event.CHANGE, page3);
    //  ラインサイズ変更のラジオボタン
    rd_line1    =   new RadioButton("Line=1", "g_line", false, 80);
    rd_line1.x  =   120;
    rd_line1.y  =   80;
    addChild(rd_line1);
    rd_line1.addEventListener(Event.CHANGE, line1);
    rd_line2    =   new RadioButton("Line=10", "g_line", true, 80);
    rd_line2.x  =   120;
    rd_line2.y  =   100;
    addChild(rd_line2);
    rd_line2.addEventListener(Event.CHANGE, line2);
    rd_line3    =   new RadioButton("Line=50", "g_line", false, 80);
    rd_line3.x  =   120;
    rd_line3.y  =   120;
    addChild(rd_line3);
    rd_line3.addEventListener(Event.CHANGE, line3);
    //  最小値変更
    tf_min  =   new TextField();
    tf_min.x    =   0;
    tf_min.y    =   150;
    tf_min.width    =   80;
    tf_min.height   =   20;
    tf_min.text =   "min:-100";
    addChild(tf_min);
    hs_min  =   new hScrollBar(100, -500, 500,-100, 500, 10);
    hs_min.x    =   tf_min.x    +   tf_min.width;
    hs_min.y    =   tf_min.y;
    addChild(hs_min);
    hs_min.addEventListener(Event.CHANGE, min_change);
    //  最大値変更
    tf_max  =   new TextField();
    tf_max.x    =   0;
    tf_max.y    =   170;
    tf_max.width    =   80;
    tf_max.height   =   20;
    tf_max.text =   "max:100";
    addChild(tf_max);
    hs_max  =   new hScrollBar(100, -500, 500,100, 500, 10);
    hs_max.x    =   tf_max.x    +   tf_max.width;
    hs_max.y    =   tf_max.y;
    addChild(hs_max);
    hs_max.addEventListener(Event.CHANGE, max_change);
    //  垂直スクロールバー
    vs  =   new vScrollBar(100, -100, 100,0,100,10);
    vs.x    =   100;
    vs.y    =   0;
    addChild(vs);
    vs.addEventListener(Event.CHANGE, vScrollBar_move);
    //  水平スクロールバー
    hs  =   new hScrollBar(100, -100, 100,0,100,10);
    hs.x    =   0;
    hs.y    =   100;
    addChild(hs);
    hs.addEventListener(Event.CHANGE, hScrollBar_move);

}
private function vScrollBar_move(e:Event):void 
{   //  垂直スクロールバー移動
    tfv.text    =   "v:"+vs.pos.toString();
}
private function hScrollBar_move(e:Event):void 
{   //  水平スクロールバー移動
    tfh.text    =   "h:"+hs.pos.toString();
}
private function scrollBar_enable(e:Event):void 
{   //  スクロールバーの有効/無効
    vs.enable   =   cb.check;
    hs.enable   =   cb.check;
}
//  ページサイズ変更
private function page1(e:Event):void {  if (rd_page1.check) { vs.page = 10; hs.page = 10; } }
private function page2(e:Event):void {  if (rd_page2.check) { vs.page = 100; hs.page = 100; }   }
private function page3(e:Event):void {  if (rd_page3.check) { vs.page = 200; hs.page = 200; }   }
//  ラインサイズ変更
private function line1(e:Event):void {  if (rd_line1.check) { vs.line = 1; hs.line = 1; }   }
private function line2(e:Event):void {  if (rd_line2.check) { vs.line = 10; hs.line = 10; } }
private function line3(e:Event):void {  if (rd_line3.check) { vs.line = 50; hs.line = 50; } }
//  最小値変更
private function min_change(e:Event):void 
{
    vs.min  =   hs_min.pos;
    hs.min  =   hs_min.pos;
    tf_min.text =   "min:"+hs_min.pos.toString();
}
//  最大値変更
private function max_change(e:Event):void 
{
    vs.max  =   hs_max.pos;
    hs.max  =   hs_max.pos;
    tf_max.text =   "max:"+hs_max.pos.toString();
}


ソース

デモを含めたコンポーネントパッケージのソースはこちらで公開しています。
>> Action Script 3 の U/Iコンポーネント



トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/134

コメントする

ホーム >> 左脳Script >> Adobe Flash >> Action Script >> Action Script 3 で 自作ScrollBar

アーカイブ

このブログ記事について

このページは、n-yagiが2009年6月 1日 19:15に書いたブログ記事です。

ひとつ前のブログ記事は「Action Script 3 で 自作Button」です。

次のブログ記事は「Action Script 3 で 自作ListBox」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。