[PR]今日のニュースは
「Infoseek モバイル」






テキストフィールドを動的に作成したい






■テキストフィールドとは?


テキストフィールドは、文字を表示したり、文字を入力するためのエディットボックスの機能があります。





■テキストフィールドを作成する


テキストフィールを作成するには、 createTextField() メソッドを使用します。


ムービークリップ.createTextField ( "インスタンス名",深度, x座標, y座標, 幅, 高さ );
第01引数 新しく作成されるテキストフィールドの名前
第02引数 新しく作成されるテキストフィールドの深度
第03引数 配置する x 座標
第04引数 配置する y 座標
第05引数 配置する幅
第06引数 配置する高さ
返り値 [Flash 7 以前]なし、[Flash 8 以降]テキストフィールドの参照を返す


_root にテキストフィールドインスタンスを作成する(Flash 7 以前)

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照
tf.text = "表示テスト";	// 文字列を表示

_root にテキストフィールドインスタンスを作成する(Flash 8 以降)

var tf = _root.createTextField("text_field",0,50,100,200,20);
tf.text = "表示テスト";	// 文字列を表示






テキストフィールドに文字を表示したい







■テキストフィールドに文字を表示する


テキストフィールドに文字を表示したい場合は text プロパティに文字を代入します。


テキストフィールドに文字を表示する

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.text = "表示テスト";	// 文字列を表示





■関連付けた変数を表示する


指定した変数の値が更新されるたびにその値を表示したい場合は、variable プロパティに変数名を文字列で指定します。


テキストフィールドに関連付けた変数を表示する

var hensu = "表示テスト";	// 表示に使いたい変数

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.variable = "hensu";	// 変数を関連付ける





■テキストフィールドにHTML形式の文字を表示する


HTML形式の文字を表示するには htmlText プロパティに文字を代入します。


テキストフィールドに文字を表示する

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.htmlText = "<B>表示テスト</B>";	// HTML形式の文字列を表示


対応しているタグ

アンカータグ  <a>
ボールドタグ  <b>
ブレークタグ  <br>
フォントタグ  <font>
イメージタグ  <img>
イタリックタグ  <i>
リスト項目タグ  <li>
段落タグ  <p>
範囲タグ  <span> CSS テキストスタイルでのみ使用
テキストフォーマットタグ  <textformat>
下線タグ  <u>


対応しているエンティティ

&lt;  < (より小さい)  
&gt;  > (より大きい)  
&amp;  & (アンパサンド)  
&quot;  " (二重引用符)  
&apos;  ' (アポストロフィ、一重引用符)  






テキストフィールドのプロパティを設定したい



サンプルをダウンロード




■テキストフィールドのプロパティを設定する


テキストフィールドクラスが持つ読み取り専用のプロパティの一覧です(一部省略)


プロパティ名説明
bottomScroll現在の表示範囲の最終行 (1 からのインデックス)
lengthテキストの文字数
maxscrollhscroll の最大値
maxhscrollscroll の最大値
textHeightテキストの高さ
textWidthテキストの幅




テキストフィールドクラスが持つ書き込み可能なプロパティの一覧です(一部省略)


プロパティ名説明
antiAliasTypeFlash 8 以降で動作。アンチエイリアスの種類

"normal" 通常アンチエイリアス
"advanced" 高品質アンチエイリアス(小さい時に見やすい)

(embedFonts = true かつ書式設定で指定したフォントがswfファイルに埋め込まれている時のみ動作)
autoSizeサイズ整形の種類。

"none" なし
"left" 左揃え
"right" 右揃え
"center" 中央揃え

(wordWrap = false 時に動作)
background背景の塗りがあるか?
backgroundColor背景の色 (0xFFFFFF)
border境界線があるか?
borderColor境界線の色 (0xFFFFFF)
condenseWhiteHTML表示時にスペース、改行などを削除するか?
passwordパスワード表示か?
embedFonts埋め込みフォントを使うか?

(書式設定で指定したフォントがswfファイルに埋め込まれている時のみ動作)
gridFitTypeFlash 8 以降で動作。グリッドフィッティングの種類。

"none" なし
"pixel" ピクセルグリッドに吸着
"subpixel" LCD モニタのサブピクセルグリッドに吸着

(antiAliasType = "advanced" かつ embedFonts = true かつ書式設定で指定したフォントがswfファイルに埋め込まれている時のみ動作)
maxChars最大の文字数
mouseWheelEnabledFlash 7 以降で動作。ホイール回転時にスクロールするか?
multiline複数行か?
restrict表示 & 入力可能な文字を制限(下に記述方法あり)
hscroll水平スクロール位置(0 から)
scroll垂直座標 (1 から)
selectable選択可能か?
sharpnessFlash8 以降で動作。
文字エッジのシャープネス(-400 〜 400)

(antiAliasType = "advanced" かつ embedFonts = true かつ書式設定で指定したフォントがswfファイルに埋め込まれている時のみ動作)
styleSheetスタイルシートを関連付け
textColorテキストの色 (0xFFFFFF)
thicknessFlash8 以降で動作。
文字エッジの太さ(-200 〜 200)

(antiAliasType = "advanced" かつ embedFonts = true かつ書式設定で指定したフォントが swf ファイルに埋め込まれている時のみ動作)
typeテキストフィールドのタイプ

"dynamic" 入力不可能
"input" 入力可能
wordWrap折り返すか?





restrict プロパティに入力する例です。これを書いている文字のみ表示 & 入力できるようになります。


restrict プロパティの入力例

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.restrict = "abc";		// a,b,c のみ
tf.restrict = "a-z";		// 小文字英字
tf.restrict = "a-z0-9";	// 小文字英字と数字
tf.restrict = "^A";		// A以外すべて
tf.restrict = "^A-Z";		// 大文字英字以外すべて
tf.restrict = "\\-";		// -
tf.restrict = "\\^";		// ^
tf.restrict = "\u3041-\u3093";	// UNICODEで0x3041から0x3093まで






プロパティの設定例です。


テキストフィールドのプロパティを設定する

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.text = "表示テスト";

tf.antiAliasType = "normal";	// アンチエイリアスの種類
tf.autoSize = "center";		// サイズ整形の種類
tf.background = true;		// 背景の塗りがあるか?
tf.backgroundColor = 0xFFDDDD;	// 背景の色
tf.border = true;			// 境界線があるか?
tf.borderColor =0xAA0000;		// 境界線の色
tf.condenseWhite = false;		// HTML表示時にスペース改行などを削除するか?
tf.password = false;		// パスワード表示か?
tf.embedFonts = false;		// 埋め込みフォントを使うか?
tf.gridFitType = "none";		// グリッドフィッティングの種類
tf.maxChars = 10;			// 最大の文字数
tf.mouseWheelEnabled = true;	// ホイール回転時にスクロールするか?
tf.multiline = true;		// 複数行か?
tf.selectable = true;		// 選択可能か?
tf.sharpness = 0;			// 文字エッジのシャープネス
tf.textColor = 0x0000AA;		// テキストの色
tf.thickness = 1;			// 文字エッジの太さ
tf.type = "input";			// テキストフィールドのタイプ
tf.wordWrap = false;		// 折り返すか?







テキストフィールドに書式を設定したい



サンプルをダウンロード




■書式を設定する


書式を設定するには、まず TextFormat クラスを使用します。


TextFormat オブジェクトを作成する

var format = new TextFormat();


TextFormat クラスが持つプロパティの一覧です(一部省略)


プロパティ名説明
align整列の設定。

"left" 左に整列
"right" 右に整列
"center" 中央に配置
"justify" 均等割り付け
fontフォント名を文字列で指定 例)"MS ゴシック"
size文字のポイントサイズ
color文字の色 (0xFFFFFF)
bold太字にするか?
italic斜体にするか?
underlineアンダーラインを表示するか?
bullet箇条書きにするか?
kerningカーニングが有効か?(埋め込みフォント時のみ動作)[Flash 8 以降]
blockIndent全体のインデント(単位:ピクセル)
indent折り返し行以外のインデント
leading行間の垂直の行送り
leftMargin段落の左マージン(単位:ピクセル)
rightMargin段落の右マージン(単位:ピクセル)
letterSpacingすべての文字間に均等に配分されるスペースの量(単位:ピクセル)[Flash 8 以降]
tabStopsタブストップを配列の 0 番目に入れて指定
例) [40] (単位:ピクセル)
urlハイパーリンク先を文字列で指定
targetハイパーリンク先のターゲットウィンドウ 例)"_blank"





書式のパラメータ設定例です。


テキストフォーマットオブジェクトを作成し書式パラメータを設定する

var format = new TextFormat();

format.align = "right";	// 整列
format.font = "MS ゴシック";	// フォント名
format.size = 14;		// 文字のポイントサイズ
format.color = 0xFF0000;	// 文字の色
format.bold = true;		// 太字にするか?
format.italic = true;	// 斜体にするか?
format.underline = true;	// アンダーラインを表示するか?
format.bullet = true;	// 箇条書きにするか?
format.kerning = true;	// カーニングが有効か?(埋め込みフォント時のみ動作)
format.blockIndent = 0;	// 全体のインデント(単位:ピクセル) 
format.indent = 0;		// 折り返し行以外のインデント
format.leading = -2;	// 行間の垂直の行送り
format.leftMargin = 5;	// 段落の左マージン(単位:ピクセル)
format.rightMargin = 5;	// 段落の右マージン(単位:ピクセル)
format.letterSpacing = 4;	// 文字間スペースの量(単位:ピクセル)
format.tabStops = [120];	// タブストップ
format.url = null;		// ハイパーリンク先を文字列で指定
format.target = null;	// ハイパーリンク先のターゲットウィンドウ





■デフォルトの書式として設定する


テキストフィールドのデフォルトの書式を設定するには、setNewTextFormat() メソッドを使用します。引数に TextFormat オブジェクトを指定した後に、テキストを更新すると書式が適応されます。


例)テキストフィールドにデフォルトの書式を割り当てる

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

// 書式を設定
var format = new TextFormat();
format.color = 0xFF0000;	// テキストの色

// 書式を割り当て
tf.setNewTextFormat(format);

// 表示を更新
tf.text = "表示テスト";





■表示されているテキストに書式を設定する


テキストフィールドに、すでに表示されているテキストに書式を設定するには、setTextFormat() メソッドを使用します。


テキストフィールド.setTextFormat ( TextFormat );
第01引数 テキストフォーマットのインスタンス
返り値 なし




範囲を指定して書式を設定したい場合も、setTextFormat() メソッドを使用します。


テキストフィールド.setTextFormat ( 開始番号 , 終了番号 , TextFormat );
第01引数 書式の適応を開始するインデックス番号(-1 ではじめから)
第02引数 書式の適応を終了するインデックス番号(-1 で最後まで)
第03引数 テキストフォーマットのインスタンス
返り値 なし


表示されているテキストすべてに書式を設定する

var format = new TextFormat();
format.size = 14;		// 文字のポイントサイズ
format.color = 0xFF0000;	// 文字の色

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.text = "表示テスト";

tf.setTextFormat(format);

表示されているテキストの 2 番目から 4 番目までに書式を設定する

var format = new TextFormat();
format.size = 14;		// 文字のポイントサイズ
format.color = 0xFF0000;	// 文字の色

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.text = "表示テスト";

tf.setTextFormat(format,1,4);





setTextFormat() メソッドで設定した書式は一時的なものであり、テキストを更新すると書式がデフォルトに戻ります。






スタイルシートを適応したい(Flash 7 以降)






■スタイルシートを読み込んでテキストフィールドに反映する


スタイルシートの読み込みについてはこちらで解説しています。


CSSファイルの記述例

.point{
	font-size:14;
	font-style:italic;
	color:#0000AA;
}
.strong {
	font-family: MS 明朝;
	font-size: 24px;
	font-weight: bold;
}


テキストフィールドにスタイルシートを反映する(AS1.0)

System.useCodepage = true;

var str = "<p class=\"point\">表示テスト1</p><p class=\"strong\">表示テスト2</p>";

// 表示用テキストフィールド
_root.createTextField("text_field", 0, 10, 10, 300, 200);
var tf = _root.text_field;
tf.border = true;
tf.wordWrap = true;
tf.html = true;

// スタイルシートを読み込んでテキストフィールドに適応
var ss_obj = new TextField.StyleSheet();
ss_obj.load("test.css");
ss_obj.onLoad = function(check) {
	if (check) {
		tf.styleSheet = ss_obj;
		tf.htmlText = str;
	}
};

テキストフィールドにスタイルシートを反映する(AS2.0)

import TextField.StyleSheet;
System.useCodepage = true;

var str : String = "<p class=\"point\">表示テスト1</p><p class=\"strong\">表示テスト2</p>";

// 表示用テキストフィールド
_root.createTextField("text_field", 0, 10, 10, 300, 200);
var tf : TextField = _root.text_field;
tf.border = true;
tf.wordWrap = true;
tf.html = true;

// スタイルシートを読み込んでテキストフィールドに適応
var ss_obj : StyleSheet = new StyleSheet();
ss_obj.load("test.css");
ss_obj.onLoad = function(check) {
	if (check) {
		tf.styleSheet = ss_obj;
		tf.htmlText = str;
	}
};






静止テキストにアクセスしたい(Flash 7 以降)



サンプルをダウンロード




■TextSnapshot クラスについて


ムービークリップが持つ getTextSnapshot() メソッドを使用すると、TextSnapshot オブジェクトを取得できます。

このオブジェクトからメソッドを呼び出す事により、静止テキストで配置したテキストにアクセスする事ができます。 ただしデバイスフォントを使用時や、選択可能にチェックが付いている場合は動作しないようです。


_root にある TextSnapshot オブジェクトを取得する

var text_snap = _root.getTextSnapshot();


ムービークリップ内で使用されているすべての文字が、1文字ずつ配列に格納されているような状態となっています。メソッドを使用して、文字を取得したりする事ができます。





■ムービークリップに含まれる文字数を取得する


ムービークリップに含まれる総文字数を取得するには、getCount() メソッドを使用します。

選択可能にチェックが付いている場合は、動作しません。


_root に含まれる総文字数を取得

var text_snap = _root.getTextSnapshot();
trace(text_snap.getCount());





■ムービークリップに含まれる静止テキストの文字列を取得する


テキストを文字列として取得するには、getText() メソッドを使用します。



TextSnapshot.getText ( 開始番号, 終了番号, 改行をデータに含むか? );
第01引数 文字の開始番号を指定
第02引数 文字の終了番号を指定
第03引数(略可)改行データを含めて返す
返り値 文字列


_root に含まれる文字を 0 番目から 3 番目まで文字列として取得

var text_snap = _root.getTextSnapshot();
trace(text_snap.getText(0 , 3 , false));





■座標と重なる文字を取得する


指定した座標の近くにある文字の番号を取得するには、hitTestTextNearPos() メソッドを使用します。

このメソッドを使用するには、静止テキストで使用しているフォントが埋め込まれている必要があります。しかし、静止テキストで使用した文字列は、フォントとして埋め込みが発生しないため、静止テキスト以外のどこかでフォントの埋め込み作業を行う必要があります。


TextSnapshot.hitTestTextNearPos ( x 座標, y 座標, 座標との直線距離 );
第01引数 x 座標
第02引数 y 座標
第03引数(略可)円で当たり判定を取りたいときは、ここで半径の長さを指定
返り値 番号、該当する文字が見つからない場合は -1


_root に含まれる文字を 0 番目から 3 番目まで文字列として取得

var text_snap = _root.getTextSnapshot();
trace(text_snap.getText(0 , 3 , false));





■文字列を強調表示する


文字の背景に色を付けて強調表示したい場合は、setSelected() メソッドを使用します。強調状態は、飛び飛びで部分的に適応する事が可能です。

setSelectColor() メソッドで背景色を指定します。


TextSnapshot.setSelected ( 開始番号, 終了番号, 選択状態か? );
第01引数 開始番号
第02引数 終了番号
第03引数(略可)選択状態にするなら true 、解除するなら false
返り値 なし


_root に含まれる文字を 0 番目から 3 番目までを色 0xFFAAAA で強調表示する

var text_snap = _root.getTextSnapshot();
text_snap.setSelectColor( 0xFFAAAA );
text_snap.setSelected(0, 3, true);





■強調表示している文字列をすべて取得する


強調表示している文字列をすべて取得する場合は、getSelectedText() メソッドを使用します。


TextSnapshot.getSelectedText ( 改行を含めるか? );
第01引数(略可)改行文字をデータとして含みたい場合は true
返り値 文字列


_root に含まれる文字の中で強調表示されている文字を取得する

var text_snap = _root.getTextSnapshot();
text_snap.setSelected(0, 3, true);
trace(text_snap.getSelectedText( false ));







■指定した場所に強調文字が含まれているか調べる


指定した番号の中に強調文字が含まれているか調べるには、getSelected() メソッドを使用します。


TextSnapshot.getSelected ( 開始番号, 終了番号 );
第01引数 開始番号
第02引数 終了番号
返り値 強調表示が1つでも含まれている場合は true、含まれていない場合は false


_root に含まれる文字の 2 番目から 4 番目までに強調文字が含まれるか調べる

var text_snap = _root.getTextSnapshot();
text_snap.setSelected(0, 3, true);
trace(text_snap.getSelected( 2 , 4 ));








高品質アンチエイリアスを使用したい(Flash 8 以降)



サンプルをダウンロード




■高品質アンチエイリアスレンダリングとは?


フォントの設定の『アンチエイリアス(読みやすさ優先)』に該当する機能で、 高品質アンチエイリアスレンダリングを使用すると、小さめのフォントサイズを表示したときにアンチエイリアスをかけてもくっきりと綺麗に表示されます。



上が通常アンチエイリアス、下が高品質アンチエイリアス



メモリを多く消費するので巨大なフォントサイズ表示時には使用しないほうがよさそうです。





■フォントを埋め込む


高品質アンチエイリアスレンダリングを使用するには、あらかじめフォントを埋め込む必要があります。

フォントを丸々1つ埋め込む場合は、ライブラリで右クリックを押して、新しいフォントを作成します。




さらに右クリックを押してメニューから、リンケージプロパティを選択します。

識別子に好きな名前を付けます。さらに『ActionScript に書き出し』と『最初のフレームに書き出しにチェック』します。




ここでは、"my_font" と名前を付けます。




TextFormat の font プロパティに先ほど名前を付けた識別子を指定すると、埋め込みフォントを使用することができます。

さらに TextField の antiAliasType プロパティを "advanced" に設定し、embedFonts プロパティを true に設定すると、高品質アンチエイリアスを使用できます。


埋め込んだフォントを書式に使用する

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.antiAliasType = "advanced";	// 高品質アンチエイリアスを使用する
tf.embedFonts =true;		// 埋め込みフォントを使う

// 書式を設定
var format = new TextFormat();
format.font = "my_font";	// 埋め込んだフォントの識別子
format.size = 14;		// 文字のポイントサイズ(小さいほど効果が高い)

// 書式を割り当て
tf.setNewTextFormat(format);

// 表示を更新
tf.text = "表示テスト";





■高品質アンチエイリアスの品質を設定する


高品質アンチエイリアスの品質を設定するには、TextRenderer.maxLevel プロパティに 347 のどれかの数値を代入します。

Flash 全体の変更となります。数値が高いほどより多くのメモリを消費し高品質の表示を得る事ができます。


高品質アンチエイリアスの品質を変更する(AS1.0)

flash.text.TextRenderer.maxLevel = 3;

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.antiAliasType = "advanced";	// 高品質アンチエイリアスを使用する
tf.embedFonts =true;		// 埋め込みフォントを使う

// 書式を設定
var format = new TextFormat();
format.font = "my_font";	// 埋め込んだフォントの識別子
format.size = 14;		// 文字のポイントサイズ(小さいほど効果が高い)

// 書式を割り当て
tf.setNewTextFormat(format);

// 表示を更新
tf.text = "表示テスト";

高品質アンチエイリアスの品質を変更する(AS2.0)

import flash.text.TextRenderer;
TextRenderer.maxLevel = 3;

_root.createTextField("text_field",0,50,100,200,20);
var tf = _root.text_field;	// テキストフィールドの参照

tf.antiAliasType = "advanced";	// 高品質アンチエイリアスを使用する
tf.embedFonts =true;		// 埋め込みフォントを使う

// 書式を設定
var format = new TextFormat();
format.font = "my_font";	// 埋め込んだフォントの識別子
format.size = 14;		// 文字のポイントサイズ(小さいほど効果が高い)

// 書式を割り当て
tf.setNewTextFormat(format);

// 表示を更新
tf.text = "表示テスト";