第5回　Flash側：画像ファイルを読み込む

前回、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を配列の要素として保存します。

データの構造は次のようなイメージです。

では、まず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);
}

次の画像を指定する関数

フォトアルバムのように、次から次へと表示したいので、showPicture()の引数を増加させる「次の画像を指定する関数」も作成しましょう。

関数名は、nextPictureとします。

現在のimage_arrayの番号も、変数にいれて格納しておかなくてはいけません。新たな変数をcurrent_image_numとして作成し,サンプルスクリプトのように定義は関数の外に書きます。

var current_image_num:uint

function nextPicture():void {
  current_image_num++;
  if (current_image_num>=image_array.length-1) {
             current_image_num=0;
  }
  showPicture(current_image_num);
}

上記のスクリプトを解説すると、まず、current_image_numを１増加させます。

その値が、「⁠image_arrayの長さ-1」（⁠image_array.length-1）以上であるときは（※⁠）⁠、current_image_numは、再び先頭の0に戻します。

最後に、current_image_numをshowPictureの引数にして実行します。

※）: image_arrayは0から始まるので、長さ-1が最大値になります。

nextPicture()を実行するイベント

現在の関数nextPicture()は、まだどこからも呼ばれるきっかけがないため、何かのイベントにひもづけて自動、あるいはインタラクティブにする必要があります。

そこで、画像(loader)をクリックしたら反応するようにしましょう。

loader.addEventListener(MouseEvent.CLICK,nextPicture)

この1行をloaderを作成するshowPicture()の中に書きます。ただし、まだ、正しく動作しません。

MouseEventでnextPictureが呼ばれるため、nextPictureは、引数としてMouseEventオブジェクトを受けとる必要があります。

そこで、関数nextPictureの1行目を次のように修正します。

function nextPicture(e:MouseEvent):void {

これで、クリックすると写真が切り替わる次のようなFlashができます。

まとめ

これで、MTからXMLデータを出力→XMLを読み込んで画像を表示する、ところまでできました。

最後に現在までのスクリプトをコメント付きで書いておきます。太字が今回作成したスクリプトです。また、今回のサンプル（showPicture.zip）をダウンロードできます。

//読み込みオブジェクトの生成
var myLoader:URLLoader = new URLLoader();
//イメージのsrcなどが入るObjectの配列
var image_array:Array = new Array();
//現在表示しているimage_arrayの順番
var current_image_num:uint=0;
//
//テキストデータという宣言
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.*) {
            //Objectの配列としてデータを格納
            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);
}
//イメージを表示する
function showPicture(num:uint):void {
      //読み込み用のMC
      var loader:Loader = new Loader();
      addChild(loader);
      //読み込み
      var fileurl:URLRequest=new URLRequest(image_array[num].src);
      loader.load(fileurl);
      //loaderをクリックしたときは、nextPictureを呼び出す
      loader.addEventListener(MouseEvent.CLICK,nextPicture);
}
//次のイメージを指定する
function nextPicture(e:MouseEvent):void {
      //現在のイメージ番号に１加算する
      current_image_num++;
      if (current_image_num>image_array.length-1) {
                  //もし、次のイメージの番号がイメージの配列の長さ-1を超えていたら、次の番号は0番目（先頭）にする
                  current_image_num=0;
      }
      //指定した番号にあるイメージを表示する
      showPicture(current_image_num);
}

//文字列をURLRequestオブジェクトにする
var myURLRequest:URLRequest=new URLRequest("http://www.3oclock.com/my_first_blog-gihyojp/photo.xml");
//XML読み込み実行
myLoader.load(myURLRequest);

次回以降は、FlashからMTへのフィードバック、その他のデータ表示、サムネイル表示、個別の画像を指定して表示する個別ページの作成を紹介していきます。

第5回Flash側：画像ファイルを読み込む