ミニなスライドショーツール minima をちょっと改良。
改良その１。センターぞろえにした。え？ いままでセンターじゃなかったの？と呆れないでほしい。左上120度からドロップシャドーを入れている関係で、右側余白を４ピクセルほど多めに取っていたわけだが、ピクセル単位できっちりセンターそろえしたかった方には、さぞかしこの微妙な違いが邪魔だったろう。なので、左側にも４ピクセル余白を足して <center>タグで簡単にセンタリングできるようにした。
改良ってそれだけ？ …ではなく、lightbox系ツールを使いたいのに Flash によるブログアクセサリが隠れてくれないとお嘆きの方のために、wmodeパラメータを足した。最初からそうしてりゃ良かったのにという話だが。
まあここまでは枝葉で、今回の改良の目玉はそんなことではなく、今年４月にマイクロソフト社が行なった Internet ExplorerのActiveXコントロールの処理変更に対応させた点。FlashやShockwaveによるアクティブコンテンツの対話的処理が自動化されなくなり、１度クリックしないと反応しなくなったことにご不満なアイイー利用者のあなた。だから IEを捨てませうという話じゃなくて（捨てたほうがいいと思うが）minima改訂版ではその点をJavaScriptで対応し、どうせJSを使うならブログのサイドバーへの表示もJSでやっちゃうことにした。
<script type="text/javascript" src="Your_URL/minima.js"></script>
インラインフレームではなく、上記のようにJSで呼び込む仕様。もちろんエントリ本文でも利用できる。minima本体の背景カラーは透明。というかwmodeでカラー設定が無効化されているので、つまりどんな背景のページ（豹柄だろうとパンダ模様だろうと）でもシャドーレイヤーがきれいに表現できるようになった（豹柄とかで試してないけどＯＫのはず）
ということで、詳しい設置方法はダウンロード・ファイル同梱のマニュアルに書いてあるので、よろしければお持ち帰りのほどを。flaファイルもどうぞ。
【関連記事】
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;
}
};
１行目の変数 nMax = _root.total で写真の総枚数を読み込ませている。
３行目でスタートの写真をランダムにかきまぜ、５行目でそのランダム数値を変数に代入している。
２箇所の else は、Next & Back をループさせるため。最初の else の部分を削ればスライドが終わりまで行ったらそれ以上は進まない。次の else を削ればスタート写真からバックしてラスト写真へ移動しない。そこのところはお好みで。
さらに下の images/"+whichPic+".jpg は、写真が格納されたフォルダ名、画像ファイル名である。GIF画像を使いたければ、jpg を gif に変更するといい。
とてもシンプルな仕組みなので、改造はラクと思う。
ちなみに画像を読み込むムービークリップは square である。このサイズを変えれば、お好みの大きさのスライドショーが出来上がる。
とはいえ宣伝させてもらうなら、ビッグなサイズのスライドショーツールをお求めなら、上記のスクリプトをいじるより CINRA BABI をお薦めしたい。盟友マサキさん作の素晴らしいツールなので。ただ、BABIの仕様上、ナビゲーションが写真に重なるようにレイヤー表示されるので、超ミニフォトだとナビがはみ出る感じになる。それが気になる方は Minima をどうぞ。
【関連エントリ】
これは本宅のアバウト・ページに設置してある豆スライドショーである。奥ゆかしくも写真サイズは 100x100px。携帯フォトより小さい。
たいしたツールじゃないが、これが欲しいと言うゲストさんがいらっしゃったので、配付することにした。もらって下さる奇特な方は下記よりどうぞ。詳しい設置方法はダウンロードされたフォルダー内のマニュアルを参照ください。
ツール名は minima。小さいので。取り柄はそれくらいだし。
実はこれ、FLASH MX に付いているサンプルを改造しただけの代物。手近な素材は有効利用すべきだ。とはいえサンプルは所詮サンプルに過ぎず、サイバーチックなデザインも好みじゃなかったので、デザインも機能も私好みに改造させてもらった。カタチ・テイストに変えた部分は下記の四点。
ネバーエンディング・フォトアルバム
少ないコンテンツを有効に。矢印キーのどちらを押しても（右がネクスト、左がバック）エンドレスに写真が展開。
リロードのたびにランダム表示
更新してなくてもランダムに最初の写真が変わるので、ゲストさんに「この管理人はマメに更新しているなぁ」と思わせることができる。
HTMLによるセッティング
セッティングといっても写真を追加したら総枚数の指定を書き換えるだけ。手間を省くことがナマケモノの極意である。
背景カラーはお好みで
縁取りのシャドーは透明レイヤーなので、ページの背景がショッキングピンクだろうとクレイジーレッドだろうと何でもＯＫ。
ちなみにSWFファイルには「読み込みプロテクト」をかけていない。マクロメディアのサンプルの改造版なので、プロテクトをかけるのは筋違いという気がした。
flaファイルも公開するので、デザインや写真サイズなど、さらに独自に改造したい方はご自由にお持ち帰りのほどを。
改造したい方は下記のエントリを参照ください。
