このflash講座は,flashソフトを用いてflashアニメをスクリプトで制作し無料で公開したものです
FLASH講座 ーアクションスクリプトの実践的事始めー
活用編
(5)フォトギャラリー
(2シリーズ、外部ファイル読み込み型)
 Web上で複数の写真をギャラリー形式で表示するために、多種、多彩な方法が取られています。 ここでは、広島の宮島、三滝寺の紅葉の写真を素材としたギャラリーを作りましたので、ギャラリー形式の一つとして提供ます。

 サムネイルをクリックすると写真を表示する形式ですが、宮島、三滝寺の2シリーズのサムネイルをボタンクリックで入れ替える方式を取ってみました。 ここでは、2シリーズでだけですが、応用すれば複数のギャラリーが作成可能です。

 まずは以下のサンプルをごらんください。
ステージの設定
(1)w600×h450、背景色黒のステージを設定。
(2)w500×h333の矩形を描き、背景色と同じ黒色に設定する。これをシンボルに変換し、インスタンス名をscreenとする。次いで、自由変形ツールで、中心にある変形ポイントを左上のコーナーに移動させる(screenに外部ファイルとして画像を読み込むと、読み込み画像の左上コーナーが変形ポイントに来るように読み込まれる)。 このとき、screenの左上コーナーの座標は、(55,50)。
(3)画面左上に宮島、及び、三滝寺シリーズのサムネイルを初期格納する場所に、アクションを開始させるボタンを設置する。 ボタンの大きさは、w50、h30で、宮島ボタンは、(15,0)に、三滝寺ボタンは、(80,0)に配置し、シンボル(MC)に変換する。
サムネイル画像の読み込み
(1)w60×h40のサムネイル画像をそれぞれのシリーズ(宮島、三滝寺)10枚ずつ用意する。
(2)サムネイル画像をステージに読み込み、それぞれをシンボルに変換し,宮島シリーズをpic1,pic2,,,,pic10、三滝寺シリーズをpict1,pict2,,,,pict10のように通し番号として名前をつけ、リンケージを同名で設定しておく。
(3)ステージ上の画像を削除する(ライブラリーに格納されている)。
外部画像ファイルの準備
(1)表示する画像(w500×h333)を用意し、こちらもファイル名を通し番号としておく。
(2)ファイルを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が1なら(宮島ボタンがクリックされたら)











三滝シリーズのフレームアクション
もし、flagが2なら(三滝ボタンがクリックされたら)












サムネイル画像のロールオーバー時のアクション







サムネイル画像のロールアウト時のアクション





宮島シリーズのサムネイル画像がクリックされた時のアクション(外部画像ファイルの表示)



三滝寺シリーズのサムネイル画像がクリックされた時のアクション(外部画像ファイルの表示)
なお、サムネイル画像が落下してくるときのスクリプトについては、移動の停止の「バネ仕掛けのように弾んで止まる」を参照のこと。
スクリプト(宮島ボタンに)
onClipEvent(load) {
this.swapDepths(30);
}

on(release) {
_root.flag=1;
_root.screen.unloadMovie();
}
ボタンの深度を30に設定
(サムネイルをattachMovieで読み込んだときの深度よりも大きくして、ボタンの影にサムネイル画像が隠れるようにする)

クリックされたら、flagの値を1にする
スクリーンに表示されている画像を消す
スクリプト(三滝寺ボタンに)
onClipEvent(load) {
this.swapDepths(31);
}

on(release) {
_root.flag=2;
_root.screen.unloadMovie();
}

ボタンの深度を31に設定



クリックされたら、flagの値を2にする
スクリーンに表示されている画像を消す
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
このサイトで使用しましたflashソフトはflash mx 2004年版(Flash Japan)- flash8 及び FlashCS3-2007年版です。 flash講座(フラッシュ講座)は、Yoshioka氏(通称、ひげ親父)による制作です。 コツコツと作られたflash素材(flashアニメ、スクリプト)はユーザーの方により保存変更され動画flash(動画フラッシュ)や携帯flash(待受flash)として利用されて来ました。
 氏は、flashスクリプトについての学習を、パソコン塾講師活躍中に始められ、独立した今も続けておられます。 
 macromedia flashソフトは新しくadobe flash時代に入りましたので、これを機会にflash学習サイトを「flash講座1234」としてリニューアルいたしました。 引き続きご愛顧承りますよう、よろしくお願いいたします。                                                                       (by Hiraoka)
HOME   Flash講座総リスト   アクションスクリプトの実践的事始め-活用編(6)