成安造形大学　コンピュータ基礎演習３・４　2009年度概要

第９回　JPEGファイルの読込み（11月20日）

本日の課題

• JPEGファイル読込みを使ったインタラクティブコンテンツを作成する
• サンプル：
• JPEGファイルのダウンロード：photo.zip
• サンプルソースのダウンロード：091120.fla

JPEGファイルをFlashで使う

• FlashムービーにJPEGファイルを読み込んで表示させることができる
• JPEG圧縮を保ったまま読み込むことが可能
• 手動でライブラリに読み込んでおく方法とアクションスクリプトで読込む方法とがある
• トゥイーンやフィルタ・マスクと併用することで様々な表現が可能

ライブラリに読み込む

• 画像ファイルをライブラリに読み込むとビットマップシンボルとして登録される
• ビットマップシンボルの画像は分解することで編集が可能
• 画像を差し替えたい場合は再度ファイルを読込み直す必要がある
• フィルタなどを適用させたい場合はムービークリップなどに変換する必要がある

ActionScriptで読み込む

• アクションスクリプトを使うことで動的にJPEGファイルを読み込むことが可能
• アクションスクリプトでJPEGファイルを読み込むにはLoaderとURLRequestの２つのクラスを使う
• JPEGファイルとピクセルサイズを合わせ左上を基準点にした配置用のムービークリップ作成しておくと便利
• 例：

  var load_req:URLRequest = new URLRequest("myphoto.jpg");
  var photo_loader:Loader = new Loader();
  photo_loader.load(load_req);
  load_mc.addChild(photo_loader);
  // 注：ファイル名はhtmlファイルからの相対パス 

• ファイルの差替えやファイル名の変更で簡単にムービーの更新が可能

配列と繰返し処理

• たくさんのファイルを一度に読み込む場合など配列と繰返しを使うことでプログラムがシンプルになる
• 例：ファイル名を配列に格納する

  var photolist:Array = new Array();
  photolist[1] = "photo/myphoto_1.jpg";
  photolist[2] = "photo/myphoto_2.jpg";
  photolist[3] = "photo/myphoto_3.jpg";

• 例：繰返し処理

  var i:Number;
  for (i=1; i<=3; i++) {
    var load_req:URLRequest = new URLRequest(photolist[i]);
    var photo_loader:Loader = new Loader();
    photo_loader.load(load_req);
    this["load_"+i+"_mc"].addChild(photo_loader);
  }

評価ポイント

• JPEG配置用のムービークリップが正しく作成できているか？（20点）
• Loaderを使っての画像読み込みが正しくできているか？（20点）
• 効果的な画像の表示ができているか？（20点）
• 配列や繰返しが効果的に使えているか？（20点）
• 効果的なインタラクティブコンテンツが作成できたか？（20点）