ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
ラジオボタン・チェックボックス 使用・作成方法解説

Suzuka 0.8.0.0 からは,カスタム クラス が シンボル として作成できるようになりました。
このページのものは「クラスを使ってこんなん作ってみた!」,という研究(あくまでも研究)の試作品ですから,どんなものにも適用してちゃんと動くかどうかの動作の保証はできません。

 


サンプルダウンロード
PDRファイル・CSFファイル在中
「radio_check.zip」 7.52 KB (7,707 バイト)



ラジオボタン・チェックボックス 使用・作成方法解説

サンプル作成には,ParaDraw Ver.0.3a4,Suzuka Ver. 0.8.0.0[RichEdit版] を使用しています。
ラジオボタンは1項目だけ選択可能ですが,チェックボックスは複数項目選択可能です。
ラジオボタンもチェックボックスも,スプライトでできています。

そのスプライト自体に書いてある onClipEvent (initialize){ } ハンドラの { } 内を書き替えて使用します。

すでに既存のSCFプロジェクトファイルがあって,そのファイルにこのラジオボタンやチェックボックスを挿入したい場合は,[ファイル]→[プロジェクトのインポート]でこのプロジェクトファイルをインポートしてもらうと,ラジオボタンやチェックボックスを取りこむことができると思います。

このサンプルの作成方法よりも使用方法の方が肝腎であると思いますので,使用方法から説明します。

 


◎ ラジオボタン・チェックボックス の使い方

まずラジオボタンです。

ラジオボタン

上の図は性別をチェックする「男性」と「女性」のラジオボタン自体に書いているスクリプトです。 それぞれの変数名(左辺)は変更不可能です。 値(右辺)のみを書き替えます。

「男性」と「女性」のラジオボタンは,

 groupName = "group1"

のように同じ「group1」というグループ名を設定してあります。

このように,groupName の値を同じにしておくと,自動的に複数チェック不可能なグループに属するようにしてあります。

 hensuu = "seibetsu";
 atai = "男なのですよ";

ここで,決定したい 変数名 と 値 の設定をします。
この辺は任意ですが,hensuu の値は同じグループ内は同じにしておく方が良いと思います。

 selected = true;

ここで選択初期状態を設定します。
値を true にしておくと,初期状態でチェックが入って表示されます。
false; にしておくと,はチェックされていない状態で表示されます。
ただし,同じグループ内で,複数を true にすることはできません。
スクリプト的には,複数を true にしても何の問題も起こりませんが,複数を true にしても,結局初期状態でチェックが入って表示されるのは1つだけになります。

次にチェックボックスです。
このチェックボックスは,ラジオボタンのついでに作成してみたものですが,以前のチェックボックスとは使用方法が違います。

チェックボックス

上の図は雑誌をチェックするする「Suzuka」のチェックボックス自体に書いているスクリプトです。

 hensuu = "Web";  atai = "○";

ここで,決定したい 変数名 と 値 の設定をします。

 selected = false;

ここで選択初期状態を設定します。
チェックボックスはラジオボタンと違って普通は複数選択可能なので,決定したい 変数名 も 値 も,また 選択初期状態 も自由です。

ラジオボタンにしても,チェックボックスにしても,
チェックが入ると,

 hensuu = "○○";
 atai = "△△";

の部分が,親階層に,

 ○○ = "△△";

という形で渡されるようにしてあります。

変数を渡すしくみ

こうなる仕組みさえわかっておけば,「集計」ボタンのようなものに,

on(release){
	syuukei_txt.text = "性別は " + seibetsu + "\n";
	syuukei_txt.text += "年齢は " + nenrei + " です\n";
	syuukei_txt.text += "日刊Web…" + Web + "\n";
	syuukei_txt.text += "週刊Suzuka…" + Suzuka + "\n";
	syuukei_txt.text += "月刊ParaDraw…" + ParaDraw + "\n";
	syuukei_txt.text += "Flash年報…" + Flash;
}

のように書いて,その階層の値を集めれば集計できます。

チェックの付いていない場合の変数は undefined となって返されますから,この undefined で未記入チェックなどもできると思います。

ラジオボタンやチェックボックスは,実際にはこのように集計するのではなくて,メールフォームやその他PHPなどとの変数送信に使われると思いますが,どっちにしても,その階層の変数を寄り集めれば送信データなどとして扱えると思います。

MovieClipクラスを継承する,RadioButtonClass と CheckBoxClass というカスタムクラスを作成して動作させていますが,このクラスは私ささきちが勝手に作成したクラスであるため,Adobe Flash の UIComponent にある RadioButtonクラス や CheckBoxクラス のメソッドなどは当然使用できません。
内部構造やスクリプトは全然違うと思います。Adobe Flash の UIComponent クラスなどは全く参考にしていません。

 

あと,以上ではインスタンス名について全く書いていませんが,ラジオボタンもチェックボックスもサンプルのように使う場合,インスタンス名は必要ありません。
インスタンスのコピペでけで使えるように,インスタンス名はなくても使用可能してあります。

UIComponent.enabled(アクティブ/非アクティブ(有効/無効))にも対応していませんが,この辺は MovieClip.enabled を使用するのと同じようにラジオボタンやチェックボックスにインスタンス名を付けて,

 インスタンス.enabled = false;
 インスタンス._alpha = 40;

などのようにして,フレームなどからコントロールしてもらうと,それなりに対応できると思います。

 

 


◎ ラジオボタン・チェックボックス の作り方

正直言って,このSuzukaのカスタムクラスについてはあまりわかっていないのですが,
Uzoさんの作成された「クラス」のサンプルを参考に,「こんな感じにするのかなあ?」と,見よう見まねで作成してみたものです。
動作はしますが,ひょっとしたらそもそもクラスの使い方自体が間違っているかもしれません。

ラジオボタンやチェックボックスなど,ムービークリップ(スプライト)に関連付けるカスタムクラスは,「既存のMovieClipクラスを継承した上で,自分のさせたい動作や処理を付加していく。」という考え方がベースになります。

この,「クラスを継承する」とは,そんなに難しい意味のことではありません。
「元のクラスの機能を受け継いだ上で,その機能を拡張したクラス作成する。」というようなことで,イメージで表すと次の図のような感じになります。

クラスの継承

見たこともないような万能ナイフが機能アップして,さらに見たことのないような新万能ナイフになっていますが,このように「元のクラスをカスタマイズしてさらに多機能にしたクラス」が,「元のクラスを継承した新しいクラス」です。

 

本題の作成方法ですが,
まず,ラジオボタンなどの内部構造をスプライトで作成しておいた上で,
シンボルリストを右クリック→[アイテムを追加]→[クラスを追加]でシンボルとしてクラスを追加します。

カスタムクラスの作成

[クラス名] には任意の名前を付けて,スプライトはムービークリップですから,[継承]は MovieClip にします。

また,ラジオボタン用 などに用意したスプライトの方も,次のように設定します。

スプライトシンボルをクラスメンバに登録

[識別子] は何でも良いので必須で付けます。
[クラス] は上で作成した クラス名 を入れます。これでこのムービークリップ(スプライト)がムービー上に出没したとき,このカスタムクラスに属するインスタンスになることができます。

また [このシンボルを書き出す] にもチェックを入れておきます。
[最初のフレームへ] はどちらでもかまいません。
上のサンプルのように手動でキャンバスに配置する場合は必要ではありませんが,
attachMovie などで動的に配置する場合はこのチェックを入れておく必要があります。

RadioButtonClass の ActionScript は次のようになっています。

// (変数の宣言は無くても動作する)
var groupName;
var hensuu;
var atai;
var selected;

// コンストラクタ関数の定義
function RadioButtonClass(){
   // とりあえずは停止
   this.stop();
   // もし selected が true であれば
   if(this.selected){
      //関数 onCheck の実行
      this.onCheck();
   }
}

// 関数 onCheck の定義
function onCheck(){
   // 親階層の走査
   for (name in this._parent) {
      // もし走査した対象が MC(スプライト)で
      if (typeof (this._parent[name]) == "movieclip") {
         // グループ名がこの MC と同じで
         if(this._parent[name].groupName == this.groupName) {
            // 同じ名前の場合
            if(this._parent[name]._name == this._name){
               // この MC の selected を true にして
               this.selected = true;
               // この MC を フレーム4 へ
               this.gotoAndStop(4);
               // 親階層の hensuu変数 に この MC の atai を代入
               this._parent[this.hensuu] = this.atai;
            } else {
               // それ以外であれば selected を false にして
               this._parent[name].selected = false;
               // その MC を フレーム1 へ
               this._parent[name].gotoAndStop(1);
            }
         }
      }
   }
}

// ロールオーバー時
function onRollOver(){
   // selected が true でない場合(false の場合)
   if(!this.selected){
      // このスプライト内を フレーム2 へ
      this.gotoAndStop(2);
   }
}

// ロールアウト時
function onRollOut(){
   // selected が true でない場合
   if(!this.selected){
      // このスプライト内を フレーム1 へ
      this.gotoAndStop(1);
   }
};

// 外で離した時→ロールアウト時と同じく
onReleaseOutside = onRollOut;

// プレス時
function onPress(){
   // selected が true でない場合
   if(!this.selected){
      // このスプライト内を フレーム3 へ
      this.gotoAndStop(3);
   }
};

// クリック時
function onRelease(){
   // selected が true でない場合
   if(!this.selected){
      //ユーザー定義関数 onCheck の実行
      this.onCheck();
   }
};

今のところ Suzuka では ActionScript1.0 形式の文法しか使えませんから,クラスを作成する場合も ActionScript1.0 です。

 // コンストラクタ関数の定義
 function RadioButtonClass(){ }

ここの部分の関数名は,クラス名と同じにしておきます。
このクラスと同名の関数 は コンストラクタ関数 と言って,他の関数 (メンバ関数) とは違い,このクラスが呼び出されたときに自動的に実行されます。

MovieClipクラス を継承するクラスを作成する場合に限ってですが,
このコンストラクタ関数を使わずに,

 function onLoad (){ }

を使用してみても同様に動作をしました。

おそらく onLoad (onClipEvent(load)) のほんの少し早いタイミングで実行される関数だと思います。

このコンストラクタ関数の実行よりも前に,スプライトに設定する変数,例えば selected = true; などが定義されないと初期チェック状態が設定できません。

したがって,スプライトに直接書いて変数などを設定する場合,onClipEvent(load) では間に合わないので,それより以前に実行される onClipEvent (initialize){ } ハンドラ が必要になるわけです。

こういったことは,実際にコーディングしてみて,さらに色々実験してみて実感しないと,なかなか理解できないと思います。
ささきちも今回作ってみて初めて,「なるほどonClipEvent (initialize)を使うのはそういうことか!」と実感でわかりました。

 

CheckBoxClass の ActionScript は次のようになっています。

// (変数の宣言は無くても動作する)
var hensuu;
var atai;
var selected;

// コンストラクタ関数の定義
function CheckBoxClass(){
	// とりあえずストップ
	this.stop();
	// 変数 selected の値が true であれば
	if (this.selected) {
		//関数 onCheck の実行
		this.onCheck();
	}
}

// 関数 onCheck の定義
function onCheck() {
		this.gotoAndStop("up2");
		// 親階層の hensuu変数 に この MC の atai を代入
		this._parent[this.hensuu] = this.atai;
}

// ロールオーバー時
function onRollOver() {
	// 変数 selected の値が false であれば
	if (!this.selected) {
		// フレームラベル over1 へ移動
		this.gotoAndStop("over1");
	} else {
		// 変数 selected の値が true であれば
		// フレームラベル over2 へ移動
		this.gotoAndStop("over2");
	}
};

// プレス時
function onPress() {
	if (!this.selected) {
		this.gotoAndStop("down1");
	} else {
		this.gotoAndStop("down2");
	}
};

// ロールアウト時
function onRollOut() {
	if (!this.selected) {
		this.gotoAndStop("up1");
	} else {
		this.gotoAndStop("up2");
	}
};

// ドラッグアウト時→ロールアウト時と同じく
onDragOut = onRollOut;

// クリック時
function onRelease() {
	if (!this.selected) {
		this.onCheck();
	} else {
		this.gotoAndStop("up1");
		// 親階層の hensuu変数 を削除
		delete this._parent[this.hensuu];
	}
	this.selected = !this.selected;
};

これは,以前に作成した「チェックボックス」の 「CheckBox」シンボル内のフレーム1に書いたスクリプトの変形版です。

MovieClipクラスを継承するクラスを作成する場合,
スプライトのフレーム1にスクリプトを書くのとほぼ同じような感覚で書けばそのまま使えるような気がします。

この,ラジオボタン と チェックボックス のサンプルの場合,
1クラス1シンボル対応ですからあまりクラスを使うメリットは感じないかもしれませんが,
例えばゲームの敵機が数種類あって同じような動きをする場合など,
1クラス複数シンボル対応の場合はその威力がかなり発揮できると思います。
また,1つの土台となるクラスを作成して,そのクラスを継承したバリエーション入りのクラスみたいなものを作成すると,さらにクラスの力が発揮できると思います。

これを作ろうと思った最初の段階で,
まず簡単な CheckBoxClass を作成して,そのクラスを継承する RadioButtonClass が作成できるのではないだろうか。
と考えてみたのですが,実際作ろうとすると内部構造や動きが全く違うため,継承はできませんでした。
チェックボックスとラジオボタンは,よく似ているようで全然違うものですね。
あらためて実感しました。