今回は、これまでに作成したXMLファイルをFlashで読み込みます。
今回はFlash CS4と、E4XというXML解析手法が使用できるActionScript3.0(以下、AS3)を使用します。
まず、Flashの新規ドキュメントを作成します。
本来はオブジェクト指向で作成しますが、まずは、フローをしっかりと把握するため、フレームにAS2の時と同じスタイルで記述します。ただし、文法はAS3なので、注意してください。
外部テキストを読み込む手順は、大まかに次の通りです。
- URLLoaderを準備
- 読み込み完了イベントへの関連づけ
- 読み込み完了時の関数定義
- URLRequestでアクセス
URLLoaderを準備
外部テキストは、URLLoaderオブジェクトで読み込みますので、myLoaderという変数名でURLLoaderのオブジェクトを生成しましょう。
フレームに次のように記述します。
次に、myLoaderの受け取るデータがテキストであることを宣言します。
読み込み完了イベントへの関連づけ
そして、myLoaderが読み込み完了したとき(Event.COMPLETE)に実行する関数(onLoaded)を指定します。
先ほど設定した、関数「onLoaded」を定義します。
このonLoaded()関数では、読み込み終わったXMLデータをトレースするだけです。
読み込み完了イベントから呼ばれる関数を定義
このとき、関数onLoaded()には、Eventオブジェクトが引数で返されます。そのため、それを受け取る引数の宣言がないとエラーになります。
このonLoaded()関数が呼ばれたとき、読み込んだXMLテキストはmyLoaded.dataでアクセスできるようになっています。そこで、myLoaded.dataをnew XML()の引数にしても良いのですが、ここでEventオブジェクトである引数eのtargetプロパティは、myLoadedを参照しています。つまりmyLoaded.dataをe.target.dataと書き換えることができます。
このe.target.dataの値は、XMLフォーマットで記述されたテキストデータです。それをE4XやXMLクラスのメソッドでアクセスできるようXMLオブジェクトにします。
trace()の実行結果は、次のようなものになります(データの中身は環境によって異なりますが、XMLフォーマットになっているはずです)。
E4Xで解析
myXMLに対して、E4Xを使用してデータを抽出します。
E4Xとは、ECMAScript for XMLの略で、Flash独自のものではなく、ECMAScriptで定義されたXMLを解析する手法です。
E4Xの特徴は、XMLの構造に沿って、.(ドット)で階層を下りテキストノードを指定したり、@を使用して属性値を取得する点です。
また、ワイルドカードとして*を使用できます。
たとえば、次のXMLフォーマットの場合を考えてみましょう。
E4Xにより、次のAS3では、myXMLを生成します。
その後、次のようにE4XでXMLオブジェクトへアクセスすることができます。
myXMLは、<togoru>と同じレベルなので、togoru.member.name を変数myXMLを使用して表現するならば、myXML.member.name となります。
繰り返しノードの抽出
今回のXMLフォーマットでは、entriesタグの中にentryタグが繰り返しでてきます。
そこで繰り返しているentryノードを1件づつ取り出す必要があります。繰り返して取り出すときに、for-each-in というあらたにAS3で追加されたループ処理命令を使用します。
たとえば、<entries>の中の<entry>を取り出すには、次のように書きます。
これを、実際の変数で記述すると次のようになります。
for-each-inは、ノードを1件単位で取り出す命令のため、必ずしも、今回のような同じノード名の繰り返し以外でも使用できます。
URLRequestでアクセス
最後にXMLデータの読み込みを実行します。URLLoaderクラスのload()メソッドを使用します。
※ photo.xmlは、適宜、自分の環境にあったURLに直します。
AS3では、アクセスするアドレスのテキストは、常にURLRequestオブジェクトである必要があります。
URLRequestにするときは、new URLRequest("アクセスしたいURL")です。
このURLRequestオブジェクトを、myLoaderのload()メソッドの引数にして実行します。
全スクリプト
ここまでをまとめると、次のようになります。
動作テスト
- スクリプト1をAS3で新規作成したFlashムービーのフレームにペーストします。
- new URLRequest("photo.xml"); のXMLを自分の環境に合わせて書き換えます。
例:http://www.3oclock.com/my_first_blog-gihyojp/photo.xml
- ムービープレビューします。
※ サンプルのFlaファイル(CS4専用)をダウンロードできます。
正しく動作すれば、次のようにトレース結果が出力されます。
まとめ
ここまでできれば、後は、このトレースしている内容を変数に格納し、何らかのタイミングで、画面に読み込めば良さそうです。
今回は、XMLデータをFlashに読み込むところまでを作業しました。
次回は、このデータを使用して、写真を読み込み表示します。