(21)フォトギャラリー（２シリーズ、外部ファイル読み込み型） 2005/12/2
Webで複数の写真をギャラリー形式で表示するのに、多種、多彩な方法が取られている。 ここでは、今年11月に訪れた広島地方の宮島、三滝寺の紅葉の写真を素材としたギャラリーを作ったので、ギャラリー形式の一つとして提供することにしたい。 ギャラリーとしては定番のサムネイルをクリックすると写真を表示する形式を取っているが、宮島、三滝寺の２シリーズのサムネイルをボタンクリックで入れ替える方式を取ってみた。 ここでは、2シリーズで作っているが、この応用で複数シリーズのギャラリーが作成可能である。 まずは以下のサンプルをごらん頂きたい。 |
|
| ステージの設定 | |
| （１）ｗ600×ｈ450、背景色黒のステージを設定。 （２）ｗ500×ｈ333の矩形を描き、背景色と同じ黒色に設定する。これをシンボルに変換し、インスタンス名をscreenとする。次いで、自由変形ツールで、中心にある変形ポイントを左上のコーナーに移動させる（screenに外部ファイルとして画像を読み込むと、読み込み画像の左上コーナーが変形ポイントに来るように読み込まれる)。 このとき、screenの左上コーナーの座標は、（55,50）。 （３）画面左上に宮島、及び、三滝寺シリーズのサムネイルを初期格納する場所に、アクションを開始させるボタンを設置する。 ボタンの大きさは、ｗ50、ｈ30で、宮島ボタンは、（15,0）に、三滝寺ボタンは、（80,0）に配置し、シンボル（ＭＣ）に変換する。 |
|
| サムネイル画像の読み込み | |
| （１）ｗ60×h40のサムネイル画像をそれぞれのシリーズ（宮島、三滝寺）10枚ずつ用意する。 （２）サムネイル画像をステージに読み込み、それぞれをシンボルに変換し,宮島シリーズをpic1,pic2,,,,pic10、三滝寺シリーズをpict1,pict2,,,,pict10のように通し番号として名前をつけ、リンケージを同名で設定しておく。 （３）ステージ上の画像を削除する(ライブラリーに格納されている)。 |
|
| 外部画像ファイルの準備 | |
| （１）表示する画像（ｗ500×ｈ333）を用意し、こちらもファイル名を通し番号としておく。 （２）ファイルをflashファイルと同じフォルダーに格納する（違うフォルダーにしても良いが、読み込むときパスを指定すること) |
|
| スクリプト（_rootに） | |
| var pic:Array = new Array(); var pict:Array = new Array(); var vx:Array = new Array(); var vy:Array = new Array(); n = 10; for (i=1; i<=n; i++) { _root.attachMovie("pic"+i, "pic"+i, n+1-i); _root.attachMovie("pict"+i, "pict"+i, 2*n+1-i); pic[i] = eval("pic"+i); pict[i] = eval("pict"+i); pic[i]._x = 25; pic[i]._y = 15; pict[i]._x = 85; pict[i]._y = 15; pic[i]._xscale=pict[i]._xscale=70; pic[i]._yscale=pict[i]._yscale=70; vx[i] = vy[i] = 0; ax = ay = 0; } _root.onEnterFrame = function() { if (_root.flag==1) { for (i=1; i<=n; i++) { pict[i]._x=85; pict[i]._y=15; pict[i]._alpha=100; vx[i] = 0.8*vx[i]+(50+50*(i-1)-pic[i]._x)/(3*i); pic[i]._x += vx[i]; vy[i] = 0.6*vy[i]+(420-pic[i]._y)/(3*i); pic[i]._y += vy[i]; pic[i].num = i; pic[i].onRollOver = rollov; pic[i].onRollOut = rollou; pic[i].onRelease = rels; } } if (_root.flag==2) { for (i=1; i<=n; i++) { pic[i]._x=25; pic[i]._y=15; pic[i]._alpha=100; vx[i] = 0.8*vx[i]+(50+50*(i-1)-pict[i]._x)/(3*i); pict[i]._x += vx[i]; vy[i] = 0.6*vy[i]+(420-pict[i]._y)/(3*i); pict[i]._y += vy[i]; pict[i].num = i; pict[i].onRollOver = rollov; pict[i].onRollOut = rollou; pict[i].onRelease = relst; } } } function rollov() { this.onEnterFrame = function() { ax = 0.6*ax+(100-this._xscale)/3; this._xscale += ax; ay = 0.6*ay+(100-this._yscale)/3; this._yscale += ay; }; } function rollou() { this.onEnterFrame = function() { this._xscale += (70-this._xscale)/3; this._yscale += (70-this._yscale)/3; }; } function rels() { this._alpha=50; image="miya"+this.num+".jpg" _root.screen.loadMovie(image); } function relst() { this._alpha=50; image="mitaki"+this.num+".jpg" _root.screen.loadMovie(image); } |
配列の定義 各シリーズの写真の数 サムネイル画像宮島シリーズをステージに サムネイル画像三滝シリーズをステージに 宮島シリーズ10枚を重ね合わせて配置 三滝シリーズ10枚を重ね合わせて配置 サムネイル画像の大きさを70％に縮小 宮島シリーズのフレームアクション もしflagが１なら（宮島ボタンがクリックされたら) 三滝シリーズのフレームアクション もし、ｆｌａｇが2なら（三滝ボタンがクリックされたら) サムネイル画像のロールオーバー時のアクション サムネイル画像のロールアウト時のアクション 宮島シリーズのサムネイル画像がクリックされた時のアクション（外部画像ファイルの表示) 三滝寺シリーズのサムネイル画像がクリックされた時のアクション（外部画像ファイルの表示) |
| なお、サムネイル画像が落下してくるときのスクリプトについては、移動の停止の「バネ仕掛けのように弾んで止まる｣を参照のこと。 | |
| スクリプト（宮島ボタンに） | |
| onClipEvent(load) { this.swapDepths(30); } on(release) { _root.flag=1; _root.screen.unloadMovie(); } |
ボタンの深度を30に設定 （サムネイルをattachMovieで読み込んだときの深度よりも大きくして、ボタンの影にサムネイル画像が隠れるようにする) クリックされたら、ｆｌａｇの値を１にする スクリーンに表示されている画像を消す |
| スクリプト（三滝寺ボタンに） | |
| onClipEvent(load) { this.swapDepths(31); } on(release) { _root.flag=2; _root.screen.unloadMovie(); } |
ボタンの深度を31に設定 クリックされたら、ｆｌａｇの値を２にする スクリーンに表示されている画像を消す |
| HOME お勉強総リスト | |