1. SSAW08 後期第5回
ActionScript 3.0入門 (2)
外部イメージの読み込み
2008年10月14日

2. 本日の内容
• 外部イメージファイルをロードする
• ローカルデータだけでなく、インターネット上のデータのローディング
にも対応
• データのロード状況のモニタリング
• 外部XMLファイルの読み込み
• 読み込むイメージファイルの場所を外部XMLファイルで定義する
• 今後Web APIを使用していく際に重要となるテクニック

3. 外部イメージファイルをロードする (1)
• 外部イメージファイルをロードするには
• Loaderクラスを利用する
• SWF ファイルまたはイメージ (JPG、PNG、または GIF) ファイルをロー
ドする
• ロードされた表示オブジェクトは Loader オブジェクトの子として追加
される
• 手順
• LoaderクラスのインスタンスloaderObjを生成
• loaderObj.load(urlReq)でロード

4. 外部イメージファイルをロードする (1)
• ロード状況のモニタリング
• loaderObj.contentLoaderInfoオブジェクトにリスナーを登録して、
ロード状態をモニタリングすることが可能
• ロードの状態
• Event.COMPLETE
• ロードが完了した際にイベント生成
• ProgressEvent.PROGRESS
• ロード中の際にイベント生成
• IOErrorEvent.IO_ERROR
• ロードにエラーが発生した際にイベント生成

5. 外部イメージファイルをロードする
• 外部イメージを読み込むための汎用的なクラスを作成する
• ImageLoader.as
• URLを引数で読み込んでLoaderを生成
• イベントリスナーを登録
• ロード中は、読み込んだデータをパーセント表示
• ロード終了後は、表示リストに外部イメージのデータを登録

6. 外部イメージファイルをロードする (1)
画像のURL 画像のURL
Internet
画像データ 画像データ
Flashページ
画像ファイル
※Flashファイル内にファイルのURLを指定
外部イメージのロード (画像URL情報はFlashに内包)

7. 外部イメージファイルをロードする (1)
• メインクラスLoadingImage.as
• ImageLoaderクラスを呼び出して、表示リストに加える
• 複数のImageLoaderを同時に呼び出すことも可能

8. 外部イメージファイルをロードする (1)
プロジェクトのクラス構造
ImageLoader
- _url:String;
- _imgLoader:Loader;
LoadImage - _perFld:TextField;
1 * - _width:Number;
- _height:Number;
+ LoadImage()
+ ImageLoader(url:String, w:Number, h:Number)
・メインクラス - onLoaded(event:Event):void
- 張り込む画像の数だけ、 - onProgress(event:ProgressEvent):void
ImageLoaderを呼び出す - setupPercentField():void
・Loaderに外部画像を読込むクラス
- Loaderを生成
- 指定されたURLの画像をネットから読込
- Loaderに画像データを読込み、ステージに表示

9. 外部イメージファイルをロードする (1)
LoadImage.as：メインクラス
//
// LoadImage.as：メインクラス
//
package {
import flash.display.*;
import flash.text.TextField;
[SWF(backgroundColor="#cccccc", frameRate="60")]
public class LoadImage extends Sprite {
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
public function LoadImage()
{
//ステージ設定
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//イメージのURLを配列として定義
var urlArray:Array = [
"http://farm4.static.flickr.com/3098/2921424076_48f37924a2.jpg?v=0",
"http://farm4.static.flickr.com/3203/2920571465_050105da5f.jpg?v=0",
"http://farm4.static.flickr.com/3214/2921415746_e8376d6f59.jpg?v=0",
"http://farm4.static.flickr.com/3070/2921414706_00b1fc438e.jpg?v=0",
"http://farm4.static.flickr.com/3209/2920568583_6e5dc15d3a.jpg?v=0",

10. 外部イメージファイルをロードする (1)
LoadImage.as：メインクラス
"http://farm4.static.flickr.com/3074/2921412810_a0bdc56c6b.jpg?v=0",
"http://farm4.static.flickr.com/3101/2921410832_3308c416c0.jpg?v=0",
"http://farm4.static.flickr.com/3090/2920562279_7c689e033b.jpg?v=0",
"http://farm4.static.flickr.com/3034/2920561829_603508c635.jpg?v=0"];
//それぞれのイメージを読み込み、グリッド状に配置して、表示リストに追加
for(var i:uint = 0; i < urlArray.length; i++){
var img:ImageLoader = new ImageLoader(urlArray[i], 240, 180);
img.x = (i % 3) * 240;
img.y = int(i / 3) * 180;
addChild(img);
}
}
}
}

11. 外部イメージファイルをロードする (1)
ImageLoader.as：画像をロードするクラス
//
// ImageLoader.as
// LoadImage
//
package {
//表示関連
import flash.display.Sprite;
//外部ファイル読み込み関連のパッケージ
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.IOErrorEvent;
//テキストフィールド関連パッケージ
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

12. 外部イメージファイルをロードする (1)
ImageLoader.as：画像をロードするクラス
public class ImageLoader extends Sprite {
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
public function ImageLoader(url:String, w:Number, h:Number)
{
_url = url; //画像URL
_width = w; //画像の表示幅
_height = h; //画像の表示高さ
setupPercentField(); //％表示フィールド表示
_imgLoader = new Loader(); //Loaderを生成
addChild(_imgLoader); //Loaderをステージに追加
//イベントリスナー定義
_imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
onProgress); //読みこみ中
_imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded); //読
みこみ完了
//画像の読み込み開始
var urlReq:URLRequest=new URLRequest(_url);
_imgLoader.load(urlReq);
}

13. 外部イメージファイルをロードする (1)
ImageLoader.as：画像をロードするクラス
//--------------------------------------
// PRIVATE VARIABLES
//--------------------------------------
private var _url:String;
private var _imgLoader:Loader;
private var _perFld:TextField;
private var _width:Number;
private var _height:Number;
//--------------------------------------
// EVENT HANDLERS
//--------------------------------------
//読み込み完了
private function onLoaded(event:Event):void {
removeChild(_perFld); // %表示を削除
_perFld = null;
_imgLoader.width = _width;
_imgLoader.height = _height;
}

14. 外部イメージファイルをロードする (1)
ImageLoader.as：画像をロードするクラス
//ロード経過表示
private function onProgress(event:ProgressEvent):void {
var per:Number = Math.round(event.bytesLoaded/event.bytesTotal*100);
_perFld.text = per + " %";
}
//--------------------------------------
// PRIVATE & PROTECTED INSTANCE METHODS
//--------------------------------------
//%フィールド作成
private function setupPercentField():void {
_perFld = new TextField();
_perFld.x = 10;
_perFld.y = 10;
_perFld.autoSize = TextFieldAutoSize.LEFT;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "Verdana";
textFormat.size = 12;
_perFld.defaultTextFormat = textFormat;
addChild(_perFld);
}
}
}

15. 外部イメージファイルをロードする
• 実行結果

16. 外部イメージファイルをロードする (2)
外部XMLファイルの読み込み
• 現状のソース
• 読み込む画像ファイルのURLをコード内部に記述している
• 読み込む画像を変更する度に再コンパイルをする必要あり
• めんどう
• 画像ファイルのURLは別ファイルで定義したい
• XML形式のファイルを利用すると便利
• XML形式の利点
• 構造化されたデータ形式
• AS3で扱いやすい
• 現在多くのWebAPIで標準的に用いられている

17. 外部イメージファイルをロードする (2)
外部XMLファイルの読み込み
• メインクラスを変更
• XMLファイルを解析して、URLを抽出
• 抽出したURLからイメージを読み込む

18. 外部イメージファイルをロードする (2)
外部XMLファイルの読み込み
• 全体の設計
• XMLファイルを読み込み
↓
• XMLファイルの読み込み完了を検知
↓
• XMLファイルからURLを抽出
↓
• 抽出したURLからローダ生成
↓
• 画像読み込み
↓
• 読み込みが完了した画像から表示

19. 外部イメージファイルをロードする (2)
外部XMLファイルの読み込み
• XMLファイルを読み込むクラスを作成する
• XMLloader.as
• URLで指定されたXMLファイルをロードする
• ロードが完了したら、完了したことを通知するイベントを発生
• EventDispacherを利用する

20. 外部イメージファイルをロードする (2)
外部XMLファイルの読み込み
XMLファイル (※画像のURLを定義)
画像のURL
画像のURL 画像のURL
Internet
画像データ 画像データ
Flashページ
画像ファイル
外部イメージのロード (画像URL情報をXMLで定義)

21. 外部イメージファイルをロードする (1)
プロジェクトのクラス構造
XMLLoader
LoadImage - _xmlLoader:URLLoader;
1 1 - _my_xml:XML;
+ XMLLoader(url:String)
+ LoadImage()
+ getXML():XML
・メインクラス - onXMLloaded(event:Event):void
- 張り込む画像の数だけ、
ImageLoaderを呼び出す ・XMLをロード
- 指定されたXMLファイルをロード
- メインクラスにロード完了を通知
- ロードされたXMLファイルをメインクラスに返す
ImageLoader
- _url:String;
- _imgLoader:Loader;
- _perFld:TextField;
* - _width:Number;
- _height:Number;
+ ImageLoader(url:String, w:Number, h:Number)
- onLoaded(event:Event):void
- onProgress(event:ProgressEvent):void
- setupPercentField():void
・Loaderに外部画像を読込むクラス
- Loaderを生成
- 指定されたURLの画像をネットから読込
- Loaderに画像データを読込み、ステージに表示

22. 外部イメージファイルをロードする (2)
photo.xml：URLを指定したXMLファイル
<?xml version="1.0" encoding="UTF-8"?>
<data>
<photoURL>http://farm4.static.flickr.com/3098/2921424076_48f37924a2.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3203/2920571465_050105da5f.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3214/2921415746_e8376d6f59.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3070/2921414706_00b1fc438e.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3209/2920568583_6e5dc15d3a.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3074/2921412810_a0bdc56c6b.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3101/2921410832_3308c416c0.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3090/2920562279_7c689e033b.jpg</photoURL>
<photoURL>http://farm4.static.flickr.com/3034/2920561829_603508c635.jpg</photoURL>
</data>

23. 外部イメージファイルをロードする (2)
LoadImage.as：メインクラス
//
// LoadImage
//
// Created by Atsushi Tadokoro on 08/10/13.
// Copyright 2008 yoppa.org. All rights reserved.
//
package {
import flash.display.*;
import flash.events.Event;
[SWF(backgroundColor="#CCCCCC", frameRate="60")]
public class LoadImage extends Sprite {
//--------------------------------------
// CLASS CONSTANTS
//--------------------------------------
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
public function LoadImage()
{
//Stage設定

24. 外部イメージファイルをロードする (2)
LoadImage.as：メインクラス
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//XMLファイルを読み込む
_xmlLoader = new XMLLoader("./xml/photo.xml");
//イベントリスナーの登録
_xmlLoader.addEventListener(XMLLoader.LOAD_COMPLETE, onXMLloaded);
}
//--------------------------------------
// PRIVATE VARIABLES
//--------------------------------------
private var _xmlLoader:XMLLoader;
private var _photoXml:XML;
private var _photoWidth:Number = 240;
private var _photoHeight:Number = 180;
//--------------------------------------
// GETTER/SETTERS
//--------------------------------------
//--------------------------------------
// PUBLIC METHODS
//--------------------------------------

25. 外部イメージファイルをロードする (2)
LoadImage.as：メインクラス
//--------------------------------------
// EVENT HANDLERS
//--------------------------------------
//XMLロード完了後実行
private function onXMLloaded(event:Event):void {
//ロードしたXMLを取得
_photoXml = _xmlLoader.getXML();
//XMLに記述されたURLの数だけ繰り返し
var i:int = 0;
for each (var url:String in _photoXml.photoURL){
//イメージをロードしてグリッド状に配置
var img:ImageLoader
= new ImageLoader(url, _photoWidth, _photoHeight);
img.x = (i%3)*_photoWidth;
img.y = int(i/3)*_photoHeight;
addChild(img);
i++;
}
}
}
}

26. 外部イメージファイルをロードする (2)
XMLLoader.as：XMLを読込みメインクラスに通知
//
// XMLLoader.as
// LoadImage
//
// Created by Atsushi Tadokoro on 08/10/13.
// Copyright 2008 yoppa.org. All rights reserved.
//
package {
import flash.events.EventDispatcher;
import flash.net.URLLoader;
import flash.net.URLLoaderDataFormat;
import flash.net.URLRequest;
import flash.system.System;
import flash.events.Event;
public class XMLLoader extends EventDispatcher {
//--------------------------------------
// CLASS CONSTANTS
//--------------------------------------
public static const LOAD_COMPLETE:String = "load_complete";

27. 外部イメージファイルをロードする (2)
XMLLoader.as：XMLを読込みメインクラスに通知
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
public function XMLLoader(url:String)
{
//URLLoader作成
_xmlLoader = new URLLoader();
_xmlLoader.dataFormat = URLLoaderDataFormat.TEXT;
_xmlLoader.addEventListener(Event.COMPLETE, onXMLloaded);
//URL
var urlReq:URLRequest = new URLRequest(url);
//読み込み開始
_xmlLoader.load(urlReq);
}
//--------------------------------------
// PRIVATE VARIABLES
//--------------------------------------
private var _xmlLoader:URLLoader;
private var _my_xml:XML;
//--------------------------------------
// GETTER/SETTERS
//--------------------------------------

28. 外部イメージファイルをロードする (2)
XMLLoader.as：XMLを読込みメインクラスに通知
//--------------------------------------
// PUBLIC METHODS
//--------------------------------------
//XMLオブジェクトを返す（他のクラスからのアクセスに対応）
public function getXML():XML{
return _my_xml;
}
//--------------------------------------
// EVENT HANDLERS
//--------------------------------------
//読み込み完了
private function onXMLloaded(event:Event):void {
try {
//XMLオブジェクトに変換する
_my_xml = new XML(_xmlLoader.data);
//カスタムイベントを配信する
dispatchEvent(new Event(LOAD_COMPLETE));
} catch (err:TypeError) {
trace(err.message);
}
}

29. 外部イメージファイルをロードする (2)
XMLLoader.as：XMLを読込みメインクラスに通知
//--------------------------------------
// PRIVATE & PROTECTED INSTANCE METHODS
//--------------------------------------
}
}

30. 外部イメージファイルをロードする (2)
ImageLoader.as：URLから画像を読込む
//
// ImageLoader.as
// LoadImage
//
package {
//表示関連
import flash.display.Sprite;
//外部ファイル読み込み関連のパッケージ
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.IOErrorEvent;
//テキストフィールド関連パッケージ
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
public class ImageLoader extends Sprite {

31. 外部イメージファイルをロードする (2)
ImageLoader.as：URLから画像を読込む
//--------------------------------------
// CLASS CONSTANTS
//--------------------------------------
//--------------------------------------
// CONSTRUCTOR
//--------------------------------------
public function ImageLoader(url:String, w:Number, h:Number)
{
//パラメータを格納
_url = url;
_width = w;
_height = h;
//％表示フィールド表示
setupPercentField();
//loader作成
_imgLoader = new Loader();
addChild(_imgLoader);
//イベントリスナー定義
_imgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
onProgress); //読みこみ中

32. 外部イメージファイルをロードする (2)
ImageLoader.as：URLから画像を読込む
//読みこみ完了
_imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onLoaded);
//読み込み開始
var urlReq:URLRequest=new URLRequest(_url);
_imgLoader.load(urlReq);
}
//--------------------------------------
// PRIVATE VARIABLES
//--------------------------------------
private var _url:String;
private var _imgLoader:Loader;
private var _perFld:TextField;
private var _width:Number;
private var _height:Number;
//--------------------------------------
// GETTER/SETTERS
//--------------------------------------
//--------------------------------------
// PUBLIC METHODS
//--------------------------------------

33. 外部イメージファイルをロードする (2)
ImageLoader.as：URLから画像を読込む
//--------------------------------------
// EVENT HANDLERS
//--------------------------------------
//読み込み完了
private function onLoaded(event:Event):void {
//プログレスフィールド削除
removeChild(_perFld);
_perFld = null;
_imgLoader.width = _width;
_imgLoader.height = _height;
}
//ロード経過表示
private function onProgress(event:ProgressEvent):void {
var per:Number = Math.round(event.bytesLoaded/event.bytesTotal*100);
_perFld.text = per + " %";
}
//--------------------------------------
// PRIVATE & PROTECTED INSTANCE METHODS
//--------------------------------------

34. 外部イメージファイルをロードする (2)
ImageLoader.as：URLから画像を読込む
//%フィールド作成
private function setupPercentField():void {
_perFld = new TextField();
_perFld.x = 20;
_perFld.y = 20;
_perFld.autoSize = TextFieldAutoSize.LEFT;
var textFormat:TextFormat = new TextFormat();
textFormat.font = "verdana";
textFormat.size = 10;
_perFld.defaultTextFormat = textFormat;
addChild(_perFld);
}
}
}

35. 外部イメージファイルをロードする (2)
• 実行結果

36. 外部イメージファイルをロードする (3)
表示の応用 I
• 画像の表示のやりかたを変更してみる
• XMLファイルにURLを追加して、より多くの画像をロードするように
• 画像の属性をランダムにする
• 回転：rotation
• 座標：(x, y)

37. 外部イメージファイルをロードする (3)
表示の応用 I
• 表示結果

38. 外部イメージファイルをロードする (3)
表示の応用 II
• さらに工夫してみる
• マウスによるインタラクションを追加
• 画像をドラッグで移動できるように
• MOUSE_DOWNのリスナー追加
• startDrag();
• MOUSE_UPのリスナー追加
• stopDrag();
• TweenMaxを用いてアニメーションを演出
• ロード時に画面中央からスライドしながら出現
• MOUSE_DOUNの際に拡大
• MOUSE_UPでもとの大きさに
• 写真の周りに枠を追加
• ドロップシャドウを追加

39. 外部イメージファイルをロードする (3)
表示の応用 II
• 表示結果