独学ActionScript

【AS3入門】マウスカーソルをボタンの動作（ハンドカーソル）にする

ActionScript, Wonderfl

スプライトかムービークリップに、イベントリスナーでMouseEvent.CLICKなどを設定しておいて、実際にパブリッシュしてマウスオーバーしてみると、ボタンを押す時のいつものクリックする指のマークにならないムキー！ってなったことありませんか？ 私はムキーってなってました。ちゃんとそういうハンドカーソルにする設定が用意してあるんですね…以下その方法をメモ。(2009.04.12 00:37 追記) サンプルのFlashをWonderflに差し替えました。

_button1.addEventListener(MouseEvent.CLICK, clickHandler); // 赤ボタン
_button2.addEventListener(MouseEvent.CLICK, clickHandler); // 青ボタン

_button1.buttonMode = true; // ココ！ 指のマークになる！

private function clickHandler(event:MouseEvent):void 
{
	event.target.rotation += 15;
}

buttonModeというSpriteクラスのプロパティを「true」に設定すると、そのスプライトはボタンの動作をするようになります。マウスカーソルがハンドカーソルに変わるようになるだけでなく、buttonModeをtrueにすることで以下の動作も加えられます。

• Tabキーでフォーカス（黄色い枠）を得るようになる
• フォーカスがある時に、EnterキーまたはSpaceキーを押すとクリックしたときと同じ動作になる

これらの動作が不要で、単純にハンドカーソルのみの動作にしたい場合は、tabEnabledプロパティを「false」にするとフォーカスを得なくなり、これによりフォーカスがある時のEnterキーまたはSpaceキーも動作しなくなります。※Flash画面をフォーカスしてTabキーを押してみると違いがわかりやすいです。

_button1.addEventListener(MouseEvent.CLICK, clickHandler); // 赤ボタン
_button2.addEventListener(MouseEvent.CLICK, clickHandler); // 青ボタン

_button1.buttonMode = true;

_button2.buttonMode = true;
_button2.tabEnabled = false; // ココ！ フォーカス（黄色い枠）しなくなる！

private function clickHandler(event:MouseEvent):void 
{
	event.target.rotation += 15;
}

(2008.09.28 08:37 追記) ふと気づいて調べてみましたが案の定、下の記事と同様に、このtabEnabledにもその対となるtabChildrenプロパティがありました。ただし上記のサンプルの場合は、スプライトで内包してそこから指定しているわけではないのでこのままtabEnabledで問題ないと思いますが、一応そういうプロパティがあるということを明記しておきます。

テキストフィールドを含むスプライトの場合

以下の内容はこちらのブログ記事を参考にさせていただきました。素敵情報に感謝です。

SpriteにTextFieldをaddChildしてSpriteのbuttonModeをtrueにしても、マウスオーバーしたときにカーソルが変わらないことがある。

そんなときはTextFieldのmouseEnabledをfalseにすればおk

TextFieldを含むSpriteをbuttonMode=trueにしてもカーソルが変わらない (Unknown Quality)

ぜんぜん知りませんでした。上記の記事のコメント欄にてmouseChildrenを使った方がいいかも、とありましたのでmouseChildrenを使ってさっそく実験してみました。

調べてみるとmouseChildrenでもmouseEnabledでもその効果は同じですが、プロパティを設定する（できる）対象が違うようです。mouseChildrenは親（スプライト）に設定し、その親に含まれるすべての子（テキストフィールドなど）に適用されるようで、一方mouseEnabledはそのオブジェクト自身（この場合、子であるテキストフィールド）に設定し、その設定した１つだけに効果が適用されるようです。以下はこのサンプルのソースコード全文です。

package  
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	
	[SWF(width = 465, height = 465, backgroundColor = 0x94e4e8, frameRate = 30)]
	
	public class MouseCursor3 extends Sprite 
	{
		private var _scx:Number;
		private var _scy:Number;
		private var _button1:Sprite;
		private var _button2:Sprite;
		private var _txtfmt:TextFormat;
		private var _txtfld1:TextField;
		private var _txtfld2:TextField;
		
		public function MouseCursor3():void 
		{
			_scx = stage.stageWidth * 0.5;
			_scy = stage.stageHeight * 0.5;
			
			setup();
			
			this._button1.addEventListener(MouseEvent.CLICK, clickHandler); // 赤ボタン
			this._button2.addEventListener(MouseEvent.CLICK, clickHandler); // 青ボタン
		}
		
		private function clickHandler(event:MouseEvent):void 
		{
			//event.target.rotation += 15;
			
			// TextFieldを回転させると消えちゃうので横移動に修正
			event.target.x -= 5;
			if (event.target.x < (event.target.width * 0.5) * -1)
			{
				event.target.x = _scx;
			}
		}
		
		private function setup():void 
		{
			_button1 = createButton(0xcc0000);
			_button1.x = _scx;
			_button1.y = _scy - _button1.height * 2;
			_button1.buttonMode = true;
			this.stage.addChild(_button1);
			
			_button2 = createButton(0x0000cc);
			_button2.x = _scx;
			_button2.y = _scy + _button2.height * 2;
			_button2.buttonMode = true;
			_button2.tabEnabled = false;
			_button2.mouseChildren = false; // ココ！
			this.stage.addChild(_button2);
			
			_txtfmt = new TextFormat("Times New Roman", 20, 0xffffff);
			
			_txtfld1 = new TextField();
			_txtfld1.x -= _txtfld1.width * 0.5;
			_txtfld1.y -= 13;
			_txtfld1.defaultTextFormat = _txtfmt;
			_txtfld1.autoSize = TextFieldAutoSize.CENTER;
			_txtfld1.selectable = false;
			_txtfld1.text = "mouseChildren = true";
			this._button1.addChild(_txtfld1);
			
			_txtfld2 = new TextField();
			_txtfld2.x -= _txtfld2.width * 0.5;
			_txtfld2.y -= 13;
			_txtfld2.defaultTextFormat = _txtfmt;
			_txtfld2.autoSize = TextFieldAutoSize.CENTER;
			_txtfld2.selectable = false;
			_txtfld2.text = "mouseChildren = false";
			this._button2.addChild(_txtfld2);
		}
		
		private function createButton(color:uint):Sprite
		{
			var button:Sprite = new Sprite();
			button.graphics.beginFill(color);
			button.graphics.drawRoundRect( -100, -25, 200, 50, 30);
			button.graphics.endFill();
			return button;
		}
		
		
	}
	
}

まとめ

このシリーズのエントリーは、「AS3入門」のまとめにまとめてあります。

Permalink | コメント(0) | トラックバック(3)