ActionScript3で作る写真ギャラリー

久しぶりのFlashの投稿です。最近はjQueryばっかりでした。。。

ファイル構成

まずflaファイルを作成します。名称は何でもOKです。
次に読み込む外部asファイルを作成します。名称は「Gallery.as」にしています。
最後にimgフォルダを作成します。ここにギャラリー画像を格納します。

asファイル名

今回は外部asファイルの名称を「Gallery.as」で作成しました。
もしファイル名を変更する場合は、14行目と21行目も同名にする必要があります。
また、flaファイルの読み込むドキュメントクラスも変更が必要です。

画像ファイルの命名規則

imgフォルダにある画像ファイルには命名規則があります。
1番目の画像は「img1.jpg」となり、次に表示される画像は連番でなくてはならないので「img2.jpg」となります。

ActionScriptソース

package {
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.display.Sprite;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	
	import flash.geom.Point;
	import flash.utils.Timer;
	import flash.net.URLRequest;
	
	//クラスの宣言
	public class Gallery extends MovieClip {
		var obj:Array;
		var clickNum:int = -1;
		var timer:Timer;
		
		//コンストラクタ
		function Gallery(){
			obj = new Array();
			
			//ステージに表示する画像の初期設定
			for(var i:Number = 0; i < 4; ++i) {
				obj.push(new Sprite());
				var num:Number = obj.length-1;
				this.addChild(obj[num]);
				obj[num].buttonMode = true;
				obj[num].useHandCursor = true;
				obj[num].name = String(num);
				
				obj[num].x = stage.stageWidth/2;
				obj[num].y = stage.stageHeight/2;
				obj[num].scaleX = 0;
				obj[num].scaleY = 0;
				obj[num].addEventListener(MouseEvent.CLICK, onClick);
				
				var imgLoader:Loader = new Loader();
				obj[num].addChild(imgLoader);
				obj[num].mouseChildren = false;
				
				//ojb[num]に読み込ませる画像の設定
				var urlReq:URLRequest = new URLRequest("img/img"+num+".jpg");
				imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImgLoaded);
				imgLoader.load(urlReq);
		
			}
			
			timer = new Timer(33);
			timer.addEventListener(TimerEvent.TIMER, loop);
			timer.start();
		}

		//画像が読み込まれたときの処理
		function onImgLoaded(event:Event):void {
			event.target.loader.x = -event.target.loader.width/2;
			event.target.loader.x = -event.target.loader.height/2;
			var num:int = int(event.target.loader.parent.name);
		}
		
		//画像がクリックされたときの処理
		function onClick(event:MouseEvent):void {
			if(clickNum == int(event.target.name)) {
				clickNum = -1;
			} else {
				clickNum = int(event.target.name);
			}
		}
		
		
		//常時繰り返される処理
		function loop(event:TimerEvent):void{
			
			for(var i:Number = 0; i < obj.length; i++) {
				var place:Point = new Point();
				var size:Number;
				
				//画像のクリック後の位置とクリック前の位置
				if(clickNum == i) {
					place.x = stage.stageWidth/2;
					place.y = stage.stageHeight/6;
					size = 0.15;
				} else {
					place.x = stage.stageWidth/6 + (i*100);
					place.y = stage.stageHeight/1.5;
					size = 0.05;
				}
				
				//動作のスピードを調整
				obj[i].x += (place.x - obj[i].x)/4;
				obj[i].y += (place.y - obj[i].y)/4;
				
				//画像のサイズスピードを調整
				obj[i].scaleX += (size - obj[i].scaleX)/2;
				obj[i].scaleY += (size - obj[i].scaleY)/2;
			}
		}
	}
}

ActionScriptソースの解説

ソースが長いので、ピックアップして解説します。

16行目：var obj:Array

変数objを配列Array属性に格納します。
これで複数の要素を格納することができます。

25行目：for文

変数iをNumber型にします。
画像をn枚読み込ませる場合は「i < ｎ」にします。 今回の場合は4枚なので「i < 4」となります。

26行目：obj.push(new Sprite());

変数objの最後尾にスプライトを生成します。
27行目の「var num:Number = obj.length-1;」でその配列番号をnumに取得しています。
これでスプライトをobj[num]と扱えます。
28行目でステージに登録します。

27行目の「var num:Number = obj.length-1;」にする理由は、配列が「0」から始まるので、objの最後尾の数値は「4」でなく「3」である必要があるためです。

サンプル

かなりソースが長くややこしいですが、いろいろ触って見て下さい。

1. Web-Parkのホーム > 
2. Flash > 
3. ActionScript3.0で作る写真ギャラリー