FLASHのお勉強 ーアクションスクリプトの実践的事始めー
|
| (43) FLASHで旅行アルバム 200７/4/6 |
| |
| 旅行で撮った写真を、訪れたスポットごとにグループ分けし、そのスポットをクリックするとサムネイルが登場するタイプのアルバムを作成する。 スポットをクリックすると、サムネイルの登場、拡大写真の表示を記述したクラスファイルを参照するタイプのスクリプトとした。 写真は、私が以前訪れた、北アルプス（太郎平ー薬師岳ー雲ノ平ー水晶岳ー鷲羽岳）で撮ったものを用いた。 |
| SAMPLE |
|
| ステージの準備 |
●700*520のステージ（12fps）を設定
●ステージいっぱいに、訪問先が表示されたGoogleEarthの３Dマップを配置する
（経路をペンツールなどで描き、表示したほうがいいかも)
●ステージ左上に訪問先などのタイトルを静置テキストで、右下に「画面のダブルクリックでMAPに戻る」をムービークリップ（msg）で配置する
●訪問スポットに半透明の矩形に2回分解をかけたテキストをのせ、シンボル（ムービークリップ）に変換し、インスタンス名を place1,place2,,, とする
●サムネイル用の写真（60*45）をライブラリーに読み込み、シンボルに変換、p23のように名付け同名でリンケージを設定する。p23の最初の最初の2はplace番号、一桁目の3は写真番号。
●サムネイルがクリックされたとき表示する写真を同じフォルダに置いておく（同じフォルダでない場合は、パスを通す） |
スクリプト（ｆｌａファイル）
_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枚目の表示ｘ座標
●各訪問地をムービークリップ spot と置いて、ロールオーバーで拡大効果を施し、クリックで、クラスを参照する
●各訪問地をクリックすると、訪問地表示を消し、背景地図にぼかしを入れる
ぼかしは、下に記述されたスクリプトで定義されたBlurFilterを
map.filters = filters_array; で参照する
●_root.removePic=false;
サムネイル表示/非表示の指標：removePic を false に
●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) { 以下
サムネイルがクリックされたら、該当写真を外部ファイルから読み込み、クリック位置にサムネイルと同じ大きさに縮小して表示した後、ステージに拡大表示する |
|
|
| |
| HOME お勉強総リスト |