FLASHでボタンを押すと画像が変わる。

質問

現在MacromediaのFLASH MXを使って作っています。
ボタンを押すと画像が変わるものを作りたいのですが、やり方がどう調べてもわかりません。
ある人のの写真があって「帽子」のボタンを押すといろんな帽子を被っていくというものが作りたいのですが、
私の持っている書物には載っておらず、ネットで探しても見当たらなかったのでこちらでお伺いしました。
素材（帽子など）はできあがっているのですが、どなたか教えてください。
よろしくお願いします。

回答No.1

DPE · ベストアンサー

表示したい帽子を全て１つのムービークリップの中にまとめ、ボタンを押すごとに表示するフレームを変える、という方法はいかがでしょう。

仮に、表示したい帽子が10種類あるとします。
ムービークリップを１つ作り、１フレームに１つずつ帽子を配置します。つまり、このムービークリップは10フレームでできたムービークリップとなります。
このムービークリップのインスタンスと、選択ボタンのインスタンスをステージに配置し、それぞれにインスタンス名を付けます。
この手の選択ボタンは、次の帽子を選ぶボタンの他に、１つ前に戻るボタンがあると便利です。
そこで、ここでは、次を選ぶボタン「 next 」と、１つ前に戻るボタン「 back 」、帽子の「 hat 」というインスタンスがあるとします。
「 hat 」は１フレームずつ違った帽子が配置されています。ですから、例えば１番目の帽子ならフレーム１、５番目の帽子ならフレーム５を表示すればいいわけです。この制御には ActionScript を使います。
スクリプトは次のように考えます。
今表示するフレーム（つまりは帽子の種類）を変数で管理します。「 next 」または「 back 」ボタンが押されるごとにこの変数を加減して、その変数の値に応じた「 hat 」のフレームを表示させます。
以上の考え方でスクリプトを組むと、大体、以下のような形になるかと思います。インスタンスにではなく、フレームに設定して下さい。

（↓このスクリプトをコピーして使う場合は、各行頭の全角のスペースを、全て半角のスペースかタブに置き換えて下さい。このまま使うとシンタックスエラーになります）

　//表示する帽子を管理する変数：最初は1番目の帽子を表示
　hat_no = 1;
　//帽子の総数
　hat_max = 10;

　//「次の帽子」ボタンが押された場合の処理
　next.onPress = function ()
　{
　　//次の帽子を選択
　　hat_no++;
　　//総数を超えたら最初の帽子に戻る
　　if( hat_no > hat_max )
　　{
　　　hat_no = 1;
　　}

　　//該当する帽子を表示
　　hat.gotoAndStop( hat_no );
　};

　//「前の帽子」ボタンが押された場合の処理
　back.onPress = function ()
　{
　　//前の帽子を選択
　　hat_no--;
　　//１番目の帽子を表示していた場合は最後の帽子を選択
　　if( hat_no < 1 )
　　{
　　　hat_no = hat_max;
　　}

　　//該当する帽子を表示
　　hat.gotoAndStop( hat_no );
　};

これだけでは、「 hat 」が表示された途端にフレーム１から 10 まで連続で再生されてしまい、帽子１～ 10 がくるくる表示されるという、おかしな結果になってしまいます。
そこで、ムービークリップイベントの load イベントを利用して、最初に表示する帽子のフレームで再生を止めておきます。以下のようなスクリプトを、「 hat 」に設定します。今度はフレームにではなく、インスタンスに設定して下さい。

　//デフォルトの帽子を表示
　onClipEvent( load )
　{
　　this.gotoAndStop( _root.hat_no );
　}

変数を使わなくても、

　this.gotoAndStop( 1 );

というようにフレームの番号を直接指定しても同じですが、何かの理由で最初に表示する帽子が１番目ではなくなった場合でも、hat_no の初期値を書き換えるだけでこちらも連動して変わりますから、変数で指定する方がオススメです。

ポイントは、帽子の番号とムービークリップのフレーム番号を対応させておくことと、表示する帽子の番号を変数で管理することです。
前の帽子を選ぶボタンが不要なら、back.onPress = ・・・のスクリプトは削除して下さい。
上記のスクリプトでは、帽子の番号が１または 10 になった時は 10 もしくは１に戻り、エンドレスに選択できるようになっていますが、if 文の中を少し改造すると、これを１と 10 で止めておくようにすることも可能です。
また、UI コンポーネントにあるコンボボックスやリストボックスを使ったり、テキスト入力で番号をユーザーに入力してもらう、などの応用も考えられますが、原理は同じです。
長くなってすみませんでした。

お礼

大変解りやすいご説明本当にありがとうございます！！このページを開いたとたん鳥肌が立つような感動に見舞われました（†〇†)
おかげさまで無事に完成いたしました♪
本当にありがとうございました。