サムネイルをクリックすると拡大表示…の作り方

こんばんは。
Flash初心者なのですが、仕事で、Flashを使ったフォトギャラリーを作ることになってしまいました。Flash8を使用しています。

・サムネイルが画面下部に横に並んでいる(8~10個くらい)
・サムネイルをクリックすると画面上部に大きく表示される(幅300pxくらい)
・次のサムネイルをクリックするまで拡大写真はそのまま

これだけの単純なもので、フェードなどの視覚効果もなくていいのですが、サムネイルをボタンにして、どのようなアクションスクリプトを書けばいいのでしょうか？
ネットで探してみたのですが、凝った動きのものが多く、どこが必要な部分なのがいまいちわかりません。今までデフォルトのテンプレートを使ったページしか作ったことがないので、悩んでいます。
詳しい方に教えていただければありがたいです。
よろしくお願いします。

No.2 ベストアンサー 回答者： BlurFiltan 回答日時： 2008/03/29 06:46

しくみは様々です。

無数にあります。

> どのようなアクションスクリプトを書けばいいのでしょうか？

決まっていません。


簡単にするには次のような方法もあります。

> ・サムネイルが画面下部に横に並んでいる(8~10個くらい)

これを _root の上のレイヤーに置くとします。

その下のレイヤーの
フレーム1に最初の拡大版写真を配置します。
フレーム2には次の拡大版写真を配置します。
フレーム3には次の次の拡大版写真を配置します。
　　…　　　　　　…
フレーム8～10には8～10番目の拡大版写真を配置します。


　レイヤー　・・・・|●/////////////[]| ←サムネイル
　レイヤー　・・・・|●|●|●|………|●| ←拡大画像



サムネイルの各写真をムービークリップかボタンにして，
その各ムービークリップかボタンにスクリプトを書きます。

最初の拡大版写真を表示したいボタンには，
on(release){
_root.gotoAndStop(1);
}


次の拡大版写真を表示したいボタンには，
on(release){
_root.gotoAndStop(2);
}

次の次の拡大版写真を表示したいボタンには，
on(release){
_root.gotoAndStop(3);
}

　…　　　…

8～10番目の拡大版写真を表示したいボタンには，
on(release){
_root.gotoAndStop(8～10);
}


_root の フレーム1 には stop(); を書いて停止させておく必要もありますが，
以上のような感じでもできますよね。

写真をフェードインなどで見せたければ，
拡大写真の方もムービークリップの中に入れて，
その中で拡大写真を アルファ0→100 のようにしても良いですし。

写真にワイプ効果をかけた登場で見せたければ，
拡大写真の方もムービークリップの中に入れて，
その中で拡大写真にワイプ効果をかけても良いですし。

言ってたらきりがありません。
上のような単純なしくみでも，色々なものに発展させることができます。

この回答へのお礼

ご回答ありがとうございました！
実際にボタンに書くアクションスクリプトと、レイヤーを書いていただき、とても参考になりました。
無事にサムネイル付きのアルバムを作ることができました(^^)/
本当にいろいろなアプローチがあるんですね。
もうちょっと時間があるので、フェードもやってみようかな？と思っています。
ありがとうございました！

お礼日時：2008/03/29 17:34

No.1 回答者： mizuno3 回答日時： 2008/03/29 01:32

最高に簡単な方法を。

使う全ての画像をステージ上に置く。

サムネイル画像は

a1_mc ～ a9_mc　とかにしておく。

大きい画像は

big_a1_mc ～ big_a9_mcとかにしておく。

a1_mcの部分をサムネイルとあわせておくとよい。

ステージ上にはサムネイルと、big_a1_mcが表示されている。

big_a1_mcの_xと_yの値を覚えておく。

big_a2_mc～big_a9_mcはステージの外に置いておく。
ただし、_yの座標は 全てbig_a1_mcと同じにしておく。

ここまでが画面の準備。


メインのタイムライン上に以下のようなスクリプトを書く

var defaultX = big_a1_mc._x;
a1_mc.onRelease = p;//押した瞬間がよければonPress
a2_mc.onRelease = p;
a3_mc.onRelease = p;
//全部書く。
a9_mc.onRelease = p;

function p() {
hidden();
var name = 'big_' + this._name;
_root[name]._x = defaultX;
}

function hidden() {
big_a1_mc._x = -1000;
big_a2_mc._x = -1000;
//全部書く。
big_a9_mc._x = -1000;
}

こんなのでどうでしょうか。
他にも色々あると思います。

ただ、仕事でやるようなscriptじゃないですね。
5分で作ってと言われた時に書くようなソースです。

この回答へのお礼

ご回答ありがとうございます！
詳しく書いていただいて、わかりやすかったです。
全部を同じ画面に置いてしまうというやり方もあるんですね。これだととても短時間で出来ていいですね!

このような解決方法もあるんだと勉強になりました。
ありがとうございました(^^)

お礼日時：2008/03/29 17:30