Flash スライドショー 解説編
Minima のflaファイルをダウンロードしたけどもワケ分からん、というメールをもらったので、ざっと説明を。
前回のエントリにも書いたが、Minimaの元ネタは Macromedia の load_images.fla である。その他のサンプルと併せて下記よりダウンロードできる。
Macromedia Japan - Flash MX : サンプルファイル(追記:現在このサンプルは閉鎖中)
以下はその load_images.fla(イメージのロード)の ActionScript。
//initialize variables and properties
square._alpha = 0;
whichPic = 1;
//initiate change to new image when buttons are clicked
next.onPress = function() {
if (whichPic<5 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic++;
input = whichPic;
}
};
back.onPress = function() {
if (whichPic>1 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic--;
input = whichPic;
}
};
_root.onEnterFrame = function() {
// when a new Photo is selected, fade out, load new image, and fade in
if (square._alpha>10 && fadeOut) {
square._alpha -= 10;
}
if (square._alpha<10) {
loadMovie("../images/image"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 10;
} else {
fadeIn = false;
}
// limit input field
if (input>5) {
input = 5;
}
// initiate change to new image when Enter key is pressed
if (Key.isDown(Key.ENTER)) {
fadeOut = true;
whichpic = input;
}
};
// if a number is entered in the input field but Enter is not pressed, change
// back to current Photo number when clicking anywhere else
inputField.onKillFocus = function() {
input = whichPic;
};
Minima へ改造するにあたって、まず青字の部分を削除した。
削除した箇所はインプット・フォームに写真のナンバーを入力すると当該写真が表示されるというアクションなのだが、実用性はまったくゼロだろう。何十枚ものスライドを見たあとで、もう一度見たい写真の番号を覚えている人がいるとは思えない。
次に、赤字の部分を下記のように改変した。
//initialize variables and properties
nMax = _root.total;
nMin = 1;
nRandomInt = Math.floor(Math.random()*(nMax-nMin+1))+nMin;
square._alpha = 0;
whichPic = nRandomInt;
//initiate change to new image when buttons are clicked
next.onPress = function() {
if (whichPic< nMax && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic++;
} else {
fadeOut = true;
whichpic = 1;
}
};
back.onPress = function() {
if (whichPic>1 && !fadeIn && !fadeOut) {
fadeOut = true;
whichpic--;
} else {
fadeOut = true;
whichpic = nMax;
}
};
_root.onEnterFrame = function() {
// when a new Photo is selected, fade out, load new image, and fade in
if (square._alpha>10 && fadeOut) {
square._alpha -= 10;
}
if (square._alpha<10) {
loadMovie("images/"+whichPic+".jpg", "square");
fadeOut = false;
fadeIn = true;
}
if (square._alpha<100 && fadeIn && !fadeOut) {
square._alpha += 10;
} else {
fadeIn = false;
}
};
1行目の変数 nMax = _root.total で写真の総枚数を読み込ませている。
3行目でスタートの写真をランダムにかきまぜ、5行目でそのランダム数値を変数に代入している。
2箇所の else は、Next & Back をループさせるため。最初の else の部分を削ればスライドが終わりまで行ったらそれ以上は進まない。次の else を削ればスタート写真からバックしてラスト写真へ移動しない。そこのところはお好みで。
さらに下の images/"+whichPic+".jpg は、写真が格納されたフォルダ名、画像ファイル名である。GIF画像を使いたければ、jpg を gif に変更するといい。
とてもシンプルな仕組みなので、改造はラクと思う。
ちなみに画像を読み込むムービークリップは square である。このサイズを変えれば、お好みの大きさのスライドショーが出来上がる。
とはいえ宣伝させてもらうなら、ビッグなサイズのスライドショーツールをお求めなら、上記のスクリプトをいじるより CINRA BABI をお薦めしたい。盟友マサキさん作の素晴らしいツールなので。ただ、BABIの仕様上、ナビゲーションが写真に重なるようにレイヤー表示されるので、超ミニフォトだとナビがはみ出る感じになる。それが気になる方は Minima をどうぞ。
- Flashスライドショー解説編(2006/03/29)
- minima改訂版リリース(2006/12/01)