달력

02

« 2012/02 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  •  
  •  
  •  
2008/08/11 00:21

[세티의 실버라이트] 15. 미디어 Silverlight2008/08/11 00:21

원글출처 : http://silverlight.net/quickstarts/blend_quickstart/part5_working_with_media.aspx 본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요. ^^
모두 휴가는 잘 다녀오셨는지 궁금합니다.

음... 전 아직 휴가를 갔다오지 못했습니다. 바뻐서 그랬던 것은 아니구요. 휴가 때 밖으로 나가면 꽤 번잡하잖아요? ㅎㅎ 전 그게 싫어서 좀 한가할 때 갈려고 기회를 엿보고 있는 중입니다. ^^

그나저나 날씨가 요즘 너무 더워요..헥헥. 무더운 날씨에 지치지 않을려고 이것저것 막 챙겨먹고는 있는데 그것들이 체력 보강으로 이어지진 않고, 뱃살로 이어지고 있습니다. 이일을 어찌해야 좋을지 막막한 요즘입니다. ^^;

늘어나는 뱃살과 먹는 것의 즐거움을 알아버린 세티지만 무더운 더위에 지치지 않고 글을 쓸수 있는 즐거움도 함께 가져갈려고 노력하고 있습니다.^^*

아무튼 힘내서 이번 시간에는 Blend2.5를 이용한 미디어 플레이어 만들기를 해보겠습니다.

먼저 미디어 플레이어를 만들기 위해서 WMV 동영상 파일이 하나 있어야 합니다.
WMV파일 구하러 검색하는 것도 일인데 그냥 아래의 주소에서 편하게 다운로드 받으시면 됩니다.^^
http://www.microsoft.com/windows/windowsmedia/musicandvideo/hdvideo/contentshowcase.aspx

위에서 다운로드 받은 동영상을 이제 추가해야 합니다. 어디에 추가하냐구요?

미디어 플레이어를 만들기 위해 새로운 프로젝트를 하나 생성할까 합니다.
새로운 미디어 플레이어를 위한 프로젝트의 이름을 MediaPlayer 라고 하겠습니다.

프로젝트를 생성하셨다면 이제 Canvas 가 필요합니다.
Object and Timeline에서 Canvas 객체를 추가합니다.
자. 다 만드셨죠? 그럼 이제 동영상을 추가해 보겠습니다.

동영상은 솔루션 탐색기에 필요한 동영상 리소스를 추가하고, 캔버스 객체에 마우스로 드래그해서 옮겨 놓으면 됩니다. 동영상 파일의 추가는 아래의 그림처럼 마우스로 동영상을 드래그 해서 놓아도 되고, Blend 2.5 상단 메뉴에 있는 Project를 선택한 후 Add Existing Item...이라는 메뉴를 선택해서 등록해도 됩니다.

사용자 삽입 이미지

이것도 귀찮다면 단축키 Ctrl + I 를 이용하면 됩니다.^^

미디어 파일을 추가하고 나면 아래의 이미지 처럼 Project 판넬에 추가된 영상이 표시됩니다.(이미지도 이것과 같은 방법으로 추가할 수 있습니다.)
사용자 삽입 이미지

다음으로 지난 포스트에서 생성했던 버튼 컨트롤을 추가합니다.
Play, Stop, Pause 버튼을 빌드하고 나면 프로젝트가 있는 하위 bin 폴더에 dll 파일이 생성되어 있습니다.
그것을 참조추가하여 버튼 컨트롤을 사용할 수 있습니다.
참조추가 하는 방법은 아래의 그림처럼 하시면 됩니다.
사용자 삽입 이미지
(마우스 우클릭하여 참조추가하기)

사용자 삽입 이미지
(이전 포스트에서 만든 컨트롤을 빌드하면 나오는 dll 파일)


이제 추가된 dll에서 가져올 사용자 컨트롤이 모두 있는지 확인해보겠습니다.
아래의 첨부된 이미지에서 처럼 자산 라이브러리[ >> ]를 클릭하면 모든 사용자 컨트롤이 확인 가능합니다.
사용자 삽입 이미지

확인된 버튼 사용자 컨트롤을 더블 클릭을 하여 모두 추가합니다.
사용자 삽입 이미지

이제 미디어 플레이어를 만들기 위한 기본적인 준비가 완료되었습니다.

여기서 우리가 한가지 알아야 할 것이 있는데요. 현재는 하나의 프로젝트 내에 캔버스, 버튼 사용자 컨트롤, 동영상 파일과 같은 것들이 모두 각각의 객체의 형태로 존재하고 있습니다.

미디어플레이어에서는 이것들을 하나의 유닛으로 만들어야 할 필요가 있습니다.
그래서 캔버스 아래에 모든 객체들을 묶어 놓아야 합니다. 그러기 위해선 이것들을 그룹화 시켜야 합니다.
그룹화 하는 방법은 아래의 그림처럼 Group Into(그룹으로 묶기)로 합니다.

사용자 삽입 이미지

아래의 그림은 그룹화가 잘 되었을 때 보여지는 ArtBoard의 캡쳐 이미지 입니다.
사용자 삽입 이미지

이제 버튼 컨트롤에 따라 영상이 움직이도록 할 차례 입니다.
미디어를 추가하면 자동으로 MediaElement 엘리먼트가 생성됩니다. 그리고 MediaElement는 동영상의 플레이 스타일을 Auto로 가지게 됩니다. 우리는 여기서 버튼을 클릭했을 때 동영상이 플레이되도록 할 것이므로 MediaElement에 하나의 속성을 추가할 것입니다.

아래의 그림에서 처럼 MediaElementLoadedBehavior 속성값으로 Stop을 설정합니다.
사용자 삽입 이미지

원래 원문을 살펴보면 MediaElementAutoPlay의 속성값으로 False를 넣으라고 되어 있는데 Blend 2.5에서 해당 속성을 찾을 수 없었습니다.
사용자 삽입 이미지
(미디어엘리먼트에 설정 가능한 속성들)

자아. 아무튼 계속 진행합니다.
이제 각각의 버튼 사용자 컨트롤에 이벤트를 연결해야 합니다. 마우스의 왼쪽 버튼이 해당 버튼을 클릭하였을 때 동작하는 이벤트의 이름을 MouseLeftButtonDown 속성값에 넣어줍니다. 아래의 그림 처럼 말이지요.

사용자 삽입 이미지

자 이제 C# 파일에 이벤트 메서드를 추가만 해주면 끝나게 됩니다.

사용자 삽입 이미지

이제 미디어 플레이어 실행을 위한 준비가 모두 마무리 되었습니다.
F5키를 클릭하여 미디어의 동작 여부를 확인하는 부분은 각자 개인에게 맡기겠습니다.

이상으로 Blend 2.5를 이용한 실버라이트 애플리케이션 개발에 대해 간략하게 알아보았습니다.
좋은 하루 되십시오.^^
Posted by -세티-