[AS3] ラジオボタンのように複数の中のひとつだけ設定値を変える

[AS3] ラジオボタンのように複数の中のひとつだけ設定値を変える [Edit]

投稿者：野中文雄 | 投稿日：2010.08.03 | [AS 3][ActionScript][Tips][野中ゼミ]

ラジオボタンは、ひとつを選ぶと他の選択は解除されます(図001)。このように、定められた値を複数の中のつねにひとつにだけ設定する手法について考えてみます。

図001■ラジオボタンはつねにひとつだけしか選択できない

タイムラインには、テスト用に3つのMovieClipインスタンスmy0_mc〜my2_mcを置きます。そして、クリックしたインスタンスのみアルファを100%、ほかは50%としてみましょう(図002)。

図002■クリックしたインスタンスはアルファ100%で他は50%にする

まず初期設定のスクリプトでは、3つのインスタンスは配列に入れて、forループでクリックに対するイベントリスナーを登録します。リスナー関数はひとつを共用します。オーソドックスなフレームアクションは、以下のスクリプト001のような処理でしょう。

スクリプト001■クリックしたインスタンスかどうかを確かめて設定する

var buttons_array:Array = [my0_mc, my1_mc, my2_mc];
var nLength:uint = buttons_array.length;
for (var n:uint = 0; n < nLength; n++) {
	var _mc:MovieClip = buttons_array[n];
	_mc.alpha = 0.5;
	_mc.addEventListener(MouseEvent.CLICK, xSetOne);
}
function xSetOne(eventObject:MouseEvent):void {
	var target_mc:MovieClip = MovieClip(eventObject.currentTarget);
	for (var i:uint = 0; i < nLength; i++) {
		var _mc:MovieClip = buttons_array[i];
		if (_mc == target_mc) {  // クリックされたインスタンス
			_mc.alpha = 1;
		} else {  // それ以外のインスタンス
			_mc.alpha = 0.5;
		}
	}
}

リスナー関数(xSetOne())が受取る引数のイベントオブジェクトから、Event.currentTargetプロパティでクリックされたインスタンスの参照は得られます。そのうえで、forループにより配列からすべてのインスタンスを順に取出して、クリックされたインスタンスであればDisplayObject.alphaプロパティの値を1(100%)にし、そうでなければ0.5(50%)に設定しています。

この処理でとくに問題は生じません。しかし、forループで処理する数が多いときは、一旦すべてをその他の設定(アルファ50%)にしたうえで、改めて選択された値だけを戻す(アルファ100%)方が少し有利なようです^[*1]。この考え方で書替えたリスナー関数(xSetOne())は、つぎのスクリプト002のようになります。

スクリプト002■すべてクリックされていない設定にしてからクリックされた値を戻す

function xSetOne(eventObject:MouseEvent):void {
	var target_mc:MovieClip = MovieClip(eventObject.currentTarget);
	for (var i:uint = 0; i < nLength; i++) {  // すべてのインスタンス
		var _mc:MovieClip = buttons_array[i];
		_mc.alpha = 0.5;
	}
	target_mc.alpha = 1;  // クリックされたインスタンスを再設定
}

もっとも、このような簡単な例の場合は、直前の選択を変数にもっておきさえすれば、その値と新たに選んだ値のふたつを変えるだけで済みます(スクリプト003)。毎回すべての設定をし直す必要のあるときに、上述の内容を知っておくとよいでしょう。

var selected_mc:MovieClip = buttons_array[0];  // 直前の選択を保持する変数
function xSetOne(eventObject:MouseEvent):void {
	var target_mc:MovieClip = MovieClip(eventObject.currentTarget);
	selected_mc.alpha = 0.5;
	target_mc.alpha = 1;
	selected_mc = target_mc;  // 選択の更新
}

[*1] 整数の配列を使った処理速度の比較を、wonderflに公開しました。

F-site

[AS3] ラジオボタンのように複数の中のひとつだけ設定値を変える [Edit]