一つのボタンで画像を変える方法

質問

FLASH８を使用しています。
ボタンを『戻る:▲』『進む:▼』の二つで
一定の場所に画像などを次々表示させて行くにはどうしたらいいのでしょう。
swfファイルをターゲットに表示させる方法はわかるのですが…。

初心者のため補足が必要であればお答えします。
よろしくお願いします。

回答No.1

noname#35109 · ベストアンサー

最近始められる方というのは，
どうも，複雑に考えようとされる傾向が強いように思いますね。
Flash は本来のオーソドックスな機能を使えばすごく簡単なソフトです。
stop()　play()　gotoAndStop()　gotoAndPlay()
それとあと，
on (release) {} などのイベントハンドラだけで，
Flash内のことはたいていのことはできてしまうように作られています。

つい先日回答した，
このご質問とほとんど同じ回答になってしまいますが↓。

「スライドバーを使って画像を変える」
http://oshiete1.goo.ne.jp/qa2785127.html
　　↑教えて！goo　　↓OKWave　（同じです）
http://okwave.jp/qa2785127.html

// ＝＝＝ 以下は上記URLの内容とほぼ同一です。＝＝＝

とりあえず初歩的な方法として，
Flash は元々インタラクティブにフレーム移動（時間軸移動）できるアニメーションソフトです。
それを有効利用するのが，最初に思い付くべき方法だと思います。
まずステージ上を図示すると次のように作成します。

　┌──── ステージ ─────┐
　□□□□□□□□□□□□□□□
　□■■■■■■■■■■■■■□
　□■■■■■■■■■■■■■ ←画像
　□■■■■■■■■■■■■■□
　□■■■■■■■■■■■■■□
　□■■■■■■■■■■■■■□
　□□□□□□□□□□□□□□□
　□□□『戻る▲』□『進む▼』□□□ ←ボタン
　□□□□□□□□□□□□□□□

画像は画像用レイヤーに，
ボタンはボタン用レイヤーに，
スクリプトはスクリプト用レイヤーに，
別々のレイヤーを用意し，配置ます。
（ボタンとして用意するのは以下すべてボタンインスタンスであるとします。）

タイムラインを図示すると次のような感じです。

　□　レイヤー　筆・・|○　　　　　　　　 []| ←スクリプト
　□　レイヤー　筆・・|●///////////[]| ←ボタン
　□　レイヤー　筆・・|●|●|●|●| ～|●| ←画像

画像用レイヤーの各フレームをキーフレームにして，
それぞれに違う画像を同じ位置に用意しておいて，
ボタンで，次のフレームや前のフレームにジャンプさせれば良いだけですね。

gotoAndStop()　の親戚（兄弟）には，
prevFrame();　（前のフレームへ行って止まれ）と，
nextFrame();　（次のフレームへ行って止まれ）がありますから，
これを使えば簡単です。

まず，スクリプト用レイヤーの最初のフレームに，

-------------
stop();
-------------

を書いて，
ムービーが勝手に再生しないようにしておきます。

そして，
『戻る:▲』ボタンには，

-----------------------
on (release) {
prevFrame();
}
-----------------------

『進む:▼』ボタンには，

-----------------------
on (release) {
nextFrame();
}
-----------------------

と書けばできあがりです。

アニメーションさせるわけではないので，
モーショントゥイーンとかシェイプトゥイーンさえも要りません。

// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

_root のフレームを前後に動かすのが嫌であれば，
毎フレームごとに違う画像を置いた ムービークリップ を作成して，
そのムービークリップのタイムラインを次や前に進ませれば良いわけです。
仮にそのムービークリップのインスタンス名を 「my_mc」 にでもして置いたとすると，

『戻る:▲』ボタンには，

-----------------------
on (release) {
_root.my_mc.prevFrame();
}
-----------------------

『進む:▼』ボタンには，

-----------------------
on (release) {
_root.my_mc.nextFrame();
}
-----------------------

と書けばできあがりです。
最初に書いた方法のムービークリップ使用版です。

// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

まだ，いくらでも方法はあります。

画像はステージ上に用意しておくのではなく，
いったんムービークリップに変換してライブラリの中だけに置いておいて，
そのライブラリのムービークリップにリンケージから識別子を付けて，
MovieClip.attachMovie でステージ上に呼びだす方法もあります↓。

「リンケージとは？」
http://www.1art.jp/flash/le/lessona/lessona.htm

まずは上のURLを参考にしてみてください。

このご質問の場合は，少々ややこしくなりますが，
ムービークリップに変換したムービークリップに付ける識別子を，
「gazou0」，「gazou1」，「gazou2」，…，「gazou9」
としておいたとすると，
次のような感じになると思います。

タイムラインを図示すると次のような感じです。

　□　レイヤー　筆・・|○| ←スクリプト
　□　レイヤー　筆・・|●| ←ボタン

まず，メインムービー（_root）のフレームには，

-----------------------------------
// 変数gazouNum （画像番号）の初期化
var gazouNum = 0;
// 最初の画像を表示
_root.attachMovie("gazou"+gazouNum, "gazou", 0);
// 表示した画像の位置を指定
_root.gazou._x = 100;
_root.gazou._y = 50;
-----------------------------------

『戻る:▲』ボタンには，

--------------------------------------
on (release) {
// 画像番号が 0 より大きければ
if (gazouNum>0) {
// 画像番号に１を減算
gazouNum--;
} else {
// それ以外は 画像番号を 9 にする
gazouNum = 0;
}
_root.attachMovie("gazou"+gazouNum, "gazou", 0);
_root.gazou._x = 100;
_root.gazou._y = 50;
}
--------------------------------------

『進む:▼』ボタンには，
--------------------------------------
on (release) {
// 画像番号が 9 未満であれば
if (gazouNum<9) {
// 画像番号に１を加算
gazouNum++;
} else {
// それ以外は 画像番号を 9 にする
gazouNum = 9;
}
_root.attachMovie("gazou"+gazouNum, "gazou", 0);
_root.gazou._x = 100;
_root.gazou._y = 50;
}
--------------------------------------

と書けばできあがりです。
こうなって来ると，
stop()　play()　gotoAndStop()　gotoAndPlay()
だけではうまく行きませんが，
attachMovie のしくみと，簡単な if文 を考えれば済みます。

FLASHアクションスクリプト入門編
「if / if else文」
http://isvalid.jp/actionscriptLab/ASlesson/actionsctipt_if.html

// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

また，最近多いのが，
上記 ３ つの方法のように画像を Flash 内に入れておくのではなく，
外部 JPEG ファイルにして，それをロードする方法です。

Flash ヘルプ より，
loadMovie (MovieClip.loadMovie メソッド)
http://livedocs.macromedia.com/flash/8_jp/main/00002479.html

その他 Google検索：「loadMovie jpg」
http://www.google.co.jp/search?hl=ja&q=loadMovie+jpg&lr=lang_ja

この MovieClip.loadMovie を使う場合，
外部画像を，

　0.jpg，2.jpg，，3.jpg，…　，8.jpg， …

というファイル名で保存し，
それをロード表示させるムービークリップを，
画像を表示させたい箇所の左上のコーナーあたりに１つ作成して，
そのムービークリップにインスタンス名　「my_mc」 を付けた場合，
ボタンに書くスクリプトは次のような感じになると思います。

まず，フレームに書くスクリプト。

-----------------------------------
// 変数gazouNum （画像番号）の初期化
var gazouNum = 0;
// 最初の画像を表示
_root.my_mc.loadMovie(gazouNum + ".jpg");
-----------------------------------

『戻る:▲』ボタンには，

--------------------------------------
on (release) {
// 画像番号が 0 より大きければ
if (gazouNum>0) {
// 画像番号に１を減算
gazouNum--;
} else {
// それ以外は 画像番号を 9 にする
gazouNum = 0;
}
_root.my_mc.loadMovie(gazouNum + ".jpg");
}
--------------------------------------

『進む:▼』ボタンには，
--------------------------------------
on (release) {
// 画像番号が 9 未満であれば
if (gazouNum<9) {
// 画像番号に１を加算
gazouNum++;
} else {
// それ以外は 画像番号を 9 にする
gazouNum = 9;
}
_root.my_mc.loadMovie(gazouNum + ".jpg");
}
--------------------------------------

// ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

とにかく書きだすときりがありませんが，
画像をムービークリップに変換して，
そのムービークリップの x座標，y座標プロパティ を変えても良いです。
また，
そのムービークリップの _visibleプロパティ を変えて表示・非表示を切りかえても良いです。
また，
　…　…
きりがないのでこの辺で...。

最後に，
ムービークリップの基準点について↓。

「インスタンスの基準点」
http://homepage3.nifty.com/ginga-b/MX/inst_refpoint.html

お礼

回答ありがとうございます。
初心者の私には最初のprevFrame();・nextFrame();　がわかりやすそうです。
いろんな方法があるんですね。参考にさせて頂きます。
勉強させて頂きます(_　_|||)