Rest Term

Flash Text Layout Framework

Flash テキストレイアウトフレームワークのベータ版をすこし触ってみました。
とりあえずActionScriptだけで制御するシンプルなものから。
Text Layout Framework Overview(pdf)を読みながら手探りで少しずつ試していきます。

まず、Text Layout Framework - Adobe LabsのDownload the Text Layout Frameworkからダウンロード。
フォルダのlibsに入っている、textLayout_~.swc(3つある)をFlex SDKの/frameworks/libsに入れます。

・The Text Layout Core Component (textLayout_core.swc)

このフレームワークのコンポーネントは階層構造になっているようです (下図参照)。
ルートにTextFlowという要素があって、その下にHTMLでも馴染みのあるdivやpなどがあります。
GraphicはHTMLで言うところのimg要素、Linkはa要素なのはわかりますが、TCYというよくわからないものが、。
これはTate-Chu-Yokoの略で、縦書きの TextFlow 内で横に表示されるテキストのことらしいです。
justifier for East Asian typographyとあるのを見ると、この国の文章は特殊なんだなぁとしみじみ。


まずはHello, Worldから。

上の図表を見ていればコードも理解しやすいかと思います。
ここで、TextFlowの内容(テキスト)を表示させるには2種類の方法があります。
・TextLineFactory
・FlowComposer
上のHello, Worldのコードでは前者を使って表示しています。
コールバック関数を作ってTextLineFactory.createTextLinesFromTextFlow()を呼び出すという手順です。
(createTextLinesFromTextFlow()はTextLineFactoryクラスのstaticメソッド)
flash.text.engine.TextLineインスタンスにはTextFlowインスタンスの内容(テキスト)が入っています。
また、flash.geom.Rectangleでテキストの表示領域の位置と大きさを決めています。
こちらは静的テキストの表示に適していて、FlowComposerより省メモリとのこと。

一方、文字の選択や変更をさせたい(動的テキスト)場合はFlowComposerを使います (下図参照)。
図を見るとわかりますが、テキストの内容は最終的にTextLineインスタンスに変換されます。

テキスト(TextFlow)とコンテナを関連付けてから、そのコンテナ内にテキストを表示させます。
DisplayObjectContainerControllerというのはDisplayObjectContainer(SpriteクラスはDisplayObjectContainerクラスのサブクラス)を制御するオブジェクトで、FlowComposerによって直接管理されます。
また、updateAllContainers()はFlash Playerの表示リストを更新するメソッドです。

・The Text Layout Conversion Component (textLayout_conversion.swc)

TextFilterクラスのメソッドを利用することによってテキストのインポート・エクスポートが可能です。
テキストをインポートするにはTextFilter.importToFlow()を使います。
plain text(String)でもText Layout Markup(XML)でもどちらでもOKなようです。

XMLでのインポートは便利ですね。ParagraphElement等のインスタンスを一つ一つ作らなくて済みます。

エクスポートの方も簡単です。こちらはTextFilter.export()を使います。
出力フォーマットはplain text、Text Layout Markup、FXGの3つの中から選びます。

上のコードはTextLayout Framework Overviewのコードそのままですが、これだとエラーが出ました;
TextFilter.export()の返り値がObjectだったので、outの型もObjectにすると上手くいきましたが、、
ちなみにこれをtraceしてみると、TextFlow階層構造のXMLが表示されます。

新しい名前空間が出てきました。
また、fontSizeやcolorなどはXML文書の属性として割り当てることができます。

Conversion Componentの基本的な使い方はこれくらいです。

今回はテキストを表示する部分を主に紹介しました。
動的テキストを扱う際に利用するEdit Componentについてもこれから調べていきたいと思います。
各要素それぞれ細かい部分についても追々。

続く...

あわせて読む:

 

Tags: ,

Comments: 3

Leave a reply »

 
  • […] Older […]

     
     
     
  • […] ・関連記事 Flash Text Layout Framework Flash Text Layout Framework 2 […]

     
     
     
  • […] Flash Text Layout Framework – Rest Term テキストレイアウトフレームワークの基本 つまっていたところでこの記事を見つけられたおかげで仕事を進めることができて感謝 (tags: programming actionscript f […]

     
     
     
  • Leave a Reply
     
    Your gravatar
    Your Name