실습 정보: 오버랩 애니메이션 만들기

Expression Blend의 타임라인은 응용 프로그램에서 동시에 둘 이상의 애니메이션 타임라인을 실행할 수 있도록 구축되었습니다. 다음 절차에서 계속 원을 그리며 이동하다가 사용자가 나비 위로 마우스를 이동하면 날개를 퍼덕이는 나비 애니메이션 만드는 방법을 살펴보겠습니다.

오버랩 애니메이션 만들기

1. Microsoft Expression Blend에서 새 프로젝트를 열거나 만듭니다. 자세한 내용은 새 문서 또는 프로젝트 만들기를 참조하십시오.

2. F6 키를 눌러 애니메이션 작업 영역으로 전환합니다. F6 키를 누르면 디자인 작업 영역과 애니메이션 작업 영역 간을 전환합니다. 애니메이션 작업 영역에서는 인터랙션 패널이 아트보드 아래에 있습니다.

3. 개체 및 타임라인에서 스토리보드 닫기 단추 를 선택합니다.

   [!참고]

   기본값 타임라인이 아닌 다른 타임라인을 선택할 때마다 속성이 변경되어 타임라인에 키 프레임이 자동으로 기록됩니다.

4. 도구 상자에서 타원 도구를 선택합니다. 아트보드의 오른쪽에 작은 원 두 개를 그립니다. 속성 패널의 레이아웃 범주에서 Height 및 Width 속성의 값을 똑같이 설정하면 타원을 완전한 원으로 만들 수 있습니다. 클리핑 동작이 표시되면 Margin 속성을 조정합니다.

5. 도구 상자에서 선택 도구를 선택하고 다음 그림과 같이 원이 가깝게 모이도록 이동합니다.

   아트보드에 그린 두 개의 원

   

6. 동시에 두 원을 사용하려면 개체 및 타임라인에서 한 원을 선택하고 Ctrl 키를 누른 상태에서 다른 원도 선택한 다음 선택한 원을 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 선택한 다음 Grid를 클릭합니다.

   두 원을 포함하는 새 모눈(Grid) 패널이 개체 및 타임라인 아래 나타납니다.

7. 모눈(Grid)을 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 선택하여 모눈의 이름을 바꿉니다. 이름을 Butterfly로 변경합니다.

8. 원 애니메이션을 만들려면 패스에서 애니메이션 타임라인을 생성하는 이동 패스로 변환 도구를 사용할 수 있습니다. 아트보드 표면 너비의 절반쯤 되는 아트보드 가운데에 세 번째 타원을 그립니다.

9. 개체 및 타임라인에서 새 타원을 선택하고 개체 메뉴에서 패스를 선택한 다음 이동 패스로 변환을 클릭합니다.

   이동 패스의 대상 선택 대화 상자가 나타납니다.

10. 아트보드에 있는 개체 목록에서 Butterfly 모눈을 선택한 다음 확인을 클릭합니다.

    새 타임라인이 만들어집니다. Expression Blend에서 새 타임라인의 기록 모드가 시작되어 재생 단추를 클릭하면 아트보드에서 애니메이션을 볼 수 있습니다. 대상(Butterfly)이 타원에서 생성된 이동 패스를 따라 이동합니다. 타원의 Fill 속성을 브러시로 설정한 경우에는 타원이 Butterfly 개체의 일부를 덮게 됩니다.

11. 세 번째 타원은 더 이상 필요하지 않으므로 삭제합니다.

12. 개체 및 타임라인에서 Butterfly, RenderTransform 및 Translation 요소의 노드를 확장하여 이동 패스 시간 범위를 표시합니다. 시간 범위를 나타내는 이동 패스 요소나 회색 막대를 마우스 오른쪽 단추로 클릭한 다음 반복 횟수 편집을 클릭합니다.

    반복 편집 대화 상자가 나타납니다.

13. 타임라인이 계속 반복되도록 하려면 계속으로 설정 단추를 클릭한 다음 확인을 클릭합니다.

    이제 이 애니메이션을 실행하면 계속 반복됩니다.

14. 개체 및 타임라인에서 새로 만들기  단추를 클릭합니다.

    Storyboard 리소스 만들기 대화 상자가 나타납니다.

15. 리소스 이름(키) 필드에 Flap이라는 이름을 입력한 다음 확인을 클릭합니다.

    플레이헤드 가 0초 표시에 설정된 새 타임라인의 기록 모드가 시작됩니다. 기록 모드에 있는 동안 속성을 설정하면 타임라인에 키 프레임이 자동으로 기록됩니다.

16. 0초 위치에서 키 프레임을 설정하려면 Butterfly 모눈을 선택하고 키 프레임 기록 단추를 클릭합니다.

    Butterfly 모눈에 해당되는 타임라인의 행에 키 프레임 이 나타납니다.

17. 1초 표시로 플레이헤드를 끈 다음 다른 키 프레임을 기록합니다.

    이제 애니메이션의 시작 및 끝 위치가 설정되었습니다.

18. 위의 두 키 프레임 사이에 있는 0.5초 표시로 플레이헤드를 끕니다.

19. 도구 상자에서 선택 도구를 선택하고 Alt 키를 누른 채로 아트보드에서 Butterfly 모눈의 높이는 늘이고 너비는 줄여 다음과 같이 나타나도록 합니다.

    Expression Blend가 Flap 애니메이션 타임라인의 기록 모드에 있으므로 모눈을 수정하면 모눈의 ScaleX 및 ScaleY 속성에 대한 새로운 키 프레임이 0.5초에서 설정됩니다.

    아트보드에서 원의 모눈 늘이기

    

20. 개체 및 타임라인에서 ScaleX 및 ScaleY 노드가 표시될 때까지 Butterfly 모눈의 노드를 확장합니다. 차례로 노드를 선택하고 마우스 오른쪽 단추로 클릭한 다음 반복 횟수 편집을 선택하고 반복 편집 대화 상자에서 2를 입력하여 타임라인이 두 번 실행되도록 설정하고 확인을 클릭합니다.

21. 재생 단추를 클릭하여 아트보드에서 애니메이션을 테스트합니다. 아트보드에서 재생할 때는 반복 값이 적용되지 않습니다. 회색 시간 범위 막대에서 키 프레임을 이동하여 애니메이션의 타이밍을 조정할 수 있습니다.

    [!참고]

    공간이 부족하여 전체 타임라인을 볼 수 없으면 타임라인 확대/축소 텍스트 상자를 사용하여 타임라인을 축소할 수 있습니다. 패널의 너비를 변경하여 개체 및 타임라인 패널이 더 많이 표시되도록 할 수도 있습니다.

22. 이제 애니메이션에 대한 트리거를 설정할 수 있습니다. 기본적으로 문서의 루트에 새 타임라인을 만들면 응용 프로그램이 시작될 때 발생하는 Window.Loaded 이벤트에 대한 기본 이벤트 트리거가 트리거 아래에 추가됩니다.

    원 타임라인에 대한 트리거는 유지하고 Flap 타임라인에 대한 새 트리거를 추가할 수 있습니다.

23. 트리거에서 Window.Loaded 트리거를 선택합니다. 트리거에 대한 액션이 When Window.Loaded is raised 아래 표시됩니다. Flap.Begin 옆에 있는 빼기 기호를 클릭하여 해당 액션을 삭제합니다.

    이제 응용 프로그램이 시작될 때 원 애니메이션은 계속 시작되지만 Flap 애니메이션은 시작되지 않습니다.

    [!참고]

    활성 상태인 경우 속성 섹션을 표시하려면 트리거 창의 크기를 조정해야 할 수 있습니다. 크기를 조정하려면 창의 테두리 및 창 안쪽 테두리를 클릭하여 끕니다.

    Window.Loaded 트리거에서 Flap 애니메이션 제거

    

24. Flap 애니메이션에 대한 트리거를 추가하려면 트리거에서 이벤트 트리거 추가 단추를 클릭합니다.

    새 Window.Loaded 트리거가 만들어집니다.

25. 개체 및 타임라인에서 Butterfly 모눈 요소를 선택한 다음 트리거 아래 드롭다운 상자를 사용하여 새 트리거를 When Window.Loaded is raised에서 When Butterfly.MouseEnter is raised로 변경합니다.

26. When Butterfly.MouseEnter is raised 옆에 있는 새 액션 추가 단추를 클릭한 다음 드롭다운 상자를 사용하여 새 액션을 Flap.Begin으로 변경합니다.

    이제 사용자가 나비 위로 마우스 커서를 이동하면 Flap 애니메이션 타임라인이 시작됩니다.

    모눈의 MouseEnter 이벤트에 대한 새 트리거 만들기

    

27. 방금 만든 애니메이션 타임라인 및 이벤트 트리거의 동작을 확인하려면 프로젝트 메뉴에서 프로젝트 테스트를 클릭하여 장면을 테스트합니다.

    [!참고]

    원 애니메이션이 너무 빠른 속도로 실행될 경우 타임라인의 실행 시간을 조정할 수 있습니다. 개체 및 타임라인 아래 드롭다운 상자에서 이동 패스 타임라인을 선택하고 이동 패스 노드가 표시될 때까지 모눈 아래 노드를 확장한 다음 회색 시간 범위 막대의 오른쪽 끝을 잡고 오른쪽으로 끌어 끝 시간을 늘립니다.

    원 타임라인을 삭제하고 새 타임라인을 만든 다음 8단계(타원 그리기)에서 시작하여 이동 패스를 만들 수도 있습니다. 8단계에서 시작하기 전에 새 타임라인을 만들지 않으면 원 애니메이션이 Flap 애니메이션 타임라인에 추가됩니다.