前回の第40回「Text Layout Frameworkでテキストコンテンツを表示する」は、Text Layout Framework Markup形式のXMLデータを、フレームワークのクラスによりレイアウトして、ステージに表示した。今回は、まずXMLデータを外部ファイルから読込む。そのうえで、テキストの選択や編集など、ユーザーインタラクションを加えてみたい。
Text Layout Framework Markup形式のXMLデータを外部ファイルから読込む
XMLデータは、外部ファイルから読込めることが利点のひとつだ。つぎのようなText Layout Framework Markup形式のXMLデータを、外部ファイルtlf.xmlとしてFlashムービー(FLA)ファイルと同じ場所に保存しておく。これを読込んで、ステージに配置しよう。
外部XMLファイルの読込みは、第27回「XMLデータを扱う」ですでに解説した。Text Layout Frameworkで扱うために、何かとくにしなければならないことはない。もっとも、フレームワークは、テキストの構造やフォーマット、そのレイアウトと表示などの役割を、それぞれのクラスが細かく分け合って担っていた(第40回図3再掲)。そのため、慣れないうちは、処理の組立てに戸惑いやすい。そこで復習をかねてスクリプトを書いてみよう。
まず、読込んだText Layout Framework Markup形式のXMLデータからTextFlowインスタンスを生成する。つぎに、ContainerControllerインスタンスの参照をフローコンポーザーに渡したうえで、表示すればよかった。なお、TextFlowオブジェクトにはデフォルトのフォーマットを設定する。それには、第39回に学んだTextFlow.hostFormatプロパティを設定すればよい。つぎのスクリプト1が、そのフレームアクションだ。
[ムービープレビュー]を確かめると、本文には図1左図のようにTextFlow.hostFormatプロパティの設定が適用される。しかし、タイトルのエレメント(span)には属性としてフォーマットが指定されているため、その設定が優先する。デフォルトフォーマットには、Helveticaの14ポイントが指定してある。図1右図にはデフォルトフォーマットを定めない場合の表示を掲げたので、比べてほしい。
Text Layout Frameworkにユーザーインタラクションを加える
つぎは、インタラクティブな操作だ。もっとも簡単なのは、テキストの選択だろう。[TLFテキスト]であれば、[プロパティ]インスペクタのテキストの種類で[選択可能]が選べる(図2)。また、スクリプトなら、TLFTextField.selectableプロパティで設定が変えられる。
ところが、Text Layout FrameworkでTextFlowクラスなどをいくら探しても、このようなプロパティが見当たらない。ユーザーインタラクションは、別の新たなクラスが担うからだ。そのクラスのインスタンスは、TextFlow.interactionManagerプロパティに設定する。テキストが選択できるようにするには、SelectionManagerクラスのインスタンスを代入すればよい。
前掲スクリプト1にこのステートメントを加え、SelectionManagerクラスをimport宣言したのが、つぎのスクリプト2だ。これで、配置したテキストが選択できる(図3)。
TextFlow.interactionManagerプロパティには、EditManagerクラスのインスタンスを設定することもできる[1]。すると、テキストをただ選ぶだけでなく、書替えられるようになる(図4)。
さらに、EditManagerクラスのコンストラクタメソッドには、UndoManagerオブジェクトが引数として渡せる。そのEditManagerインスタンスをTextFlow.interactionManagerプロパティに設定すると、編集の取消しややり直しができるようになる。前掲スクリプト2を修正して、テキストの編集と取消しまで可能にしたのがつぎのスクリプト3だ。
編集の取消しは[Ctrl](Windows)/[command](Mac)+[z]、やり直しが[Ctrl](Windows)/[command](Mac)+[y]のショートカットキーで行える[2]。[ムービープレビュー]で試すときは、[制御]メニューで[キーボードショートカットを無効]にすることを忘れないでほしい。
第39回より3回にわたって、新しいテキストエンジンとText Layout Frameworkの基本について解説した[3]。次回からは、また3次元空間のお題に戻る。つぎの第42回は、3次元空間の座標を扱うクラスVector3Dの説明に入ろう。
今回解説した次のサンプルファイルがダウンロードできます。