Ssaw08 1014

SSAW08 後期第5回

ActionScript 3.0入門 (2)外部イメージの読み込み2008年10月14日

本日の内容

• 外部イメージファイルをロードする• ローカルデータだけでなく、インターネット上のデータのローディングにも対応

• データのロード状況のモニタリング

• 外部XMLファイルの読み込み• 読み込むイメージファイルの場所を外部XMLファイルで定義する• 今後Web APIを使用していく際に重要となるテクニック

外部イメージファイルをロードする (1)

• 外部イメージファイルをロードするには• Loaderクラスを利用する• SWF ファイルまたはイメージ (JPG、PNG、または GIF) ファイルをロードする

• ロードされた表示オブジェクトは Loader オブジェクトの子として追加される

• 手順• LoaderクラスのインスタンスloaderObjを生成• loaderObj.load(urlReq)でロード


• ロード状況のモニタリング• loaderObj.contentLoaderInfoオブジェクトにリスナーを登録して、ロード状態をモニタリングすることが可能

• ロードの状態• Event.COMPLETE• ロードが完了した際にイベント生成

• ProgressEvent.PROGRESS• ロード中の際にイベント生成

• IOErrorEvent.IO_ERROR• ロードにエラーが発生した際にイベント生成

外部イメージファイルをロードする

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


Flashページ画像ファイル

Internet

※Flashファイル内にファイルのURLを指定

画像のURL 画像のURL

画像データ画像データ

外部イメージのロード (画像URL情報はFlashに内包)


• メインクラスLoadingImage.as• ImageLoaderクラスを呼び出して、表示リストに加える• 複数のImageLoaderを同時に呼び出すことも可能

外部イメージファイルをロードする (1)プロジェクトのクラス構造

+ ImageLoader(url:String, w:Number, h:Number)

- onLoaded(event:Event):void

- onProgress(event:ProgressEvent):void

- setupPercentField():void

- _url:String;

- _imgLoader:Loader;

- _perFld:TextField;

- _width:Number;

- _height:Number;

ImageLoader

+ LoadImage()

LoadImage1 *

・メインクラス - 張り込む画像の数だけ、 ImageLoaderを呼び出す

・Loaderに外部画像を読込むクラス - Loaderを生成 - 指定されたURLの画像をネットから読込 - Loaderに画像データを読込み、ステージに表示

外部イメージファイルをロードする (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",


"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); } } }}

外部イメージファイルをロードする (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;


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); }


//-------------------------------------- // 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; }


//ロード経過表示 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); } }}

外部イメージファイルをロードする

• 実行結果

外部イメージファイルをロードする (2)外部XMLファイルの読み込み

• 現状のソース• 読み込む画像ファイルのURLをコード内部に記述している• 読み込む画像を変更する度に再コンパイルをする必要あり• めんどう

• 画像ファイルのURLは別ファイルで定義したい• XML形式のファイルを利用すると便利• XML形式の利点• 構造化されたデータ形式• AS3で扱いやすい• 現在多くのWebAPIで標準的に用いられている


• メインクラスを変更• XMLファイルを解析して、URLを抽出• 抽出したURLからイメージを読み込む


• 全体の設計• XMLファイルを読み込み

↓• XMLファイルの読み込み完了を検知

↓• XMLファイルからURLを抽出

↓• 抽出したURLからローダ生成

↓• 画像読み込み

↓• 読み込みが完了した画像から表示


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


Flashページ画像ファイル

Internet画像のURL 画像のURL

画像データ画像データ

外部イメージのロード (画像URL情報をXMLで定義)

XMLファイル (※画像のURLを定義)

画像のURL

外部イメージファイルをロードする (1)プロジェクトのクラス構造

+ ImageLoader(url:String, w:Number, h:Number)

- onLoaded(event:Event):void

- onProgress(event:ProgressEvent):void

- setupPercentField():void

- _url:String;

- _imgLoader:Loader;

- _perFld:TextField;

- _width:Number;

- _height:Number;

ImageLoader

+ LoadImage()

LoadImage1

*

・メインクラス - 張り込む画像の数だけ、 ImageLoaderを呼び出す

・Loaderに外部画像を読込むクラス - Loaderを生成 - 指定されたURLの画像をネットから読込 - Loaderに画像データを読込み、ステージに表示

+ XMLLoader(url:String)

+ getXML():XML

- onXMLloaded(event:Event):void

- _xmlLoader:URLLoader;

- _my_xml:XML;

XMLLoader

・XMLをロード - 指定されたXMLファイルをロード - メインクラスにロード完了を通知 - ロードされたXMLファイルをメインクラスに返す

1

外部イメージファイルをロードする (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>


//// 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設定


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 //--------------------------------------


//-------------------------------------- // 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++; } } }}

外部イメージファイルをロードする (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";


//-------------------------------------- // 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 //--------------------------------------


//-------------------------------------- // 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); } }


//-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}

外部イメージファイルをロードする (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 {


//-------------------------------------- // 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); //読みこみ中


//読みこみ完了 _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 //--------------------------------------


//-------------------------------------- // 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 //--------------------------------------


//%フィールド作成 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); } }}


• 実行結果

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

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

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

• 表示結果

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

• さらに工夫してみる• マウスによるインタラクションを追加• 画像をドラッグで移動できるように• MOUSE_DOWNのリスナー追加• startDrag();

• MOUSE_UPのリスナー追加• stopDrag();

• TweenMaxを用いてアニメーションを演出• ロード時に画面中央からスライドしながら出現• MOUSE_DOUNの際に拡大• MOUSE_UPでもとの大きさに

• 写真の周りに枠を追加• ドロップシャドウを追加

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

• 表示結果

Education

Ssaw08 1014