ボタンの動作について

質問

現状、Flashに全くついて行けません。ついて行けないなりに挑戦中です。

一枚の画像の上に、ボタンを設置していろんな動作をさせたいと思っています。そこで、
□□□　　ＡＢＣ
□□□　　ＤＥＦ
□□□　　ＧＨＩ
一枚の画像を分割（便宜上ＡＢＣ、、、とします）した上にそれぞれボタンが設置してありマウスが通過したり、クリックしたときに反応させる（アップの時は透明、オーバー、ダウンで色が変わる）ことまではできたのですが、
たとえば、Ａをクリックするとそのままの状態を維持（押し下げたままの状態）して、ＢをクリックするとＡは元に戻ってＢが押し下げたままの状態になるようにするにはどうすればいいのでしょうか。

こんな場合はボタン以外がいいよというようなアドバイスでも結構ですので、よろしくお願いします。

回答No.4

BlurFiltan · ベストアンサー

＃１～３ です。

組み合わせるのでしたら

　　こんなの
　□□■□□
　□□■□□
　■■□■■
　□□■□□
　□□■□□

　　　　と

　　こんなの　　　　　 こんなの
　□□□□□ 実際は→■
　□□□□□
　□□■□□
　□□□□□
　□□□□□

を作成すればいいのではないでしょうか。
こんなの ■ の方にはマスクは要りません。

十字塗りとは別のインスタンス名を付けて
on(release) のときにボタンの座標のところで表示させれば良いですね。

お礼

うまく動作するようになりました。本当にありがとうございます。

また、行き詰まってしまったら質問すると思いますので、よろしくお願いします。

回答No.3

BlurFiltan

＃１ ＆ ＃２ です。

> オーバーとダウン時の表示方法が
> Ａの領域ならＡの行と列（ＢならＢの行と列、、、）
> ■■■
> ■
> ■
> という風にしたいのです。

> 場所を指定するのにＨの１５を探す場合、
> 列と行をたどるときにハイライトした方がわかりやすいかと考えて

それなら，最初から複雑に考える必要はありませんよ。

十字の塗りを地図上でマウス追従させればいいわけです。
（発想の転換みたいなもの？）

ただし，
滑らかにマウス追従するのではなくてボタンの座標に合わせてカクカクと追従させる。
さらにただし，
マウスがボタンの上にないときは十字の塗りは見えない。
さらにさらにただし，
ボタンへのロールオーバーやマウスダウンによって色を変える。

それだけのことです。
スクリプトは＃１のものより簡単です。

---------------------------------

ボタンは何個でも良いですが，
仮に ３×３＝９ 個として説明します。

まずボタンですが，
これは this などが使いやすいですし，透明な塗り１枚だけで良いので，
やはりムービークリップで作成する方が良いと思います。

ステージ上に，地図を ○分割 する(９分割する)大きさの透明な塗りを描いてムービークリップに変換します。
このムービークリップに変換するときに基準点に注意してください。
基準点は中央（左右上下の真ん中）にチェックを入れてムービークリップに変換します。

ボタンムービークリップの用意はこれだけです。
ボタンムービークリップの中のタイムラインは触りません。

地図ですが，
これはボタンの数が９個であるとその９個分の図の範囲で見えるということになります。

　図図図
　図図図
　図図図

十字の塗りは次のように作成します。

　□□■□□
　□□■□□
　■■■■■
　□□■□□
　□□■□□

↑■が透明な塗りです。
□は，このページに回答する際，レイアウトがくずれないように入れただけで関係ありません。
何もない部分です。

大きさは図の通り，
ボタンを １×１ の大きさだとすると ５×５ の大きさになります。
この ５ は ３×２－１ から出る ５ です。

この十字の塗りもムービークリップに変換しますが，
このときの基準点も中央にします。
つまり縦帯と横帯が交差した中央点に基準点が来るようにします。

この十字の帯入りムービークリップ内のタイムラインの編集に入ります。

ムービークリップ内のフレームは３フレームにして，
３つのフレームともキーフレームに変換して，
フレーム２の十字の帯は「オーバー時」の色に塗りかえます。
フレーム３の十字の帯は「ダウン時」の色に塗りかえます。

そして，
ドキュメントの編集に戻って，
この十字の帯のムービークリップにはインスタンス名を付けます。
この説明では，
「cross_mc」というインスタンス名を付けることにしておきます。

また，
この「cross_mc」は最初フレーム1で止まってくれなければなりませんから，
このムービークリップ自体に次のように書いておきます。

onClipEvent (load) {
this.stop();
}

_root のレイヤー構造ですが，
大まかには次のようにするのが良いと思います。

　レイヤー　・・・・|●| ←ボタン９つ
　レイヤー　・・・・|●| ←「cross_mc」にかけるマスク
　　レイヤー・・・・|●| ←「cross_mc」(十字の塗り)
　レイヤー　・・・・|●| ←地図

マスクは「cross_mc」の上のレイヤーに，
地図と同じ大きさの塗りの四角を描いて，
そのレイヤーを選択して「右クリック」→マスクにチェックを入れる
で「cross_mc」のレイヤーにマスクがかかりますから，
「cross_mc」はその部分だけしか見えなくなります。

９つの透明塗りのボタンムービークリップですが，これは簡単。

-------------------------------------
// ロールオーバーしたとき
on (rollOver) {
// cross_mc をフレーム2 に進めて停止
_root.cross_mc.gotoAndStop(2);
// cross_mc の座標をこのムービークリップの座標に合わせる
_root.cross_mc._x = this._x;
_root.cross_mc._y = this._y;
}

// 押したとき
on (press) {
// cross_mc をフレーム3 に進めて停止
_root.cross_mc.gotoAndStop(3);
}

// ロールアウトしたとき
on (rollOut) {
// cross_mc をフレーム1 に進めて停止
_root.cross_mc.gotoAndStop(1);
}
-------------------------------------

と，全ての透明ボタンムービークリップに書けば良いだけです。

クリックしたときにそこだけ色を変えたい場合などは，
「cross_mc」内のタイムラインを４フレームにして，
その フレーム４ の塗りを次のように，
真ん中だけ違う色にして，

　□□■□□
　□□■□□
　■■回■■
　□□■□□
　□□■□□

ボタンムービークリップのスクリプトに，
次のようなスクリプトを付け足せば良いですね。

// クリックしたとき
on (release) {
// cross_mc をフレーム4 に進めて停止
_root.cross_mc.gotoAndStop(4);
}

その辺りは適当にアレンジしてくだされば良いと思います。

補足

またまたありがとうございます。なんというか、BlurFiltanさんのような発想ができません。

ＡＮｏ．１とＡＮｏ．３を足したもの（クリックした後他がクリックされるまではそのままの状態で、そして十字のハイライト）が出来ないかと試行錯誤しましたが、全く歯が立ちません。

よろしければ、またアドバイスお願いします。

回答No.2

BlurFiltan

＃１です。

> マウスの反応範囲は各ＡＢＣ、、、なのですが、
> オーバーとダウン時の表示方法がＡの領域なら
> Ａの行と列（ＢならＢの行と列、、、）

ひょっとして「ライツアウト」のようなものを作成しようとされているのでしょうか？
ライツアウトとはこんな感じのゲームですが↓。

「ライツアウトだよっ」
http://sweetdrop.net/lights/lights.html

コレ全体の作成方法やActionScript全体の詳しい説明などはできませんが，
簡易的な動きだけは書いたことがあります↓。

QNo.3453699 二次元配列
http://okwave.jp/qa3453699.html

↑＃６ でコピペだけでできる「簡易ライツアウト」のようなものを作成しています。
フレーム1にコピペしてパブリッシュするだけのものです。

// 縦の行数（row数）を設定 （★2～10で変更可）
tate = 10;
// 横の列数（column数）を設定 （★2～10で変更可）
yoko = 10;

の部分を

// 縦の行数（row数）を設定 （★2～10で変更可）
tate = 3;
// 横の列数（column数）を設定 （★2～10で変更可）
yoko = 3;

に変えれば動き自体は近い物ができるかもしれません。

もしこれだと，
全く違う方向から考えなければなりませんよ。
レベルもかなり違うような...。

よろしければ参考にしてみてください。

補足

＞＞ひょっとして「ライツアウト」のようなものを作成しようとされているのでしょうか？

いいえ違います。地図のようなものを考えています。とりあえず3＊3でできれば、20＊20くらいでサイズを大きくしても出来るのではと考えて、出来そうなところから質問していました。

たとえば、ＡからＴの列と１から２０の行があるとします。
　ＡＢ－－Ｔ
１□□－－□
２□□－－□
｜□□－－□
｜□□－－□
20□□－－□
場所を指定するのにＨの１５を探す場合、列と行をたどるときにハイライトした方がわかりやすいかと考えてＡＮｏ．１の補足のような質問をしました。

回答No.1

BlurFiltan

> Flashに全くついて行けません。

全くついて行けていない割には方向性は合っていると思いますよ。
また，ご質問内容も手に取るようにわかります。
すばらしい。

> こんな場合はボタン以外がいいよという…

正解です！

しかし...，
Flashのバージョンを書かれていらっしゃいませんね。
Flash はバージョンアップを重ねるごとに，
時代のニーズに合わせて劇的進化を遂げる 生きたソフト ですから，
ActionScript や ムービーの構造自体をバージョンによって変える必要も出てきますし，
古いバージョンでは いくら ActionScript や ムービーの構造で努力してもできないこともあります。

勝手に，FlashMX以上（MX，MX2004，8，CS3）をお使いであるものとして，
ActionScript 2.0以下を使用し，FlashPlayer6 以上の SWF をパブリッシュするものとして回答します。

　-　-　-　-　-　-　-　-　-　-　-

ご質問されているボタンは，
簡単に言うと「トグルボタン」とか「ラジオボタン」と呼ばれている物の一種です。

そのボタン機能をはたすものですがこれはムービークリップで作成します。

以下，作成方法や考え方を，"順を追って" 説明します。

まず，
「アップの時は透明」の塗りをステージ上に描いて，塗りをムービークリップに変換します。

そのムービークリップをダブルクリックしてムービークリップ内のタイムラインの編集に入り，
フレーム2 には 「オーバーの時の色」の塗り，
フレーム3 には 「ダウンの時の色」の塗り をそれぞれ描きます。

つまり
ムービークリップの中は次のように３フレームにするということです。

　レイヤー　・・・・|●|●|●|

　フレーム1…透明な塗り
　フレーム2…オーバー時の塗り
　フレーム3…ダウン時の塗り

そして「編集」→「ドキュメントの編集」などでメインムービーの編集に戻ります。

ここまで書けばすること（内容）はわかると思いますが，
　普通のときはフレーム1で停止
　オーバー時はフレーム2で停止
　ダウン時はフレーム3で停止
　クリック(release)時もフレーム3で停止
というものを作成してしまえばいいわけです。

まずこの１つのムービークリップに対してのみの動作を考えます。
この場合のスクリプトは次のようになります。

ステージ上のムービークリップを選択し，
ステージ下のアクションパネルを表示させて，
ムービークリップ自体に書くスクリプトです（コピペ可能）。

--------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
// (フレーム1で) 停止
this.stop();
// 変数 flag の値を false にする(フラグを倒す)
flag = false;
}

// このムービークリップにロールオーバーしたとき
on (rollOver) {
// フレーム2 で停止
this.gotoAndStop(2);
}

// このムービークリップを押したとき
on (press) {
// フレーム3 で停止
this.gotoAndStop(3);
}

// このムービークリップをクリックしたとき
on (release) {
// このムービークリップの flag を true にする(フラグを立てる)
flag = true;
}

// このムービークリップからロールアウトしたとき
on (rollOut) {
// もし flag の値が true であれば
if (flag) {
// フレーム3 で停止
this.gotoAndStop(3);
} else {
// それ以外は フレーム1 で停止
this.gotoAndStop(1);
}
}

// このムービークリップを外で放したとき
on (releaseOutside) {
// もし flag の値が false であれば
if (!flag) {
// フレーム1 で停止
this.gotoAndStop(1);
}
}
--------------------------------

ムービークリップ１つのみを考えた場合はこれでできていると思います。
変数 flag というものが登場していますが，
これは私が勝手に決めた変数名で実際は何でもかまいません。

フラグ (flag)とは： - IT用語辞典バイナリ
http://www.sophia-it.com/content/%E3%83%95%E3%83%A9%E3%82%B0

例えば 「ボタンからロールアウトするとき」，
もしクリックされていなければ「アップ状態」に戻す必要がありますし，
すでにクリックされていれば「ダウン状態」に戻す必要があります。

クリックされたかされていないかを記録しておく籏印です。

またその判定には if文else if文を使用しています。

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

次に，他のムービークリップとの連動を考えます。

他のムービークリップに命令を与えるときは，
「どのムービークリップに命令しているのか」をハッキリさせる必要があるので，
ムービークリップにインスタンス名を付ける必要があります。

上で作成したムービークリップをコピペして９つにします。

　□□□
　□□□
　□□□

そしてインスタンス名を付けます。
インスタンス名は何でも良いのですが，
「文字列 & 連番数字」 というインスタンス名にするのが何かと都合が良いです。

この説明では，
「btnMC1」， 「btnMC2」，…， 「btnMC9」というインスタンス名を付けることにしておきます。

　btnMC1　btnMC2　btnMC3
　btnMC4　btnMC5　btnMC6
　btnMC7　btnMC8　btnMC9

「btnMC1」と命名したボタンムービークリップには，
次のように書きます（コピペ可能）。
（もし上で書いていたら on (release){ } 部分だけを変えます。）

----------------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
// (フレーム1で) 停止
this.stop();
// 変数 flag の値を false にする(フラグを倒す)
flag = false;
}

// このムービークリップにロールオーバーしたとき
on (rollOver) {
// フレーム2 で停止
this.gotoAndStop(2);
}

// このムービークリップを押したとき
on (press) {
// フレーム3 で停止
this.gotoAndStop(3);
}

// このムービークリップをクリックしたとき
on (release) {
// 親階層の btnMC2 の flag を false にする
_parent.btnMC2.flag = false;
// 親階層の btnMC2 をフレーム1で停止
_parent.btnMC2.gotoAndStop(1);
// 親階層の btnMC3 の flag を false にする
_parent.btnMC3.flag = false;
// 親階層の btnMC3 をフレーム1で停止
_parent.btnMC3.gotoAndStop(1);
// 親階層の btnMC4 の flag を false にする
_parent.btnMC4.flag = false;
// 親階層の btnMC4 をフレーム1で停止
_parent.btnMC4.gotoAndStop(1);
// 親階層の btnMC5flag を false にする
_parent.btnMC5.flag = false;
// 親階層の btnMC5 をフレーム1で停止
_parent.btnMC5.gotoAndStop(1);
// 親階層の btnMC6 の flag を false にする
_parent.btnMC6.flag = false;
// 親階層の btnMC6 をフレーム1で停止
_parent.btnMC6.gotoAndStop(1);
// 親階層の btnMC7 の flag を false にする
_parent.btnMC7.flag = false;
// 親階層の btnMC7 をフレーム1で停止
_parent.btnMC7.gotoAndStop(1);
// 親階層の btnMC8 の flag を false にする
_parent.btnMC8.flag = false;
// 親階層の btnMC8 をフレーム1で停止
_parent.btnMC8.gotoAndStop(1);
// 親階層の btnMC9 の flag を false にする
_parent.btnMC9.flag = false;
// 親階層の btnMC9 をフレーム1で停止
_parent.btnMC9.gotoAndStop(1);
// このムービークリップの flag は true にする(フラグを立てる)
flag = true;
// このムービークリップはフレーム3 で停止
this.gotoAndStop(3);
}

// このムービークリップからロールアウトしたとき
on (rollOut) {
// もし flag の値が true であれば
if (flag) {
// フレーム3 で停止
this.gotoAndStop(3);
} else {
// それ以外は フレーム1 で停止
this.gotoAndStop(1);
}
}

// このムービークリップを外で放したとき
on (releaseOutside) {
// もし flag の値が false であれば
if (!flag) {
// フレーム1 で停止
this.gotoAndStop(1);
}
}
---------------------------------------

「btnMC2」～ 「btnMC9」も同様に

　// このムービークリップをクリックしたとき
　on (release) { … }

の … の部分をそれぞれ考えて書いて行けば良いということになります。

ここまでが大切です。
「その通りの原理で動くなあ。」と理解＆実感してください。

しかし，上のように１つ１つのムービークリップに対して，
それぞれの動きを考えるのも面倒です。
また，

　// 親階層の btnMC2 の flag を false にする
　_parent.btnMC2.flag = false;
　// 親階層の btnMC2 をフレーム1で停止
　_parent.btnMC2.gotoAndStop(1);
　　　～略～
　// 親階層の btnMC9 の flag を false にする
　_parent.btnMC9.flag = false;
　// 親階層の btnMC9 をフレーム1で停止
　_parent.btnMC9.gotoAndStop(1);

のようにほとんど同じことを書き続けるのも大変ですしミスしやすいです。

そこで，ActionScript を技巧的に進化させます。
進化させると言っても書き方をかえるだけで，内容や考え方自体は上と同じです。

次のスクリプトであると，
「btnMC1」～ 「btnMC9」すべてに同じスクリプトをコピペするだけで使用できます。
また，スクリプト自体も短くなっています。

---------------------------------------
// このムービークリップが表示されたとき
onClipEvent (load) {
// (フレーム1で) 停止
this.stop();
// 変数 flag の値を false にする(フラグを倒す)
flag = false;
}

// このムービークリップにロールオーバーしたとき
on (rollOver) {
// フレーム2 で停止
this.gotoAndStop(2);
}

// このムービークリップを押したとき
on (press) {
// フレーム3 で停止
this.gotoAndStop(3);
}

// このムービークリップをクリックしたとき
on (release) {
// 変数 i を 1～9 まで加算しながらループ
for (i=1; i<=9; i++) {
// 親階層の btnMC? の flag を false にする
_parent["btnMC"+i].flag = false;
// 親階層の btnMC? をフレーム1で停止
_parent["btnMC"+i].gotoAndStop(1);
}
// このムービークリップの flag は true にする(フラグを立てる)
flag = true;
// このムービークリップはフレーム3 で停止
this.gotoAndStop(3);
}

// このムービークリップからロールアウトしたとき
on (rollOut) {
// もし flag の値が true であれば
if (flag) {
// フレーム3 で停止
this.gotoAndStop(3);
} else {
// それ以外は フレーム1 で停止
this.gotoAndStop(1);
}
}

// このムービークリップを外で放したとき
on (releaseOutside) {
// もし flag の値が false であれば
if (!flag) {
// フレーム1 で停止
this.gotoAndStop(1);
}
}
---------------------------------------

for文 と 配列アクセス演算子（[ ]） を使ってスクリプトをシンプルにしています。

「繰り返し文 for - FLASHアクションスクリプト入門編」
http://isvalid.jp/actionscriptLab/ASlesson/actionsctipt_for.html

Google検索「配列アクセス演算子」
http://www.google.co.jp/search?q=%E9%85%8D%E5%88%97%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E6%BC%94%E7%AE%97%E5%AD%90

以上をまとめると，

　１ ボタンは３フレームのムービークリップで作成する
　２ ムービークリップには「btnMC1」～ 「btnMC9」の
　　インスタンス名を付ける
　３ 最後のスクリプトを全てのムービークリップにコピペする

ということです。

しかし，
これでも１つ１つのムービークリップに全く同じ事を書き続けるのは変ですし効率が悪いです。

ですからさらにこれを発展させて，
フレームに9つ分のスクリプトをまとめて書いたり，
さらにさらに発展させて
MovieClipクラスを継承するカスタムクラスを作成する方法などもあります。
（UIコンポーネントのラジオボタンではこのMovieClipクラスを継承するカスタムクラスが使われています。）

しかしそこまでやっているとさらに話が長くなる上，
自力でスクリプトを変更することが難しくなると思うので，
一応は実用で使える範囲内である，上のスクリプトまででおいておきます。

コピペするのは面倒ですが一応は実用で使えますよね。
また フラグ や if文 や for文 や 配列アクセス演算子 も色々な場所で使えると思います。

補足

すばらしい回答ありがとうございます。感動しました。

＞＞Flashのバージョンを書かれていらっしゃいませんね。

失礼しました。Flashのバージョンは8です。

書かれていることの理解にはまだ至っておりませんが、次のステップに向けて改造しようと思うのですがうまくいきません。
それは、
□□□　　ＡＢＣ
□□□　　ＤＥＦ
□□□　　ＧＨＩ
マウスの反応範囲は各ＡＢＣ、、、なのですが、オーバーとダウン時の表示方法がＡの領域ならＡの行と列（ＢならＢの行と列、、、）
■■■
■
■
という風にしたいのです。
自分なりに考えて　this.gotoAndStop(2);とthis.gotoAndStop(3);　の部分をリンケージというのを使って、　this.attachMovie("btn","a",0,{_x:0,_y:0});　（識別子をbtnシンボル名をabc、、）としましたが、ブリンクしてだめでした。それならと、オーバーとダウン時の画像自体を変えてみましたがやはりだめでした。

創造力のなさを感じます。よろしければアドバイスお願いします。