ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> スクロールバーの描画
スクロールバーの描画
Get Adobe Flash player
実際に、スクロールバーを表示してみましょう。(あくまで表示だけ。ドラッグはまだできません。)

デザインの利いたカッコいいユーザーインターフェースで作りたい所ですが、 そもそもスクロールバーとしての機能があってこそ、ですのでデザインに関しては、極限まで手を抜きます。


少々長いですが、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();
    //  TextFieldからのEvent.SCROLLイベントで、スクロールバーの移動をする。
    txt_input.addEventListener(Event.SCROLL, scrH_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);
    //
    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;
    }
}

このコードでのポイントは、Event.SCROLLイベント です。これは、TextField内のテキスト表示位置が更新された時起こるイベントです。
これを監視し「表示位置が更新されたら、スクロールバーの位置を更新する」事で、リアルタイムにスクロールバーを反応させる事が出来ます。


>> マウスの操作を可能にする

トラックバック(0)

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

コメントする

ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> スクロールバーの描画