前回，FlashにXMLデータを読み込みました。
今回は，そのXMLから取り出した画像のURLから画像データを読み込み表示します。
おさらい
前回作成したフレームアクションは，次の通りです。
//読み込みオブジェクトの生成
var myLoader:URLLoader = new URLLoader();
//テキストデータという宣言
myLoader.dataFormat=URLLoaderDataFormat.TEXT;
//読み込み完了したらonLoaded()を実行
myLoader.addEventListener(Event.COMPLETE,onLoaded);
//読み込み完了時に実行される関数
function onLoaded(e:Event):void {
//XMLデータとして読み込んだテキストデータをパース
var myXML:XML=new XML(e.target.data);
//E4XでmyXMLを解析
for each (var entrydata:XML in myXML.*) {
//entrydata の中のimgタグのsrc属性を調べる
trace("src",entrydata.img.@src)
}
}
//文字列をURLRequestオブジェクトにする
var myURLRequest:URLRequest=new URLRequest("photo.xml");
//XML読み込み実行
myLoader.load(myURLRequest);
実行すると，図のようにXMLからsrc属性のデータが出力されました
前回の結果
今回は，そのデータを利用して画像を表示したいと思います。
格納すべきデータは，画像のURLが中心ですが，いっしょに保存されているtitleやid属性もまとめて保存しましょう。
Objectデータを配列にする
1件分のデータはObjectにしておきます。これだと，Object.idやObect.titleなどで属性が取得できて便利だからです。そして，そのObjectを配列の要素として保存します。
データの構造は次のようなイメージです。
Array（配列）の中にObject（汎用オブジェクト）が複数ある
では，まずfunction onLoaded()の中を太線のように書き換えます。
function onLoaded(e.Event):void{
var myXML:XML=new XML(e.target.data);
for each (var entrydata:XML in myXML.*) {
var t_object:Object = new Object()
t_object.src = entrydata.img.@src
t_object.id = entrydata.id
t_object.title = entrydata.title
}
}
このままでは，t_objectは，単に属性がセットされるだけで，関数onLoaded()が終了すると残りません。
そこで，複数のt_objectデータを並び順通りに保存するために配列(Array)を使用します。
配列 image_arrayをfunction onLoaded()の外で定義し関数内で配列に挿入すると，次のようになります。
var image_array:Array = new Array()
function onLoaded(e.Event):void{
var myXML:XML=new XML(e.target.data);
for each (var entrydata:XML in myXML.*) {
var t_object:Object = new Object()
t_object.src = entrydata.img.@src
t_object.id = entrydata.id
t_object.title = entrydata.title
image_array.push(t_object)
}
}
これで，関数onLoaded()が終了した後でも画像パスなどのデータをimage_arrayで調べることができます。
画像を読み込んで表示する関数を作る
画像を読み込むためには，Loaderクラスを使用して，次のような感じで使用します。
今回もURLの指定には，StringではなくURLRequestを使用します。
var loader:Loader = new Loader()
var fileurl:URLRequest = new URLRequest("http://～.jpg")
loader.load(fileurl)
そこで，Loaderクラスを使用して「指定した画像を読み込んで表示する」という関数を作ります。
また画像の指定方法は，image_arrayの順番を指定する引数numを使用して該当するObjectのsrc属性を調べます。
image_array[num].src
showPicture関数の定義は，次のようになります。
function showPicture(num:uint):void{
var loader:Loader = new Loader()
var fileurl:URLRequest = new URLRequest(image_array[num].src)
loader.load(fileurl)
}
これで，読み込みは成功しますが，画像を表示するにはMovieClipの時と同じようにloaderオブジェクトをaddChild()する必要があります。
これらをまとめたものが次のスクリプトです。
function showPicture(num:uint):void{
var loader:Loader = new Loader()
addChild(loader)
var fileurl:URLRequest = new URLRequest(image_array[num].src)
loader.load(fileurl)
}
ムービープレビューで最初の画像を表示するには，どこかでこの関数を実行しないといけないため，XML解析を行うonLoaded()の最後で，showPicture(0)と呼ぶようにします。
function onLoaded(e:Event):void {
var myXML:XML=new XML(e.target.data)
for each (var entrydata:XML in myXML.*) {
var t_object:Object = new Object();
t_object.src=entrydata.img.@src;
t_object.id=entrydata.id;
t_object.title=entrydata.title;
image_array.push(t_object);
}
showPicture(0);
}
