[Expression Blend 3] 스케치 플로우(SketchFlow), 어떻게 사용할까?

안녕하세요, 정진희입니다.
저번시간에는 맵을 Link 하는 기능을 배워보았습니다.

이번시간에는 프로토타입에 좀 더 직관적으로 보이게 하기 위하여 스케치 플로우에 애니메이션을 추가하는 방법에 대하여
알아보도록 하겠습니다.

먼저 저번강좌까지 만든 프로젝트를 블랜드에서 열고, 애니메이션을 줄 페이지를 선정해보도록 하겠습니다.
저는 메인페이지에 애니메이션을 넣어 효과적으로 보이도록 해볼텐데요.
다음 그림과 같이 메인 페이지가 로드 되었을 때 순서대로 화면에 나타나도록 하겠습니다.

1) Map Panel에서 Main을 더블클릭하여 아트보드에 나타나도록 합니다. 스토리보드를 생성하시려면
상단에 나타나는 스케치 플로우 애니메이션의 +버튼을 클릭하면 스토리보드가 작성됩니다.

+버튼을 클릭하면 애니메이션 녹화가 시작되었다는 빨간 박스가 보여지게 됩니다.
그리고 상단에는 화면이 뜨게 됩니다.

2) 메인 페이지가 첫 로드했을 때 애니메이션을 실행할 화면 1,2,3의 X비율을 0으로 주도록 합니다.

3) 객체 및 타임라인 패널의 레이어들이 빨갛게 녹화된 것을 보실 수가 있습니다.
그러면 현재 스케치 플로우 애니메이션 첫번째 프레임에 녹화되었다는 것이라고 생각합니다.

4) 다음으로 아래의 그림과 같이 애니메이션 패널에서 현재 프레임에 마우스를 올리면 오른쪽 상단에 애니메이션 프레임을
Add할 수 있는 아이콘이 표시 됩니다. 클릭을 하여 다음 액션을 취할 수 있도록 프레임을 하나 더 추가합니다.

1) 1번의 프레임의 애니메이션이 실행되는 확보시간
2) 1번 프레임과 2번 프레임이 전환되는 전환시간
3) -,+ 키를 클릭하여 프레임을 추가 또는 삭제할 수 있음

5) 이번에는 컨텐츠의 X좌표 값을 1로 주어 본래의 모습으로 돌아오는 애니메이션을 주도록 합니다.

애니메이션을 끝내기 위해 기본(Base) 프레임을 클릭하여 애니메이션을 종료합니다.
그리고 스케치 플로우에서 실행할 때도 처음에는 컨텐츠가 보이지 않게 하기 위하여 x값을 0으로 설정해 줍니다.

6) F5를 눌러 실행하여 Main 화면으로 가면 왼쪽 상단에 방금 만들었던 애니메이션 전구가 보여지게 됩니다.
클릭을 하면 방금 만든 애니메이션이 실행이 됩니다.

테스트를 해 보았는데요. 애니메이션의 가감속도가 없어서 조금 느리게 느껴집니다.
다시 작업환경으로 돌아옵니다. 그리고 애니메이션에 가감을 주도록 하겠습니다.

7) 두번째 프레임을 선택하여 애니메이션 녹화로 들어갑니다. 개체 및 타임라인 패널에 보시면 다음과 같은 아이콘이 보이는데요.
이것을 클릭하면 자신이 만든 애니메이션의 키가 보여지게 됩니다.