[AS2.0] CustumButton

CustumButton

ActionSctipt2.0、Flash Player 7以上。上図のようなボタングループが作成できます。

機能一覧

• ロールオーバーで順再生＋ロールアウト逆再生
  （別モーションでの戻りも設定可能）
• ラジオボタンモード
• 機能停止（disable）モード
• サウンド再生（onRollOver,onPress,onRelease,onRollOutに設定可能）

ダウンロード

ダウンロードは以下からどうぞ。

CustumButtonクラス(2007.10.23)
ActionSctiptソース＋サンプルFla（Flash8形式）

概要

MovieClipクラスを継承した、ボタンムービークリップ用クラスです。Flashでよく使われる機能をまとめてあるので、ActionScriptで細かい設定をする手間が省けます。CustumButtonクラスを継承するサブクラス（CustumButtonSubFormatという雛形を用意しています）を作成して、ボタンにしたいムービークリップのリンケージに割り当てます。ボタンごとのカスタマイズは、このサブクラスのプロパティおよび関数、ムービークリップ内のフレームラベルを変更します。

CustomButton本体は「com/kazkiscope/CustomButton.as」です。flaファイルと同階層に、comフォルダごと配置してください。サブクラスはflaファイルと同階層に配置してください。

基本的な使い方

CustumButtonのサブクラスを作成し、任意のモーションを加えたムービークリップに、リンケージからクラス名を設定して下さい。サンプルには「CustumButtonSubFormat.as」という雛形となるサブクラスファイルを同梱しています。作りたいボタングループの数だけサブクラスを複製し、「ファイル名（拡張子を除く）」「ソース内のクラス名」「ソース内のコンストラクタ関数名」に同一の名前を付けてください。

//▼クラス名
class CustomButtonSubFormat extends com.kazkiscope.CustomButton {
//▼コンストラクタ関数名
private function CustomButtonSubFormat () {


また、サブクラスを編集する際は「customize start」～「customize end」内のみを編集して下さい。それ以外の部分はサブクラスの機能として必要なものとなります。

// 【編集×】
//===========================================
// customize start
//-------------------------------------------
// 【編集○】
//-------------------------------------------
// customize end
//===========================================
// 【編集×】

ロールアウトで逆再生

CustumButton_sample1

一番簡単な使い方は、フレームラベルを何も設定しないで使用する方法です。自動的に1フレームで止まり、ロールオーバーさせるとモーション開始、ロールアウトさせるとモーションを逆再生します（自動的に1フレーム目が「start」、最終フレームが「end」として割り振られます）。

オプションとして、speedForward／speedReverseの設定値を変更することで、1フレームごとの移動フレーム数を変化できます。ロールオーバーを早く、ロールアウトを遅くといった動作をさせるときに有効です。

ロールアウトで別モーション再生

CustumButton_sample2

来たモーションをそのまま戻るのではなく、別のモーションで戻らせることもできます。初期位置を「start」、ロールオーバーの終点を「end」、ロールアウトの終点を「startBack」というフレームラベルに設定すれば有効化。スムーズに見せるには、startとstartBackの見た目は同一にしておく必要があります。

ラジオボタンモード

クリックするたびに「選択」「非選択」が切り替わる、いわゆるラジオボタンやタブのような機能を追加できます。サブクラスのコンストラクタ関数内で、「radioButton」プロパティを「true」に設定すれば有効化。同じswf内に複数のラジオボタングループを作成するときは、その分だけサブクラスを作成します。また、グループ内で複数のボタンを選択状態にすることは出来ません。

//▼ラジオボタン機能を有効化
radioButton = true;

ロード時に選択状態にするには、サブクラスのコンストラクタ関数内で特定のボタンの「modeSelected」プロパティを「true」に設定します。複数のボタンの「modeSelected」をtrueにしても、選択状態となるのは1つのみです。

//▼ロード時に「button1」という名前のボタンを選択状態に設定
if (_name=="button1"){
modeSelected= true;
}

ラジオボタンモードの有効時には、「selected」というラベルをつけたフレームを用意すれば、ボタン選択時にはそのフレームが表示されます。「selected」が存在しない場合は、「end」フレームが選択状態に割り当てられます。

機能停止状態

ボタンの機能を停止できます。「存在はさせるが今は使用しない」「一時的に使用不可にする」などの時に有効です。機能開始・機能停止を切り替えるには、切り替えたいインスタンスに対して「setModeEnable（開始）」「setModeDisable（停止）」を呼び出します。

//▼targetButtonの機能を開始
targetButton.setModeEnable();
//▼targetButtonの機能を停止
targetButton.setModeDisable();

ロード時に機能停止状態にするには、サブクラスのコンストラクタ関数内で特定のボタンの「modeEnable」プロパティを「false」に設定します。

//▼ロード時に「button1」という名前のボタンを機能停止状態に設定
if (_name=="button1"){
modeEnable= false;
}

「disable」というラベルをつけたフレームを用意すれば、ボタン機能停止時にはそのフレームが表示されます。「disable」が存在しない場合は、「end」フレームが選択状態に割り当てられます。

サウンド再生

以下のプロパティにリンケージテキストを設定すれば、各イベントでサウンドを再生できます。指定するサウンドはあらかじめflaファイル内にシンボルとして読み込み、リンケージテキストを指定しておく必要があります。

//▼press時のサウンドを設定
soundPressLinkage="soundPress"
//▼rollover時のサウンドを設定
soundRollOverLinkage="soundRollOver"
//▼rollout時のサウンドを設定
soundRollOutLinkage="soundRollOut"
//▼release時のサウンドを設定
soundReleaseLinkage="soundRelease"

サブクラスごとに違う音を設定すれば、ボタングループごとのサウンドを鳴らすこともできます。各イベント時には各々の値がundefinedであるかないかを判定して音を鳴らすので、初期値のままにしておけばサウンドは再生されません。

ヒットエリアの変更

hitAreaプロパティをクラス内で管理しているため、ヒットエリアを変更したいときは「hitAreaShape」というインスタンス名のムービークリップをシンボル内に配置します。配置したhitAreaShapeインスタンスは、自動的に不可視になります。hitAreaShapeが存在しないときは、通常通り自分自身がヒットエリアとして設定されます。

フレームラベル設定

内部的に以下の5つのフレームをキーとして動作し、フレームラベルに以下のテキストを割り当てることで設定できます。それぞれ、設定しなくても動作に問題はありませんが、一部の機能がOFFになり、代わりのフレームが自動的に割り当てられます。

start
通常時。存在しない場合は自動的に1フレーム目が設定されます。

end
ロールオーバーの終点。ロールオーバー時にはstartからendへモーションがかかります。存在しない場合は自動的に最終フレームが設定されます。

startBack
ロールアウトの終点。ロールアウト時にはendからstartBackへモーションがかかります。存在しない場合は「ロールアウト別モーション」の機能がOFFになります。

selected
ラジオボタン選択状態。存在しない場合は自動的にendと同一のフレームが設定されます。

disable
機能停止状態。存在しない場合は自動的にendと同一のフレームが設定されます。

変数設定

モーション関連

speedForward:Number
ロールオーバーモーションの1フレームあたりの移動フレーム数。デフォルト値は「1」。

speedReverse:Number
ロールアウトモーションの1フレームあたりの移動フレーム数。デフォルト値は「1」。

ボタン関連

radioButton:Boolean
ラジオボタン機能を有効にするか否か。デフォルト値は「true」。

selectedClickable:Boolean
ラジオボタンの選択中のものをクリックできるようにするか否か。デフォルト値は「false」。グローバルメニューに使用し、下の階層を用意するときなどを想定して用意しています。

modeSelected:Boolean
（個々に設定）ラジオボタンで選択されているか否か。デフォルト値は「false」。複数のボタンを「true」に設定しても、ロード時に有効となるのは最後の1つだけです。選択・選択解除時にアクティブに切り替わるので、内部参照用に利用することもできます。

modeEnable:Boolean
（個々に設定）ボタンを有効にするか否か。デフォルト値は「true」。ボタン機能開始・停止時にアクティブに切り替わるので、内部参照用に利用することもできます。

サウンド関連

soundPressLinkage:String
press時に鳴らすサウンドのリンケージ名。デフォルト値は「undefined」。

soundRollOverLinkage:String
rollover時に鳴らすサウンドのリンケージ名。デフォルト値は「undefined」。

soundRollOutLinkage:String
rollout時に鳴らすサウンドのリンケージ名。デフォルト値は「undefined」。

soundReleaseLinkage:String
release時に鳴らすサウンドのリンケージ名。デフォルト値は「undefined」。

関数設定

各イベントへの追記

onPress、onRollOverなどはクラス内で管理されているため、そのまま追記すると誤作動を起こしてしまいます。そのため、各イベント時に追加処理を実行したい場合は、サブクラス内の以下の関数の中に設定します。

onLoadAdd()→onLoad時
onPressAdd()→onPress時
onRollOverAdd()→onRollOver時
onRollOutAdd()→onRollOut時
onReleaseAdd()→onRelease時
onReleaseOutsideAdd()→onReleaseOutside時

モード切替時への追記

また、各モード切替のときに追加する場合は以下の関数を使用できます。また、この4種類の関数は「modeSelected」「modeEnable」の初期状態を判別し、ロード時にも実行されます。

setModeSelectedAdd()→ラジオボタン選択時
setModeUnselectedAdd()→ラジオボタン選択解除時
setModeEnableAdd()→機能有効時
setModeDisableAdd()→機能停止時

実行用関数

外からボタン機能の開始／停止を切り替えるには、以下のメソッドを呼び出します。

setModeEnable()→ボタン機能の開始
setModeDisable()→ボタン機能の停止

また、イベントハンドラメソッドを外から呼び出すこともできるので、別のボタンから実行＋選択状態にしたい場合などは、onReleaseを呼び出します。

参照用関数

外からボタンの状態を確認するには、以下のメソッドを呼び出します。

getID():Number→IDを取得
getModeEnable():Boolean→ボタンの機能が開始されているか否か
getModeSelected():Boolean→ボタンが選択されているか否か

その他応用編

_nameに応じたボタン名の振り分け

_nameでボタンを区別し、サブクラス内で_nameに応じたテキストを設定し、ボタン内に表示させる方法がオススメです。以下のようにswitchで分岐し、サブクラス内にテキストを記述します。

switch (_name) {
case "button1_1" :
displayName1 = "ボタン1";
displayName2 = "BUTTON1";
break;
case "button1_2" :
displayName1 = "ボタン2";
displayName2 = "BUTTON2";
break;
case "button1_3" :
displayName1 = "ボタン3";
displayName2 = "BUTTON3";
break;
default :
break;
}

関数設定で機能追加

各イベント時に機能追加をする例として、サンプルでは「InstantColor」という別クラスで色制御を行い、ロールオーバーで一瞬だけ明るく、選択中ボタンは点滅するようにしています。色変更の開始・停止ではmodeSelectedの条件分岐を行っています。

//▼ロールオーバー時に一瞬明るくするエフェクトを開始（ラジオボタン選択中でなければ）
private function onRollOverAdd():Void {
if (!modeSelected) {
myColor.setFadeCustomToDefault(1,1,1,1,192,192,192,0,10,33);
}
}
//▼ボタン機能開始時、かつラジオボタン選択時に点滅エフェクトを開始
private function setModeEnableAdd():Void {
if (modeSelected) {
myColor.setRound(1,1,1,1,128,128,128,0,.6,33);
}
}
//▼ボタン機能停止時、かつラジオボタン選択時に点滅エフェクトを停止
private function setModeDisableAdd():Void {
if (modeSelected) {
myColor.setRoundStop();
}
}
//▼ラジオボタン選択時に、点滅エフェクトを開始
private function setModeSelectedAdd():Void {
myColor.setRound(1,1,1,1,128,128,128,0,.6,33);
}
//▼ラジオボタン選択解除時に、点滅エフェクトを停止
private function setModeUnselectedAdd():Void {
myColor.setRoundStop();
}

最後に

普段ボタン的ムービークリップに設定している要素を片っ端から詰め込んだだけのクラスなので、色んな意味でゴテゴテしているかも知れません。冗長かつ俺ルール全開のクラスですが、ご意見ご感想バグ報告など、コメント欄でお待ちしています。