_Flash テキストレイアウトフレームワーク (Text Layout Framework)を使ってみる
- 2009-02-14(土)
- ActionScript,
- Flash

Text Layout Frameworkはベータ版なのですが、FlashPlayer10とAIR1.5から使えます。
参考:Adobe Edge: 2009年1月 Text Layout Framework による 新たな文字表現
Flash Text Layout Framework 2 - Rest Term
Text Layout Frameworkを使う事によって、DTPと同じような縦組や段落、文字の回転などの文字組ができます。
また、右下の『MarkUp』ボタンをクリックするとXMLが表示されるので、これを利用すればActionScriptからも表示できます。 また、XMLを編集することであとからでも設定を変更する事もできます。
参考:Adobe Edge: 2009年1月 Text Layout Framework による 新たな文字表現
Flash Text Layout Framework 2 - Rest Term
Text Layout Frameworkを使う事によって、DTPと同じような縦組や段落、文字の回転などの文字組ができます。
また、右下の『MarkUp』ボタンをクリックするとXMLが表示されるので、これを利用すればActionScriptからも表示できます。 また、XMLを編集することであとからでも設定を変更する事もできます。
1段落目だけですが、文字を回転させたりして読みやすくしています。
アンドゥ/リドゥ機能が付いたテキストエリアにしました。これで、テキスト入力とCtrl + Z、Ctrl + Y等で動作を確認した見てください。
※MS P ゴシックだと1段落目のレイアウトが崩れてしまいました。実際使う場合は、フォントを埋め込んだ方が良さそうです。
引用:夏目漱石 - Wikipedia
スクリプトで以下のXMLファイルを読み込んで表示しています。
textlayout.xml
スクリプトはこんな感じです。
アンドゥ/リドゥ機能が付いたテキストエリアにしました。これで、テキスト入力とCtrl + Z、Ctrl + Y等で動作を確認した見てください。
※MS P ゴシックだと1段落目のレイアウトが崩れてしまいました。実際使う場合は、フォントを埋め込んだ方が良さそうです。
スクリプトで以下のXMLファイルを読み込んで表示しています。
textlayout.xml
スクリプトはこんな感じです。
import flash.events.Event;
import flash.net.*
// 使用するText Layout Framework クラスのロード
import flashx.textLayout.container.*;
import flashx.textLayout.compose.*;
import flashx.textLayout.conversion.TextFilter;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.edit.SelectionManager;
import flashx.textLayout.edit.UndoManager;
import flashx.textLayout.elements.*;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.dataFormat = URLLoaderDataFormat.TEXT;
xmlLoader.addEventListener(Event.COMPLETE, loadComplete);
var xmlReq:URLRequest =new URLRequest("hoge.xml");
xmlLoader.load(xmlReq);
function loadComplete (event:Event):void {
//読み込んだXMLをセット
var markup:XML = new XML(xmlLoader.data);
//TextFlow インスタンスの作成
var myFlow:TextFlow=TextFilter.importToFlow(markup,TextFilter.TEXT_LAYOUT_FORMAT);
//テキストの選択・変更・アンドゥ/リドゥを可能にする
var undoMgr:UndoManager = new UndoManager();
myFlow.interactionManager = new SelectionManager();
myFlow.interactionManager = new EditManager(undoMgr);
// コントローラを作成。初期サイズを縦横のピクセルで設定し、DisplayObjectContainer に表示
var contr:IContainerController=new DisplayObjectContainerController(this,450,450);
// TextFlow の flowComposerプロパティを使って作成したコントローラを関連づけ
myFlow.flowComposer.addController(contr);
// 再描画
myFlow.flowComposer.updateAllContainers();
}
このエントリーをTwitterでつぶやく (投稿画面に飛びます)
- Newer: _Flexを始めます。
- Older: _Subversionをインストール





