FLASHのお勉強 ーアクションスクリプトの実践的事始めー
|
| (61) FLASHフォトビューアー3 2008/3/7 |
| |
ランの写真を撮ったので、花が開くような動きを付けたビューアーということで今回の作品になった。 拡大写真が表示されるところをもう一工夫しようと思ったが、シンプルなほうがよいということで、フォトビューアー２と同様の動きとなった。 サムネイルのロールオーバー効果については、少しは新鮮味を出せたようなに思う。
サムネイルクリックで、拡大写真を（外部jpgファイル）を表示しているが、外部swfファイルを表示させるようにすれば、サイトメニューにも応用できると思う。 actionscript 2.0 で作成 |
| SAMPLE |
|
|
| ステージの準備 |
●550*550、背景色黒のステージ（12fps）を設定
●ライブラリーに100*100のサムネイル写真（この場合は8枚）を読み込み、それぞれをシンボルに変換、シンボル名、リンケージ名を p1,p2,,,p8
とする（基準点は左上）
●サムネイルのそれぞれに相当する500*500の写真をｓｗｆファイルと同じフォルダに格納、pic1,pic2,,,pic8.jpg とする
|
| スクリプト（_root、FRAME1に記述） |
|
var photo:Array = new Array();
var picName = ["FlowerA", "FlowerB", "FlowerC", "FlowerD", "FlowerE", "FlowerF", "FlowerG", "FlowerH"];
var num = 8;
var tfFormat = new TextFormat();
tfFormat.size = 18;
tfFormat.color = 0xffffff;
var x0 = 30;//サムネイル表示初期ｘ座標（左）
var y0 = 200;//サムネイル表示初期ｙ座標
var y00 = 30;//拡大写真表示ｙ座標
var w0 = 50;//サムネイル写真表示初期幅
main();
function main() {
for (i=1; i<=num; i++) {
photo[i] = attachMovie("p"+i, "p"+i, i);
with (photo[i]) {
_x = x0+w0*i;
_y = y0;
_width = w0;
_alpha = 60;
}
photo[i].n = i;
photo[i].onRollOver = rollover;
photo[i].onRollOut = rollout;
photo[i].onRelease = releas;
}
}
function rollover() {
var n = this.n;
wta = (num-n)*w0-w0/2;
wtb = (n-1)*w0-w0/2;
var nta = ntb=0;
for (j=1; j<n; j++) {
ntb += j;
}
for (j=n+1; j<=num; j++) {
nta += j-n;
}
_root.onEnterFrame = function() {
for (k=1; k<=num; k++) {
if (k == n) {
with (photo[k]) {
_width += (2*w0-_width)/2;
_x += (w0*k-_x)/2;
_alpha += (100-_alpha)/2;
}
} else if (k<n) {
with (photo[k]) {
_width += (wtb*k/ntb-_width)/2;
_x += (photo[k+1]._x-_width-_x)/2;
_alpha += (60-_alpha)/2;
}
} else {
with (photo[k]) {
_width += (wta*(num+1-k)/nta-_width)/2;
_x += (photo[k-1]._x+photo[k-1]._width-_x)/2;
_alpha += (60-_alpha)/2;
}
}
}
picTitle._x += (photo[n]._x-w0/2-picTitle._x)/3;
picTitle.tf.text = picName[n-1];
picTitle.tf.setTextFormat(tfFormat);
};
var picTitle = _root.createEmptyMovieClip("picTitle", 120);
picTitle.createTextField("tf",120,x0,y0-25,100,25);
}
function rollout() {
picTitle._visible = false;
_root.onEnterFrame = function() {
for (k=1; k<=num; k++) {
with (photo[k]) {
_width += (w0-_width)/2;
_x += (x0+w0*k-_x)/2;
_alpha += (60-_alpha)/2;
}
}
};
}
function releas() {
n = this.n;
delete onEnterFrame;
jpg = "pic"+n+".jpg";
load_mc = _root.createEmptyMovieClip("load_mc", 130);
var mcLoader:MovieClipLoader = new MovieClipLoader();
mcLoader.loadClip(jpg,load_mc);
with (load_mc) {
_xscale = _yscale=20;
_x = x0-w0/2+w0*n;
_y = y0;
}
this.onEnterFrame = function() {
with (load_mc) {
_xscale += (100-_xscale)/3;
_yscale += (100-_yscale)/3;
_x += (x0-_x)/3;
_y += (y00-_y)/3;
}
load_mc.onRelease = function() {
delete this.onEnterFrame;
this.removeMovieClip();
main();
};
};
}
|
|
| スクリプトの説明 |
●var picName = ["FlowerA",,,,,
各写真の題名を配列で定義。ここではFlowerAと言うように付けているが、もちろん、写真に応じた題名を入れる。
サイトメニューの場合は、HOMEとかProfileなどと入れる
●var num = 8;
写真の枚数
●var tfFormat = new TextFormat();
サムネイルロールオーバーで登場する写真の題名の文字の書式設定（以下2行含む）
●main();
関数mainの実施
●photo[i] = attachMovie("p"+i, "p"+i, i);
サムネイルp1,,, を配列photo[1],,,として定義
●with (photo[i]) {
{ }内のスクリプトでphoto[i]. を省略
●n： ロールオーバーされた写真の番号
wta：ロールオーバー時にｎより番号の大きい写真全体が表示される幅（和）
wtb：ロールオーバー時にｎより番号の小さい写真全体が表示される幅（和）
nta：ロールオーバー時にｎより番号の大きい写真の番号の総和 （n=6なら、nta=7+8(15)
ntb：ロールオーバー時にｎより番号の小さい写真の番号の総和
表示される各サムネイルの幅は、写真番号をｋとすると、
ｋ＝ｎ（ロールオーバされている）の場合： w0*2（100pxで元の写真サイズ）
ｋがｎより小さい（左側）場合： wtb*k/ntb
ｋがｎより大きい（右側）場合： wta*(num+1-k)/nta
●var picTitle = _root.createEmptyMovieClip("picTitle", 120);
picTitle.createTextField("tf",120,x0,y0-25,100,25);
空のむびークリップを作成（picTitle）し、その中にテキストフィールド（tf）を配置する
●picTitle._x += (photo[n]._x-w0/2-picTitle._x)/3;（含以下2行）
ロールオーバーされたサムネイルの上の位置にテキストフィールドを移動させ、サムネイルに相当する番号の題名を表示させる
●function rollout() {
サムネイルのロールアウトで配置を元に戻す
●function releas() {
サムネイルのリリースで外部jpgファイルを、mcLoader を介してload_mcに読み込み、サムネイルの大きさに縮小しておいて、
本来の大きさに拡大表示させる（この部分は、「FLASHフォトビューアー２」と同じ） |
|
|
| |
| HOME お勉強総リスト |