FLASHのお勉強_アクションスクリプトaction script

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

(44) フォト・ビューアー（Photo Viewer） 　　200７/5/5

　サムネイルを並べておき、選択してクリックすると、その写真(画像)が拡大して表示されるという普通のビューアーである。　拡大表示された写真をクリックすると、元の選択画面に戻るようにした。　ここでは、9枚のサムネイルを並べえるタイプのもにしたが、もちろんこの手法で、枚数の違うビューアーにすることも可能である。
　選択画面でのロールオーバー効果も、フレームの色が変わる単純なものにした。

SAMPLE

ステージの準備

●600*500のステージ（背景色黒、12fps）を設定
●ステージ上部に、viewerのタイトルを静止テキストで記述する。
●600*460の黒色矩形を描きステージの下に寄せて配置、シンボル（ムービークリップ)に変換、インスタンス名：back
●ステージに60*45のサムネイル(ここでは9枚)を3列3行に配置、各サムネイルをシンボルに変換、インスタンス名を、p1,p2,p3,,,p9とする
●塗りの無い線だけの矩形（60*45）を描き、ムービークリップ（frame)とする　色は#99ffff
●frameをp1からp9までのサムネイルにそれぞれ重ね、インスタンス名をframe1,frame2,,,,frame9とする
●60*45の矩形を描き、シンボル（ムービークリップ)に変換、リンケージを同名で設定
●サムネイルに相当する600*450の写真9枚（pic1.jpgからの連番でpic9.jpgまで）を、同じフォルダにおいて置く

スクリプト
_root、FRAME1に記述

var frameColor:Array = new Array();
for (f=1; f<=9; f++) {
        frameColor[f] = new Color(_root["frame"+f]);
}
for (i=1; i<=9; i++) {
        mc = _root["p"+i];
        mc.n = i;
        mc.onRollOver = function() {
                frameColor[this.n].setRGB(0xff0000);
        };
        mc.onRollOut = function() {
                frameColor[this.n].setRGB(0x99ffff);
        };
        mc.onRelease = function() {
                back._visible = true;
                for (j=1; j<=9; j++) {
                        _root["p"+j]._visible = false;
                        _root["frame"+j]._visible = false;
                }
                px = _root["p"+this.n]._x;
                py = _root["p"+this.n]._y;
                loadPic(this.n, px, py);
        };
}
function loadPic(n, px, py) {
        load_mc = _root.createEmptyMovieClip("load_mc", 1);
        var mcLoader:MovieClipLoader = new MovieClipLoader();
        mcLoader.loadClip("pic"+n+".jpg", load_mc);
        with (load_mc) {
                _x = px-60;
                _y = py-45;
                _alpha = 0;
                _xscale = _yscale=20;
        }
        _root.onEnterFrame = function() {
                with (load_mc) {
                        _x += (0-_x)/5;
                        _y += (50-_y)/5;
                        _xscale += (100-_xscale)/5;
                        _yscale += (100-_yscale)/5;
                        _alpha += (100-_alpha)/5;
                }
                if (load_mc._xscale>98) {
                        back.onPress = function() {
                                load_mc.removeMovieClip();
                                delete onEnterFrame;
                                back._visible = false;
                                for (k=1; k<=9; k++) {
                                        _root["p"+k]._visible = true;
                                        _root["frame"+k]._visible = true;
                                }
                        };
                }
        };
}

スクリプトの説明

●frameColor[f] = new Color(_root["frame"+f]);
　　インスタンス　frame1,,,frame9 の色をカラーオブジェクトの配列として定義
●mc = _root["p"+i]; 　mc.n = i;
　　サムネイルをムービークリップ mc として扱う。　n：どのサムネイルかを識別するために番号を記憶する
●frameColor[this.n].setRGB(0xff0000);
　　ロールオーバーされた番号に相当するframeの色を赤色にする
●mc.onRelease {　以下
　　backをアクティブに（クリックを受け付けられるような状態に）する
　　p1-p9のサムネイルを消して、ロールオーバーやクリックを受け付けないようにする
　　クリックされたサムネイルの座標を、(px,py)として取得
　　this.n （クリックされた写真の番号)、px、pyを引数に、関数loadPicを参照
●loadPic関数：写真をサムネイルの大きさで、サムネイルと同じ座標に読み込んで、拡大させながらステージ中央に表示させる。　すなわち、MovieClipLoaderクラスを使って、
　　mcLoader.loadClip("pic"+n+".jpg", load_mc);でムービークリップload_mcに該当する番号の写真を読み込む。
　　写真のscaleを20にするのは、サムネイルと同じ大きさにするため。
●_root.onEnterFrame=function() {　以下
　　写真を600*450（_scaleが100）に拡大させながら、ステージ中央に表示させる
　　もし、_scaleが98以上になった状態で（最終的には、フレームが若干進むので600pixにほぼ達している）、
　　back（ほぼステージ)がクリックされたら、表示拡大写真を削除し、タイムラインの進行を止め、
　　元の状態に戻す。

HOME　　　お勉強総リスト

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

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