ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 複数行のテキストの入力
複数行のテキストの入力
今までにやってきた事を組み合わせて見ましょう。
「複数行のテキスト入力」を実現してみます。multilineプロパティと、typeプロパティの指定を組み合わせます。

Get Adobe Flash player
「>」の付近をクリックしてみて下さい。
入力カーソルが現れるハズです。
適当に、「何時も通勤電車で空席の取り合いをする憎いアンチクしょうを打倒する作戦」を書き連ねて見ましょう。

とにかく、複数行のテキストの入力が出来ることを確認してみて下さい。

private var txt_input: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  =   ">"; //  表示テキスト
    addChild(txt_input);
}

コードを見ると判りますが、表示位置がずらしてあります。「>」の表示がなければ、どこをクリックすれば入力状態になるのか全く判らなくなってしまいます。

Get Adobe Flash player
判りにくいインターフェースで、ユーザーを煙に巻いても意味がありません。
ユーザービリティ確保の為、入力領域に「枠」を指定してみましょう。


例では枠の色を指定していますが、これを省いた場合、デフォルトは黒(0x000000)です。


private var txt_input: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.border    =   true;   //  枠有効
    txt_input.borderColor   =   0x008080;   //  枠の色
    //
    addChild(txt_input);
}


Get Adobe Flash player
また、背景の色を指定する方法もあります。

心を落ち着ける水色にしてみました。

優しい気持ちで「夕方の値引きセールで何時も貴方の先を越すやり手のおばちゃんへ"自分の分も残しておいて"という思いを伝える陳情書」を心を込めて入力してみましょう。


private var txt_input: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);
}

文字を入力で、横に文字が領域一杯に並ぶと入力画面がスクロールします。
ここで、wordWrapプロパティ を使うと、「右端で折り返す」という指定が出来るようになります。
Get Adobe Flash player

private var txt_input: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;   //  色
    //
    txt_input.wordWrap  =   true;   //  折り返し有効
    //
    addChild(txt_input);
}


文字を入力すると判りますが、横幅、縦幅ともに、表示領域の制限近くになるとスクロールします。
このままでも使えなくはありませんが、やはりスクロールバーが出ると使い勝手が目に見えて向上するはずです。

しかし、残念な事に TextField には、指定一つでスクロールバーを表示するようなプロパティはありません。
更に困った事に、純粋な「Flax SDK 3 + Flash Develop + Action Script 3.0」の環境ですと、スクロールバーのコンポーネントの提供が在りません。 自力でスクロールバーのコード書かなければならないのです。


>> 自力でスクロールバーを作りたい!

トラックバック(0)

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

コメントする

ホーム >> 左脳ActionScript3 >> アクションスクリプト3 >> TextFieldクラス >> 複数行のテキストの入力