2011/05/09

Flash(AS3)で外部XMLファイルを参照する方法



Flash(ActionScript3)でXMLファイルを読み込む手順について
解説されているサイトは沢山あったけど、今回自分がやりたかったのは、
<Flexプロジェクト>でのやり方。

これについては、なかなか紹介されているサイトがなく、
悩んだので、実現できた方法を忘れないようにまとめます。

ちなみに作成環境は以下の通り。
・Windows Vista
・Flash Develop(フリーのFlash開発環境統合ソフト)

【手順】
1)Flash Developにて<Flex3プロジェクト>を新規作成
 パッケージ:test
 テンプレートのコピーをする

2)src/test/Main.mxml の編集
~~~~~ Main.mxml ここから ~~~~~
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import test.asFile.ShowMessage;
    ]]>
  </mx:Script>
  
  <!-- レイアウト -->
  <mx:Text id="messe" text="以下に表示するファイル名を入力"/>
  <mx:TextInput id="textBox" text="test.xml" />
  <mx:Button id="button" label="Click!!"
    click="new ShowMessage(textBox, textArea)" />
  <mx:TextArea id="textArea"
    width="500" height="200"
    text="ここに指定したXMLファイルの内容が表示されます。" />
</mx:Application>
~~~~~ Main.mxml ここまで ~~~~~

3)asファイルの作成
~~~~~ ShowMessage.as ここから ~~~~~
package test.asFile {
  import flash.events.Event;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  import mx.controls.TextArea;
  import mx.controls.TextInput;

  /** XMLファイルの内容を表示するためのクラス */
  public class ShowMessage {
    /** XMLファイルを設置するディレクトリ */
    private const XML_HOME_DIR:String = "test/xml/";

    /** コンストラクタ */
    public function ShowMessage(
      textInput:TextInput, textArea:TextArea) {
      var fileName:String = textInput.text;
      ReadXMLFile(fileName, textArea);
    }
    
    /** ファイル内容の取得 */
    private function ReadXMLFile(
      fileName:String, textArea:TextArea):void {
      
      var xml:XML = new XML();
      var urlRequest:URLRequest =
        new URLRequest(XML_HOME_DIR + fileName);
      var urlLoader:URLLoader = new URLLoader(urlRequest);
      
      urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
      
      function xmlLoaded(event:Event):void {
        xml = XML(urlLoader.data);
        trace(xml.toString());
        textArea.text = xml.toString();
      }
    }
  }
}
~~~~~ ShowMessage.as ここまで ~~~~~

4)xmlファイル作成
~~~~~ test.xml ここから ~~~~~
<?xml version="1.0" encoding="utf-8" ?>
<data>
 <member>
  <name>first</name>
 </member>
 <member>
  <name>second</name>
 </member>
</data>
~~~~~ test.xml ここまで ~~~~~

5)最終的なディレクトリ構成

XMLファイルを設置する場所がポイント!
swfファイルが設置されているディレクトリが
ホーム扱いになるので、
そこから相対パスで参照できるようにする
必要がある点に注意。

これに関しては、EclipseにFlash Developerのプラグインを入れてコンパイルすると
自動でディレクトリが作成されるからsrcディレクトリに入れると行ける。