[SketchFlow 따라하기] Working with SketchFlow

 

Expression Blend의 중요 기능 중 하나인 애니메이션을 이용해서 SketchFlow를 꾸면보는 시간을 가지겠습니다. 역시 첨부파일을 통해서 제공되고 이걸 Expression Blend로 여시면 되겠습니다.

 

08.zip

 

자 Boots 페이지로 가면 전에 있는 페이지에 여러 부츠들이 놓여져 있는 것을 확인할 수 있습니다.

 

 

여기다가 애니메이션 효과를 삽입하기 위해서는 Window 항목에 있는 Sketchflow Animation이란 것을 활성화시켜야 합니다.

 

 

사실 이 항목을 켜면 디자인 뷰 위에 새로운 창이 활성화됩니다.

사실 Expression Blend라는 툴이 조금은 넓은 모니터 환경을 요구합니다. 물론 작은 모니터에서도 쓸 수 있지만 불편합니다. 되도록이면 데스크탑에서 넓은 화면에서 작업하시는 것을 추천드립니다.

 

여기서 구현할 애니메이션은 다음과 같습니다. 저 밑에 있는 부츠를 선택하면 자동으로 가격이 팝업됩니다. 거기에 부츠를 위의 Add 카트쪽에 넣으며 카트쪽에 넣은 물건을 확인할 수 있습니다. 그리고 추가적으로 해당 상품에 대한 이벤트가 있으면 왼쪽에 팝업되는 형식을 취하고자 합니다. 이에 대한 준비물은 페이지 양쪽에 준비되어 있습니다.

 우선은 부츠를 Add to Cart에 넣었을 때 결과를 표시하기 위해서는 결과물이 그 창안에 떠야 하겠지요. Object and Timeline 창에서 yellow_rock_in_cart를 선택합니다.

 

 

이렇게 선택하지 않고 바로 디자인뷰상에서 그 아이템을 선택하게 되면 개체의 일부가 선택되지 않을 수도 있기 때문입니다. 물론 그룹화가 되어 있는 경우라면 다르겠지만요. 영역을 지정해서 선택해줘도 됩니다.

 

그 후에 해당 상품위에 마우스 커서를 올렸을 때의 결과를 표현하기 위해서 아래의 개체를 상품위에 올려놓습니다.

 

 

원래 기존의 상태는 지금 삽입한 개체들이 안보이는 사태이겠지요. 지금 삽입한 것들을 보이지 않게 하기 위해서는 Properties의 Opacity를 0으로 조절해주면 됩니다.

 

 

이렇게 개체 상으로는 존재하지만 실질적으로는 보이지 않는 상태입니다.

 

자 이제 본격적으로 애니메이션을 삽입할 차례입니다. 아까 생성한 Sketchflow Animation 창에서 +버튼을 누르게 되면 빈 애니메이션이 삽입됩니다.

 

 

그러면 디자인뷰 창에 녹화버튼이 뜨면서 지난번에 다뤘던 State 녹화창과 비슷하게 뜹니다.

 

 

그런데 자세히 보면 오른쪽 구석에 마우스 커서가 있는 것이 보이실겁니다.

한번 애니메이션을 테스트해보겠습니다. 이 마우스 커서를 아까 정보를 나타내고자 하는 부츠위에 드래그해주세요.

 

 

자 여러분들은 지금 애니메이션을 만드신 겁니다. 한번 Animation창에 있는 재생 버튼을 눌러볼까요?

 

 

마우스 커서가 움직이는 애니메이션을 구현했습니다. 새로운 애니메이션을 삽입하기 위해서 다음과 같이 Insert New를 해주시면 됩니다.

 

 

 이 것에 대한 원리는 지난 포스팅에서 소개해드린 State를 구성하는 방법과 동일합니다. 새로운 애니메이션 창이 떠 있는 상태에서 다시 원하는 상태로 바꿔놓으면 됩니다. 지금은 일단 마우스를 올려놓았을때 가격이 떠야 합니다. 추가적으로 마우스로 선택했을때 해당 상품이 조금 커지는 것도 좋겠지요.

가격이 뜨게 하는 건 Opacity를 100으로 다시 바꿔주면 됩니다. 이런 식으로 표현해주면 되겠지요.

 

 

이렇게 해야 마우스를 올려놓았을때 효과가 나타나게 됩니다. 이 결과물을 한번 확인해보겠습니다.

 

 

이런 식으로 애니메이션끼리 연속 동작을 구현할 수 있습니다. 그런데 가만히 보고 있으면 마우스를 올려놓았을 때 약간의 딜레이가 발생한다는 것을 확인할 수 있습니다. 이땐 다음 수치를 0으로 바꿔주면 됩니다.

 

 

바로 Hold Time을 수정하면 되는 겁니다. 결과는 직접 확인해보시기 바랍니다.

자 다음 애니메이션을 삽입해봅니다. 이번에 구현할 애니메이션은 마우스가 해당 상품을 Add to Cart에 넣었을 때입니다.

 

여기도 똑같이 하면 됩니다. 자신이 원하는 개체를 지정해서 이동시켜주면 하나의 애니메이션이 되는 겁니다. 위에서 설명한 애니메이션을 구현하려면 마우스 커서와 부츠를 동시에 선택해준후에 Add to Cart 란으로 이동시켜주면 되겠지요.

 

물론 가격도 지금 상황에서는 나오면 안되겠지요. 역시 Opacity를 0으로 바꿉니다. 이렇게 하면 다음과 같은 결과물을 얻을 수 있습니다.

 

 

애니메이션을 하나만 더 삽입합니다. 이번에 구현할 애니메이션은 Add to cart에 넣었을 때 그 상품이 사라지고 아까 Opacity를 0으로 만들었던 개체를 다시 띄우게 하는 겁니다. 그리고 좌측에 있던 개체인 할인 표시 알람이 등장하게 하는 겁니다. 일단 부츠만을 선택한 상태에서 Opacity를 0으로 만들고 아까 사라지게 만든 개체는 반대로 100으로 해줍니다. 그후에 좌측 알람을 이동시키면 되는 겁니다. 이전 과정을 하신 분들이라면 충분히 할 수 있는 내용으로 여겨집니다. 한번 확인해보겠습니다.

 

 

실제 플레이어에서도 이런 동작이 나타날까요? 정답은 당연히 나타납니다. 한번 f5키를 누르고 확인해보시지요.

 

 

실제 클라이언트에게 발표할 때도 이런 동작화면을 애니메이션으로 처리해서 보여준다면 조금더 효율적이지 않을까요? 여기까지가 SketchFlow의 Animation 효과에 대한 내용이었습니다.