ActionScript 3.0で始めるオブジェクト指向スクリプティング

第41回 Text Layout Frameworkへの外部XMLデータの読込みとユーザーインタラクション

この記事を読むのに必要な時間:およそ 4.5 分

前回の第40回Text Layout Frameworkでテキストコンテンツを表示するは,Text Layout Framework Markup形式のXMLデータを,フレームワークのクラスによりレイアウトして,ステージに表示した。今回は,まずXMLデータを外部ファイルから読込む。そのうえで,テキストの選択や編集など,ユーザーインタラクションを加えてみたい。

Text Layout Framework Markup形式のXMLデータを外部ファイルから読込む

XMLデータは,外部ファイルから読込めることが利点のひとつだ。つぎのようなText Layout Framework Markup形式のXMLデータを,外部ファイルtlf.xmlとしてFlashムービー(FLA)ファイルと同じ場所に保存しておく。これを読込んで,ステージに配置しよう。

<TextFlow xmlns='http://ns.adobe.com/textLayout/2008'>
  <p textAlign='center'>
    <span fontFamily='Impact' fontSize='18'>
    Using a TextFlow object to structure text data
    </span>
  </p>
  <p>
    <span>
    When you use the Text Layout Framework, text content is structured and stored in a TextFlow object.
    </span>
  </p>
</TextFlow>

外部XMLファイルの読込みは,第27回XMLデータを扱うですでに解説した。Text Layout Frameworkで扱うために,何かとくにしなければならないことはない。もっとも,フレームワークは,テキストの構造やフォーマット,そのレイアウトと表示などの役割を,それぞれのクラスが細かく分け合って担っていた第40回図3再掲)。そのため,慣れないうちは,処理の組立てに戸惑いやすい。そこで復習をかねてスクリプトを書いてみよう。

第40回図3 Text Layout Frameworkにおけるオブジェクトの関係(再掲)

第40回図3 Text Layout Frameworkにおけるオブジェクトの関係(再掲)

まず,読込んだText Layout Framework Markup形式のXMLデータからTextFlowインスタンスを生成する。つぎに,ContainerControllerインスタンスの参照をフローコンポーザーに渡したうえで,表示すればよかった。なお,TextFlowオブジェクトにはデフォルトのフォーマットを設定する。それには,第39回に学んだTextFlow.hostFormatプロパティを設定すればよい。つぎのスクリプト1が,そのフレームアクションだ。

スクリプト1 外部XMLデータをText Layout Frameworkで配置する

// フレームアクション
import flash.display.Sprite;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.compose.IFlowComposer;
import flashx.textLayout.formats.TextLayoutFormat;
var container:Sprite = new Sprite();
var markUp:XML;
var myFlow:TextFlow;
var controller:ContainerController = new ContainerController(container, 240, 100);
var composer:IFlowComposer;
var my_fmt:TextLayoutFormat = new TextLayoutFormat();
// 外部XMLファイルの読込み
var myLoader:URLLoader = new URLLoader();
var myRequest:URLRequest = new URLRequest("tlf.xml");
myLoader.addEventListener(Event.COMPLETE, xSetText);
myLoader.load(myRequest);
addChild(container);
// 読込み完了時の処理
function xSetText(eventObject:Event):void {
  markUp = XML(eventObject.target.data);
  myFlow = TextConverter.importToFlow(markUp, TextConverter.TEXT_LAYOUT_FORMAT);
  // デフォルトフォーマットの設定
  myFlow.hostFormat = my_fmt;
  my_fmt.fontFamily = "Helvetica";
  my_fmt.fontSize = 14;
  composer = myFlow.flowComposer;
  composer.addController(controller);
  composer.updateAllControllers();
}

[ムービープレビュー]を確かめると,本文には図1左図のようにTextFlow.hostFormatプロパティの設定が適用される。しかし,タイトルのエレメント(span)には属性としてフォーマットが指定されているため,その設定が優先する。デフォルトフォーマットには,Helveticaの14ポイントが指定してある。図1右図にはデフォルトフォーマットを定めない場合の表示を掲げたので,比べてほしい。

図1 エレメントに設定がなければデフォルトフォーマットになる

Helveticaの14ポイントをデフォルトに設定デフォルトフォーマットなし

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入