[20] States - 상태 추가하기
프레이머에서는 여러 상황에 대해 나누어 설정할수 있도록 State(상태)라는 값을 제공합니다. 여러 상태를 미리 만들어두고 실제 사용자의 입력이 들어왔을때는 상태값만 변경해서 여러 모습으로 보여줄 수 있습니다.
예를들어 이미지 갤러리를 생각해보겠습니다. 여러개의 작은 이미지가 있고 원하는 이미지를 선택해서 클릭하면 큰 이미지를 볼 수 있겠죠. 이때 작은 이미지인 상태 A, 큰 이미지인 상태 B를 만들어둡니다. 그리고 작은 이미지일때는 상태 값을 A 로 전환하고 큰 이미지일때는 상태 값을 B로 전환해서 보여줄 수 있습니다.
또 상태가 필요한 다른 예를 들어 보겠습니다. 만약 호텔 예약 시스템의 프로토타입을 제작한다고 생각해보죠. 원하는 시간대의 방이 예약가능할때 , 예약대기중일때, 결제가 완료되었을때 같이 여러개의 상태가 존재한다면 어떻게 해야 할까요?
상태 값을 사용하지 않는다면 예약현황에 대한 변수를 만들고 변수에 따라 각각 처리하는 구문을 방의 예약 상황에 따라 계속 실행해주어야 할것입니다. 하지만 상태 값을 사용한다면 원하는 상황에 맞게 미리 모양을 설정해두고 방의 예약 상황이 바뀌면 상태값만 바꿔 모양을 달리 보여줄 수 있으니 편리하게 작업이 가능합니다.
그럼 상태에 대해서 배워보도록 하겠습니다.
State 추가하기
프레이머에서 상태를 추가하기 위해서는 먼저 레이어가 필요합니다. 이벤트와 마찬가지로 레이어가 없으면 상태를 추가할 수가 없습니다. 여기서는 Command + shift + N 키를 눌러 빈 레이어를 하나 만들어주겠습니다.
<그림. 빈 레이어 생성>
그리고 상태를 추가하기 위해 툴바의 ‘Insert’ - ‘State’ 메뉴에 마우스를 올립니다. 그러면 방금 추가한 레이어 이름인 ‘layerA’ 가 표시되어 있을 것입니다. 이 메뉴를 클릭합니다.
<그림. 상태를 추가>
그럼 기본적으로 제공되는 상태 소스코드가 추가됩니다. 만약 상태값이 하나도 없는 상황이라면 상태값은 ‘a’ 가 됩니다. 여기서 상태에 값을 추가해보겠습니다.
상태에 추가할 수 있는 내용은 레이어의 속성값들입니다. x,y 등의 위치값이나 width, height와 같은 길이 그리고 이미지 필터등의 모든 속성값을 사용할 수 있습니다. 그래서 상태에 따라 크기나 위치를 다르게 해주면 상태 값에 지정된 속성값으로 바뀌는 것입니다.
소스코드에 몇가지 속성을 추가해서 테스트해보겠습니다. a: 다음 줄에 아래의 소스코드를 삽입합니다.
layerA = new Layer
layerA.states.a =
x: 150
y: 350
이렇게 추가했지만 변하는 것은 아무것도 없습니다. 왜냐면 새로운 상태가 하나 생겼을뿐 이 상태로 변환하는 스크립트가 하나도 없기 때문입니다.
그럼 레이어가 클릭될 때 상태값을 전환하도록 만들어 보겠습니다. ‘Insert’ - ‘Events’ - ‘Click’ - ‘Click’ 메뉴를 클릭해서 이벤트를 하나 추가해줍니다.
<그림. 테스트를 위한 클릭 이벤트 추가>
소스코드에 추가된 onClick 구문 바로 다음줄에 아래의 소스코드를 입력해 줍니다.
layerA.onClick (event, layer) ->
layerA.states.next()
<그림. 이벤트에 소스코드 추가후 레이어를 클릭함>
이제 레이어를 클릭하면 레이어의 상태가 ‘a’로 변하면서 상태 ‘a’에 설정한 x, y 좌표로 이동합니다. 그리고 다시 클릭을 하면 원래 위치로 되돌아 옵니다. 이것은 왜 그럴까요?
레이어의 상태값은 기본적으로 ‘default’라고 되어 있습니다. 하지만 이 상태값은 평소에는 숨겨져있습니다. 그래서 처음에 클릭했을때는 상태값이 ‘default’ 에서 ‘a’로 변한것이고, 두번째 클릭했을때는 반대로 ‘a’ 에서 ‘default’로 값이 변한 것입니다.
소스코드 분석
여기서 쓰인 layerA.states.next() 함수에 대해 알아보겠습니다.
상태값 변경에 쓰이는 함수는 대표적으로 states.next() 와 states.switch() 가 있습니다. 그리고 states.switch()와 비슷한 역할을 하지만 애니메이션이 없는 states.switchInstant()함수가 있습니다.
states.next()
states.next()는 여러 상태값이 있을때 차례대로 상태를 변경합니다. 지금은 ‘default’ 상태와 ‘a’ 상태를 번갈아 실행하고 있습니다. 만약 상태가 b, c 이렇게 추가된다면 states.next()가 실행될때마다 추가한 순서대로 전환이 될 것입니다.
states.switch()
states.switch()는 states.next() 와 달리 콕 집어서 상태명을 지정하는 함수입니다. 사용법은 states.switch(변경하고 싶은 상태명) 입니다. 다음 그림을 보게되면 states.next() 대신에 states.switch(‘a’)라고 되어 있습니다.
<그림. states.switch() 함수 사용>
이럴 경우 동작이 어떻게 될까요? 실행해보면 처음 클릭할때는 정상적으로 ‘a’ 상태로 바뀝니다. 하지만 다시 클릭해도 그 자리에 있게 됩니다. 왜냐하면 states.switch() 함수는 지정한 상태값으로만 전환이 가능하기 때문입니다. 무조건 그 상태값으로만 이동하기 때문에 기본 상태인 ‘defatult’로는 돌아갈 수가 없습니다.
이 소스코드를 states.next()와 같이 변경하기 위해서는 layerA가 클릭되었을때 현재 어떤 상태를 갖고 있는지 확인해야 합니다. 소스코드에 아래 print( layerA.states.current.name )라고 추가해서 현재 값을 확인할 수 있습니다.
layerA.onClick (event, layer) ->
layerA.states.switch('a')
print(layerA.states.current.name )
<그림. 현재의 상태값을 표시>
이제 다시 클릭해보면 ‘default’로 시작해서 계속 클릭하면 ‘a’라고 표시될 것입니다. 조건문을 사용해서 상태값이 ‘default’일때는 ‘a’로 변경하고 ‘a’일때는 ‘default’로 변경해보겠습니다.
layerA.onClick (event, layer) ->
if layerA.states.current.name == "default"
layerA.states.switch('a')
else
layerA.states.switch('default')
<그림. 조건문을 이용한 states.switch() 함수 이용>
이렇게 조건문을 이용하면 여러 상황에 맞게 상태값을 변경할 수 있습니다. 이 구문은 상태값을 변환할때 많이 사용되는 내용이니 반드시 익혀두시기 바랍니다.
states.switchInstant()
states.switchInstant() 함수는 states.switch() 함수와 모든 것이 같고 한가지만 다릅니다. 바로 상태가 변경될때 애니메이션 여부입니다. switch()는 이전 예제에서 보았듯 레이어의 속성값이 변할때 애니메이션이 포함되어 서서히 바뀌게 됩니다. 하지만 states.switchInstant()함수는 애니메이션이 없이 바로 변경이 됩니다. 애니메이션이 필요할때는 switch() 함수를, 반대로 애니메이션이 필요없을때는 switchInstant() 구문을 이용하면됩니다.
