Text Layout Framework (TLF) を使って、Flash コンテンツのテキストを縦書きにします。
先日縦組みレイアウトのブログサイトで初めて素敵なデザインのサイト「macromarionette」さんを見つけました。Flash Player 10 から導入された Flash Text Engine (FTE)。これをより使いやすくするためのフレームワーク Text Layout Framework (TLF) ベータ版がアドビから提供されたので、これを利用されているそうです。TLF は Flash CS5 から正式に組み込まれるので、正式版で仕様や方式が変わっている/追加されていることは大いにありえるのですが、面白そうなので予習として勉強開始＆メモ。
もう少しで Flash CS5 public beta が出るそうですが、とりあえず今でもできる予習として、 Flash CS4 と Text Layout Framework (TLF) で縦書きの文字組みを作ってみます。
Flash CS4 編
1. TextLayoutFramework beta を Adobe Lab からダウンロード。
※：学習用に Text Layout Component Examples というサンプルファイルもダウンロードしましょう。
2. Extension Manager CS4 でインストール。
3. Flash CS4 を開いて Flash ドキュメント作成。
4. コンポーネントパネルの「標準コンポーネント」Text Layout をステージにドラッグ。
5. 「TextLayout Sample Text.」と書かれた Text Layout インスタンスが配置される。
6. Window > その他のパネル > Text Layout パネルを開く。
7. 配置したインスタンスを選択したまま、パネル左下「Get from Stage」ボタンを押してステージのインスタンスを同期する。
8. テキストエリアに何か適当に書いた後、「Send to Stage」すると、ステージのインスタンスに編集が反映される。
9. テキストを選択した状態で、パネル右側の操作パネルで色々設定できる。
10. CHARATER の Font を 小塚明朝、 Size を 18、Leading を 200%。Paragraph の Alignment を一番右のアイコン：均等揃え、Just.Rule を East Asian、 ADVANCED CHARACTER の Local を JAPANESE 、Dominant Baseline を Ideographic Center か Ideographic Bottom。そして FLOW の Orientation を Vertical という感じで設定していくと、結構いい感じに。
で、その完成サンプルはこちら。
「/」（半角スラッシュ）は使わないとか、段落の頭は一文字下げるとかの基本も押さえていけば、よりいい感じになっていきそうです。
ただ操作性はまだイマイチ。ルビが振れないのは正直ガッカリ。CS5 で乗るとされる正式版に期待です。
Action Script 3.0 編 I とりあえず表示
AS からも制御可能。HTML でつかう <body> や <p> 、<span> などと同じようなイメージでテキストを階層構造化していくことで文章にします。
<body> は TextFlow インスタンス、 <p> は ParagraphElement インスタンス、 <span> は SpanElement インスタンスに置き換えて、上位のインスタンス（TextFlow）に下位のインスタンス（ParagraphElement、SpanElement）を addChild() することで指定できます。
テキストを入れていったら、TextFlow.flowComposer.addController() で DisplayObejctContainer のツリーに参加させて、TextFlow.flowComposer.updateAllContainers() で内容を更新します。
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.container.DisplayObjectContainerController;
var tf:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = "ハロー、ワールド。";
tf.addChild(p);
p.addChild(span);
tf.flowComposer.addController(new DisplayObjectContainerController(this, 240, 400));
tf.flowComposer.updateAllContainers();実行結果。
flashx.textLayout パッケージを使うには CS4 にインストールした、TextLayoutComponent（コンポーネントパネルの「標準コンポーネント」Text Layout）を実行する .fla のライブラリにドラッグアンドドロップすることで使えるようになります。
Action Script 3.0 編 II 縦組みにする
上の Flash CS4 上で作成したサンプルでは、「縦書き」「日本語禁則処理」「均等揃え」「英語/日本語ベースライン揃え」などを使用しています。これらは formats パッケージなどに用意されている定義クラスを用いることで実現できます。
というわけで、上の Flash CS4 で作った文字組サンプルを再現してみます。
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.edit.SelectionManager;
import flashx.textLayout.formats.BlockProgression;
import flashx.textLayout.formats.Direction;
import flashx.textLayout.formats.JustificationRule;
import flashx.textLayout.formats.TextAlign;
import flashx.textLayout.formats.VerticalAlign;
import flash.text.engine.TextBaseline;
var tf:TextFlow = new TextFlow();
tf.color = 0x212121;
tf.fontSize = 18;
tf.fontFamily = "Kozuka Mincho Pro R, Hiragino Mincho Pro W3, MS Mincho, _明朝, _serif";
tf.lineHeight = "200%";
tf.locale = "ja"; // japanese
tf.direction = Direction.LTR;
tf.dominantBaseline = TextBaseline.IDEOGRAPHIC_BOTTOM;
tf.blockProgression = BlockProgression.RL;
tf.justificationRule = JustificationRule.EAST_ASIAN;
tf.interactionManager = new SelectionManager();
tf.textAlign = TextAlign.JUSTIFY;
tf.textAlignLast = TextAlign.LEFT;
tf.paddingRight = 5;
tf.paddingTop = 5;
tf.paddingLeft = 5;
tf.paddingBottom = 5;
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = "先日縦組みレイアウトのブログサイトで初めて素敵なデザインのサイト「macromarionette」さんを見つけました。Flash Player 10 から導入された Flash Text Engine (FTE)。これをより使いやすくするためのフレームワーク Text Layout Framework (TLF) ベータ版がアドビから提供されたので、これを利用されているそうです。TLF は Flash CS5 から正式に組み込まれるので、正式版で仕様や方式が変わっている/追加されていることは大いにありえるのですが、面白そうなので予習として勉強開始＆メモ。";
tf.addChild(p);
p.addChild(span);
tf.flowComposer.addController(new DisplayObjectContainerController(this, 550, 400));
tf.flowComposer.updateAllContainers();実行結果。上の Flash CS4 で作ったサンプルと違いはなさそうですね。
ちなみに文字組みをやってらっしゃる方には当然のお話ですが、縦書きで日本語と英語が混じった文だと、デフォルトではベースラインがずれているので、調整は必須です。（dominantBaseline プロパティを調整）
ルビについては基本的に振ることは出来ませんが、メインの TextFlow と別の TextFlow を使って、うまいことやったらできるのかなと思います。
というわけで今回のサンプル詰め合わせ（zip）。縦書きスキーとしては TLF が広まって、さらなる進化と今後に期待なのです。とりあえずルビお願いします。ルビ。
参考：
TextFlow - AdobeR FlexR 4 Beta Language Reference
macromarionette
