자이닉스 개발부

그럼 이제 실제로 Blend 3에서 Behavior를 어떻게 사용할 수 있는지 보도록 하겠습니다.
이미 만들어놓은 SketchFlow Project를 열어 트리 구조를 보면, 아래 사진과 같이 보입니다.
녹색 박스 안의 ImageSlideViewerContainer는 Grid이며 안에는 4장의 이미지가 있습니다.
첫번째 이미지의 RotationY는 0
두번째 이미지의 RotationY는 -90
세번째 이미지의 RotationY는 90
네번째 이미지의 RotationY는 180
이런 식으로 설정되어 있으며 4장의 이미지들의 CenterRotationZ를 Image의 Width의 절반으로 값을 주었습니다.

원하는 움직임은 btnLeft (왼쪽 방향 화살표)를 눌렀을 때, 이 이미지들이 90도씩 RotationY가 변하여 회전하길 바라는 것입니다.

Assets의 Behaviors로 들어가면 ChangeRotation이 있습니다. 이것을 마우스로 Drag하여 btnLeft에 Drop을 하면 됩니다.

Drop을 하면 오른쪽 Properties창에 Behavior를 설정할 수 있도록 아래 사진과 같은 내용들이 나타납니다.

사용자가 btnLeft를 마우스 외쪽 버튼으로 클릭하게 되면 ImageSlideViewerContainer가 ChangeRotation을 일으킵니다.

그 하위에 Rotation, Rotation Properties, Target은 Behavior 소스 코드 상에서 직접 Catalog를 만든 것입니다.

ImageSlideViewerContainer의 Children인 4장의 이미지를 회전시키고 싶은 것이기 때문에, Target Catalog에서 isChildren을 체크합니다. 그 후에, RotationY를 체크하고 DeltaY에 90을 입력하게 되면 모든 설정을 마친 것입니다. ^_^

SketchFlow Project를 만들어봅니다.
1. Expression Blend3 를 실행
2. New Project
3. Silverlight 3 SketchFlow Application 프로젝트 생성

SketchFlow 화면 구성
빨강 : 프로젝트 파일부터 Resource 파일들의 목록 및 Assets, States를 설정할 수 있는 부분
주황 : 스크린을 구성하고 있는 UIElement들의 Tree 구조
노랑 : 미리보기 화면
초록 : 각 Screen들의 상관관계와 흐름을 한 눈에 볼 수 있는 Map
파랑 : Element들의 속성 및 Resource와 Data들의 정보를 조작

SketchFlow Map을 제외하곤 Expression Blend와 거의 동일한 화면 구성이다.

Screen? 실제로 보여지는 화면
1. UserControl Class를 생성하듯이 SketchFlow에서만 쓰이는 Screen들을 마우스로 끌어내는 것만으로 쉽게 생성할 수 있다.
2. Screen의 이름을 바꿀 수 있다.
3. 목적에 따라 한 눈에 알아 볼 수 있도록 색을 바꿀 수 있다.
4. 화살표 방향으로 각 Screen들끼리의 소통과 흐름을 파악할 수 있다.

Component Screen? 반복적인 요소
1. 어떠한 부분이 필요에 의해 여러 Screen에 중복적으로 쓰일 때 Component Screen을 이용한다.
2. Component Screen을 연결한 Screen에는 Component Screen이 삽입된다.

그리고 나는,
...ImageSlidePlayer를 SketchFlow Project로 만들며 삽질을 하였다...

SketchFlow Project를 만들며 알게 된 점
1. 평범하고 단편적인 애니메이션은 Behavior를 이용하면 된다.
2. 평범하지 않은 애니메이션은 스스로 Behavior를 만들거나 코딩이 필요하다.
3. Insert시킨 Screen의 속성을 건드릴 수가 없다. (Element Binding을 시키려 할 때나 애니메이션을 적용시킬 때 이 문제 때문에 한참을 헤매다 포기했다.)
4. 버튼이나 기타 Element를 활용한 Screen이동이 활발한 프로그램일 수록 SketchFlow 효과도 좋다. (본인이 적용한 프로그램은 한 화면에서 움직이기 때문에, Screen이동이 거의 없어 밋밋하고 Component Screen을 쓰기도 힘들었다.)
5. Resources에 DataTemplate을 만들어서 ListBox에 DataBinding을 했을 때, ListBox의 Items.Count는 0이다. (몰랐다.) SelectedItem을 뽑아보려는 짓은 부질없었으며 Data접근도 복잡하다.

아직도 모르겠는 것 - State 사용법, SketchFlow Animation

아직 안 해 본 것 - 포토샵이나 일러스트레이터 프로젝트 파일이 없어 Import 시켜보지 않았다.

MS Word로 Export 시켜낸 결과물 (보고서)

ImageSlidePlayer.doc