타임라인에서 트리거를 사용하여 미디어 제어

미디어 요소는 오디오 파일(예: WAV 파일)이나 비디오 파일(예: WMV 파일)에 대한 참조를 포함할 수 있습니다. 애니메이션 타임라인에서 이벤트 트리거를 사용하여 미디어 재생을 제어할 수 있습니다.

다음 예에서 마우스 포인터가 비디오 보기 영역으로 들어가고 나올 때 비디오 타임라인을 트리거하여 비디오 재생을 제어하는 방법을 살펴보겠습니다. 타임라인을 수정하는 방법에 대한 자세한 내용은 개체에 애니메이션 적용 및 이벤트에 응답하는 코드 작성을 참조하십시오. 이 예에서는 아트보드에 있는 개체의 MouseEnter 및 MouseLeave 이벤트에 트리거를 설정합니다. 컨트롤, 속성 및 이벤트 참조에서 트리거를 설정할 수 있는 그 밖의 다른 이벤트 목록을 확인하실 수 있습니다.

주의:
Microsoft Expression Blend에서 미디어를 사용하려면 컴퓨터에 Windows Media Player 10이 설치되어 있어야 합니다. Windows Media Player 10은 Windows Media 웹 사이트에서 다운로드할 수 있습니다.

마우스 포인터를 사용하여 비디오 재생 제어

1. Expression Blend 작업 영역에서 개체 및 타임라인 패널의 공간을 늘리려면 애니메이션 작업 영역으로 전환합니다(F6 키). 그러면 개체 및 타임라인 패널이 아트보드 아래쪽으로 이동합니다.

2. 개체 및 타임라인 패널에서 비디오를 추가할 개체를 클릭하여 활성화합니다. 예를 들어 응용 프로그램의 루트에 비디오를 추가하려면 LayoutRoot를 클릭합니다.

3. 먼저 프로젝트에 비디오 파일을 추가(Ctrl+I)한 다음 프로젝트 패널에서 해당 비디오 파일을 두 번 클릭하여 아트보드에 비디오 파일을 추가합니다. 개체 및 타임라인 패널에 미디어 요소가 만들어지고 Source 속성은 비디오 파일의 경로로 설정됩니다.

   • 아트보드에 미디어 파일을 추가하기 전에 타임라인을 선택하면 해당 타임라인에 미디어가 삽입되고 현재 플레이헤드 위치에서 시작되도록 미디어 일정이 예약됩니다.

   • 선택한 타임라인이 없으면 새 미디어 타임라인이 만들어지고 미디어는 0초 표시에서 시작하는 새 타임라인에 추가됩니다.

   아트보드에 미디어를 추가하는 방법을 설명하는 구체적인 절차는 활성 문서에 오디오 또는 비디오 파일 삽입 항목을 참조하십시오.

4. 트리거 패널에서 Window.Loaded 이벤트에 대한 새 이벤트 트리거가 추가되었습니다. Window.Loaded를 클릭하여 Window.Loaded 이벤트에 의해 트리거되는 액션을 확인할 수 있습니다. 기본 설정에서는 비디오 타임라인이 시작되는 액션입니다. 포인터가 비디오 보기 영역에 있으면 비디오가 재생되고 포인터가 비디오 보기 영역을 벗어나면 비디오가 중지되도록 지정하려고 합니다. 첫 번째 작업은 응용 프로그램 창이 로드될 때 비디오가 시작되면 바로 비디오를 일시 중지시키는 것입니다.

5. 트리거 패널에서 When Window.Loaded is raised 옆의 새 액션 추가를 클릭합니다. 두 번째 기본 액션이 목록에 나타나 timeline.Begin 메서드를 호출합니다.

6. 메서드 드롭다운 상자를 클릭하고 Pause를 선택합니다. 트리거 패널이 아래 이미지와 유사하게 나타납니다. 이제 응용 프로그램 창이 로드될 때 비디오가 시작되면 바로 일시 중지됩니다.

   Window.Loaded 이벤트 트리거에 다른 액션 추가

   

7. 마우스 이벤트에 동영상 타임라인을 연결하려면 새 이벤트 트리거를 추가해야 합니다. 트리거 패널에서 이벤트 트리거 추가를 클릭합니다. Window.Loaded 이벤트가 발생하는 경우에 대한 새로운 기본 이벤트 트리거가 목록에 나타납니다.

8. 개체 드롭다운 목록을 클릭하여 Window에서 해당 미디어 요소의 이름으로 선택 항목을 변경합니다. 예를 들어 위에 나와 있는 이미지에서 미디어 요소 이름은 SampleMovie_wmv입니다.

   팁:
   미디어 요소 이름이 표시되지 않으면 개체 및 타임라인 패널에서 미디어 요소를 선택한 후 이 단계를 다시 수행하십시오.

9. 메서드 드롭다운 목록을 클릭하여 Loaded에서 MouseEnter로 선택 항목을 변경합니다. MouseEnter 이벤트는 UIElement 범주에 있습니다. 이제 트리거는 When element.MouseEnter is raised가 됩니다. 아직 액션은 생성되지 않았습니다.

   팁:
   비디오 파일 대신 오디오 파일을 사용할 경우, 비디오 파일이 있는 미디어 요소에 대해 MouseEnter 이벤트를 선택할 수 있지만 응용 프로그램에 미디어 요소가 표시되지 않으므로 사용자는 포인터를 이동할 위치를 알 수 없습니다. 대신 아트보드에 단추를 추가하고 단추의 Click 이벤트에 대한 트리거를 만들 수 있습니다.

10. When element.MouseEnter is raised 옆의 새 액션 추가를 클릭합니다. 기본 액션이 목록에 나타나 timeline.Begin 메서드를 호출합니다.

11. Window가 로드되었을 때 타임라인은 이미 시작된 상태이므로 timeline.Pause로 메서드를 변경합니다. 이제 보기 영역 위로 포인터를 이동하면 동영상이 일시 중지됩니다.

12. 다른 이벤트 트리거()를 추가하고 When element.MouseLeave is raised가 되도록 변경합니다.

13. timeline.Resume 메서드를 호출하는 새 액션()을 추가합니다. 이제 포인터가 보기 영역을 벗어나도 동영상이 계속 재생됩니다. 동영상이 일시 중지 후에 다시 시작하는 대신 중지 후에 다시 시작하도록 선택할 수도 있습니다.

    MouseEnter 및 MouseLeave 이벤트 트리거와 액션을 추가하여 동영상 일시 중지 및 다시 시작

    

14. 창에 맞게 비디오 미디어의 크기를 조정하려면 속성 패널에서 다음 속성을 설정합니다.

    • 속성 패널에 있는 미디어 범주의 고급 섹션에서 미디어 요소의 Stretch 속성을 Uniform으로 설정합니다. 이렇게 하면 비디오 보기 영역의 가로 세로 비율이 유지됩니다.

    • 속성 패널의 레이아웃 범주에서 미디어 요소의 Width 및 Height를 Auto로 설정합니다. 이렇게 하면 비디오 보기 영역의 크기가 응용 프로그램 창에 맞게 조정됩니다. 비디오 보기 영역의 크기가 응용 프로그램 창에 맞게 조정되지 않으면, 미디어 요소가 특정 크기의 패널 요소 안에 있지 않은지 확인해 보십시오.

15. 응용 프로그램을 테스트합니다(F5 키). 포인터가 동영상 보기 영역을 지날 때의 동작을 확인합니다.