ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 垂直スクロールバーも追加してみる
垂直スクロールバーも追加してみる
まずは、結果から。デザインこそシンプルですが、TextField にスクロールバーを実装できました。

Get Adobe Flash player

実際は、水平スクロールバーのコードから、殆どコピー&ペーストで垂直スクロールバーのルーチンを追加しました。

ここで注意が必要なのが、垂直の「maxScrollVプロパティ、scrollVプロパティ」は、水平の物と数値の扱いが違います。

水平のプロパティが、「0から始まるピクセル単位」なのに対し、垂直のプロパティは「1から始まる行数」なのです。

プロパティから値を取得する部分と、プロパティへ値を設定する部分に、少々の修正が必要になります。
今回の「スクロールバーのある TextField」のコード全容です。ご確認下さい。

private var txt_input:TextField;    //  入力領域
private var txt_status:TextField;   //  状態表示領域
//  画面構成の初期化
private function TextField_multline():void 
{
    txt_input   =   new TextField();
    txt_input.x =   20; //  横位置
    txt_input.y =   20; //  縦位置
    txt_input.width     =   200;    //  幅
    txt_input.height    =   100;    //  高さ
    txt_input.multiline =   true;   //  複数行
    txt_input.type  =   flash.text.TextFieldType.INPUT; //  入力タイプ
    txt_input.text  =   ">";    //  表示テキスト
    txt_input.background    =   true;   //  背景色指定有効化
    txt_input.backgroundColor   =   0xa0e0e0;   //  色
    addChild(txt_input);
    //
    txt_status  =   new TextField();
    txt_status.x    =   20;
    txt_status.width    =   200;
    txt_status.height   =   20;
    addChild(txt_status);
    //  テキスト変化イベント監視開始
    txt_input.addEventListener(Event.CHANGE, change_text);
    //  水平スクロールバー初期化
    scrH_init();
    //  垂直スクロールバー初期化
    scrV_init();
    //  TextFieldからのEvent.SCROLLイベントで、スクロールバーの移動をする。
    txt_input.addEventListener(Event.SCROLL, scrH_move);
    //  TextFieldからのEvent.SCROLLイベントで、スクロールバーの移動をする。
    txt_input.addEventListener(Event.SCROLL, scrV_move);
}
//  テキスト内容の変化を受けるイベント
private function change_text(e:Event):void 
{
    txt_status.text =   "(" +   txt_input.scrollH   +   "px"
                    +   "," +   txt_input.scrollV   +   "行"
                    +   "):最大"
                    +   "(" +   txt_input.maxScrollH    +   "px"
                    +   "," +   txt_input.maxScrollV    +   "行"
                    +   ")";
}
//--------------------------------------------------------------------
//  水平スクロールバー
private var scrH:Sprite;
private var scrHB:Sprite;
//  水平スクロールバー初期化
private function scrH_init():void 
{
    //  水平スクロールバー領域
    scrH    =   new Sprite();
    scrH.x  =   txt_input.x;
    scrH.y  =   txt_input.y +   txt_input.height;
    addChild(scrH);
    //  水平スクロールバーボタン
    scrHB   =   new Sprite();
    scrHB.x =   0;
    scrHB.y =   0;
    scrHB.visible   =   false;  //  スクロールバーボタンを見えない状態にする
    scrH.addChild(scrHB);
    //  マウスボタン押下(スクロールボタンのドラッグ開始)の監視
    scrHB.addEventListener(MouseEvent.MOUSE_DOWN, scrH_dragStart);
    //
    scrH_draw();
}
//  水平スクロールバーの描画
private function scrH_draw():void 
{
    //  スクロールバー領域描画
    var gh:Graphics =   scrH.graphics;
    gh.clear();                             //  描画クリア
    gh.beginFill(0x808080);                 //  指定した色で塗りつぶし開始
    gh.drawRect(0, 0, txt_input.width, 10); //  塗りつぶし領域指定
    gh.endFill();                           //  塗りつぶし実行
    //  スクロールバーボタン描画
    var ghb:Graphics    =   scrHB.graphics;
    ghb.clear();
    ghb.beginFill(0x80c0f0);
    ghb.drawRect(0, 0, 10, 10);
    ghb.endFill();
}
//  水平スクロールバーボタンの移動
private function scrH_move(e:Event):void 
{
    if (    txt_input.maxScrollH > 0    )
    {   //  水平のスクロール幅がゼロ以上の時、スクロールバーボタンが見えるようになる
        scrHB.visible   =   true;   //  スクロールバーボタンを見える状態にする
        //  スクロールバーボタンの移動最大値
        var scrH_max:Number =   scrH.width  -   scrHB.width;
        //  水平表示位置を取得する。最大値を上回る場合があるので、最大値以上になら無い様にする。
        var scrH_pos:Number =   (txt_input.scrollH > txt_input.maxScrollH)
                            ?   txt_input.maxScrollH : txt_input.scrollH;
        //  今のテキスト表示位置をスクロールバーの位置に換算する
        var pos:Number  =   scrH_pos    *   scrH_max    /   txt_input.maxScrollH;
        //  スクロールバーボタンの位置を更新
        scrHB.x =   pos;
    }
    else
    {   //  水平のスクロール幅がゼロの時、スクロールバーボタンが見えなくなる
        scrHB.visible   =   false;  //  スクロールバーボタンを見えない状態にする
        /*  水平スクロール最大値がゼロなのに、表示位置がずれている場合があるので、
         *  画面内に戻す為に、強制的にゼロにする。この方が、自然な動作をする。 */
        txt_input.scrollH   =   0;
    }
}
//  水平スクロールバーボタンのドラッグ開始
private function scrH_dragStart(e:MouseEvent):void 
{
    //  Event.SCROLLイベント監視解除
    txt_input.removeEventListener(Event.SCROLL, scrH_move);
    //  マウス移動ベント監視
    stage.addEventListener(MouseEvent.MOUSE_MOVE, scrH_darging);
    //  マウスボタンアップ(ドラッグ終了)イベント監視
    stage.addEventListener(MouseEvent.MOUSE_UP, scrH_dragEnd);
    //  マウス移動の始点を保存
    scrH_draging    =   scrH.mouseX;
}
//  ドラッグ用変数
private var scrH_draging:Number;
//  水平スクロールバーボタンのドラッグ移動
private function scrH_darging(e:MouseEvent):void 
{
    //  移動量算出
    var v:Number    =   scrH.mouseX -   scrH_draging;
    scrH_draging    =   scrH.mouseX;
    //  スクロールバーボタンの移動最大値
    var scrH_max:Number =   scrH.width  -   scrHB.width;
    //  新しいボタンの位置
    var newPos:Number   =   scrHB.x +   v;
    //  はみ出ないよう位置調整
    newPos  =   (newPos < 0)    ?   0   :   newPos;
    newPos  =   (newPos > scrH_max) ?   scrH_max    :   newPos;
    //  スクロールバーの位置を更新
    scrHB.x =   newPos;
    //  スクロールバーの位置から、テキスト表示位置を換算する
    var bar:Number  =   newPos  *   Number(txt_input.maxScrollH)    /   scrH_max;
    //  テキスト表示位置を更新
    txt_input.scrollH   =   bar;
}
//  水平スクロールバーボタンのドラッグ終了
private function scrH_dragEnd(w:MouseEvent):void 
{
    //  監視解除
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrH_darging);
    stage.removeEventListener(MouseEvent.MOUSE_UP, scrH_dragEnd);
    //  TextFieldからのEvent.SCROLLイベントで、スクロールバーの移動をする。
    txt_input.addEventListener(Event.SCROLL, scrH_move);
}
//--------------------------------------------------------------------
//  垂直スクロールバー
private var scrV:Sprite;
private var scrVB:Sprite;
//  垂直スクロールバー初期化
private function scrV_init():void 
{
    //  垂直スクロールバー領域
    scrV    =   new Sprite();
    scrV.x  =   txt_input.x +   txt_input.width;
    scrV.y  =   txt_input.y;
    addChild(scrV);
    //  垂直スクロールバーボタン
    scrVB   =   new Sprite();
    scrVB.x =   0;
    scrVB.y =   0;
    scrVB.visible   =   false;  //  スクロールバーボタンを見えない状態にする
    scrV.addChild(scrVB);
    //  マウスボタン押下(スクロールボタンのドラッグ開始)の監視
    scrVB.addEventListener(MouseEvent.MOUSE_DOWN, scrV_dragStart);
    //
    scrV_draw();
}
//  垂直スクロールバーの描画
private function scrV_draw():void 
{
    //  スクロールバー領域描画
    var gv:Graphics =   scrV.graphics;
    gv.clear();                                 //  描画クリア
    gv.beginFill(0x808080);                     //  指定した色で塗りつぶし開始
    gv.drawRect(0, 0, 10, txt_input.height);    //  塗りつぶし領域指定
    gv.endFill();                               //  塗りつぶし実行
    //  スクロールバーボタン描画
    var gvb:Graphics    =   scrVB.graphics;
    gvb.clear();
    gvb.beginFill(0x80c0f0);
    gvb.drawRect(0, 0, 10, 10);
    gvb.endFill();
}
//  垂直スクロールバーボタンの移動
private function scrV_move(e:Event):void 
{
    //  行数の最小値が1の為、ここで1を引いてゼロからの範囲にする
    var maxScrV:int =   txt_input.maxScrollV    -1;
    var posScrV:int =   txt_input.scrollV   -1;
    //
    if (    maxScrV > 0 )
    {   //  垂直のスクロール幅がゼロ以上の時、スクロールバーボタンが見えるようになる
        scrVB.visible   =   true;   //  スクロールバーボタンを見える状態にする
        //  スクロールバーボタンの移動最大値
        var scrV_max:Number =   scrV.height -   scrVB.height;
        //  垂直表示位置を取得する。最大値を上回る場合があるので、最大値以上になら無い様にする。
        var scrV_pos:Number =   (posScrV > maxScrV)
                            ?   maxScrV : posScrV;
        //  今のテキスト表示位置をスクロールバーの位置に換算する
        var pos:Number  =   scrV_pos    *   scrV_max    /   maxScrV;
        //  スクロールバーボタンの位置を更新
        scrVB.y =   pos;
    }
    else
    {   //  垂直のスクロール幅がゼロの時、スクロールバーボタンが見えなくなる
        scrVB.visible   =   false;  //  スクロールバーボタンを見えない状態にする
        /*  垂直スクロール最大値がゼロなのに、表示位置がずれている場合があるので、
         *  画面内に戻す為に、強制的に1(行数の最小値は1)にする。この方が、自然な動作をする。  */
        txt_input.scrollV   =   1;
    }
}
//  垂直スクロールバーボタンのドラッグ開始
private function scrV_dragStart(e:MouseEvent):void 
{
    //  Event.SCROLLイベント監視解除
    txt_input.removeEventListener(Event.SCROLL, scrV_move);
    //  マウス移動ベント監視
    stage.addEventListener(MouseEvent.MOUSE_MOVE, scrV_darging);
    //  マウスボタンアップ(ドラッグ終了)イベント監視
    stage.addEventListener(MouseEvent.MOUSE_UP, scrV_dragEnd);
    //  マウス移動の始点を保存
    scrV_draging    =   scrV.mouseY;
}
//  ドラッグ用変数
private var scrV_draging:Number;
//  垂直スクロールバーボタンのドラッグ移動
private function scrV_darging(e:MouseEvent):void 
{
    //  移動量算出
    var v:Number    =   scrV.mouseY -   scrV_draging;
    scrV_draging    =   scrV.mouseY;
    //  スクロールバーボタンの移動最大値
    var scrV_max:Number =   scrV.height -   scrVB.height;
    //  新しいボタンの位置
    var newPos:Number   =   scrVB.y +   v;
    //  はみ出ないよう位置調整
    newPos  =   (newPos < 0)    ?   0   :   newPos;
    newPos  =   (newPos > scrV_max) ?   scrV_max    :   newPos;
    //  スクロールバーの位置を更新
    scrVB.y =   newPos;
    //  スクロールバーの位置から、テキスト表示位置を換算する
    var bar:Number  =   Number(txt_input.maxScrollV -1) //  行数の最小値が1の為、ここで1を引いてゼロからの範囲にする
                    *   newPos  /   scrV_max;
    //  テキスト表示位置を更新
    txt_input.scrollV   =   bar +1; //  行数の最小値が1の為、ここで1を引いてゼロからの範囲にする
}
//  垂直スクロールバーボタンのドラッグ終了
private function scrV_dragEnd(w:MouseEvent):void 
{
    //  監視解除
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrV_darging);
    stage.removeEventListener(MouseEvent.MOUSE_UP, scrV_dragEnd);
    //  TextFieldからのEvent.SCROLLイベントで、スクロールバーの移動をする。
    txt_input.addEventListener(Event.SCROLL, scrV_move);
}

少々、長い?でしょうか。コメントをマメに入れた事もありますが、およそ260行ほどあります。
しかし、やっている事は簡単な事の積み重ねに過ぎません。一つ一つ見ていけば、大したことをやっていない事が判ります。

また、どんなテキスト入力コンポーネントにするのかデザインも関わってきますが、wordWrapプロパティ で、テキストを右端で折り返すような指定をすると、水平スクロールバーの実装を省く事も出来ます。

各自の用途に合わせ、いろいろ試して見て下さい。

トラックバック(0)

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

コメントする

ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 垂直スクロールバーも追加してみる