기획자를 위한 WP7 개발 기초 - Sketchflow 다루기 (5)

역시 예제 파일은 있습니다. 지난 시간에는 결과물도 포함되어 있었지만 
이번에는 실습 준비물만 있습니다.

WPSketchFlowLesson04.z02

WPSketchFlowLesson04.z01

WPSketchFlowLesson04.zip

 
이번 시간에 할 내용은 일러스트레이트에서 파일을 importing하고 transition을 사용해서 애니메이션 생성하는 것을 주로 다뤄보고자 합니다.

 우선 프로젝트를 연 후 기존에 Sketchflow map에 형성해 두었던 것중 안썼던 AdvSearch를 선택합니다.그리고 Assets에서 Pivot control을 찾아서 거기에 삽입합니다. 아마 예제 파일은 여기까지 되어 있는 것 같습니다. 그 Pivot을 열면 여러가지 PivotItem들이 들어있는데 그중에 우리는 RecipePivotItem에 추가를 시켜야 합니다. 

그런데 일전에 Panorama를 할때도 이야기 했었지만 앞의 개체가 보여지는 한 다음 페이지에 있는 개체는 안 보입니다.
그래서 이걸 꺼주는 작업을 해줘야 합니다. Panorama에서는 Properties-Appearance-Visibility를 통해서 개체의 보이고 안보이고를 선택해줬었는데 이번에는 그런 방식이 아닌 Object창에서 안보이게 하는 것을 보이고자 합니다.

Pivot을 열면 옆에 눈 모양이 있습니다. 그중 첫번째 timeCravinPivotItem의 눈을 끄게 하면

 위와 같이 그안에 있던 개체들이 사라지는 것을 확인할 수 있습니다.
유념해야 할 점은 이 효과는 앞에서 이야기했던 Visibility 속성과는 다른 개념입니다. 거기서는 아예 프로젝트 상에서 안보이게 하는 것이지만 지금 한 Hide 효과는 시각적으로만 안 보이는 상태입니다. 정상적으로 컴파일했을때는 나타난다는 이야기입니다.

즉 위에서 보여지는 효과는 실질상으로 눈에만 안보이는 상태인 겁니다. 보통 이 효과는 Pivot Control에서 주로 이용합니다.

 이제 밑에 있던 RecipePivotItem을 TimeCravinPivotItem 위로 올립니다.
 

그럼 디자인뷰상에서도 보여지는 것이

 
이렇게 바뀌게 됩니다. 이제 수정하는 것은 recipe에 관한 개체를 수정하는 것이 됩니다. 

보통 Blend 내의 개체를 그대로 사용해도 되지만 조금더 멋있는 효과를 위해서 일러스트레이트에서 만든 파일을 가져오고자 합니다. 첨부된 파일 속에 아마 ChickenOliveComp라는 파일이 있을겁니다. 이파일을 이용하겠습니다.

우선 기존에 올렸던 RecipePivotItem을 열고 그안에 Grid란 항목을 선택합니다.
그리고 메뉴창에 File-Import Adobe Illustrator File을 선택합니다.

그리고 첨부한 파일 중 ChickenOliveComp.ai라는 파일을 선택해줍니다.

 오 선택해서 넣어주니까 Grid 창에 뭔가 화려한 것이 떠 있습니다.

 그런데 위의 Pivot Control까지 덮어졌습니다. 이제 이렇게 Importing한 파일을 아까 Grid속에 집어넣어주어야 합니다. 그리고 사용자가 원하는대로 Resizing해주면 됩니다. 필요하다면 V키를 눌러서 위치를 조금 수정해줘도 되겠지요.
 

이제 Chicken항목을 열어보면
 

무수한 개체들이 등장합니다. 사용자는 이것 하나하나를 조절하고 애니메이션을 줄 수 있습니다.
일단 여기까지 하고 저장합니다.

 열어본 개체중에서 중간에 SmallHand라는 항목을 선택합니다. 그럼 디자인 뷰상에서는 시계의 작은 바늘이 선택될 것입니다. 우리가 Recipe를 만드는 이상 이 시계바늘이 움직이면서 남은 시간을 표시해주면 좋겠지요.
이제 그 애니메이션 삽입을 해보고자 합니다. Object창에 보시면 중간에 +버튼이 있을겁니다.

이게 새로운 애니메이션을 삽입할때 쓰는 겁니다. 블랜드 내에서는 스토리보드라고 통칭합니다. 이걸 하나 생성합니다.

이제 창이 조금 바뀌었을 겁니다. Object창 옆에 뭔가가 새롭게 생겼는데 너무 좁지요? 그럼 다음과 같이 해줍니다.
메뉴창에 보시면 중간에 Windows 항목이 있습니다.

거기서 워크스페이스를 Animation으로 선택하면 애니메이션을 하기에 적합하게끔 창 배치가 이뤄집니다.
여러분도 느끼시겠지만 object창이 늘어난 것을 보실 수 있을 겁니다.

실질상으로 map은 애니메이션 설계할 때는 필요없는 요소이기 때문에 빠진겁니다. 이전으로 돌아가려면 다시 워크스페이스를 디자인으로 하시면 됩니다. 참 이렇게 할 때 단축키는 f6입니다. 

위 그림은 애니메이션이 되고 있다는 것을 나타내고 있습니다. 실제로 녹화라는 개념을 적용하고 있는 것이지요. 이제 개체에 변화를 주면 그것을 기억하고 따라하게 됩니다.

SmallHand가 선택되어 있는 상태에서 Properties- TransForm을 들어가면 지난시간에 배웠던 Reference point 항목이 첫째항에 떠 있습니다. 거기서 다음과 같이 해줍니다.

지금과 같이 설정한건 기준점을 Lower center로 맞춘겁니다. 이제 무슨 효과를 주든 효과는 이 Lower Center를 기준으로 이뤄집니다.

이제 이 이미지를 60초동안 효과를 주고자 합니다. 지금 Playhead position이라고 되어 있는 부분을 선택하고 60이라고 넣어줍니다. 반드시 smallHand 옆에는 빨간색 표시가 되어 있어야 합니다.

그리고

 위의 Record KeyFrame이라는 버튼을 누르게 되면 흰줄이 생길겁니다. 이게 지금까지 준 효과를 60초동안 보여주겠다는 의미입니다.그런데 지금 당장 디버깅을 해보면 알겠지만 변화가 없습니다. 우리는 지금까지 기준점만 변화를 준것이기 때문에 60초후의 효과에 대해서도 생각해보아야 합니다. 그럼 시계바늘이니까 한바퀴 도는 것을 고려합시다. 자 다시 Transform으로 돌아가서 두번째 탭인 Rotate로 들어갑시다.

그리고 한바퀴 도는거니까 각도를 360으로 넣어주면 되겠습니다.

그리고 다시 위의 Record KeyFrame을 누르면 이제 기억이 되는 겁니다.

이걸 확인해보기 위해서는 

이 재생 버튼을 누르시면 60초동안 짧은 바늘이 한바퀴 도는 것을 확인할 수 있을 겁니다.

분명 제대로 안되시는 분이 계실겁니다. 기준점이 안 맞아서 바늘이 제자리에서 돌거나 할겁니다. 그럼 다시 기준접 삽입부터 시도 하셔야 합니다. 분명 60초 뒤에도 기준점은 Lower Center로 되어있어야 시계처럼 한바퀴 도는 것을 확인할 수 있을 겁니다.

요기까지 되셨으면 이제 스토리보드의 제목을 눌러보세요. 아마 기본 설정이면 Storyboard1으로 되어있을 거고 저는 그걸 Timer라고 했습니다.그럼 Properties 창이 

 다음과 같이 바뀝니다.여기서 RepeatBehavior를 Forever로 바꿔줍니다.
 

여기서 애니메이션 설정시 가장 중요한 닫기가 나옵니다. 모든 애니메이션의 끝은 위와 같이 닫기 버튼을 눌러줘야 끝납니다. 이걸 안해주면 변경해주는 설정이 모두 애니메이션으로 저장되기 때문에 반드시 위와 같은 버튼을 눌러줘서 스토리보드를 나와야 합니다.

이제 버튼을 삽입해서 버튼을 눌렀을 때 시계를 재주는 것을 구현하고자 합니다. 블랜드 내에서는 Trigger라는 기능으로 설명합니다.

다시 디자인 워크스페이스로 돌아와서 Object창에 보면 StartTimer라는 항목이 있습니다. 이를 마우스 우클릭하면

Make Into Control이라는 항목이 있습니다. 이는 그림 개체를 Control할 수 있게끔 바꿔주는 요소입니다.
들어가면

가 있는데 우리는 이걸 버튼 형식으로 쓸것이기에 Button 타입을 선택하고 그에 알맞는 이름을 써줍니다.

그러면 object창이 바뀌면서 여러가지 항목이 있는데 이중에 ContentPresenter를 삭제해줍니다.

 그리고는 위 버튼을 눌러서 다시 돌아옵니다.

자 이제 버튼에 스토리보드와 연결시킬 무언가를 집어넣어주어야 합니다. Asset에서 다음을 찾습니다.

 
이 기능이 바로 스토리보드를 실행시킬 수 있는 기능을 합니다. 
이걸 아까 만든 Button에 삽입해줍니다.

 
그럼 이제는 Properties 창이 또 새롭게 바뀝니다. 여기서 당연히 어떤 스토리보드를 선택할 것인가를 선정해야 되겠지요?
 

스토리보드 항목을 보면 아까 만든 스토리보드가 하나 떠 있을겁니다. 그걸 선택하면 이제 저 버튼을 누를때 스토리보드가 실행되는 겁니다. 한번 f5를 눌러서 실행시켜보세요.

참고로 처음에는 MainPage가 떠 있는데 옆에 있는 탐색을 사용하면

 
AdvSearch로 전환가능합니다. 여기서 Startbutton을 더블클릭하면 바늘이 60초동안 한바퀴 도는 것을 확인할 수 있습니다.

 다음으로 해볼것은 Application Bar를 삽입하는 과정입니다.
다시 Object창에 RecipePivotItem밑의 Grid를 선택합니다. 이제 다시 새로운 개체인 ApplicationBarMockup을 추가시켜줘야 합니다. Asset에서 찾아서 밑으로 드래그합니다. 아니면 더블클릭해도 됩니다. Grid가 선택되어 있는 상태에서 말이지요.

selection Tool을 이용해서 크기까지 조절하면

와 같이 만들 수 있습니다.

다시 Object 창으로 돌아와서 ApplicationBarMockup을 펼치면 여러가지가 나옵니다.

 그중에서 Menu에 있는 TextBlock을 선택하고 Text를 Email shopping list로 바꿔줍니다.
 

이제는 메일을 보내는 버튼을 만들었으니 이버튼을 누르면 다른 페이지로 전환이 되어야 합니다. 해당 TextBlock을 마우스 우클릭하고 다음과 같이 합니다.

그럼 Map에 만들었던 스크린 리스트가 뜨는데 이중 PeopleSearch를 선택해야 합니다. 이런 연유에서 Map을 먼저 구성하는 것이 중요하다고 강조를 한겁니다.

이제 Project창으로 넘어가서 PeopleSearch.xaml 파일을 선택합니다. 

그럼 사전에 만들어진 창이 뜹니다. 이제 State 창으로 들어가면

라고 뜨는데 여기서는 화면의 기본 설정을 어떤식으로 할 것인가를 결정할 수 있습니다. Portrait이면 지금과 같은 세로 모드일 것이고 Landscape는 가로 모드로 이 화면을 보겠다는 겁니다. 어떤것을 할 것인지 선택하면 아까 애니메이션할때처럼 화면이 바뀌는데 이때 자신이 원하는 스타일로 아이콘들을 배치할 수 있습니다. 그에 대한 것은 옆에 있는 Properties - Layout에서 선택할 수 있습니다. 크기가 안 맞으니까 크기를 수정해주고 다시 위의 Base 버튼을 누르게 되면 기본화면에 대한 설정은 끝나게 됩니다.

이제 검색창이 있으니 여기다가 입력할 키보드가 필요합니다. 역시 Asset에서 Keyboard라고 검색하면

이것을 더블클릭하면 화면에 삽입되는데 역시 Selection tool을 사용해서 크기를 자유롭게 수정하면

 Object창에서 KeyboardMockup을 컨트롤키를 누른 상태에서 마우스로 선택합니다. 컨트롤을 누른 상태에서 위에 있는 TextBox를 선택하고 컨트롤 + G를 눌러줍니다.

그러면 이렇게 하나의 grid로 그룹이 지어집니다.
이름을 KeyboardGrid라고 바꾸겠습니다.

다음으로 원문에서 삽입하는 기능이 바로 Toggle 기능입니다. KeyboardGrid를 선택하고 앞에서 언급했던 Make into Control을 선택합니다.

이중에서 toggle 버튼을 선택한 후 KeyboardToggleStyle이라고 이름을 바꿔주고 생성합니다. 그럼 디자인뷰에 이상한게 하나 떠 있을겁니다. 역시 여기서도 ContentPresenter를 삭제합니다. 그럼 없어집니다.

이제 키보드가 항상 화면에 보여지면 안되니까 이걸 state창에서 수정해야 합니다.

State창에서 들어가서 옆의 Properties창을 보시면 아마 Appearance- visibility가 Visible로 되어 있을 겁니다.
이걸 Collapsed로 바꿔야 처음 시작 화면에서는 키보드가 보이지 않습니다.

그런데 이렇게 해놓으면 키보드는 영영 안보이게 됩니다. 아까 state창에서 애니메이션처럼 창이 활성화 되신거 보셨지요? 그 기능을 이용해야합니다.

그런거에 대한 설정은 FocusState에서 해야합니다. 일단

focusstate를 활성화 시킨후 다시 Appearance-Visibility를 Visible로 바꿔줍니다.

그리고는 지금 창을 나가기 위해서 위의 ToggleButton이라고 되어 있는 부분을 누룹니다.

이제 이 창에 대한 확인을 해보려면 다시 Map에서 PeopleSearch를 누르고 

을 해줘야 합니다. 지금 AdvSearch에서 PeoPleSearch로는 넘어가지만 PeopleSearch에서 Adv로는 넘어가는 인터렉션이 형성되지 않았기 때문에 일단 이 창만 가지고 테스트하기 위해서는 위의 Set as Start를 해줘야 합니다.

이제 f5를 누르면 됩니다.

 보는 것처럼 Search를 눌렀을때 키보드 창이 활성화되고 다른때 사라지는 것을 볼 수 있습니다. 가로모드에서도 똑같이 실행되는게 보이실 겁니다.

여기까지가 다섯번째 실습의 전부였고 이번 시간에는 포토샵에서 이미지 불러오는 것 그리고 애니메이션을 줘서 시계가 이동하는 것까지 해봤습니다!