アンケートご協力のお願いgihyo.jpでは,2010年度に向けて豪華プレゼントが当たる読者属性アンケートを実施しております。ご協力ください。

gihyo.jp » WEB+DESIGN STAGE » 連載 » NORIのFlashユーザのためのMovable Type講座 gihyo.jp版 » 第5回 Flash側:画像ファイルを読み込む

NORIのFlashユーザのためのMovable Type講座 gihyo.jp版

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

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

Array(配列)の中に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);
}

著者プロフィール

NORI(伊藤のりゆき)

有限会社トゴル・カンパニー代表。ロクナナワークショップ講師。Flashアクセシビリティを得意とし,ライターとしてFlash関連書籍や雑誌記事の執筆を行う。共著の「ActionScript3.0辞典」が発売中。また,先頃,写真家として初の写真集「「Snap or Nothing写真集」(iTunes AppStoreにて)が発売された。

だれもが使えるウェブコンクールではシンポジウムに登壇し「Flashアクセシビリティのノウハウ」を紹介する予定。内容のリクエストはTwitter(nori_togoru)まで。

コメント

コメントの記入

パスサポ

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする,資格試験合格サイト「めざせ! 情報処理試験 パスサポ」が開設されました。

ピックアップ

サクセスストーリーに続く,快適サーバー運用管理のヒント!

データの増大,煩雑な管理,システムダウン,セキュリティなど,迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。

gihyo.jp インフラエンジニア情報局

ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え,その魅力について多角的に紹介。

テストエンジニア ステーション

いま,ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

一行クイックアンケート

gihyo.jpで取り上げてほしいネタは?

※検索はページ右上の検索ボックスをご利用ください。

その他の連載

読むウェブ ~本とインタラクション

ディスプレイで読む活字とそのインタラクション(interaction:相互作用)について,最新Webを紹介しながら読み解いていく。

いま,見ておきたいウェブサイト

この連載では,国内外の最新のウェブサイトを隔週更新で取り上げ,これら最新サイトの特徴や素晴らしい部分を,さまざまな角度から解説していきます。

Windows phoneアプリケーション開発入門

Windows Marcketplace for Mobileがサービス開始され,作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか?

ここは知っておくべき!Windows Server 2008技術TIPS

5年ぶりのサーバOSとなったWindows Server 2008が出荷されて早2年。2009年にはR2が出荷され,再び注目を集めています。発売前から実施したトレーニングによって感じた,インフラエンジニアの方々に知っておいていただきたい機能を中心にご紹介します。

キーパーソンが見るWeb業界

本連載はWeb Site Expert/gihyo.jpとの連動企画です。阿部淳也, 長谷川敦士, 森田雄のお三方による,Web業界をテーマにした座談会です。

きたみりゅうじの聞かせて珍プレー

ソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお待ちしてます!

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

野中文雄氏が,簡単なスクリプトは書いたことがあるという初級者を対象に,ActionScript 3.0の基本からクラス定義までを解説します。

まだ間に合う「ITパスポート」受験対策 原山先生の短期合格塾

この連載では,4月18日のITパスポート試験の受験に向けて,短い期間で効率良く受験対策を行う方法や,確実に得点するための裏ワザなどを伝授していきます。

連載一覧

gihyo.jp

  • DEVELOPER STAGE
  • ADMINISTRATOR STAGE
  • WEB+DESIGN STAGE
  • LIFESTYLE STAGE
  • SCIENCE STAGE
  • NEWS & REPORT

書籍案内

  • 新刊書籍
  • 書籍ジャンル一覧
  • 書籍シリーズ一覧
  • 新刊ピックアップ
  • ロングセラー
  • 電脳会議

定期刊行物一覧

  • Software Design
  • WEB+DB PRESS
  • Web Site Expert
  • 組込みプレス