AS3でオブジェクトの子にあるボタンの有効／無効を切り替える「SmartButton」クラス
ActionScript3.0でオブジェクトの子にあるボタンの有効／無効を切り替える「SmartButton」クラスを作成しました。
静的クラスメンバ“enabled”は、指定したオブジェクトの [mouseChildren]と [mouseEnabled]の値を個別に設定します。操作したいオブジェクトと、ボタンの有効／無効[Boolean]を指定して使用します。
静的クラスメンバ“change”は、予め配列化したメニューと、ボタンを無効にしたい配列メニューのインデックス値を指定して使用します。指定したインデックスの子にあるボタンが無効となり、それ以外のインデックスの子にあるボタンが有効になります。
ボタンの有効／無効を切り替えるというより、厳密には指定したオブジェクトの [mouseChildren]と [mouseEnabled]の値を true/falseに切り替えます。
下記のボタンより、サンプルの閲覧およびソースのダウンロードができます。
【使用例】
_sp[Sprite]の子にあるボタンを無効化する
SmartButton.enabled(_sp, false);
_sp[Sprite]の子にあるボタンを有効化する
SmartButton.enabled(_sp, true);
sampleMenu[Array]の1番目のインデックスの子にあるボタンを無効化し、それ以外のインデックスの子にあるボタンを有効化する
var sampleMenu:Array = [sampleMenu1, sampleMenu2, sampleMenu3]
SmartButton.change(
sampleMenu, //配列メニュー
1, //ボタンを無効化したい配列要素のインデックス値
sampleMenu.length, //配列要素の総数
0 //配列要素の先頭
);
sampleMenu[Array]の子にある全てのボタンを有効化する
var sampleMenu:Array = [sampleMenu1, sampleMenu2, sampleMenu3]
SmartButton.clear(
sampleMenu, //配列メニュー
sampleMenu.length, //配列要素の総数
0 //配列要素の先頭
);
【パラメータ説明: “enabled”】
$scope
ボタンの有効／無効を操作したいオブジェクト
[Sprite][省略不可]
b
ボタンの有効／無効
[Boolean][省略不可]
【パラメータ説明: “change”】
buttons
配列メニュー
[Array][省略不可]
currentButtonID
ボタンを無効化したい配列要素のインデックス値
[int][省略不可]
buttonNum
配列要素の総数
[uint][規定値:0 -> 代入値:buttons.length][省略可]
indexButtonID
配列要素の先頭
[uint][規定値:1][省略可]
【パラメータ説明: “clear”】
buttons
配列メニュー
[Array][省略不可]
buttonNum
配列要素の総数
[uint][規定値:0 -> 代入値:buttons.length][省略可]
indexButtonID
配列要素の先頭
[uint][規定値:1][省略可]
【ソースコード】
import jp.atziluth.utils.SmartButton;
package jp.atziluth.utils{
import flash.display.Sprite;
public class SmartButton extends Sprite {
private static var buttons:Array;
private static var id:int;
private static var length:uint;
private static var index:uint;
public static function change(buttons:Array,currentButtonID:int,buttonNum:uint=0,indexButtonID:uint=1):void {
SmartButton.initialize(buttons,currentButtonID,buttonNum,indexButtonID);
SmartButton.exec();
}
public static function clear(buttons:Array,buttonNum:uint=0,indexButtonID:uint=1):void {
SmartButton.initialize(buttons,-1,buttonNum,indexButtonID);
SmartButton.exec();
}
public static function enabled($scope:Sprite,b:Boolean):void {
$scope.mouseChildren = b;
$scope.mouseEnabled = b;
}
private static function initialize(buttons:Array,id:int,buttonNum:uint,indexButtonID:uint):void {
SmartButton.buttons = buttons;
SmartButton.id = id;
buttonNum <= 0 ? SmartButton.length = SmartButton.buttons.length:SmartButton.length = buttonNum;
SmartButton.index = indexButtonID;
}
private static function exec():void {
for (var i:uint = SmartButton.index; i <= SmartButton.length; i++) {
SmartButton.enabled(SmartButton.buttons[i],i != SmartButton.id);
}
}
}
}
【サンプルソースコード】
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.events.Event;
import flash.events.MouseEvent;
import jp.atziluth.gui.RelativeLayout;
import jp.atziluth.utils.AtTween;
import jp.atziluth.utils.SmartButton;
public class Sample extends MovieClip {
internal const NAVIGATOR:MovieClip=new Navigator();
private const CHANGE_MENU_NUM:uint = 4;
protected static var currentChangeMenuID:uint;
private var changeMenu:Array = [];
private var changeMenuButton:Array = [];
private var changeMenuBackground:Array = [];
private var clearMenu:MovieClip;
private var clearMenuButton:SimpleButton;
private var clearMenuBackground:Sprite;
private const ENABLED_MENU_NUM:uint = 2;
protected static var currentEnabledMenuID:uint = 1;
private var enabledMenu:Array = [];
private var enabledMenuButton:Array = [];
private var enabledMenuBackground:Array = [];
private const ROLLOVER_COLOR:uint = 0xCC3311;
private const ROLLOVER_TIME:Number = .25;
private const ROLLOVER_EASE:String = "liner";
private const ROLLOUT_COLOR:Array = [0x000000,0x666666];
private const ROLLOUT_TIME:Number = 2;
private const ROLLOUT_EASE:String = "Strong.easeInOutQuad";
private const DISABLE_COLOR:uint = 0xCCCCCC;
private const DEFAULT_COLOR:Array = ROLLOUT_COLOR;
private const REVERSE_TIME:Number = ROLLOVER_TIME;
public function Sample():void {
setStageProperty();
setStageEvent();
addNavigator();
setChangeMenu();
setChangeEvents();
setClearMenu();
setClearEvent();
setEnabledMenu();
setEnabledEvents();
switchEnabled(Sample.currentEnabledMenuID, 2, 0);
centeringLayout();
}
internal function setStageProperty():void {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
private function setStageEvent():void {
stage.addEventListener(Event.RESIZE,onStageResizeHandler);
}
private function onStageResizeHandler(event:Event):void {
centeringLayout();
}
private function addNavigator():void {
addChildAt(NAVIGATOR, 0);
}
private function setChangeMenu():void {
for (var i:uint=1; i<=CHANGE_MENU_NUM; i++) {
changeMenu[i] =
MovieClip(NAVIGATOR.getChildByName("change" + i));
changeMenuButton[i] =
SimpleButton(changeMenu[i].getChildByName("_btn"));
changeMenuBackground[i] =
Sprite(changeMenu[i].getChildByName("bg"));
}
}
private function setChangeEvents():void {
changeMenuButton[1].addEventListener(MouseEvent.ROLL_OVER, changeMenu1RollOverHandler);
changeMenuButton[1].addEventListener(MouseEvent.ROLL_OUT, changeMenu1RollOutHandler);
changeMenuButton[1].addEventListener(MouseEvent.CLICK, changeMenu1ClickHandler);
changeMenuButton[2].addEventListener(MouseEvent.ROLL_OVER, changeMenu2RollOverHandler);
changeMenuButton[2].addEventListener(MouseEvent.ROLL_OUT, changeMenu2RollOutHandler);
changeMenuButton[2].addEventListener(MouseEvent.CLICK, changeMenu2ClickHandler);
changeMenuButton[3].addEventListener(MouseEvent.ROLL_OVER, changeMenu3RollOverHandler);
changeMenuButton[3].addEventListener(MouseEvent.ROLL_OUT, changeMenu3RollOutHandler);
changeMenuButton[3].addEventListener(MouseEvent.CLICK, changeMenu3ClickHandler);
changeMenuButton[4].addEventListener(MouseEvent.ROLL_OVER, changeMenu4RollOverHandler);
changeMenuButton[4].addEventListener(MouseEvent.ROLL_OUT, changeMenu4RollOutHandler);
changeMenuButton[4].addEventListener(MouseEvent.CLICK, changeMenu4ClickHandler);
}
private function changeMenu1RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(1);
}
private function changeMenu1RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(1);
}
private function changeMenu1ClickHandler(event:MouseEvent):void {
changeMenuClick(1);
}
private function changeMenu2RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(2);
}
private function changeMenu2RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(2);
}
private function changeMenu2ClickHandler(event:MouseEvent):void {
changeMenuClick(2);
}
private function changeMenu3RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(3);
}
private function changeMenu3RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(3);
}
private function changeMenu3ClickHandler(event:MouseEvent):void {
changeMenuClick(3);
}
private function changeMenu4RollOverHandler(event:MouseEvent):void {
changeMenuRollOver(4);
}
private function changeMenu4RollOutHandler(event:MouseEvent):void {
changeMenuRollOut(4);
}
private function changeMenu4ClickHandler(event:MouseEvent):void {
changeMenuClick(4);
}
private function changeMenuRollOver(newChangeMenuID:uint):void {
if (Sample.currentChangeMenuID != newChangeMenuID) {
AtTween.COLOR(changeMenuBackground[newChangeMenuID], ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
}
private function changeMenuRollOut(newChangeMenuID:uint):void {
if (Sample.currentChangeMenuID != newChangeMenuID) {
AtTween.COLOR(changeMenuBackground[newChangeMenuID], ROLLOUT_COLOR[0], ROLLOUT_TIME, ROLLOUT_EASE);
}
}
private function changeMenuClick(newChangeMenuID:uint):void {
Sample.currentChangeMenuID = newChangeMenuID;
//Sample.currentChangeMenuIDが 1なら、
changeMenu[1]の子にあるボタンを無効化し、
それ以外の子にあるボタンを有効化する
SmartButton.change(
changeMenu,
Sample.currentChangeMenuID,
CHANGE_MENU_NUM
);
//ボタンの背景色を変更する
setChangeMenuColor(Sample.currentChangeMenuID);
}
private function setChangeMenuColor(newChangeMenuID:uint):void {
for (var i:uint=1; i<=CHANGE_MENU_NUM; i++) {
if (newChangeMenuID != i) {
AtTween.COLOR(changeMenuBackground[i], DEFAULT_COLOR[0], REVERSE_TIME);
}
}
AtTween.COLOR(changeMenuBackground[newChangeMenuID], DISABLE_COLOR,REVERSE_TIME);
}
private function setClearMenu():void {
clearMenu =
MovieClip(NAVIGATOR.getChildByName("clear"));
clearMenuButton =
SimpleButton(clearMenu.getChildByName("_btn"));
clearMenuBackground =
Sprite(clearMenu.getChildByName("bg"));
}
private function setClearEvent():void {
clearMenuButton.addEventListener(MouseEvent.ROLL_OVER, clearMenuRollOverHandler);
clearMenuButton.addEventListener(MouseEvent.ROLL_OUT, clearMenuRollOutHandler);
clearMenuButton.addEventListener(MouseEvent.CLICK, clearMenuClickHandler);
}
private function clearMenuRollOverHandler(event:MouseEvent):void {
AtTween.COLOR(clearMenuBackground, ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
private function clearMenuRollOutHandler(event:MouseEvent):void {
AtTween.COLOR(clearMenuBackground, ROLLOUT_COLOR[1], ROLLOUT_TIME, ROLLOUT_EASE);
}
private function clearMenuClickHandler(event:MouseEvent):void {
//changeMenuのすべての子にあるボタンを有効化する
SmartButton.clear(changeMenu, CHANGE_MENU_NUM);
//ボタンの背景色をすべて元に戻す
for (var i:uint=1; i<=CHANGE_MENU_NUM; i++) {
AtTween.COLOR(changeMenuBackground[i], DEFAULT_COLOR[0], REVERSE_TIME);
}
}
private function setEnabledMenu():void {
for (var i:uint=1; i<=ENABLED_MENU_NUM; i++) {
enabledMenu[i] =
MovieClip(NAVIGATOR.getChildByName("enabled" + i));
enabledMenuButton[i] =
SimpleButton(enabledMenu[i].getChildByName("_btn"));
enabledMenuBackground[i] =
Sprite(enabledMenu[i].getChildByName("bg"));
}
}
private function setEnabledEvents():void {
enabledMenuButton[1].addEventListener(MouseEvent.ROLL_OVER, enabledMenu1RollOverHandler);
enabledMenuButton[1].addEventListener(MouseEvent.ROLL_OUT, enabledMenu1RollOutHandler);
enabledMenuButton[1].addEventListener(MouseEvent.CLICK, enabledMenu1ClickHandler);
enabledMenuButton[2].addEventListener(MouseEvent.ROLL_OVER, enabledMenu2RollOverHandler);
enabledMenuButton[2].addEventListener(MouseEvent.ROLL_OUT, enabledMenu2RollOutHandler);
enabledMenuButton[2].addEventListener(MouseEvent.CLICK, enabledMenu2ClickHandler);
}
private function enabledMenu1RollOverHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 1) {
AtTween.COLOR(enabledMenuBackground[1], ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
}
private function enabledMenu1RollOutHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 1) {
AtTween.COLOR(enabledMenuBackground[1], ROLLOUT_COLOR[0], ROLLOUT_TIME, ROLLOUT_EASE);
}
}
private function enabledMenu1ClickHandler(event:MouseEvent):void {
Sample.currentEnabledMenuID = 1;
switchEnabled(Sample.currentEnabledMenuID, 2);
}
private function enabledMenu2RollOverHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 2) {
AtTween.COLOR(enabledMenuBackground[2], ROLLOVER_COLOR, ROLLOVER_TIME, ROLLOVER_EASE);
}
}
private function enabledMenu2RollOutHandler(event:MouseEvent):void {
if (Sample.currentEnabledMenuID != 2) {
AtTween.COLOR(enabledMenuBackground[2], ROLLOUT_COLOR[0], ROLLOUT_TIME, ROLLOUT_EASE);
}
}
private function enabledMenu2ClickHandler(event:MouseEvent):void {
Sample.currentEnabledMenuID = 2;
switchEnabled(Sample.currentEnabledMenuID, 1);
}
private function switchEnabled(currentID:uint, lastID:uint, time:Number=REVERSE_TIME):void {
//enabledMenu[currentID]の子にあるボタンを無効化する
SmartButton.enabled(enabledMenu[currentID], false);
//enabledMenu[currentID]の背景色を非クリック色へ変更する
AtTween.COLOR(enabledMenuBackground[currentID], DISABLE_COLOR, time);
//enabledMenu[lastID]の子にあるボタンを有効化する(元に戻す)
SmartButton.enabled(enabledMenu[lastID], true);
//enabledMenu[lastID]の背景色を元に戻す
AtTween.COLOR(enabledMenuBackground[lastID], DEFAULT_COLOR[0], time);
}
private function centeringLayout():void {
RelativeLayout.setPos(stage, NAVIGATOR, "cm");
}
}
}
