ActionScript3で作る写真ギャラリー

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

ファイル構成

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

asファイル名

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

画像ファイルの命名規則

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

ActionScriptソース

[sourcecode language=’javascript’]
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; } } } } [/sourcecode]

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で作る写真ギャラリー