FLASHのお勉強_アクションスクリプトaction script_移動拡大型フォトギャラリー（クラスの作成)

FLASHのお勉強　ーアクションスクリプトの実践的事始めー

(26)移動･拡大型フォトギャラリー　（外部ａｓファイル・クラスの使用）　　2006/5/15

　今回のフォトギャラリーは、サムネイルをクリックするとスクリーンにその大きさのまま移動し、次いでスクリーンの大きさに拡大するというものであるが、これを配列を使わないスクリプトで作成した(クラス使用)。　これまで、この種のスクリプトは配列を使って作成してきたが、配列を使ったスクリプトが、リーダーが全員の行動を眺めながら管理するような感じで書いていくのに対し、この書き方で作成するのは、行動する人の身になって書いていくような感じがある。　したがって、何をするかを自分の分だけ順番に書いていけばいいということで、ある意味とても書きやすい面がある。　
　しかし、自分のことだけでは片付かない場面もある。　すなわち、他の人の行動を見て（この例の場合は、他のサムネイルがクリックされたとき）行動を起こさなければならないことがある。　この、他の人の行動を感知する方法が結構面倒であるが、今回は、共通の場（ルート)にＦＬＡＧを立てる方法を使ってみた。

SAMPLE

ステージの準備

550×420、黒のステージに500×333（灰色#999999）のスクリーンとそれを囲むように10px幅の枠線(#996600)を描く。枠線をシンボルに変換した後、filter機能のベベルを施す（この例の場合は、ぼかし水平･垂直：５、強度：42％、画質:低、シャドウ:黒、ハイライト：白、角度：45、幅：5、タイプ：内側）
表示する写真（ここでは、8枚の花の写真、500×333）を新規シンボルとして読み込み（シリーズpl1からpl8）それぞれ同名でリンケージを設定する。

スクリプト（ここでは全角スペースが入っているので、コピー・ペイストだけではエラーになります)

ｆｌａファイルに

var pic_num:Number=8;
for ( var i:Number=1; i<=pic_num; i++) {
var gal:makeGal=new makeGal(i);
}

makeGal.asファイルに

class makeGal extends MovieClip {

　private var pic_num:Number;
　private var x:Number;
　private var y:Number;
　private var delay:Number;
　private var flag:Number;

public function makeGal(i:Number) {

　_root.attachMovie("pl"+i, "pic"+i, i);
　this = eval("pic"+i);
　this._x = 80+55*(i-1);
　this._y = 390;
　this._xscale = this._yscale=10;

　this.onRelease = function() {
　　_root.flag = i;
　　this.x = 100+300*Math.random();
　　this.y = 70+200*Math.random();
　　this.delay = getTimer();
　}

　this.onEnterFrame = function() {
　　if (_root.flag == i) {
　　　this._x += (this.x-this._x)/2;
　　　this._y += (this.y-this._y)/2;
　　if (getTimer()>this.delay+1000) {
　　　this._x = 275;
　　　this._y = 186;
　　　this._width += (500-this._width)/3;
　　　this._height += (333-this._height)/3;
　　}
　} else {
　　　this._x += (80+55*(i-1)-this._x)/2;
　　　this._y += (390-this._y)/2;
　　　this._width = 50;
　　　this._height = 33;
　　　}
　　};
　}
}

表示する写真の数の定義
makeGalというクラスを定義し、pic1からpic8までのインスタンス（写真)を作成、引数 i と数をａｓファイルに渡して、ファイル記述のイベントを実行させる。(注1)

Geocitiesではａｓファイルはアップロードが拒否されます
拡張子をｔｘｔとしてアップすると機能します

makeGal クラスをMovieClipクラスを継承して宣言
（注2）
変数の定義

ｆｌａファイルから受け取った引数を使ってインスタンスの性質や動きを定義する関数（注3）
引数ｉ ( i 番目）の写真をインスタンスとしてステージに
そのインスタンスをthisとして扱う
初期表示のx座標
初期表示のｙ座標
インスタンスのサイズを1/10に縮小（サムネイル)

インスタンスがリリースされたら
_root.flagを i とする（自分の番号)
移動先のx座標をランダムに発生
移動先のｙ座標をランダムに発生

フレームアクション（時間の経過とともに実行)
もし、root.flagが　i （自分の番号)だったら (注4)
移動先ｘに移動
移動先ｙに移動
もし、クリックされてから１秒経ったら、
スクリーンの真ん中を中心に

スクリーンいっぱいのサイズに

もし、_root.flag が自分以外の番号だったら
(ほかのインスタンスがクリックされたら)
元の場所に戻る
元のサイズになって

(注1) asファイルにはインスタンス１つ分のイベント（クリックされたら大きくなって表示するという動き)しか書かれていない。そのような動きをするインスタンスを、表示する写真の数だけ作成する。
（注2）_x、_xscale、onEnterFrameなどMovieClipクラスで定義されているscriptを使うときは継承を宣言する
（注3）コンストラクタ関数と呼ばれ、クラス名と同じ関数名としておく。インスタンスが作成されると引数つきで自動的に呼び出され、クラス（で定義されたインスタンス)のプロパティー、メソッドが定義されている。　平たく言うと、色や大きさなどの見た目とか、どこに出かけて何をするとかの行動の基本を書き記したもの(ちょっと乱暴か)。
(注4) _rootは全てのインスタンスに共通の場所なので、お互いにクリックされた番号を認識しあえる。

HOME　　　お勉強総リスト

FLASHのお勉強 ーアクションスクリプトの実践的事始めー

FLASHのお勉強　ーアクションスクリプトの実践的事始めー