FLASHのお勉強 ーアクションスクリプトの実践的事始めー
|
| (48) FLASHフォトビューアー２ 200７/8/24 |
| |
| カブトムシ、クワガタムシの展覧会で写真を撮る機会に恵まれたので、これらをFLASHのビュアーで見せるために作成したものを「お勉強材料」に供したい。 虫たちがうごめく状態と、虫を捕まえる動作を表現しようと思って作成したが、その目的にかなったかどうかは別として、アクセントのあるビューアーができたように思う。 |
| SAMPLE |
|
|
| ステージの準備 |
●500*520、背景色黒のステージ（12fps）を設定
●ステージ右下にダイナミックテキストボックスを配置、インスタンス名をmsgBoxとする
FONTは好みのもの(sampleはLucida Sans Typewriter）、サイズ20ｐｔ
●480*480の矩形を描きシンボルに変換 _hitArea と名付け、同名でリンケージを設定、ステージから削除
●100*100のサムネイル用写真を25枚読み込み、シンボルに変換、名前、リンケージををks1,ks2,ks3,,,,ks25とする
●同じフォルダに、サムネイルに相当する表示用写真25枚を保管する（k1,k2,k3,,,,k25） |
| スクリプト（_root、FRAME1に記述） |
|
var sc:Array = new Array();
var pic_n = 25;
var row_n = 5;
attachMovie("_hitArea", "_hitArea", 100);
_hitArea._x = 15;
_hitArea._y = 15;
_hitArea._alpha = 0;
main();
function main() {
msgBox.text = "";
for (i=1; i<=pic_n; i++) {
sc[i] = attachMovie("ks"+i, "ks"+i, i);
sc[i]._x = 50+100*((i-1)%row_n);
sc[i]._y = 50+100*Math.floor((i-1)/row_n);
sc[i]._xscale = sc[i]._yscale=100/145*100;
sc[i]._alpha = 60;
sc[i].num = i;
sc[i].onRollOver = rollover;
sc[i].onRollOut = rollout;
sc[i].onRelease = function() {
for (j=1; j<=pic_n; j++) {
sc[j]._visible = false;
}
loadPhoto(this.num);
msgBox.text = "Click Me!";
};
sc[i].onEnterFrame = rolloverExpsn;
}
}
function rolloverExpsn() {
n = this.num;
if (_hitArea.hitTest(_xmouse, _ymouse, true)) {
this._xscale += (100-Math.sqrt(Math.pow((_xmouse-this._x), 2)
+Math.pow((_ymouse-this._y), 2))/10-this._xscale)/2;
this._yscale += (100-Math.sqrt(Math.pow((_xmouse-this._x), 2)
+Math.pow((_ymouse-this._y), 2))/10-this._yscale)/2;
this._y += (50+100*Math.floor((n-1)/row_n)
+Math.abs(_xmouse-this._x)/500*50-this._y);
} else {
this._xscale += (100/145*100-this._xscale)/3;
this._yscale += (100/145*100-this._yscale)/3;
this._x = 50+100*((n-1)%row_n);
this._y = 50+100*Math.floor((n-1)/row_n);
}
}
function rollover() {
this._alpha = 100;
}
function rollout() {
this._alpha = 60;
}
function loadPhoto(n) {
jpg = "k"+n+".jpg";
load_mc = _root.createEmptyMovieClip("load_mc", 120);
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.loadClip(jpg, load_mc);
load_mc._xscale = load_mc._yscale=20;
onEnterFrame = function () {
load_mc._x = _xmouse-50;
load_mc._y = _ymouse-50;
load_mc.onRelease = photoExpn;
};
}
function photoExpn() {
delete onEnterFrame;
this.onEnterFrame = function() {
this._x += (0-this._x)/3;
this._y += (10-this._y)/3;
this._xscale += (100-this._xscale)/3;
this._yscale += (100-this._yscale)/3;
this.onRelease = function() {
delete this.onEnterFrame;
this.removeMovieClip();
main();
};
};
}
|
|
| スクリプトの説明 |
●var pic_n = 25; var row_n = 5;
サムネイルの総数と並べる列数（一行あたりの枚数）
●attachMovie("_hitArea", "_hitArea", 100);
mouseがのると反応させるための矩形（_hitArea）を配置し、アルファ値を0にして見えないようにする
●function main() {
初期設定（サムネイルを並べ、表示サイズを69%に、アルファ値を60%に）
リリースですべてのサムネイルを消して関数loadPhotoを参照、メッセージボックスに"Click Me"を表示
●function rolloverExpsn() {
マウスがhitArea内にあるときに、マウスのある位置のサムネイルを大きく、離れるほど小さく表示させる
同時に、マウスのある位置のサムネイルを若干上に持ち上げる
if (_hitArea.hitTest(_xmouse, _ymouse, true)) {
もしマウスがhitArea内にある時は
this._xscale += (100-Math.sqrt(Math.pow((_xmouse-this._x), 2) +Math.pow((_ymouse-this._y), 2))/10-this._xscale)/2;
マウスからの距離（ルート（x軸距離の二乗＋y軸距離の二乗））で_xscaleを調節
else {
そうでなかったら（hitArea外だったら）、表示scale、表示位置を元に戻す
●function loadPhoto(n) {
リリースされたサムネイルに相当する500*500の写真をロードし、サムネイルの大きさと同じ大きさに縮小して表示
表示位置をマウス座標-50に配置（サムネイルの中心にマウスがのる)、サムネイルはマウスの移動にフォローする
●function photoExpn() {
縮小表示されている写真がリリースされたとき、ステージ中央に拡大表示させる関数
拡大写真がリリースされたら、表示写真を削除し初期状態に戻す（main();） |
|
|
| |
| HOME お勉強総リスト |