チェックボックスのようにクリックするたびに選択・選択解除が切り替わるボタンで、選択されているボタンの番号を2行で表示したい・・・とのことだと思います。
いろいろな作り方がありますが、ボタンの選択状況を配列変数で管理し、ボタンがクリックされるたびに表示を更新してはいかがでしょう。
ボタンとの動作を組み合わせる前に、まずは2行で表示する仕組みについて考えてみましょう。
例えば、1 ~ 10 の数字の中の偶数だけを
2/4/6/
8/10
このように表示するスクリプトは、どのようになるでしょうか。
単純に考えると、1 から 10 まで for ループで順番に見ていって、ループカウンタが偶数の時に数字と仕切りの”/”を表示する文字列に追加していけば、「 2/4/6/8/10/ 」という文字列が作れそうです。偶数・奇数は、2で除算した時の余り(剰余: % 演算子で求められます)が 0 かどうかで判別できます。
しかし、これだけでは2行の表示にならない上に、最後の項目である”10”の次にも仕切り記号”/”が付いてしまいます。
この場合は、1行目の行末には”6”が、最後には”10”が必ず表示されると分かっています。
それなら、表示する文字列を作る際に「ループカウンタが 6 の時は続けて改行を追加し、更にカウンタが 10 の時を除いて”/”を入れる」という条件を付けたら、どうでしょうか。
確かに、1行目の行末である 6 の部分で改行され、最後の項目の後に”/”は付かなくなります。
表示するものが予め決まっているのなら、このような力ずくでも何とかなります。
ですが、実際のボタンの場合は、10 個のうち何番目のボタンが選ばれるか、そもそも5個全て選ばれるのかすらも分からず、1行目の行末および最後に来る数字は不定です。
そこで、もう少し柔軟に考えて、「1行目の最後に改行を挿入する」「最後の項目の後には”/”を付けない」という発想で設計してみましょう。
改行と”/”を入れる判断を表示する数字の内容そのものではなく、「一定件数を表示したら改行を入れる」「最後の項目だったら入れない」というように、変数を利用して柔軟性を持たせます。
この例では for ループのループカウンタが偶数だった場合のみ文字列に追加するのですが、ループカウンタとは別の変数を用意して、項目を追加するたびにカウントを取ります。
すると、このカウントを見ることで文字列に何件追加したのかが分かるようになります。
1行あたり3件表示するには、このカウントが3の倍数の時に改行を入れます。3の倍数であるかは、偶数・奇数の判別と同様に剰余を利用すると簡単に分かります。
最後の”/”を省略するのも同じく、”/”を追加する時に「このカウントが最大表示件数(ご質問の例では 5 )ではない場合」という条件を付ければいいわけです。
------------------------------------------------------------
表示に関する仕組みが考案できたところで、ボタンの動作と組み合わせてみましょう。
ボタンの詳しい仕様が分からないのですが、さしあたって
・ 10 個のうち5個まで選択できる
既に5個選択されている場合、6個目は選択できない
・ボタンの名前は 1 ~ 10
・選択されているボタンの番号をリアルタイムで表示する
このような仕様で考えます。
先ほどは「 1 ~ 10 の数字の中から偶数だけ」を表示する例を考えました。
今回はこれを応用して、「 10 個の変数を見て、ある特定の値が入っている場合に」「ボタンの名前」を表示する、と考えます。
************************************
まずはボタンの選択状況の管理から。
次のように考えます。
10 個のボタンに対応する変数を 10 個、用意します。
この変数には、ボタンが選択されている場合は true 、選択されていない場合は false を入れると決めます。
ボタンがクリックされた時、対応する変数の中身が false であればそのボタンは”選択されていない”ということなので、選択された証として変数の値を true に書き換えます。
逆に、変数の中身が true だった場合は”選択されていた”ということですから、選択を解除したものとして false に書き換えます。
これだけでは 10 個のボタン全てを選択することも可能です。
”5個まで”と制限を設けるには、選択されたボタンの数を把握しておく必要があります。
この動作は次のように考えます。
選択されたボタンの数を数えるための変数を用意して、選択されるたびにカウントを増やします。
あるボタンがクリックされた時、まず、そのボタンの選択状況を調べます。
基本的に選択されていない場合は選択できるのですが、この時にもう1つ、”選択されているボタンの数”についても調べます。既に5つ選択されている時は選択できません。
選択できないと判断される場合は、選択状況と選択された数の更新は行いません。
画面でクリックされても選択状況に関する変数を書き換えなければ、スクリプトの上では”選択されていないもの”と見なすことができます。
クリックされたボタンが現在選択されているものだった場合は逆に、選択は解除されます。
選択が解除された場合は、選択できるボタンの数に1つ空きができることになりますから、選択されているボタンの数を減らし、別のボタンを選択できるようにします。
************************************
選択状況を表示する時は、選択状況を管理する変数全部を片っぱしから調べて、変数の内容が true だった場合にのみ、ボタンの名前を文字列に追加して表示します。
とすると、選択状況を管理する変数は規則性のない名前を付けると不便なので、配列変数で用意します。
配列変数は同じ名前で管理番号だけが異なる、複数の変数の集まりです。
管理番号は 0 からの連番で付いており、for ループで順番に内容を見ていくことができます。
今回は詳しくは説明できませんが。
ActionScript の配列変数は、仕切りを作って複数の情報を管理できるようになっています。
仕切りを”フィールド”といい、文法の範囲内で好きな名前を付けることができます。
例えば、選択状況を sentaku_tbl という配列変数で管理し、この中にボタンの名前と選択状況の2つの仕切りを作るとします。フィールド名をそれぞれ btn_name と select という名前を付けたとすると、
sentaku_tbl[ 0 ].btn_name
や
sentaku_tbl[ 0 ].select
というように、同じ sentaku_tbl[ 0 ] の名前でも同時に2つの情報を管理することができます。
配列変数の管理番号は必ず 0 から始まります。
ボタンの番号(画面に表示する番号など)が 1 から始まったり、数字ではない名前を表示したい場合など、配列変数の管理番号とボタンの名前につながりがない時は、配列変数にボタンの名前を同時に記録しておくと便利です。
************************************
スクリプトの一例です。
ステージにボタンとして使うムービークリップが 10 個と、変数 sentaku の値を表示するダイナミックテキストのテキストフィールドがあるとします。
各ボタンのムービークリップは、フレーム1に選択されていない状態の絵、フレーム2に選択済みの絵が描かれているものとします。
このスクリプトはメインのタイムラインのフレームに記述してください。
(↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください)
/******************************************************/
/////////////////////////////////////////////////
//初期設定
/////////////////////////////////////////////////
//ボタンの総数
btn_max = 10;
//選択可能なボタンの数(5件まで)と
//現在選択されているボタンの数
item_max = 5;
selected_cnt = 0;
//1行に表示する件数と
//表示した件数を数えるカウンタ(改行処理に使用)
col_max = 3;
disp_cnt = 0;
//ボタンの選択状況のテーブル(配列変数)
//フィールド:
// btn_name:表示されるボタンの名前
// select :選択されている場合true、それ以外はfalse
sentaku_tbl = new Array();
//ボタンの名前(1~10)と選択状況(最初は全てfalse)を入れておく
for( i = 0 ; i < btn_max ; i++ )
{
sentaku_tbl[ i ] = { btn_name : ( i + 1 ) , select : false };
}
/////////////////////////////////////////////////
//ボタンの選択処理および選択状況を表示する関数
//引数:
// btn_no :ボタンの管理番号(テーブルの参照位置)
// btn_ref:ボタンのムービークリップの参照
//戻り値:なし
/////////////////////////////////////////////////
function Select_Work( btn_no , btn_ref )
{
var i , sentaku_status;
//---------- ボタンの選択処理 ----------
//選択状況を取得
sentaku_status = sentaku_tbl[ btn_no ].select;
//現在、選択されていないボタンの場合:
if( sentaku_status == false )
{
//選択可能な数未満であれば選択の処理
if( selected_cnt < item_max )
{
//選択されたことを記録し、選択されたボタンの数を更新する
sentaku_tbl[ btn_no ].select = true;
selected_cnt++;
//ムービークリップを”選択済み”のフレームに切り替える
btn_ref.gotoAndStop( 2 );
}
}
//現在、選択されているボタンの場合:
else
{
//選択を解除したことを記録し、選択されたボタンの数を更新する
sentaku_tbl[ btn_no ].select = false;
selected_cnt--;
//ムービークリップを”選択可能”のフレームに切り替える
btn_ref.gotoAndStop( 1 );
}
//---------- 選択状況の表示処理 ----------
//表示内容をリセット
sentaku = "";
//テーブルを見ながら選択状況を表示する
for( i = 0 , disp_cnt = 0 ; i < sentaku_tbl.length ; i++ )
{
//選択されている場合のみ表示
if( sentaku_tbl[ i ].select == true )
{
//表示する文字列にボタンの名前を追加し、
//表示した件数を更新
sentaku += sentaku_tbl[ i ].btn_name;
disp_cnt++;
//仕切り記号”/”を挿入
//ただし、最後の項目の後には入れない
if( disp_cnt != selected_cnt )
{
sentaku += "/";
}
//1行分の件数を表示するごとに改行を挿入
if( disp_cnt % col_max == 0 )
{
sentaku += "\n";
}
}
}
}
/******************************************************/
各ボタンがクリックされた時の処理は、配列変数を見る番号とボタンのインスタンスが異なるだけで、情報の書き換えや表示処理は全く同じです。
そこで、選択や解除の処理と選択状況を表示する関数を _root 階層に用意し、各ボタンからはこの関数を呼び出すだけにします。
違う部分である配列変数の番号とボタンのインスタンスについては、この関数を呼び出す際に引数(パラメータ)として渡します。
続けて、各ボタンのムービークリップのインスタンスにそれぞれ、次のように記述してください。
/******************************************************/
on(release)
{
//ボタンの処理関数を呼び出す
_parent.Select_Work( 0 , this );
}
/******************************************************/
↑これは1番目(最初)のボタンの例です。
2番目のボタンは 0 の部分に 1 、3番目のボタンは 2 ・・・というように、関数の第1引数に渡す番号を連番で変えてください。
ある規則に従って情報を入れ、表を見るように使う配列変数を”テーブル”といいます。
今回は、配列変数の 0 番に1番目のボタンの名前と選択状況の情報を、以下、1 番に2番目のボタン、2 番に3番目のボタン・・・というように情報を入れて、ボタンに応じた番号の表=配列変数を見ることでボタンの名前と選択状況を取得します。
Select_Work 関数を呼び出す際の第1引数が、表を見る位置である配列変数の管理番号の指定になっています。
この番号を間違えると正しく情報を取り出せなくなるので、ご注意ください。
ご質問文を見る限りでは、ボタンのムービークリップが何かの入れ子になっているようですが。
この作例では、呼び出す Select_Work 関数はメインのタイムライン(通常は _root )にあります。
制作中の作品にこのスクリプトを組み込む場合は、ターゲットパスの誤りにもご注意ください。
------------------------------------------------------------
紙面の都合上、1つ1つを詳しくは解説できません。
スクリプトの内容につきましては、コメントをご参考になさってください。
お使いの Flash のバージョンが分からないのですが。
ダイナミックテキストに変数を指定して表示する方法は、テキストフィールドにインスタンス名を付けられるようになった Flash Player 6 (作成ツールは Flash MX 以降)からは旧式になりました。
それから、バージョンによっては、インスタンス名を工夫してタイムラインでクリックした時の動作等をまとめて定義することもできます。
この話はあちこちの解説サイトなどで取り上げられていますし、このサイトでも度々出ています。興味がありましたら、調べてみてください。
補足
早々のご返答ありがとうございます! +=にした事で問題なく表示されました。 ありがとうございます。 ですが、それだけでは 1/2/3/ 4/5 といったように、 上段には3つ下段には2つといった記述のされかたは出来ず そのまま一列で、おさまらずにはみ出して文字が途中で切れてしまいます; もうひとつお伝えし忘れていたのですが、 ボタンを再び押すと(例えば”1”を再び押した場合”1”のみ消える) といった設定にしたいと思っています。 また、5つまでの表示の仕方も教えていただければ幸いです。 よろしくお願いいたします。