ActionScript 3.0で始めるオブジェクト指向スクリプティング

第39回TLFTextFieldクラスを使う

3次元表現のお題はまだ当分続く予定だが、前回予告したとおりFlash Professional CS5から加わったテキストレイアウトフレームワーク(Text Layout Framework)について数回を割いて説明しておきたい。今回はまず、TLFTextFieldクラスだ。これまでのTextFieldクラスと基本的な扱いは同じものの、より細かな設定ができる。

TLFテキストの操作

TLFはText Layout Frameworkの略だ。Flash Professional CS5で[ツール]パネルから[テキストツール]を選ぶと、[プロパティ]インスペクタのテキストエンジンとして[TLFテキスト]が選択できる図1左⁠⁠。[TLFテキスト]は、[詳細な文字設定]など文字や段落をInDesignのように細かく設定できる図1右⁠⁠。

図1 [テキストツール]で[TLFテキスト]が選択できる
図1 [テキストツール]で[TLFテキスト]が選択できる図1 [テキストツール]で[TLFテキスト]が選択できる

[TLFテキスト]のインスタンスはTLFTextFieldクラスで生成し、そのプロパティやメソッドを操作する。たとえば、TLFTextFieldインスタンス([TLFテキスト])をタイムラインに動的に配置して、テキストを設定するときは、つぎのスクリプト1のようなフレームアクションを記述する図2⁠。

スクリプト1 動的に配置したTLFTextFieldインスタンスにテキストを設定する
// フレームアクション
import fl.text.TLFTextField;
var my_txt:TLFTextField = new TLFTextField();
addChild(my_txt);
my_txt.x = 20;
my_txt.y = 20;
my_txt.width = 200;
my_txt.height = 100;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = "智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。";
図2 タイムラインに配置されたTLFTextFieldインスタンスにテキストが設定された
図2 タイムラインに配置されたTLFTextFieldインスタンスにテキストが設定された

このスクリプト1は、これまでのTextFieldインスタンスを使う処理と基本的に変わらない(第26回外部データの読込み待ち「外部テキストファイルのロード」参照⁠⁠。実際、インスタンス生成のステートメントをつぎのようにTLFTextFieldからTextFieldに変えれば、動的に配置されたTextFieldインスタンスにテキストが設定される。なお、wordWrapborderプロパティは、それぞれテキストの折返しと周囲の境界線の有無を設定する。

// var my_txt:TLFTextField = new TLFTextField();
var my_txt:TextField = new TextField();

なお、ひとつ注意しておきたいのは、スクリプト1冒頭のimport宣言だ。他の多くのActionScript定義済みクラスと違い、Text Layout Frameworkに含まれるクラスはフレームアクションでもimport宣言が必要だ[1]⁠。これがないと、[コンパイルエラー]になる図3⁠。

図3 TLFTextFieldクラスのimport宣言がないと[コンパイルエラー]になる
図3 TLFTextFieldクラスのimport宣言がないと[コンパイルエラー]になる 図3 TLFTextFieldクラスのimport宣言がないと[コンパイルエラー]になる

TLFTextFieldインスタンスに書式を設定する

TLFTextFieldインスタンスの書式の設定は、TextFieldインスタンスと少し勝手が違う。まず、使うクラスはTextLayoutFormatだ。そして、書式を定めたTextLayoutFormatオブジェクトは、TLFTextFieldインスタンスに直接適用するのでなく、インスタンスのTLFTextField.textFlowプロパティを取出し、そのTextFlow.hostFormatプロパティに設定する。TextFlowオブジェクトは、TLFTextFieldインスタンスに納められる文章全体を管理する。

前記スクリプト1に以下の処理を加えると、TLFTextFieldインスタンスに、フォントの色は青(0x0000FF)に変え、サイズを16ポイントにする書式が設定される図4⁠。TextLayoutFormat.colorTextLayoutFormat.fontSizeが、それぞれを設定するプロパティだ。なお、クラスTextLayoutFormatとTextFlowは、やはりimport宣言する必要がある。

// フレームアクションに追加
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
my_fmt.color = 0x0000FF;
my_fmt.fontSize = 16;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();
図4 テキストの色は青でサイズが16ポイントになる
図4 テキストの色は青でサイズが16ポイントになる

TextLayoutFormatインスタンスの書式をTextFlowオブジェクトに適用するには、前述のとおりTextFlow.hostFormatプロパティに代入する。さらにその設定を有効にするため、TextFlow.flowComposerプロパティの参照するオブジェクトに対してupdateAllControllers()メソッドを呼出し[2]⁠、テキストの表示を更新しなければならない。

前掲スクリプト1に上記の書式設定を加えたフレームアクション全体は、つぎのスクリプト2のとおりだ。

スクリプト2 動的に配置したTLFTextFieldインスタンスのテキストに書式を設定する
// フレームアクション
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
var my_txt:TLFTextField = new TLFTextField();
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
addChild(my_txt);
my_txt.x = 20;
my_txt.y = 20;
my_txt.width = 200;
my_txt.height = 100;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = "智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。";
my_fmt.color = 0x0000FF;
my_fmt.fontSize = 16;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();

TLFテキストの方向を動的に変える

TLFテキストならではの機能も、ひとつ紹介しておこう。それはテキストの縦書きだ。設定を変えれば、ユーザーが入力することもできる。デフォルトでは、テキストの選択のみ可能だ。

まず、テキストが縦書きか横書きかは、TLFTextField.blockProgressionプロパティで変える。設定するのはBlockProgressionクラスの定数で、縦書きがBlockProgression.RL横書きはBlockProgression.TBにする。つぎに、選択可能か編集可能かは、TLFTextField.typeプロパティが定める。同名のプロパティはTextFieldクラスにも備わっており、設定の仕方も同じだ。選択可能はTextFieldType.DYNAMIC、編集可能がTextFieldType.INPUTになる[3]⁠。

前記スクリプト2のテキストを縦書きにし、編集できるようにしたのがつぎのフレームアクションだスクリプト3⁠。[ムービープレビュー]で試すと、縦書きのTLFテキストを選択して書替えることができる図5⁠。

スクリプト3 TLFTextFieldインスタンスのテキストを縦書きにして編集可能にする
// フレームアクション
import fl.text.TLFTextField;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.BlockProgression;
var my_txt:TLFTextField = new TLFTextField();
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
var myTextFlow:TextFlow = my_txt.textFlow;
addChild(my_txt);
my_txt.x = 20;
my_txt.y = 20;
my_txt.width = 200;
my_txt.height = 100;
my_txt.wordWrap = true;
my_txt.border = true;
my_txt.text = "智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。兎角に人の世は住みにくい。";
my_txt.blockProgression = BlockProgression.RL;
my_txt.type = TextFieldType.INPUT;
my_fmt.color = 0x0000FF;
my_fmt.fontSize = 16;
myTextFlow.hostFormat = my_fmt;
myTextFlow.flowComposer.updateAllControllers();
図5 縦書きのTLFテキストを書替える

画像

画像

画像

1.テキストを選択2.文字の入力3.入力を確定

Text Layout Frameworkは、TLFテキストだけのためのフレームワークではない。フレームワークに含まれる様々なクラスを使えば、テキストコンテンツがきめ細かく扱える。次回は、その基本について説明しよう。

今回解説した次のサンプルファイルがダウンロードできます。

おすすめ記事

記事・ニュース一覧