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から。
import flash.geom.Rectangle;
import flash.text.engine.TextLine;
import flashx.textLayout.elements.*;
import flashx.textLayout.factory.TextLineFactory;
var textFlow:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
textFlow.addChild(p);
var span:SpanElement = new SpanElement();
span.text = "Hello, World";
p.addChild(span);
TextLineFactory.createTextLinesFromTextFlow(callback, textFlow, new Rectangle(0,0,300,100));
function callback(txLine:TextLine):void{ addChild(txLine); }
上の図表を見ていればコードも理解しやすいかと思います。
ここで、TextFlowの内容(テキスト)を表示させるには2種類の方法があります。
・TextLineFactory
・FlowComposer
上のHello, Worldのコードでは前者を使って表示しています。
コールバック関数を作ってTextLineFactory.createTextLinesFromTextFlow()を呼び出すという手順です。
(createTextLinesFromTextFlow()はTextLineFactoryクラスのstaticメソッド)
flash.text.engine.TextLineインスタンスにはTextFlowインスタンスの内容(テキスト)が入っています。
また、flash.geom.Rectangleでテキストの表示領域の位置と大きさを決めています。
こちらは静的テキストの表示に適していて、FlowComposerより省メモリとのこと。
一方、文字の選択や変更をさせたい(動的テキスト)場合はFlowComposerを使います (下図参照)。
図を見るとわかりますが、テキストの内容は最終的にTextLineインスタンスに変換されます。
import flashx.textLayout.container.DisplayObjectContainerController; import flashx.textLayout.elements.*; var textFlow:TextFlow = new TextFlow(); ・・・ //省略 p.addChild(span); var textSprite:Sprite = new Sprite(); textFlow.flowComposer.addController(new DisplayObjectContainerController(textSprite, 300, 100)); textFlow.flowComposer.updateAllContainers();
テキスト(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なようです。
import flashx.textLayout.conversion.TextFilter; // String var text:String = "Hello, World"; var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.PLAIN_TEXT_FORMAT); // XML var text:XML = <TextFlow><p><span>Hello, World</span></p></TextFlow>; var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT);
XMLでのインポートは便利ですね。ParagraphElement等のインスタンスを一つ一つ作らなくて済みます。
エクスポートの方も簡単です。こちらはTextFilter.export()を使います。
出力フォーマットはplain text、Text Layout Markup、FXGの3つの中から選びます。
var ptext:String = "Hello, World"; var flow:TextFlow = TextFilter.importToFlow(markup, TextFilter.PLAIN_TEXT_FORMAT); // XMLで出力 var out:XML = TextFilter.export(flow, TextFilter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE);
上のコードはTextLayout Framework Overviewのコードそのままですが、これだとエラーが出ました；
TextFilter.export()の返り値がObjectだったので、outの型もObjectにすると上手くいきましたが、、
ちなみにこれをtraceしてみると、TextFlow階層構造のXMLが表示されます。
<flow:TextFlow whiteSpaceCollapse="preserve" xmlns:flow="http://ns.adobe.com/textLayout/2008">
<flow:p>
<flow:span>Hello, World</flow:span>
</flow:p>
</flow:TextFlow>
新しい名前空間が出てきました。
また、fontSizeやcolorなどはXML文書の属性として割り当てることができます。
<flow:TextFlow xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14"> <flow:p>This is an example of Text Layout Framework Markup.</flow:p> <flow:p color="#0000ff"> <flow:span>This is the first span of the second paragraph.</flow:span> <flow:span color="#ff0000">This is the second span of the second paragraph.</flow:span> </flow:p> </flow:TextFlow>
Conversion Componentの基本的な使い方はこれくらいです。
今回はテキストを表示する部分を主に紹介しました。
動的テキストを扱う際に利用するEdit Componentについてもこれから調べていきたいと思います。
各要素それぞれ細かい部分についても追々。
続く…
3 Thoughts