Successfully reported this slideshow.

Ssaw08 1014

2,846 views

Published on

Published in: Education
  • Be the first to comment

Ssaw08 1014

  1. 1. SSAW08 後期第5回ActionScript 3.0入門 (2)外部イメージの読み込み2008年10月14日
  2. 2. 本日の内容• 外部イメージファイルをロードする • ローカルデータだけでなく、インターネット上のデータのローディング にも対応 • データのロード状況のモニタリング• 外部XMLファイルの読み込み • 読み込むイメージファイルの場所を外部XMLファイルで定義する • 今後Web APIを使用していく際に重要となるテクニック
  3. 3. 外部イメージファイルをロードする (1)• 外部イメージファイルをロードするには • Loaderクラスを利用する • SWF ファイルまたはイメージ (JPG、PNG、または GIF) ファイルをロー ドする • ロードされた表示オブジェクトは Loader オブジェクトの子として追加 される • 手順 • LoaderクラスのインスタンスloaderObjを生成 • loaderObj.load(urlReq)でロード
  4. 4. 外部イメージファイルをロードする (1)• ロード状況のモニタリング • loaderObj.contentLoaderInfoオブジェクトにリスナーを登録して、 ロード状態をモニタリングすることが可能 • ロードの状態 • Event.COMPLETE • ロードが完了した際にイベント生成 • ProgressEvent.PROGRESS • ロード中の際にイベント生成 • IOErrorEvent.IO_ERROR • ロードにエラーが発生した際にイベント生成
  5. 5. 外部イメージファイルをロードする• 外部イメージを読み込むための汎用的なクラスを作成する• ImageLoader.as • URLを引数で読み込んでLoaderを生成 • イベントリスナーを登録 • ロード中は、読み込んだデータをパーセント表示 • ロード終了後は、表示リストに外部イメージのデータを登録
  6. 6. 外部イメージファイルをロードする (1) 画像のURL 画像のURL Internet 画像データ 画像データ Flashページ 画像ファイル※Flashファイル内にファイルのURLを指定 外部イメージのロード (画像URL情報はFlashに内包)
  7. 7. 外部イメージファイルをロードする (1)• メインクラスLoadingImage.as • ImageLoaderクラスを呼び出して、表示リストに加える • 複数のImageLoaderを同時に呼び出すことも可能
  8. 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. 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. 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. 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. 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. 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. 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. 15. 外部イメージファイルをロードする• 実行結果
  16. 16. 外部イメージファイルをロードする (2)外部XMLファイルの読み込み• 現状のソース • 読み込む画像ファイルのURLをコード内部に記述している • 読み込む画像を変更する度に再コンパイルをする必要あり • めんどう • 画像ファイルのURLは別ファイルで定義したい • XML形式のファイルを利用すると便利 • XML形式の利点 • 構造化されたデータ形式 • AS3で扱いやすい • 現在多くのWebAPIで標準的に用いられている
  17. 17. 外部イメージファイルをロードする (2)外部XMLファイルの読み込み• メインクラスを変更 • XMLファイルを解析して、URLを抽出 • 抽出したURLからイメージを読み込む
  18. 18. 外部イメージファイルをロードする (2)外部XMLファイルの読み込み• 全体の設計 • XMLファイルを読み込み ↓ • XMLファイルの読み込み完了を検知 ↓ • XMLファイルからURLを抽出 ↓ • 抽出したURLからローダ生成 ↓ • 画像読み込み ↓ • 読み込みが完了した画像から表示
  19. 19. 外部イメージファイルをロードする (2)外部XMLファイルの読み込み• XMLファイルを読み込むクラスを作成する• XMLloader.as • URLで指定されたXMLファイルをロードする • ロードが完了したら、完了したことを通知するイベントを発生 • EventDispacherを利用する
  20. 20. 外部イメージファイルをロードする (2)外部XMLファイルの読み込みXMLファイル (※画像のURLを定義) 画像のURL 画像のURL 画像のURL Internet 画像データ 画像データ Flashページ 画像ファイル 外部イメージのロード (画像URL情報をXMLで定義)
  21. 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. 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. 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. 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. 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. 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. 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. 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. 29. 外部イメージファイルをロードする (2)XMLLoader.as:XMLを読込みメインクラスに通知 //-------------------------------------- // PRIVATE & PROTECTED INSTANCE METHODS //-------------------------------------- }}
  30. 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. 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. 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. 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. 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. 35. 外部イメージファイルをロードする (2)• 実行結果
  36. 36. 外部イメージファイルをロードする (3)表示の応用 I• 画像の表示のやりかたを変更してみる • XMLファイルにURLを追加して、より多くの画像をロードするように • 画像の属性をランダムにする • 回転:rotation • 座標:(x, y)
  37. 37. 外部イメージファイルをロードする (3)表示の応用 I• 表示結果
  38. 38. 外部イメージファイルをロードする (3)表示の応用 II• さらに工夫してみる • マウスによるインタラクションを追加 • 画像をドラッグで移動できるように • MOUSE_DOWNのリスナー追加 • startDrag(); • MOUSE_UPのリスナー追加 • stopDrag(); • TweenMaxを用いてアニメーションを演出 • ロード時に画面中央からスライドしながら出現 • MOUSE_DOUNの際に拡大 • MOUSE_UPでもとの大きさに • 写真の周りに枠を追加 • ドロップシャドウを追加
  39. 39. 外部イメージファイルをロードする (3)表示の応用 II• 表示結果

×