[SketchFlow 따라하기] Working with Behaviors

 

간만에 올리는 포스팅입니다. 그냥 동방에 앉아있느니 이렇게라도 하면 시간이 잘 갈 것 같습니다.

이번 과정에서 해보고자 하는 것은 사용자의 행동에 따라서 어플이 변화하는 과정을 구현해보려고 합니다.

역시 지난 포스팅과 마찬가지로 첨부파일의 프로젝트를 하나씩 따라해보겠습니다.

 

09.zip

 

우선 Boot Screen으로 들어가면 지난 시간에 구현했던 애니메이션이 나와있습니다. 이제 다음 동작은 물건이 들어있을 때 Check Out 버튼을 누르면 ReviewCart Screen으로 이동하는 것이겠지요. Checkout 버튼을 선택하면 Navigate To 라는 항목이 있습니다. 여기서 자신이 원하는 페이지를 선택하면 됩니다. 이 예제같은 경우는 ReviewCart이겠지요.

 

 

 그럼 ReviewCart 로 넘어가서 Back버튼도 역시 같은 방법으로 해줍니다. Navigate To로 들어가면 Back이라는 항목이 있습니다. 이 항목이 바로 Back 버튼을 눌렀을 때와 동일한 기능을 수행하게 해주는 것이지요. 즉 현재 상태의 바로 이전으로 돌아가는 것입니다.

 

 

마찬가지로 Confirm 버튼은 Checkout 선택해줍니다. 이로써 전체적인 네비게이션은 이뤄집니다. 역시 지금과 같이 형성된 연결고리는 SketchFlow player를 실행시켜도 동일하게 작용합니다.

 

자 이제는 다시 Boot 페이지로 돌아가서 CheckOut 버튼을 선택합니다. 그럼 Object and Timeline에서도 해당 개체가 선택됩니다. 그 옆에 작은 삼각형이 있는데 그걸 누르면 다음과 같이 출력됩니다.

 

 

이 하위개념으로 잡혀있는 것이 바로 아까 집어넣었던 NavigateTo Action입니다. 이 버튼을 눌렀을 때 실행되는 이벤트라는 것이지요. 그럼 지난 시간에 만들었던 애니메이션 이벤트도 이런식으로 뺄 수 있을까요? 할 수 있습니다.

 

 

전체를 선택하는 LayoutRoot를 마우스 우클릭으로 선택하면 여러가지 항목이 있는데 이중 맨 밑에 있는 Play SketchFlowAnimation 을 선택하면 저번 시간에 만들었던 애니메이션이

 

 

하나의 개체로써 삽입되게 됩니다.

자 저번시간의 동영상에서도 봤다시피 이 애니메이션이 동작하기 위해서는 Player상의 Animation 항목을 선택해줘야 실행했습니다. 어차피 실행 예시를 보여주는 프로토타입인데 굳이 일일이 항목을 선택할 필요가 있을까요? 지금 만든 것이 바로 그런 것을 해결하기 위한 방법입니다. 지금 생성된 개체를 눌러보면 Properties 창이 갑자기 Trigger 창으로 변합니다.

 

 

Trigger라고 하면 총의 방아쇠를 말합니다. 결론적으로 이벤트의 Trigger라고 하는 것은 이벤트가 활성화하기 위한 조건이라고 보시면 됩니다. 지금 이벤트 이름이 저렇게 되어 있는데 저말은 즉 마우스를 왼쪽으로 클릭했을 때를 말합니다. 만약 창이 켜졌을 때 바로 실행되게 하고 싶으면 이벤트 이름을 Loaded로 바꾸시면 됩니다.

 

 

자 한번 실행시켜 보겠습니다.

 

 

보다시피 창이 Load 되자마자 애니메이션이 활성화되는 것을 확인할 수 있습니다. 위의 이벤트 이름을 다양하게 줌으로써 사용자의 행동에 따른 동작을 각각 다르게 줄 수 있습니다.

 ------------------------------------------------------------------------------------------------------------

사실 동영상에는 DragDropItem이라는 Behavior에 대한 설명이 들어가 있습니다. 그런데 이건 왠지 지금 동영상의 테스트환경이었던 Blend 3에서 구동되었던 것 같습니다. Blend 4에서는 해당 Behavior가 없습니다. 다행히 이걸 코드로 구현해서 보여주는 샘플이 있습니다. 처음 Blend를 켰을때 뜨는 Welcome 페이지에서 Sample 쪽을 가보면 SnowBoardSketch라는 프로젝트가 있습니다. 여기에 DragDropCopyItemBehavior.cs 라는 파일이 위의 DragDropItem behavior의 성격을 띄고 있습니다.

물론 이걸 바로 지금의 프로젝트에 Import시키니까 여러 오류가 발생하네요. 그냥 해당 샘플 프로젝트에서 빌드시킨후 테스트해보면 다음의 효과를 볼수 있습니다. 

해당 프로젝트는 여기까지 였습니다.