버터백통의 N-Screen 레시피

플래시에서 버튼심벌로 등록을 하면 4개의 상태 프레임이 나온다.
up과 over , down , hit이라는 프레임으로 심플버튼에서 역시 4개의 상태를 구분하는 upState,overState,downState, hitTestState 속성이 있다. 이 속성들은 대입식으로 디스플레이 오브젝트를 값을 설정하여야 하고 반드시 hitTestState를 설정하여야 버튼으로 작동하게 된다.

upState : 평상시의 디스플레이 상태
overState : 마우스 커서가 ht영역에 닿을 때의 디스플레이 상태
downState : 마우스로 클릭하였을 때의 디스플레이 상태
hitTestState : 버튼의 영역을 결정하는 곳으로 통상 버튼의 up영역을 사용한다.

var sbtn:SimpleButton = new SimpleButton();
sbtn.upState = createRect( 0xFF0000 , 100 , 100 );
sbtn.overState = createRect( 0x00FF00 , 100 , 100 );
sbtn.downState = createRect( 0x0000FF , 100 , 100 );
sbtn.hitTestState = sbtn.upState;
sbtn.addEventListener( MouseEvent.ROLL_OVER , onOver );
sbtn.addEventListener( MouseEvent.CLICK , onConfirm );
addChild( sbtn );
 
function createRect( color:int , width:int , height:int ):Shape
  {
   var rect:Shape = new Shape();
   rect.graphics.beginFill( color );
   rect.graphics.drawRect( 0,0, width , height );
   rect.graphics.endFill();
   return rect;
  }
 
function onOver( e:MouseEvent ):void
  {
   trace("SimpleButton Over.")
  }
 
function onConfirm( e:MouseEvent ):void
  {
   trace("확인을 눌렀습니다.")
  }

이 처럼 작성된 버튼에 마우스를 가져다 대면 "SimpleButton Over."라고 출력하게 된다. 또 버튼을 클릭하게 되면 "확인을 눌렀습니다."라는 메세지를 볼 것이다.

컨테이너의 인덱스 번호가 큰것이 앞으로 나와 보다 작은 인덱스의 객체를 가린다고 설명하였다. 그렇다면 이미 화면에 붙어있는 객체의 인덱스 순서를 바꾸어 앞으로 혹은 뒤로 이동시키고자 할때는 setChildIndex()를 사용한다.

* setChildIndex( 이동할 객체 , 이동할 인덱스번호 )
어떠한 컨테이너에 10개의 객체가 붙어있다고 가정하면 그 컨테이너의 인덱스 범위는 0~9까지 이다. 이 컨텐이너에 제일 앞에서 두번째인 8번인덱스에 객체를 붙이고자 한다면 setChildIndex( 객체 , 8 )이라고 입력하면 된다. 또는 특정 객체 green의 위치에 앞에 붙이고자 할때 green의 인덱스 번호를 구하기 위해서는 getChildIndex라는 메서드르 사용한다. setChildIndex( 객체, getChildIndex(green) ) 이 처럼 green의 인덱스값을 구하여 그 위치에 객체를 이동 시키면 green의 인덱스는 1증가하여 해당 객체 앞에 놓이게 된다.

var red:Shape = new Shape();
red.graphics.beginFill(0xFF0000)
red.graphics.drawRect(0,0,100,100)
red.graphics.endFill();
red.x = 50
addChild( red )

var green:Shape = new Shape();
green.graphics.beginFill(0x00FF00)
green.graphics.drawRect(0,0,100,100)
green.graphics.endFill();
green.x = 100
addChild( green )

var blue:Shape = new Shape();
blue.graphics.beginFill(0x0000FF)
blue.graphics.drawRect(0,0,100,100)
blue.graphics.endFill();
blue.x = 150
addChild( blue )

var gray:Shape = new Shape();
gray.graphics.beginFill(0x666666)
gray.graphics.drawRect(0,0,100,100)
gray.graphics.endFill();
gray.x = 80
gray.y = -50
addChild( gray )

setChildIndex( gray , getChildIndex(green) )

* getChildIndex( 인덱스번호를 알려는 객체 )
getChildIndex은 어떠한 특정 객체의 인덱스값을 반환하는 메서드이다.


* getChildAt( 인덱스번호 )
delegate한 객체의 이름을 모르고 인덱스 번호를 알고있을 때 해당 객체로 접근하는 메서드이다.

addChild또는 addChildAt을 통하여 디스플레이 컨테이너에 추가된 객체를 지우고자 한다면 removeChild()또는 removeChildAt()을 통하여 제거해야 한다.

* removeChild( 제거할 객체 )
removeChild는 제거할 delegate를 통해 객체를 제거한다.


* removeChildAt( 인덱스번호 )
removeChildAt는 컨테이너의 인덱스번호를 참조하여 배치된 객체를 제거한다. 만얀 컨테이너의 모든 객체를 지우고자 한다면 순환문을 이용하여 배치된 객체를 제거한다.

참고 : 디스플레이 리스트에서 removeChild를 통하여 리스트에서 지우면 렌더링 엔진에서만 삭제되는 것일 뿐 객체가 완전히 삭제되는 것은 아니다. 만약 삭제하려면 객체를 참조하는 모든 것을 null로 설정해야 한다.