[Starling-09] Starling의 Button 클래스 사용

Programming/Framework 2012. 1. 9. 11:22
Starling은 버튼을 쉽게 구현할 수 있도록 Button 클래스가 포함되어 있다. Button 클래스는 DisplayObjectContainer 클래스의 서브 클래스다. 따라서 모든 표시 객체를 자식으로 가질 수 있지만 보통은 스킨 이미지와 제목을 표시한다. 그리고 버튼 클릭을 알리는 기능이 있다.

아래가 Button의 생성자다. 첫 번째 인수는 버튼에 대한 스킨이 되는 텍스처이고 옵션으로, 두 번째 인수에 제목을, 3번 째 인수에는 누를 때 표시할 텍스처를 지정할 수 있다.
Button(upState:Texture, text:String = "", downState:Texture=null)

Flash Professional에서 만든 버튼과 달리, "오버" 스킨은 지정할 수 없다. 아마도 이것은 터치 장치의 이용을 전제로 하고 있기 때문이라고 생각된다.

버튼을 클릭하면 (또는 탭하면) triggered라는 이벤트가 발생한다. 클릭시 실행하고 싶은 처리는 triggered 이벤트 리스너 함수에 작성한다. 아래는 그 예제다. 텍스처 포함 관련 부분은 여러번 나왔기 때문에 생략한다.
import starling.display.Button;
	import starling.events.Event;

	private var myButton:Button;

	private function onAddedToStage(e:Event):void {
		var myBitmap:Bitmap = new MyBitmap  ;
		var myTexture:Texture = Texture.fromBitmap(myBitmap);

		// 텍스처를 지정하여 단추의 객체를 생성
		myButton = new Button(myTexture);

		// triggered 이벤트 수신기를 추가
		myButton.addEventListener(Event.TRIGgered, onTriggered);
	}

	private function onTriggered(e:Event):void {
		// 이벤트를 발생 개체를 가져
		trace(e.target);
	}

Staring 이벤트는 Flash Player의 이벤트처럼 버블링(표시 목록 계층 간에 전파, 자식에서 부모 방향으로만 지원) 하는 여러 버튼을 사용할 때는 triggered 이벤트를 부모 객체에서 처리하는 것도 가능하다.


스킨 지정
Starling 버튼은 터치하면 (또는 버튼에 마우스가 눌러진 상태가 되면), 버튼의 표시 크기가 조금 작아진다. 손가락을 떼면 원래 크기로 돌아간다. 이 것은 버튼에 표준 텍스처 하나만 지정된 경우의 동작이다. 버튼을 눌린 상태에 해당하는 텍스처를 지정하면 텍스처가 작아지는 대신 스킨이 바뀐다.

이 두 텍스처는 생성자에 지정할 수 있지만 나중에 속성에서도 설정할 수 있다. 아래가 속성 목록이다.

upState : 버튼이 터치되지 않은 상태로 표시되는 텍스처
downState : 버튼이 터치되는 상태로 표시되는 텍스처
scaleWhenDown : 터치되어있는 상태 텍스처의 표시 비율

upState과 downState가 각 상태로 표시하는 텍스처를 설정하는 속성이다. (upState는 생성자에서 지정 필수) 성능의 관점에서 어느 텍스처도 같은 텍스처 아틀라스에 있는 것이 바람직할 것이다. 마지막 scaleWhenDown는 0에서 1 사이의 숫자를 지정한다. 이 값은 downState = null의 경우에만 사용할 수 있다.

위에서도 썼지만, 단순한 장식 추가가 필요한 경우, 2 개의 텍스처 이외에도 항시 표시 객체를 추가할 수 있다. 만약 동작을 변경하려면, 커스텀 버튼 클래스를 만드는 편이 빠를지도 모른다.


텍스트 표시
Starling의 버튼은 텍스처로 지정한 이미지에 텍스트를 표시할 수 있다. 텍스트는 생성자에서 지정하거나 인스턴스 생성 후, text 속성에 설정한다. textBounds 속성을 사용하여 텍스트의 위치를​​ 지정할 수도 있다.

text : 버튼에 표시되는 텍스트
textBounds : 텍스트 표시 영역을 Rectangle로 지정

텍스트 표시에 사용할 글꼴의 모양을 설정하는 속성도 있다. 거의 TextField의 경우와 동일하다.

fontName : 텍스트 표시에 사용할 글꼴 이름
fontSize : 텍스트 표시에 사용할 글꼴의 크기
fontColor : 글꼴 색상
fontBold : 글꼴을 굵게 표시 여부를 지정

포함된 글꼴과 비트맵 글꼴을 사용할 수 있다.


버튼 비활성화
버튼을 사용할 수 없는 상태라면 enabled 속성의 값을 false로 적용한다.

enabled : 버튼을 사용할 수 있는지 여부를 지정
alphaWhenDisabled : 버튼이 비활성화 때 알파 값

기본적으로 단추를 비활성화하면 버튼의 표시가 반투명하게 된다. 그 때 사용되는 알파 값은 alphaWhenDisabled에 설정된 값이다.


원본 : http://cuaoar.jp/2012/01/starling-button.html




package {
	import starling.events.Event;
	import starling.core.Starling;
	import starling.display.Sprite;
	import starling.display.Button;
	import starling.textures.Texture;
	import starling.display.DisplayObject;
	import flash.geom.Rectangle;
	import flash.display.Bitmap;

	public class Demo extends Sprite {

		[Embed(source="icon128.png")]
		private var MyBitmap:Class;
		
		private var myButton:Button;

		public function Demo() {
			// addedToStage 이벤트에 대한 리스너 추가
			addEventListener( Event.ADDED_TO_STAGE , onAddedToStage);
		}


		private function onAddedToStage(e:Event):void {
			var myBitmap:Bitmap = new MyBitmap() as Bitmap;
			var myTexture:Texture = Texture.fromBitmap(myBitmap);

			// 텍스처를 지정하여 단추의 객체를 생성
			myButton = new Button(myTexture);
			
			// 터치 상태일 때, 텍스처의 표시 비율
			myButton.scaleWhenDown = 0.95;
			
			myButton.fontColor = 0xFFFFFF;
			myButton.fontBold = true;
			myButton.fontSize = 24;
			myButton.text = "BUTTON";
			myButton.textBounds = new Rectangle(myButton.width-60>>1, 85, 60, 30);
			
			// 
			addChild(myButton);
			setAlign(myButton);
			
			// triggered 이벤트 수신기를 추가
			myButton.addEventListener(Event.TRIGGERED, onTriggered);
		}

		private function onTriggered(e:Event):void {
			// 이벤트를 발생 개체를 가져
			trace(e.target);
			myButton.fontColor = Math.random()*0xFFFFFF;
		}

		private function setAlign(inTarget:DisplayObject):void {
			inTarget.x = stage.stageWidth - inTarget.width >> 1;
			inTarget.y = stage.stageHeight - inTarget.height >> 1;
		}

		public override function dispose():void {
			removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
			super.dispose();
		}
	}
}

    

설정

트랙백

댓글

[AS3] BasicButton 테스트

Project/Programming 2007. 11. 18. 02:07
테스트 파일을 만들 때 버튼을 많이 사용하게 되는데 기본 적으로 사용하는 버튼이 없어서 만들어 봤다. 클릭시 나타나는 숫자들의 의미는 없다.


function getString():String{
var str:String = "";
var intLen:int= Math.random()*30;
for(var i:int;i<=intLen;i++){
str +=String(int(Math.random()*9));
}
return str;
}







    

설정

트랙백

댓글

[AS3] Sprite의 마우스 이벤트

Programming/ActionScript 3.0 2007. 7. 6. 10:46
Sprite의 마우스 이벤트

AS3에서 버튼을 작성하는 경우 우선은 SimpleButton의 사용을 생각할 수 있지만 간단하지 않은버튼 형태의 경우는 SimpleButton을 대신하여 Sprite를 사용할 수 있다. 그 경우 버튼으로서 사용하는 Sprite의 안에 다른 Sprite 오브젝트로서 배치하고 버튼 형태의 모션을 만드는 것도 있을 수 있다.
그렇지만 이 때 다음과 같은 문제가 발생할 수 있다. 버튼으로서 사용한 Sprite의 안에 있는  Sprite도 마우스 이벤트의 대상이 되는 것이다. 이로 인해서 버튼용의 Sprite가 아니라 그 안에 있는 Sprite가 이벤트의 타겟이 되어 버릴 수 있다.(AS3는 DisplayObject의 서브 클래스를 추가하면 의도하지 않아도 이벤트 플로우가 바뀌어 버린다.)

이러한 문제를 방지하려면 mouseEnabled 프롭퍼티를 false로 설정하면 가능하다. Sprite 하나하나에 임의로 설정하여 관리하는 것이 귀찮으면 버튼용 Sprite의 mouseChildren 프롭퍼티를 false로 하는 방법도 있다. 이렇게 하면 버튼용 Sprite의 안에 있는 오브젝트는 모두 이벤트 대상에서 제외된다.

public mouseEnabled : Boolean  // 마우스 이벤트를 받을까
public mouseChildren : Boolean // 아이 오브젝트가 마우스 이벤트를 받을까
public buttonMode : Boolean // 버튼으로서 행동할까
public hitArea : Sprite // 마우스 이벤트의 대상이 되는 화면상의 영역
public useHandCursor : Boolean // 커서의 형상을 손의 형태로 할까

buttonMode 프롭퍼티를 true로 설정하면 마우스가 Sprite의 위에 왔을 때 마우스의 모양을 자동적으로 손 모양으로 바꾸어 준다.(useHandCursor 프롭퍼티 쪽이 우선)

    

설정

트랙백

댓글

[AS3] SimpleButton 클래스

Programming/ActionScript 3.0 2007. 7. 6. 10:15

SimpleButtonInteractiveObject의 서브 클래스로서 마우스의 조작에 따라 버튼처럼 행동할 수 있다. Flash authoring tool로 버튼 심볼을 작성하면 4개의 프레임이 생기는데 SimpleButton 에도 각각의 프레임에 대응하는 프롭퍼티가 존재한다.

 
public upState : DisplayObject        //
업 상태의 표시 오브젝트
public overState : DisplayObject      // 오버 상태의 표시 오브젝트
public downState : DisplayObject     // 다운 상태의 표시 오브젝트
public hitTestState : DisplayObject    // 히트 테스트용 오브젝트

 
이상의 4개의 프롭퍼티에 대응하는 마우스 조작 상태로 의도된 표시를 표현한다. DisplayObject 를 설정하는 것이 SimpleButton의 기본적인 사용 방법이다.

var myButton:SimpleButton = new SimpleButton();
addChild(myButton);

// 각 스테이트용의 오브젝트를 작성(하나의 Shape를 공유)
var stateShape:Shape = new Shape();
stateShape.graphics.lineStyle(2, 0x202020);
stateShape.graphics.beginFill(0xFF0000);
stateShape.graphics.drawRect(10, 10, 50, 50);

// 버튼 오브젝트의 프롭퍼티를 설정
myButton.upState = stateShape;
myButton.downState = stateShape;
myButton.overState = stateShape;
myButton.hitTestState = stateShape;

SimpleButton에는 위 4개의 상태 오브젝트 외에 아래와 같은 프롭퍼티가 있다.

 
public trackAsMenu : Boolean       //
메뉴와 같은 사용법을 할 것인가
public enabled : Boolean            // 버튼을 유효하게 할 것인가
public useHandCursor : Boolean     // 커서의 모양을 핸드커서 형태로 것인가

 
trackAsMenu
는 마우스를 눌렀다가 다른 장소에서 마우스를 놓았을 경우에서도 click 이벤트를 받고 싶은 경우에 사용한다. 보통 click 이벤트는 동일 오브젝트상에서 마우스를 클릭하는 행위를 하지 않으면 dispatch 되지 않지만 trackAsMenu true로 해 두면 다른 오브젝트상에서 마우스를 놓아도 적용된다. SimpleButton 오브젝트상에서 마우스를 놓았을 경우에도 그 SimpleButton 오브젝트에 click 이벤트가  dispatch된다. 메뉴를 만들 때 유용하다.

enabled 프롭퍼티는 버튼의 유효/ 무효를 선택할 수 있다. enabled false로 설정하면 실제 마우스를 조작해도 외형상은 반응하지 않는 것 처럼 보이지만 이벤트는 dispatch된다.

useHandCursor 프롭퍼티는 디폴트가 true. 보통은 특별히 신경 쓸 필요는 없을 것 같다.

    

설정

트랙백

댓글