このFlash講座1234は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです
FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(15) FLASHで旅行アルバム  
美しい山 
 旅行で撮った写真を、訪れたスポットごとにグループ分けし、そのスポットをクリックするとサムネイルが登場します。

 そして拡大写真の表示を記述したクラスファイルを参照するタイプのスクリプトとしました。
 写真は、私が以前訪れた、北アルプス(太郎平ー薬師岳ー雲ノ平ー水晶岳ー鷲羽岳)で撮影したものです。

 「やっほー!」 「やっほー!」 「やっほー!」 山はいいですね〜。
SAMPLE
ステージの準備
●700*520のステージ(12fps)を設定
●ステージいっぱいに、訪問先が表示されたGoogleEarthの3Dマップを配置する
 (経路をペンツールなどで描き、表示したほうがいいかも)
●ステージ左上に訪問先などのタイトルを静置テキストで、右下に「画面のダブルクリックでMAPに戻る」をムービークリップ(msg)で配置する
●訪問スポットに半透明の矩形に2回分解をかけたテキストをのせ、シンボル(ムービークリップ)に変換し、インスタンス名を place1,place2,,, とする
●サムネイル用の写真(60*45)をライブラリーに読み込み、シンボルに変換、p23のように名付け同名でリンケージを設定する。p23の最初の最初の2はplace番号、一桁目の3は写真番号。
●サムネイルがクリックされたとき表示する写真を同じフォルダに置いておく(同じフォルダでない場合は、パスを通す)
スクリプトflaファイル
_root、FRAME1に記述
var place:Array = new Array();
var pic_num:Array = new Array(6, 6, 3, 5, 7, 3);
msg._visible=false;
var mcx = 150;
for (i=1; i<=6; i++) {
        place[i] = _root["place"+i];
        spot = place[i];
        spot.n = i;
        spot.m = pic_num[i-1];
        spot.onRollOver = function() {
                this.onEnterFrame = function() {
                        this._xscale += (130-this._xscale)/2;
                        this._yscale += (130-this._yscale)/2;
                };
        };
        spot.onRollOut = function() {
                this.onEnterFrame = function() {
                        this._xscale += (100-this._xscale)/2;
                        this._yscale += (100-this._yscale)/2;
                        if (this._xscale<101) {
                                delete this.onEnterFrame;
                        }
                };
        };
        spot.onRelease = function() {
                for (j=1; j<=6; j++) {
                        place[j]._visible = false;
                }
                map.filters = filters_array;
                _root.removePic=false;
                msg._visible=true;
                n = this.n;
                m = this.m;
                for (i=1; i<=m; i++) {
                        var pI:photoIn = new photoIn(n, m, i );
                }
        };
}

//ぼかし
import flash.filters.BlurFilter;
var map:MovieClip;
var filters_array:Array = new Array();
var myBlur:BlurFilter = new BlurFilter(10, 10, 2);
filters_array.push(myBlur);

//ダブルクリック
map.onPress = function() {
        myClip = new Date();
        if (myClip.getTime()-firstTime<300) {
                map.filters = [];
                load_mc.removeMovieClip();
                _root.removePic=true;
                msg._visible=false;
                for (j=1; j<=6; j++) {
                        place[j]._visible = true;
                }
        }
        firstTime = myClip.getTime();
};
スクリプトの説明
Place:訪問地を配列で定義、 pic_num:各訪問先で表示する写真の枚数
 msg:「ダブルクリックで戻る」(最初は消しておく)、 mcx:サムネイルの1枚目の表示x座標
●各訪問地をムービークリップ spot と置いて、ロールオーバーで拡大効果を施し、クリックで、クラスを参照する
●各訪問地をクリックすると、訪問地表示を消し、背景地図にぼかしを入れる
 ぼかしは、下に記述されたスクリプトで定義されたBlurFilterを
  map.filters = filters_array; で参照する
_root.removePic=false;
 サムネイル表示/非表示の指標:removePicfalse
var pI:photoIn = new photoIn(n, m, i );
 訪問地インスタンスごとに引数 n,m,i をクラスファイルに渡し、参照する
import flash.filters.BlurFilter; 以下のブロックは、フィルター効果(ぼかし)を付与するためのスクリプト
map.onPress = function() { 以下のブロックは、画面(map)がダブルクリックされたときの記述で、
 myClip.getTime()-firstTime<300 300ミリ秒以下の間隔で2回クリックされたら
 map.filters = []; ぼかし効果をキャンセル
 load_mc.removeMovieClip(); 表示写真を画面から削除
 msg._visible=false; メッセージを消す
 place[j]._visible = true; 訪問地表示を復活表示させる
スクリプトphotoIn.asファイル
class photoIn extends MovieClip {
        private var mcx:Number;
        private var x0:Number;
        private var num:Number;
        private var rollover:Boolean;
        private var k:Number;
        private var flag:Number;
        private var mc:MovieClip;
        private var ax:Number;
        private var ay:Number;
        private var load_mc:MovieClip;
        public function photoIn(n:Number, m:Number, i:Number) {
                mc = _root.attachMovie("p"+n+i, "pic"+n+i, n+i);
                mc._xscale = mc._yscale=80;
                mcx = 150;
                mc._x = _root._xmouse;
                mc._y = _root._ymouse-50;
                mc.num = i;
                mc.x0 = mcx+55*(i-1);
                mc.onRollOver = function() {
                        ax = ay=0;
                        rollover = true;
                        _root.flag = true;
                };
                mc.onRollOut = function() {
                        rollover = false;
                        _root.flag = false;
                };
                mc.onRelease = function() {
                        loadPic(i, n);
                };
                mc.onEnterFrame = function() {
                        this._x += (this.x0-this._x)/(3+i);
                        this._y += (450-this._y)/(3+i/2);
                        if (this._y>445) {
                                if (rollover) {
                                        ax = 0.6*ax+(120-this._xscale)/5;
                                        this._xscale += ax;
                                        ay = 0.7*ay+(120-this._yscale)/5;
                                        this._yscale += ay;
                                        _root.num = i;
                                } else {
                                        ax = 0.6*ax+(80-this._xscale)/5;
                                        this._xscale += ax;
                                        ay = 0.7*ay+(80-this._yscale)/5;
                                        this._yscale += ay;
                                }
                        }
                        if (_root.flag) {
                                if (i<_root.num) {
                                        this._x += (this.x0-20-this._x)/(5+i);
                                } else if (i>_root.num) {
                                        this._x += (this.x0+20-this._x)/5;
                                }
                        }
                        if (_root.removePic) {
                                removeMovieClip(this);
                        }
                };
                function loadPic(k, n) {
                        load_mc = _root.createEmptyMovieClip("load_mc", 100);
                        var mcLoader:MovieClipLoader = new MovieClipLoader();
                        mcLoader.loadClip( "pic"+n+k+"L.jpg", load_mc);
                        load_mc._x = _root._xmouse-65/2;
                        load_mc._y = 500;
                        load_mc._alpha = 0;
                        load_mc._xscale = load_mc._yscale=65/400*120;
                        _root.onEnterFrame = function() {
                                load_mc._x += (150-load_mc._x)/3;
                                load_mc._y += (100-load_mc._y)/3;
                                load_mc._xscale += (100-load_mc._xscale)/5;
                                load_mc._yscale += (100-load_mc._yscale)/5;
                                load_mc._alpha += (100-load_mc._alpha)/5;
                                if (load_mc._xscale>98) {
                                        delete this.onEnterFrame;
                                }
                        };
                }
        }
}
スクリプトの説明
●class photoIn extends MovieClip {  クラスphotoInの定義
●public function photoIn(n:Number, m:Number, i:Number, map:MovieClip) {
 コンストラクタ関数(この場合はここに全部収納)の定義
●mc = _root.attachMovie("p"+n+i, "pic"+n+i, n+i);
 サムネイル写真をムービークリップのインスタンスとしてステージに
 nは訪問地(spot)の配列番号、i は写真の何番目
●mc._x = _root._xmouse;
 クリックしたときのマウス座標からサムネイルが流れ始めるように
●_root.flag = true;
 ロールオーバーされているインスタンスを認識するための指標。flagがtrueだと、どれかがロールオーバーされているので、if (_root.flag) { 以下のスクリプトで、ロールオーバーされていないサムネイルの座標を左右に調節する
●if (_root.removePic) { はダブルクリックされたときに true になり、このときは表示サムネイルを消す
●function loadPic(k, n) { 以下
 サムネイルがクリックされたら、該当写真を外部ファイルから読み込み、クリック位置にサムネイルと同じ大きさに縮小して表示した後、ステージに拡大表示する
…以上今回のflash素材はいかがでしたでしょうか?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。
 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
  macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                           (by Hiraoka)
HOME   Flash講座総リスト    アクションスクリプトの実践的事始め-活用編(16)