自作のラジオボタン：ラジオボタンコンポーネント

ラジオボタンコンポーネントを作ってみましょう。。
コンポーネントは、ラジオボタン本体の「ezRadioButton」と司令塔である「ezRadioGroup」の２つを配置して作ります。

■　ラジオボタンコンポーネントの仕組み

1.　ユーザーが選択肢から「ezRadioButton」を選択すると、選択された「ezRadioButton」は司令塔である「ezRadioGroup」の「selectOne関数（自作）」を呼び出して、選択されたことを知らせます。

2.　すると、司令塔「ezRadioGroup」は、すべての「ezRadioButton」の表示を切り替えて、今選択されたものだけを選択状態で表示します。

3.　今、どの項目が選択されているかを調べるときは、司令塔「ezRaduiGroup」の値を取得する「getValue関数（自作）を使います。

主要な仕組みはこれでよいのですが、この仕組みを実現するためには、もう少し準備をする必要があります。コンポーネントの関数を準備するだけではなく、お互いの状態を設定して覚えたりする必要があるからです。そのため、ムービークリップのタイムラインを吸うフレーム利用してお互いのコンポーネントの連携の準備を行います。

■　コンポーネント連携の準備

1.　1フレーム目で「ezRadioButton」と「ezRadioGroup」は、関数の初期顔w行います。「ezRadioButton」は選択項目の数だけ必要です。

2.　2フレーム目で、すべての「ezRadioButton」は司令塔である「exRadioGroup」に自分を追加する為に「addGroup関数（自作）」を呼び出して、名前を登録します。この作業によって、「ezRadioGroup」はラジオボタンがいくつあるのかを知ることができるようになります。

3.　「ezRadioGroup」は、最初にどれが選択されたかのデフォルト値を持っているので、�Bフレーム目ですべてのラジオボタンの初期表示状態を設定して回ります。

■　自作ラジオボタンコンポーネントの作成

実際にラジオボタンコンポーネントを作成してみましょう。

1.　まず、「ezRadioGroup」を作成します。
　[挿入]−[新規シンボル...]メニューで、「ezRadioGroup」という名前でムービークリップを作成します。

2.　レイヤーwp一つ追加して計2層のレイヤーにし、フレームを3フレームまで用意します。

action	ActionScriptレイヤー
mark	ezRadioGroupアイコン用レイヤー

 

3.　 「mark」レイヤーに、ezRadioGroup識別用のアイコンを描きます。この絵は識別用なので、表示させる必要はないのですが、デバッグをする時に目で見える方がわかりやすいので、適当な絵を描いて識別できるようにしておきます。

4.　「Action」レイヤーの1フレーム目に、以下のフレームスクリプトを記述します。

1	//-- ラジオボタングループの初期化
2	groupList = [];
3	valueList = [];
4	//----------------------------------------------
5	//-- ラジオボタングループに新しいラジオボタンを追加する関数
6	//----------------------------------------------
7	//-- name：ラジオボタンのインスタンス名
8	//-- value：ラジオボタンのID
9	function addGroup(name, value) {
10	groupList.push(name);
11	valueList.push(value);
12	}
13	//----------------------------------------------
14	//-- ラジオボタンの１つが選択されたときの関数
15	//----------------------------------------------
16	//-- selectName：選択されたラジオボタンのインスタンス名
17	//-- value：選択されたラジオボタンのID
18	function selectOne(selectName,value) {
19	for (n in groupList) {
20	_parent[groupList[n]].setOff();
21	}
22	_parent[selectName].setOn();
23	selectValue = value;
24	}
25	//----------------------------------------------
26	//-- 今選択されている値を返す関数
27	//----------------------------------------------
28	function getValue() {
29	return selectValue;
30	}

２〜３行目：ラジオボタンのリストを初期化します。「Arrayオブジェクト＝newArray();」は、「Arrayオブジェクト＝[];」と略して記述することができます。ここでは「groupList＝newArray()」を略して「groupList＝();」と記述しています。

９〜12行目：ラジオボタングループに新しいラジオボタンを追加する関数です。ラジオボタンのインスタンス名と、IDをリストに追加しています。

18〜24行目：ラジオボタンの１つが選択された時の関数です。

19〜21行目：登録されているラジオ簿案のリストすべての選択表示をオフにします。

22行目：今選択されたラジオボタンの選択表示をオンにします。これで、選択されたラジオボタンだけの選択表示がオンになります。

23行目：今選択されているラジオボタンのIDを選択されている値として覚えておきます。

28〜30行目：今選択されている値を返す関数です。

5.　「Action」レイヤーの3フレーム目に、以下のフレームスクリプトを記述します。

1	//----------------------------------------------
2	//-- ラジオボタンをデフォルト値で選択表示をする
3	//----------------------------------------------
4	if (selectValue != -1) {
5	for (n in valueList) {
6	if (valueList[n] == selectValue) {
7	_parent[groupList[n]].setOn();
8	}
9	}
10	}
11	stop();

4行目：ラジオボタンのデフォルト値が-1でなければ、デフォルト値の表示を行います。

5〜9行目：登録されているラジオボタンのリストすべてについて調べ、デフォルト値を同じ値のラジオボタンが見つかったら、そのラジオボタンの浅学表示をオンにします。

6.　次に「ezRadioButton」を作成します。
　[挿入]−[新規シンボル...]メニューを選択し、「ezRadioButton」という名前のムービークリップを作成します。

7.　レイヤーを３つ追加して、計4層のレイヤーにし、フレームを4フレームまで用意します。

action	ActionScriptレイヤー
onoff	ラジオボタンの選択、非選択表示用レイヤー
label	ラジオボタンに表示するテキスト用レイヤー
back	ラジオボタンの背景レイヤー

 

8.　「back」レイヤーにラジオボタンhの背景のデザインをします。

9.　「label」レイヤーに項目表示用のテキストボックスを作成します。テキストツールで「ダイナミックテキスト」のテキストボックスを１つ作り、変数名を「label」とします。

10.　「onoff」レイヤーの1〜3フレームに非選択状態のマークを、4フレームに選択状態のマークを描きます。これで、このラジオボタンは4フレーム目を表示しているときだけ選択常態になります。

11.　「Action」レイヤーの1フレーム目に以下のフレームスクリプトを記述します。

1	//----------------------------------------------
2	//-- このラジオボタンの選択状態をオフで表示する関数
3	//----------------------------------------------
4	function setOff() {
5	gotoAndStop(3);
6	}
7	//----------------------------------------------
8	//-- このラジオボタンの選択状態をオンで表示する関数
9	//----------------------------------------------
10	function setOn() {
11	gotoAndStop(4);
12	}
13	//----------------------------------------------
14	//-- このラジオボタンがクリックされたときの関数
15	//----------------------------------------------
16	this.onPress = function() {
17	_parent[groupName].selectOne(this._name, value);
18	};

 

4〜6行目：このラジオボタンの選択状態をオフで表示する関数です。3フレーム目の選択状態をオフのフレームにジャンプします。

10〜12行目：このラジオボタンの選択状態をオンで表示する関数です。4フレーム目の選択状態をオンのフレームにジャンプします。

16〜18行目：このコンポーネントがクリックされた時の関数です。「ezRadioGroup」のインスタンス名の「groupName」を使って、「ezRadioGroup」の「selectOne関数」を呼び出し、このコンポーネントが選択されたことを伝えます。

12.　「Action]レイヤーの2フレーム目に、以下のスクリプトを記述します。

1	//----------------------------------------------
2	//-- このラジオボタンをラジオグループに追加
3	//----------------------------------------------
4	_parent[groupName].addGroup(this._name, value);

4行目：「ezRadioGroup」のインスタンス名の「groupName」を使って、このラジオボタンをラジオグループのリストに追加します。

13.　「Action」レイヤーの3フレーム目に、以下のフレームスクリプトを記述します。

1

stop();

14.　[ウィンドウ]−[ライブラリ]メニューを選択して、ライブラリを開きます。先ほど作成したムービークリップが2つ表示されています。

15.　「ezRadioGroup」を選択して、ライブラリ右上のメニューまたはコンテキストメニューから[コンポーネント定義...]を選択します。「コンポーネント定義」ダイアログボックスで、以下のパラメータを１つ追加します。

名前	値	タイプ
selectValue	-1	Number

16.　「ezRadioButton」を選択してライブラリ右上のメニューまたはコンテキストメニューから[コンポーネント定義...]を選択します。「コンポーネント定義」ダイアログボックスで、以下のパラメータを３つ追加します。

名前	値	タイプ
groupName	RadioGroup1	String
value	（なし）	Number
label	defaultValue	String

17.　これで、２つのコンポーネントができました。このファイルは「radiobutton.fla」という名前で保存しておきます。

■　自作ラジオボタンコンポーネントの動作確認

1.　ezRadioGroupコンポーネントをステージ上の表示されない位置に１つドラッグして、インスタンス名を「RadioGroup1」とします。

2.　ezRadioButtonコンポーネントをステージ上に4つドラッグして配置します。それぞれの値を「0/1/2/3」、labelを「システム手帳/パソコン/PDA/カレンダー」と適当に設定します。

3.　値を表示するためのボタンを１つ作成します。
　[挿入]−[新規シンボル...]メニューで、適当な形のボタンを作成します。そのボタンを配置して選択し、以下のActionScriptを記述します。

on (release) {
　　　trace (RadioGroup1.getValue ());
}

4.　[制御]−[ムービープレビュー]メニューを選択すると、4つのラジオボタンが表示されます。項目を線tなくしてボタンをクリックすると、出力ウィンドウに選択した項目の数字が表示されることがわかります。

<<<戻る

Shirley's i-box | Shirley's little-box | Dreamweaver Technique | JAVA Script sample | CSS sample | JAVA Applet sample