Flash AS3の勉強「外部画像読み込みスライドショー」

September 18, 2010
flash_slide_main.jpg

iPhone OS の規約変更により、Flash 製 iPhone アプリもガンガン出てきそうなので、Flash のリハビリ。

ActionScript 3.0 で、比較的使用頻度が高いと思われる外部画像を読み込んだスライドショーをつくってみました。

プリロードを入れてないので閲覧されている環境によって、読み込みが表示されないかもしれません(ダメじゃん)。

読み込む画像は、弊社のフリー画像素材集サイト「 KOYU 写」から書き出した XML を読み込んで表示させています。

Flash(ActionScript 3.0)

Flash (ActionScript 3.0)「外部画像読み込みスライドショー」
(要:FlashPlayer 9.0以上)

外部画像をランダムに読み込み、切り替えはトランジションの「 PixelDissolve 」を利用しています。

画像を読み込むたびにメモリが増えるので、必ずメモリ解放をしないといけません。タイミングが難しいですね。

package {
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.utils.Timer;
	import fl.transitions.*;
	import fl.transitions.easing.*;

	public class KYS_Gallery extends Sprite {
		//XML読み込みオブジェクトの生成
		var myLoader:URLLoader = new URLLoader();
		//文字列をURLRequestオブジェクトにする
		const myURLRequest:URLRequest=new URLRequest("http://www.kys-lab.com/photo/photo_viewer.xml");
		//イメージのsrcなどが入るObjectの配列
		var img_array:Array = new Array();
		//次のスライドの番号
		var n:int = 1;
		//前回のスライドの番号
		var m:int = n-1;
		//トゥイーン
		var imgTween:Tween;
		//タイマー
		var myTimer:Timer;
		//タイマーの秒数
		var time_num:int = 5;
		//transitionのタイプ
		var transType:Class = PixelDissolve;

		public function KYS_Gallery() {
			myLoader.addEventListener(Event.COMPLETE, onLoaded);
			myLoader.load(myURLRequest);
			//読み込み完了時にXML読み込み
			function onLoaded(e:Event):void {
				var myXML:XML=new XML(e.target.data);
				//XMLを解析
				for each (var entrydata:Object in myXML.image) {
					//配列格納
					entrydata.path=entrydata.path;
					img_array.push(entrydata);
				}
				//配列をシャッフル
				var i:int = img_array.length;
				while (i--) {
					var j:int = Math.floor(Math.random() * (i + 1));
					var t:Object = img_array[i];
					img_array[i] = img_array[j];
					img_array[j] = t;
				}
				//最初のスライド表示
				Img_Gallery(img_array[0].path);
				//読み込み後クリア
				myLoader.removeEventListener(Event.COMPLETE, arguments.callee);
				myXML = null;
				//タイマー実行
				myTimer = new Timer(time_num*1000);
				myTimer.addEventListener(TimerEvent.TIMER, Img_Slide);
				myTimer.start();
			}
			//次のイメージを指定する
			function Img_Slide(e:TimerEvent):void {
				if (n >= img_array.length-1) {
					n = 1;
					m = img_array.length-1;
				} else {
					n ++;
					m = n-1;
				}
				Img_Gallery();
			}
			//スライドショー
			function Img_Gallery():void {
				var imgArea_mc:MovieClip = new MovieClip();
				addChildAt(imgArea_mc,0);
				var imgLoader:Loader = new Loader();
				imgArea_mc.name = "img" + n;
				var url:String = img_array[n].path.toString();
				var urlReq:URLRequest = new URLRequest(url);
				//画像読み込み用
				imgLoader.load(urlReq);
				imgLoader.contentLoaderInfo.addEventListener( Event.COMPLETE , setTransition);
				function setTransition(e:Event):void {
					//画像を縮小してステージの中央に配置
					var imgX:Number = stage.stageWidth / imgLoader.width;
					imgLoader.scaleX = imgX;
					imgLoader.scaleY = imgX;
					imgLoader.x = (stage.stageWidth  - imgLoader.width )/2;
					imgLoader.y = (stage.stageHeight - imgLoader.height )/2;
					imgArea_mc.addChild(imgLoader);
					if (m) {
						var current_mc = MovieClip(getChildByName("img"+ m));
						var next_mc = MovieClip(getChildByName("img"+ n));
						var myTransition:TransitionManager = new TransitionManager(current_mc);
						myTransition.startTransition({type:transType, direction:1, duration:2, easing:Regular.easeIn, xSections:10, ySections:10});
						imgTween = new Tween(next_mc,"alpha", None.easeOut,0,1,2,true);
						imgTween.addEventListener(TweenEvent.MOTION_FINISH, removeImg);
						//メモリクリア
						function removeImg(event:TweenEvent):void {
							imgLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, arguments.callee);
							imgTween.removeEventListener(TweenEvent.MOTION_FINISH, arguments.callee);
							removeChild(current_mc);
							current_mc = null;
						}
					}
				}
			}
		}
	}
}

さらに、画像のリンク機能などをつけたスライドショーは、下記のリンクからどうぞ。

KOYU写-photoViewer

参考サイト

下記のサイト様を参考にさせていただきました。ありがとうございます。

外部画像読み込み関連

NORIのFlashユーザのためのMovable Type講座 gihyo.jp版:第5回 Flash側:画像ファイルを読み込む|gihyo.jp ... 技術評論社

トランジション関連

FLASHのお勉強_TransitionManagerクラスを使ったスライドショー_アクションスクリプトaction script

ADD CHILD = AS3 - TransitionManagerクラスを使ってトランジションさせる[3-6]

メモリリーク関連

イベントリスナ (AS3) とガーベジコレクション - akihiro kamijo

AS3で陥りがちなメモリーリーク at AS3S.ORG

STAFF_01 [KYS-LAB]: ページが見つかりません。