ボタンクリックでスライドするメニューについて

質問

質問させていただきます。
---------
■制御ボタン：2つ
△配置ボタン：4つ（幅各130px）
画像：ボタンとリンクした画像4枚を配置ボタンクリックで切り替え
---------
左右に制御ボタンを配置し、
その間を、130pxずつ右または左にスライドして移動する
ボタンメニューを作成したいと考えております。

↓イメージです。（■：制御ボタン　△：画像表示用ボタン
左の■ボタンを押すと△が左に130px分移動　右も同様に右に130px分移動する）
■△△△△■
各△ボタンを押すと、メニューの上の領域に
ボタンに対応した画像が表示されます。

Flash初心者のため、一からスクリプトを書くことが出来ず
同じ動きをするサンプル、またはカスタマイズ前提の参考サイトを
探しておりますが
カーソルで△が動くものはあるものの、ボタンで動くものを見つけることが出来ずにいます。

参考サイトをご存知の方、または作成方法をご教示頂ける方が居られましたら何卒よろしくお願いします。
《環境　WinXP　Flash8》

回答No.1

BlurFiltan · ベストアンサー

書かれていらっしゃる通りのものだと
次のように作成するのが１つの方法です。

まず，スライドする４つのボタンをすべてまとめて選択して，
１つのムービークリップに変換します。

その１つのムービークリップを選択して，
プロパティパネルよりインスタンス名を付けます。
例えば 「btn_mc」 (意味合い：ボタン_ムービークリップ) というインスタンス名を付けます。

その 「btn_mc」 を左に動かすボタンには
例えば 「L_btn」 というインスタンス名を付けます。

また 「btn_mc」 を右に動かすボタンには
例えば 「R_btn」 というインスタンス名を付けます。

レイアウト例は 【下の図】↓ を参考のこと。

階層構造を書くと次のようになります。

　_root（シーン 1 などメインのタイムライン）
　　　├ L_btn
　　　├ R_btn
　　　└ btn_mc
　　　　　　├ ボタン
　　　　　　├ ボタン
　　　　　　├ ボタン
　　　　　　└ ボタン

そして，
それらのインスタンスがあるフレームに次のように書けば出来上がりです。

------------------------------
// L_btn をクリックしたときに実行
L_btn.onRelease = function() {
// btn_mc の x座標 を左に 30px 移動
btn_mc._x -= 130;
};

// R_btn をクリックしたときに実行
R_btn.onRelease = function() {
// btn_mc の x座標 を右に 30px 移動
btn_mc._x += 130;
};
-----------------------------

非常に簡単。
そのままをコーディングしただけです。

また，「スライドさせる」と言うのですから，
次のように変更しても良いと思います。

-----------------------------
// 変数 mcX に btn_mc の x座標を保存
mcX = btn_mc._x;

// 1フレーム進む時間毎に毎回実行
btn_mc.onEnterFrame = function(){
// この btn_mc の x座標を mcX に 2/10 の割合で近づける
this._x += (mcX-this._x)*2/10;
}

// L_btn をクリックしたときに実行
L_btn.onRelease = function() {
// 変数 mcX の値にから 30 を減算
mcX -= 130;
};

// R_btn をクリックしたときに実行
R_btn.onRelease = function() {
// 変数 mcX の値にから 30 を加算
mcX += 130;
};
-----------------------------

ほぼ質問で書かれた内容と一致すると思います。

実際に簡易的なものを別に作成してみて，
上に書いたとおりやってみればわかりますが，
おそらくコレでは行けてませんよ。。。

Flash作成やコーディング（ActionScriptをコードとして書くこと）の前に，
おそらく考えが不十分だと思います。
つまり「具体的なイメージが不完全である」か，
もしくは「具体的なイメージを書いていない」ということです。

--- --- ---

質問内容ではなく，次の段階も少し書かれていらっしゃいますね。

> ボタンに対応した画像が表示されます。

ご質問内容ではないの，で今回の件とは全く関係がありませんが，
これも具体的なイメージが欠けています。

「ボタンに対応した画像 とは どのボタン？」
という疑問が湧きます。
ボタンは４つもあるのですからどのボタンかわかりませんよね。

その他，
「画像を表示する手段」も具体的に考える必要があるでしょう。

お礼

BlurFiltan様

質問させて頂いておりましたが、自己解決致しました。
アドバイス本当にありがとうございました。

補足

BlurFiltan様

画像を加えてのご説明、ならびに
説明不足の中での的確なアドバイスを誠にありがとうございます。
実際に作成しました所、自分が想像していた通りの動きをしておりました。
ソース等をよく確認し、今後の勉強に努めたいと思います。

また、質問になり大変申し訳ございませんが
以下の場合、どのようにスクリプトを変更したらよいのか
教えていただけますでしょうか。

BlurFiltan様の画像で説明させていただきますと
L_btn、R_btnを押すと、btn_mcがループして表示され、
（btn0とbtn3が接続している様なイメージ）
さらに、各btn0～btn3を押すと
ボタン上部にそれぞれ違ったイメージ画像が表示されるFlashを作成
しようと考えております。
このループの部分をどのように作成すればいいのか、
様々なサイトを調べましたが、わからずにいます。

助言を頂ければ幸いです。