Adobe Labs に Text Layout Framework ベータ版が公開されました。（Text Layout Framework@Labs）
Flash Player 10 から新しいテキストエンジン （Flash Text Engine - FTE） とそれを扱うための flash.text.engine という新しいパッケージが追加されていますが、Text Layout Framework はその API 上に構築されたフレームワークです。高度なテキストのレイアウト機能や、テキストの選択、編集機能などが実装されています。また、マークアップ形式のデータを扱うことができます。
上のリンクのページに Flash コンテンツとして 8 つのデモが提供されていますので、まずはそちらをご覧ください。"start tour" をクリックすると最初のデモが表示されます。
Text Layout Framework を使うには実行環境として Flash Player 10 または AIR 1.5 が必要です。開発環境は、Flash CS4, Flex Builder 3.0.2, Gumbo になります。
英語版の Flash CS4 を既にお使いの場合は、こちらのページ （Downloads/Text Layout Framework@Labs） から Text Layout Component for Flash CS4 をダウンロードして、中の MXP ファイルをインストールします。これで、コンポーネントパネル内の標準コンポーネントに textLayout コンポーネントが、その他のパネルに Text Layout パネルが追加されます。
Text Layout パネルでは、テキストのいろいろな属性をパネル内で選択することでプログラムを書かなくても設定できます。使い方は、英語で恐縮ですがとりあえずは Text Layout Component for Flash CS4 Professional Overview をご覧ください。
Text Layout パネルとほぼ同等のものがオンラインでも提供されています。（Text Layout Demo@Labs）
Flex Builder 3.0.2 をお使いの場合は、ダウンロードページ （Downloads/Text Layout Framework@Labs） から Text Layout Framework をダウンロード後、textLayout_core.swc, textLayout_edit.swc, textLayout_conversion.swc の 3 つのファイルを sdks\3.2.0\frameworks\libs の下にコピーします。
Text Layout Framework の使い方サンプル
ダウンロードページ （Downloads/Text Layout Framework@Labs） にある Text Layout Component Examples for Flash CS4 には ActionScript のサンプルも含まれてますので、Flash CS4 がなくてもいろいろな使い方を見ることができます。
例えば、下は Text Layout Framework を使って "Hello World" を表示する例です。
var textFlow:TextFlow = new TextFlow(); textFlow.addChild(p); // textFlow は全ての要素の親 var p:ParagraphElement = new ParagraphElement(); p.addChild(span); // p は span の親要素 var span:SpanElement = new SpanElement(); span.text = "Hello, World"; // span テキストを持つ要素 span.fontSize = 48; // span にスタイルを設定
Text Layout Framework のルートの要素は必ず TextFlow オブジェクトになります。主な要素の関係は以下のような感じです。（HTML と似てます）
- TextFlow: DivElement または ParagraphElement を子に持つ
- DivElement: DivElement または ParagraphElement を子に持つ - <div>
- ParagraphElement: SpanElement, InlineGraphicElement, LinkElement, TCYElement 等を子に持つ - <p>
- SpanElement: パラグラフ内のテキスト - <span>
- InlineGraphicElement: パラグラフ内に表示されるイメージ （への URL） - <img>
- LinkElement: リンク要素 （href 属性にリンク先やイベントを指定） - <a>
- TCYElement: 縦書きの TextFlow 内で横に表示されるテキスト （TCY は縦中横の意） - <tcy>
これらの要素はマークアップ形式で記述することも可能です。
<?xml version="1.0" encoding="utf-8"?>
<flow:TextFlow xmlns:flow="http://ns.adobe.com/textLayout/2008">
<flow:p>
<flow:span fontSize="48">Hello World</flow:span>
</flow:p>
</flow:TextFlow>
このマークアップの例は最初のスクリプトのサンプルと同じ内容を記述したものです。
すごく参考になりました。ありがとうございます。
このフレームワークは凄く高機能ですね。WebデザインはDTPと比べると組版処理に弱いという印象がありますが、だいぶ改善されそうな予感がします。
使用してみたのですが、
●縦組みでInlineGraphicElementを入れると90度回転するのですが、これは仕様でしょうか？
●その回転したInlineGraphicElementにTCY（縦中横）すると当然正しい向きになるのですが、グラフィックスが行間よりも大きい場合文字に重なり読めなくまります。
グラフィックスのwidthから前後の行のlineHeightを再設定すれば重なりませんが。
これも仕様でしょうか？
●今後、文字の回り込みという要素が導入される予定はありますでしょうか？
flex_sdk_4.0.0.10485_mplを使用しています。
上田さん、こんにちは。回答が遅くなりました。
現時点では仕様ということでご理解下さい。
いまのところ基本として想定されている使い方が、InDesign で組んだ
デザインを持ってきて Flash Player 上で表示する、というものなので
スクリプトからできることがまだ限られているのです。
動的にテキストをレイアウトする機能は、付くとしてもちょっと先になり
そうです。すみません。
ご回答ありがとうございます。
縦組みにはとても期待していますので、さらなる開発よろしくお願いします