[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();
		}
	}
}

    

설정

트랙백

댓글

스킨 배경 플래시

Design/Web 2007. 3. 5. 05:08
안녕하세요...

현재 스킨에 사용하고 있는 배경 플래시의 무비클립 오브젝트를 변경한 bg.swf 파일을 올립니다.
사용하고 싶으신 분은 받아다가 사용하세요

사용 방법은 images/ 폴더 안에 파일 업로드 하시면 됩니다. 파일은 기존의 bg.swf 파일과 같으나 나타나는 무비클립 오브젝트의 모양을 변경한 것이니 첨부하는 bg.swf 파일만 업로드 하시면 됩니다.
감사합니다.


    

설정

트랙백

댓글

  • 이레오 2007.03.05 19:22 신고 ADDR 수정/삭제 답글

    오!! 강추합니다!! 감사합니다!!

    • 이레오 2007.03.05 19:23 신고 수정/삭제

      ㅎㅎ 누군가가 파란색 토마토를 막 홈페이지에다
      갈기는 것 같네요!!

    • jasu 2007.03.05 19:59 신고 수정/삭제

      ^^네...잘 사용하세요...

  • keit 2007.03.05 20:22 신고 ADDR 수정/삭제 답글

    앗 꾸준한 업데이트가 올라오는군요 이것또한 멋집니다 ^^

    • jasu 2007.03.06 09:30 신고 수정/삭제

      ^^ 감사합니다. 시간 나는대로 올릴 자료가 있으면 올려 놓도록 하겠습니다.

  • 2007.03.06 15:12 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2007.03.06 21:43 신고 수정/삭제

      죄송합니다. 소스는 개인적으로 만들었으나 사내에서 활용하는 것이기 때문에 공개하기는 어렵습니다. 두번째로 올려놓은 bg.swf의 경우는 이미지를 사용하시는 분이 만들어서 올릴수 있도록 해놓았으니 그것을 활용해 주세요... 죄송합니다.

  • 2007.03.06 15:43 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2007.03.06 21:42 신고 수정/삭제

      죄송합니다. 그렇게 하기 위해서는 플래시 소스 공개가 불가피하며 소스는 개인적으로 만들었으나 사내에서 사용하고 있는 소스들이기 때문에 개인적인 공개는 어렵습니다. 양해 바랍니다.

  • keegan 2007.03.07 22:06 신고 ADDR 수정/삭제 답글

    ㅎ 감사합니다. 적용해봤어요 ^^

    • jasu 2007.03.07 23:24 신고 수정/삭제

      네...즐거운 하루 되세요...^^

  • Hitsuzi 2007.03.21 20:37 신고 ADDR 수정/삭제 답글

    제가 흰색을 무지 좋아하는데. 어디서 구할수 없을까요?? ㅠㅠ

    • jasu 2007.03.22 02:04 신고 수정/삭제

      http://jasu.tistory.com/132
      위 포스트로 가시면 배경화면을 업그레이드한 자료가 있습니다. 외부에 자신이 만든 이미지를 가지고 적용을 할 수 있으니 설명하는 방법대로 이미지를 만드신 다음에 사용해 보세요... 감사합니다.

  • 시늉 2007.03.27 11:08 신고 ADDR 수정/삭제 답글

    적용해보니 플래시가 안나오네요^^; 처음엔 왼쪽 위 상단에서만 조그만게 나오기는 했었는데
    잘못한게 있나해서 이것저것 해보았는데 안되는군요. 예전 걸로 잘 사용하고있습니다.

    • jasu 2007.03.27 19:18 신고 수정/삭제

      아마도 http://jasu.tistory.com/132 이 배경을 먼저 업데이트 하셔야 할 것 같습니다. 초기 bg.swf는 플래시내에 이미지를 삽입한 형태이고 위 주소에 있는 것은 외부에 있는 이미지를 로드해서 사용하는 형태인데 이미지가 없어서 무비클립들이 나타나지 않은 것 같으니 위 자료의 압축폴더 안에 보시면 jpg파일을 같이 업로드 하시면 될듯 싶네요...감사합니다.

  • 시늉 2007.03.28 03:37 신고 ADDR 수정/삭제 답글

    감사합니다.플래시 공부 열심히 해서 저도 한번 독창적으로 꾸며보고 싶군요.

    • jasu 2007.03.28 20:39 신고 수정/삭제

      네...나중에 만드시면 알려주시면 방문해 보겠습니다...

  • 비의진실 2007.06.01 17:13 신고 ADDR 수정/삭제 답글

    아 스킨 너무 이쁩니다, 잘 사용하고 있는데요..
    저 나비 스킨은 없나요^^;
    그리고 화면 1024사이즈에는 가로 스크롤이 생기네요
    담번 스킨 작업하실때 1024버전도....;
    스킨 감사합니다(__)

    • jasu 2007.06.03 21:14 신고 수정/삭제

      플래시 배경의 기본 사이즈가 있어서 스크롤바가 생기는 것 같네요... ^^ 다음에는 생각해 보도록 하겠습니다. 감사합니다.

  • 2007.07.14 02:35 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2007.07.14 02:56 신고 수정/삭제

      안녕하세요 말씀 감사합니다. 카테고리 부분의 배경색과 글자색은 티스토리 관리자 모드에서 수정 가능합니다. 환경설정 - > 화면설정의 아래쪽에 보시면 카테고리 색을 변경할 수 있으니 그곳에서 수정해서 사용하시면 됩니다. 감사합니다.

  • 2008.05.10 14:51 ADDR 수정/삭제 답글

    비밀댓글입니다

    • jasu 2008.05.13 15:35 신고 수정/삭제

      배경을 랜덤으로 보여주는 것은 이미지 관계로 배포본에는 플래시 안에 삽입한 상태라 적용이 어려울 듯 싶네요 ;;