ラジオボタンの作り方

Question

Flash8とwinXPを利用しています。
ラジオボタンについて教えてください。

《A》《B》《C》３つのムービークリップを作りました。
ラジオボタン(1)ALL　(2)A　(3)B　(4)C　の４つを作り、false・trueを使用して
　(1)をクリックすると　A・B・C　全部が表示
　(2)をクリックすると　A　のみ表示
　(3)をクリックすると　B　のみ表示
　(4)をクリックすると　C　のみ表示
という画面を作りたいと思っています。
【チェックボタン】では作成できたのですが、【ラジオボタン】の "Group"？　がよく分からなくてうまくゆきません。

初歩的なことだと思うのですが注意点等を含めて、教えてください。

DPE · Accepted Answer

レイヤーの構成が

　レイヤー
　【フォルダ】
　　　├ムービークリップ
　　　└ムービークリップ

↑このようになっているムービークリップがステージにいくつかあり、それぞれのムービークリップ内のフォルダごと表示・非表示を切り替える、という話ではないかと思ったので＃３の作例をご紹介したのですが。
そうではなく、メインのタイムライン（ムービー）のレイヤー構成が

　【フォルダＡ】
　　　├ムービークリップ《Ａ》
　　　└ムービークリップ《Ｘ》
　【フォルダＢ】
　　　├ムービークリップ《Ｂ》
　　　└ムービークリップ《Ｙ》

このようになっていて、【フォルダＡ】や【フォルダＢ】に含まれるレイヤーごと表示・非表示を切り替えたいとのことでしょうか？


＃３にも書きましたように、レイヤーはムービーの制作時に作業をしやすくするものであって、スクリプトでは操作できません。
スクリプトで表示・非表示を切り替えたり、移動や拡大などの変形を加えたい時はムービークリップを利用します。
例えば、【フォルダＡ】に含まれるレイヤーの表示を操作したいのであれば、【フォルダＡ】と同じ内容のムービークリップシンボルを作ります。

ムービークリップもメインのタイムラインと同様に、レイヤーを利用することができます。
メインのタイムラインにあるレイヤーフォルダの内容を１つの独立したムービークリップシンボルにまとめ、メインのタイムラインにはこれのインスタンスを置いてスクリプトで制御することが、最も確実ではないかと思います。
シンボルを複製して簡単に・・・というわけにはいきませんが、フレームのコピーと複数フレームの編集機能を使うと少しはラクにシンボルに移すことができます。

１つのレイヤーフォルダの内容を１つのシンボルにしてインスタンスをステージで扱うのであれば、ステージには３つのムービークリップが並んでいるだけの話になりますから、＃１の要領で表示を切り替えられるようになります。

-------------------------------------------------------------

表示を切り替えたいレイヤーフォルダのレイヤーに登場するものが全てムービークリップだとすると、enterFrame イベントでラジオボタンの選択状況を監視して表示を切り替えることもできます。

これは、次のように考えます。

今後登場する予定のムービークリップも含めて、操作するムービークリップの名前を全て配列変数に登録しておきます。
enterFrame イベントを利用してラジオボタンの選択状況を常時監視し、選択されたボタンに応じて、この配列変数を見ながらムービークリップの _visible プロパティを書き換えます。
ActionScript では、存在しないムービークリップに対して指示を出しても何も起こりません。
まあ、こういうことをアテにする作り方は安全・確実とは言えないのですが、１つの方法としてご紹介します。

ただし、フレームレート分の１秒ごとに全ムービークリップの _visible プロパティを書き換える処理が必ず行われるために、対象となるムービークリップの数が多いと処理が重くなる可能性もあります。
トゥイーンを利用しているムービークリップは、同じ名前を付けておくとキーフレームが変わっても同じインスタンスと見なされますが、１つでも名前を間違えると違うものとして扱われますのでご注意ください。

************************

ActionScript では、”参照”といって、ムービークリップなどのインスタンスや変数・関数が格納されているメモリ上の場所を表す情報を扱うことができます。
例えば、ref という変数にムービークリップ clip の参照を入れておくと、

　clip._visible = true;

と

　ref._visible = true;

は同じ意味になります。

参照を変数に代入するには、その時点で、対象となるムービークリップなどが存在していなければなりません。
今回はスクリプトが実行される時点ではまだステージに登場していないムービークリップも扱いたいのですが、ステージにないムービークリップの参照を代入すると、undefined （未定義）という値が記録されてしまいます。
しかし、ActionScript には文字列を参照に変換できる機能があります。
この機能を利用して、配列変数にはムービークリップの名前を入れておき、必要な時に参照に変換して使うことにします。


メインのタイムラインに、複数のレイヤーをまとめたフォルダＡ～Ｃがあるとします。
これらのフォルダにはとりあえず、それぞれレイヤーが２つずつあって、そのレイヤーにはそれぞれ

　【フォルダＡ】
　　　├ clip_a
　　　└ mc1
　【フォルダＢ】
　　　├ clip_b
　　　└ mc2
　【フォルダＣ】
　　　├ clip_c
　　　└ mc3

というムービークリップが配置されているとします。
今回は配列変数を見ながら総当たりで操作しますので、ムービークリップの名前に規則性がなかったり、レイヤー内の途中のフレームから名前が変わるなどの状況にも対応できます。
ただし、各キーフレームに登場するムービークリップ全てにインスタンス名が付いていることと、配列変数に登録忘れがないことが条件です。

ラジオボタンの data パラメータには、どのフォルダを操作するのかの手がかりを入れます。
とりあえず、フォルダＡを表示するボタンに” a ”、フォルダＢに” b ”、フォルダＣに” c ”、そして全部表示するボタンには” all ”の文字列を入れるとします。


スクリプトは、ラジオボタンと表示するムービークリップがあるタイムラインのフレームに記述してください。

（↓各行頭に全角のスペースが入っています。コピーする際はご注意ください）


/***********************************************************/

　//表示・非表示を切り替える全ムービークリップの名前のリスト
　clip_list = new Array();
　clip_list = 
　[
　　"clip_a" , "mc1" , 
　　"clip_b" , "mc2" , 
　　"clip_c" , "mc3"
　];


　//全てのムービークリップを表示または非表示にする関数
　//引数　visible_mode：true（全て表示）またはfalse（全て非表示）
　function All_OnOff( visible_mode:Boolean )
　{
　　var i , temp;


　　//リストに含まれる全てのムービークリップの_visibleプロパティを書き換える
　　for( i = 0; i < clip_list.length; i++ )
　　{
　　　//リスト内の名前をムービークリップの参照に変換
　　　temp = this[ clip_list[ i ] ];

　　　//_visibleプロパティを指定の値に書き換える
　　　temp._visible = visible_mode;
　　}
　}


　//ラジオボタンの選択状況を監視する処理
　this.onEnterFrame = function()
　{
　　var sel_data;


　　//現在、選択されているラジオボタンに設定されている値を取得
　　sel_data = radioGroup.selection.data;

　　//選択されているボタンに応じてムービークリップの表示・非表示を切り替える
　　//全表示(sel_data = "all")以外は、一旦全てを非表示にしてから該当するものだけ表示
　　switch( sel_data )
　　{
　　　//レイヤーフォルダＡを表示
　　　case "a":
　　　　All_OnOff( false );
　　　　this.clip_a._visible = true;
　　　　this.mc1._visible = true;
　　　　break;

　　　//レイヤーフォルダＢを表示
　　　case "b":
　　　　All_OnOff( false );
　　　　this.clip_b._visible = true;
　　　　this.mc2._visible = true;
　　　　break;

　　　//レイヤーフォルダＣを表示
　　　case "c":
　　　　All_OnOff( false );
　　　　this.clip_c._visible = true;
　　　　this.mc3._visible = true;
　　　　break;

　　　//全レイヤーフォルダを表示
　　　case "all":
　　　　All_OnOff( true );
　　　　break;
　　}
　};

/***********************************************************/


上記のスクリプトでは、冒頭にある配列変数 clip_list でムービークリップの名前を管理しています。
例えば、フォルダＣには clip_c ・ mc3 ・ mc_z の３種類が登場する、というような場合は

　clip_list = 
　[
　　"clip_a" , "mc1" ,
　　"clip_b" , "mc2" , 
　　"clip_c" , "mc3" , "mc_z"
　];

このように変更し、フォルダＣのを表示する処理である、switch 文の case "c": の部分に

　this.mc_z._visible = true;

を追加していただくと対応できます。


ある特定のフレームに登場するムービークリップだけ表示が残ったり、非表示のまま戻らなかったりする場合は、配列変数に登録した名前とインスタンスの名前が一致しているか・インスタンス名の付け忘れがないかどうかを確認してみてください。

-------------------------------------------------------------

各キーフレームに存在するムービークリップ全てにインスタンス名を付け、更にその名前を配列変数の中に記述するとなると、大変な手間になる上に、間違いや不慮のトラブルが起こりやすくなります。
また、スクリプトで制御できない描画オブジェクトやグラフィックシンボルなどは、どうやっても表示を切り替えることができません。
複雑な構成の作品であるほど、苦労した割には実りの少ないと感じる、本当に応急的な方法です。

やはり、レイヤーフォルダの内容をシンボルに移して、１つのムービークリップとして扱えるようにする方法が、簡単かつ確実だと思います。
別のタイムラインにあるフレームをシンボル内にコピーすると、位置がズレて調整が少々面倒ですが、ムービークリップにまとめているのであれば、スクリプトで操作できない描画オブジェクトなどが含まれていても簡単に表示・非表示を切り替えられます。


後から面倒な手間をかけなくても済むにように、いくつかのオブジェクトを同時に操作したいものは最初から１つのムービークリップ内にまとめておくことが得策です。
Flash Professional 8 をお使いでしたら、これと似たような発想で作る、フォームアプリケーションやスライドプレゼンテーションがあります。
フォームアプリケーションのフォームは１つのムービークリップになっていて、この中に自分のムービークリップや絵などを挿入し、フォームを重ね合わせて作品を作っていきます。
興味がありましたら、研究してみてください。

DPE · Answer

【フォルダー】とは、複数のレイヤーをまとめるためのフォルダのことで、よろしいでしょうか？
スクリプトで特定のレイヤーにあるものだけ非表示にしたり、複数のレイヤーを収めたレイヤーフォルダを操作する、といったことはできません。
レイヤーはムービークリップの重なり順（深度）などに影響を及ぼしますが、レイヤーの名前はスクリプトと関係がありませんし、スクリプトでレイヤーを操作するといったこともできません。
レイヤーは基本的に、ムービーを制作する時に作業を手助けするためのものです。

あるムービークリップの中のレイヤーフォルダごと表示を切り替えるのでしたら、このフォルダの内容を１つのムービークリップにしてはいかがでしょう。
ムービークリップであればスクリプトで操作可能で、親のムービークリップが非表示になった時には子のムービークリップも全て非表示になりますので、子ムービークリップの _visible プロパティを１つずつ操作せずに済みます。


既にムービークリップシンボルがあるとのことですから、シンボルの複製を作ると簡単です。
例えばムービークリップ《Ａ》を例にしますと、


・「ライブラリ」パネルで《Ａ》のシンボルを選択した状態で右クリックのメニューを開き、「複製」を選びます。

・複製されたシンボルを編集して、レイヤーフォルダ以外のレイヤーを削除します。
これで、レイヤーフォルダの部分が独立したムービークリップシンボルになります。

・オリジナルのシンボルを編集し、シンボル内に先ほどのシンボルのインスタンスを配置します。
新しいレイヤーを追加し、レイヤーフォルダを削除する前に位置を確認しながら配置すると、簡単に置き換えることができます。
インスタンスに名前を付けてください。仮に、” blink_clip ”と付けたとします。

・オリジナルのシンボルにあるレイヤーフォルダを、フォルダごと削除してください。フォルダ内のレイヤーがまとめて削除されます。


ここまでの作業で、ムービークリップ《Ａ》内のレイヤーフォルダの内容が、ムービークリップインスタンス” blink_clip ”に変わります。
複製から作ったものですから、blink_clip の内容はオリジナルにあったレイヤーフォルダと全く同じです。

同様の作業を、他のムービークリップシンボルでも行ってください。
レイヤーフォルダをまとめたムービークリップの名前を全て” blink_clip ”に統一しておけば、スクリプトでは

　親ムービークリップ.blink_clip._visible = true;

という形で操作することができます。

親ムービークリップが全て同じタイムラインにあるならば、ラジオボタンの data パラメータには、＃１と同様に親ムービークリップのインスタンス名を入れます。
違うタイムラインにある場合は、配列変数を使って親ムービークリップがあるタイムラインの表を作り、ラジオボタンの data パラメータにはこの表のどこを見るかの情報を入れておくことで対応できます。

-------------------------------------------------------------

ステージに、ムービークリップシンボル《Ａ》～《Ｃ》のインスタンス clip1 ～ clip3 があり、それぞれに” blink_clip ”という子ムービークリップが含まれているものとします。
ラジオボタンの設定は＃１と同じです。

４つのラジオボタンの操作により表示を切り替えるスクリプトは、次のようになります。
このスクリプトは、メインのタイムラインのフレームに設定してください。

（↓各行頭に全角のスペースが入っています。コピーする際は、全て半角のスペースかタブに置き換えてください）


/******************************************************/

　//ラジオボタンが選択された時に呼び出される関数
　radio_obj = new Object();
　radio_obj.click = function( event_obj:Object )
　{
　　var sel_data , clip_name;
　　var base_target;
　　var i;


　　//親ムービークリップの持ち主のタイムラインを設定
　　base_target = _root;

　　//親ムービークリップに共通する名前
　　clip_name = "clip";

　　//選択されたラジオボタンに設定されている値を取得
　　sel_data = event_obj.target.selection.data;


　　//取得した値が”all”の時は、全て表示するボタンが選択されたと見なす
　　if( sel_data == "all" )
　　{
　　　//全ての子ムービークリップを表示
　　　for( i = 1 ; i <= 3; i++ )
　　　{
　　　　base_target[ clip_name + i ].blink_clip._visible = true;
　　　}
　　}
　　//それ以外の場合は該当するものだけ表示
　　else
　　{
　　　//一旦、全ての子ムービークリップを非表示にする
　　　for( i = 1 ; i<= 3 ; i++ )
　　　{
　　　　base_target[ clip_name + i ].blink_clip._visible = false;
　　　}

　　　//該当する子ムービークリップを表示
　　　base_target[ sel_data ].blink_clip._visible = true;
　　}
　};


　//イベントハンドラを登録
　radioGroup.addEventListener( "click" , radio_obj );

/******************************************************/


他にも、マスクを使って表示を制限することで表示 / 非表示を切り替える方法もあります。
ただし、ムービークリップの内容によってはマスク画像を作るのに手間がかかったり、複雑なマスクになると処理が重くなる・ラジオボタンの選択によらず常時表示しておきたい部分と表示を切り替えたい部分が重なっている時には上手くいかないなど、難点もいろいろ考えられます。

どの方法にしても、スクリプトではレイヤーの操作ができない以上、もとのムービークリップに手を加える手間は省けないと思います。

DPE · Answer

＃１です。


スクリプトのどこかに、全角のスペースや余計な文字が混入していませんでしょうか？
ブラウザではタブと行頭の半角のスペースが省略されて見辛くなってしまうため、＃１のスクリプトは全角のスペースでインデントを付けています。
実際のスクリプトでは、文字列とコメント以外の部分に全角のスペースが入っているとエラーになります。コピーする際は、全て半角のスペースかタブに置き換えてください。
「アクション」パネルにある「検索」ボタンを押し、検索文字列に全角のスペースを入力して「すべて置換」ボタンを押すと、行頭の全角スペースを簡単に削除できます。

こちらでもコピーしてチェックしたところ、正常に動作しました。
スペースを削除したものを掲載しますので、よろしければこちらでもお試しください。


/******************************************************/

//ラジオボタンが選択された時に呼び出される関数
radio_obj = new Object();
radio_obj.click = function( event_obj:Object )
{
var sel_data , clip_name;
var base_target;
var i;


//表示するムービークリップの持ち主のタイムラインを設定
base_target = _root;

//各ムービークリップに共通する名前
clip_name = "clip";

//選択されたラジオボタンに設定されている値を取得
sel_data = event_obj.target.selection.data;


//取得した値が”all”の時は、全て表示するボタンが選択されたと見なす
if( sel_data == "all" )
{
//全てのムービークリップを表示
for( i = 1 ; i <= 3; i++ )
{
base_target[ clip_name + i ]._visible = true;
}
}
//それ以外の場合は該当するものだけ表示
else
{
//一旦、全てのムービークリップを非表示にする
for( i = 1 ; i<= 3 ; i++ )
{
base_target[ clip_name + i ]._visible = false;
}

//該当するムービークリップを表示
base_target[ sel_data ]._visible = true;
}
};


//イベントハンドラを登録
radioGroup.addEventListener( "click" , radio_obj );

/******************************************************/


なお、Flash 8 に付属の UI コンポーネントは ActionScript 2.0 で作成されています。
ActionScript 1.0 向けにパブリッシュすると、正常に動作しません。必ず、2.0 でパブリッシュしてください。

また、これらのコンポーネントは Flash Player 6 （ただし、リリースバージョンに制限あり）でも動くことになっているのですが、一部は不具合があったり動かなかったりするようなので、Flash Player 7 以降でパブリッシュする方が無難だと思います。

DPE · Answer

ラジオボタンの仕組みを１から自分で作ると大変ですから、手っ取り早いところで、Flash に最初から付いているラジオボタンのコンポーネント（ RadioButton コンポーネント）を利用してはいかがでしょう。


ラジオボタンは複数のボタンが連動するナビゲーションです。
RadioButton コンポーネントはボタンを必要な数だけ設置できるように、ボタンが独立したコンポーネントになっています。
とすると、どのボタンが連動する仲間なのかを識別する方法が必要です。
RadioButton コンポーネントは”グループ”という考え方を採用しており、同じグループ名を持つインスタンスが連動するように作られています。
このため、グループ単位でのイベント処理や、同じプロパティでも値を入れる時と中身を見る時とでは書き方が違うなど、他の UI コンポーネントとは異なる独特の特徴があります。


RadioButton コンポーネントは、画面に表示されない値を設定してスクリプトの中で利用することができます。
何の値を持たせるかによって、作り方もいろいろと変わってきます。
今回は次のように考えます。

この作例ではムービークリップを操作するので、その手がかりを値として入れておくと便利です。
例えば、ムービークリップを個別に表示するボタンには対応するムービークリップの”インスタンス名”を、全て表示するボタンには” all ”という文字列を設定するものとします。

RadioButton コンポーネントでは、グループ内でいずれかのボタンが選択された時に” click ”というイベントが発生します。
このイベントを利用して選択されたボタンを調べ、そのボタンに設定されていた値を取得して、内容が” all ”であれば全てのムービークリップを表示し、それ以外の時は該当するものだけを表示するようにします。

------------------------------------------------------------

作り方の一例です。


３つのムービークリップに、共通する名前＋通し番号でインスタンス名を付けてください。
ここでは仮に、clip1 ・ clip2 ・ clip3 と付けたとします。

RadioButton コンポーネントのインスタンスを４つ、ステージに配置します。
コンポーネントとは編集可能なパラメータを持っているムービークリップのことで、パラメータは「パラメータ」パネルで編集できます。「パラメータ」パネルは、デフォルトの配置では「プロパティ」パネルとタブになって並んでいます。
「パラメータ」パネルで、それぞれのボタンのパラメータを次のように設定してください。


　・ data
　　個別に表示するボタンには clip1 や clip2 など、ムービークリップの”インスタンス名”を指定します。
　　全て表示するボタンには all と入れてください。

　・ groupName
　　ボタンが所属するグループの名前です。
　　とりあえず、デフォルトの” radioGroup ”で構いません。

　・ selected
　　最初に選択済みにしておくボタンに true を設定します。
　　今回はさしあたって、全て表示するボタンを true にします。

残る label と labelPlacement パラメータは、項目名（ラベル）とラベルの位置の指定です。ご希望に合わせて編集してください。


以上で準備は完了です。
次はスクリプトを書きます。

***************************

ステージに、ムービークリップのインスタンス clip1 ～ 3 と、RadioButton コンポーネントのインスタンスが４つあるとします。
ラジオボタンの操作によりムービークリップの表示 / 非表示を切り替えるスクリプトは、次のようになります。
このスクリプトは、メインのタイムラインのフレームに記述してください。

（↓各行頭に全角のスペースが入っています。コピーする際はご注意ください）



　//ラジオボタンが選択された時に呼び出される関数
　radio_obj = new Object();
　radio_obj.click = function( event_obj:Object )
　{
　　var sel_data , clip_name;
　　var base_target;
　　var i;


　　//表示するムービークリップの持ち主のタイムラインを設定
　　base_target = _root;

　　//各ムービークリップに共通する名前
　　clip_name = "clip";

　　//選択されたラジオボタンに設定されている値を取得
　　sel_data = event_obj.target.selection.data;


　　//取得した値が”all”の時は、全て表示するボタンが選択されたと見なす
　　if( sel_data == "all" )
　　{
　　　//全てのムービークリップを表示
　　　for( i = 1 ; i <= 3; i++ )
　　　{
　　　　base_target[ clip_name + i ]._visible = true;
　　　}
　　}
　　//それ以外の場合は該当するものだけ表示
　　else
　　{
　　　//一旦、全てのムービークリップを非表示にする
　　　for( i = 1 ; i<= 3 ; i++ )
　　　{
　　　　base_target[ clip_name + i ]._visible = false;
　　　}

　　　//該当するムービークリップを表示
　　　base_target[ sel_data ]._visible = true;
　　}
　};


　//イベントハンドラを登録
　radioGroup.addEventListener( "click" , radio_obj );


***************************

ActionScript では、ムービークリップ等を操作する時にはその持ち主を正確に指定しなければなりません。
上記のスクリプトでは、表示を切り替えるムービークリップの持ち主のタイムラインを” base_target ”という変数に格納しています。
clip1 ～ 3 がステージにある場合、これらの持ち主は通常は _root という名前のムービークリップです。
例えば、あるムービークリップ” clip_group ”の中に clip1 ～ 3 がある場合は、関数の冒頭にある

　//表示するムービークリップの持ち主のタイムラインを設定
　base_target = _root;

↑この部分を

　base_target = _root.clip_group;

このように書き換えてください。


ムービークリップに共通する名前も変数に入れています。
共通する名前が” clip ”ではない時は、

　//各ムービークリップに共通する名前
　clip_name = "clip";

↑この部分を変更してください。

------------------------------------------------------------

ラジオボタンの連動は RadioButton コンポーネントが引き受けてくれますが、ラジオボタンの操作により複数のムービークリップが連動して表示が切り替わる仕組みについては自分で工夫しなければなりません。
上記のスクリプトで該当するものだけ表示する部分は、一旦全てのムービークリップを非表示にし、その後で表示するものだけ _visible プロパティを変更しています。
複数のムービークリップを操作する常套手段として、共通する名前＋連番でインスタンス名を付ける手法があります。
A や B といった文字で名前を付けるとこの手法が使いにくくなりますので、通し番号を利用することをオススメします。


先述の通り、ラジオボタンは複数のボタンが連動する仕組みのため、RadioButton コンポーネントにはグループという独特の概念があります。
グループ内のボタンが選択されたかどうかを検出するには、” click ”イベントを利用します。
このイベントを検出する時は、ボタン１つ１つのインスタンス名ではなく”グループ名”を使う点にご注意ください。


ラジオボタンは、デフォルトでいずれかのボタンが選択された状態になっていることが多いかと思います。
今回はさしあたって、全て表示するボタンをデフォルトで選択済みとし、ムービークリップも最初から３つとも表示された状態になっています。
任意のムービークリップを表示した状態から始めたいのでしたら、該当するものだけ表示するスクリプトを追加し、それに対応するボタンの selected パラメータを true に設定してください。
なお、同じグループ内に selected パラメータが true になっているボタンが複数あっても、デフォルトで選択済みになるのは１つだけです。


長くなってすみませんでした。
不明な点がありましたら、補足してください。

ラジオボタンの作り方

レイヤーの構成が

【フォルダー】とは、複数のレイヤーをまとめるためのフォルダのことで、よろしいでしょうか？

この回答への補足

＃１です。

この回答への補足

ラジオボタンの仕組みを１から自分で作ると大変ですから、手っ取り早いところで、Flash に最初から付いているラジオボタンのコンポーネント（ RadioButton コンポーネント）を利用してはいかがでしょう。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング