[Expression Blend] Customizing_Your_Video_Player

지난 시간에 다뤘던 Video Player을 더욱 풍성하게 해보는 작업을 하고 있습니다.

우선 첨부 파일을 받고 Expression Blend로 실행시켜주시기 바랍니다.

 

SL02SP1EN010_Customizing_Your_Video_Player.zip

 

지금 이렇게 만든 Video는 실제로 돌아갑니다. 동영상 파일만 있다면요. 일단은 프로젝트에 동영상 파일을 하나 넣어봅시다.

 

 

프로젝트른 선택한 후 마우스 우클릭을 통해서 기존 파일을 포함시키는 작업을 해봅니다. 동영상 파일이 없으시다고 하는 분은 개인 계정 폴더내의 비디오 폴더를 들어가면 Sample 비디오가 있습니다. 그걸 포함시키면 됩니다.

 

 

자 이렇게 포함시켰습니다. 이제는 화면상의 까만 창에 삽입을 해야 되는데 일단 Object and timeline상에서 vPlayer_media를 선택한 후 Project창의 동영상을 마우스 우측 클릭을 통해서 insert 시킵니다.

 

 

정상적으로 되었다면 Object 창에 vPlayer_media 하단에 동영상 파일이 삽입된 것을 확인할 수 있습니다.

 

 

동영상 크기가 너무 크니까 적절히 조절하시면 됩니다. 크기를 조절하신 후에 테스트를 해보시려면 다음란을 선택하면 됩니다.

 

 

그러면 새로운 브라우저 창이 뜨면서 방금 삽입한 동영상이 재생됩니다. 한번 확인해보시지요.

 

 

당연히 지금건 버튼에 대한 이벤트를 설정하지 않았기 때문에 버튼을 아무리 눌러도 반응이 없습니다. 또한 초기 조건엔 대한 지정이 없었기 때문에 역시 제어를 할 수 없었지요. 이를 변경하기 위해선 버튼에 대한 이벤트를 삽입하여야 합니다. 일단은 먼저 수정해야 될게 외부 비디오 플레이어 틀은 부드러운데 동영상 재생틀은 모서리가 날카롭습니다. 이거부터 수정해보겠습니다. 우선 Rectangle을 비디오 플레이어를 다 덮지 않게끔 집어넣습니다.

 

 

곡률을 주기 위해서는 모서리의 점을 이동시켜주면 됩니다. 이렇게 말이지요.

 

 

이렇게 한다음 Object 창에서 이 Rectangle이 선택되어 있겠지요. 그 상태에서 shift를 누르면서 동영상을 선택하면 함께 선택되게 됩니다. 그 때 마우스 우클릭을 통해서 Path설정을 수정하면 됩니다.

 

 

이 설정은 아마 지난 포스트 중에서 Expression design할 때도 나왔었습니다. 이게 Blend 상에도 있습니다. 이렇게 하면 실제로 디자인 뷰상에서는 네모가 사라질 뿐 별 변화가 없습니다. 하지만 실행을 하게 된다면 동영상의 모서리에 곡률이 생긴 것을 보실 수 있습니다.

 

 

어떤 모양을 만들던 이 Cliping Path를 사용하게 된다면 다양한 틀의 동영상 플레이어를 만들 수 있을 겁니다.

 자 이제 손봐야 할 것은 버튼입니다. 지금 화면상에 나타나있는 버튼은 기본적으로 Blend상에서 제공하는 버튼 틀입니다. 그런데 보통 디자이너는 자신이 직접 만든 버튼을 사용하고 싶어하겠지요. 첨부파일에 보면 원하는 버튼 템플릿이 있습니다. 그걸 Expression Design으로 열어봅니다.

 

 

우리가 원하는 건 이런 버튼일 겁니다. 이걸 blend상으로 불러오려면 해당 개체를 선택한 후 지난 시간에 다뤘던 Copy xaml을 해줘야 합니다. 그전에 Option으로 가서 Clipboard(xaml)을 선택해서 다음 옵션을 바꿔줍니다.

 

 

이 데모 파일이 만들어진 것이 Silverlight 4가 나오기 전이어서 바로 복사가 안됩니다. 이렇게 Silverlight 3용으로 바꿔준 후에 복사 및 붙여넣기가 가능해집니다.

 

 

다시 블랜드로 돌아와서 해당 버튼들이 있는 grid를 찾습니다. 아마 보면 Object창에 vPlayer_UI라는 StackPanel로 되어 있을겁니다. 이걸 선택해주신 후 Paste를 해주면 됩니다.

 

 

짠! 버튼이 삽입되었습니다. 버튼이 줄이 안 맞는다 하시는 분은 Properties 항목의 VerticalAlignment를 Center로 바꿔주시면 위와 같이 줄이 맞게 됩니다.

 

 

아까의 정지 버튼도 같은 작업을 해주고 기존의 버튼을 삭제해주시면서 다음과 같이 만들어주면 되겠습니다.

 

 

그런데 버튼끼리 너무 딱붙지 않았나요? 이부분은 Properties의 Margin을 수정하면 됩니다. 한번 재생버튼의 Right Margin을 주면 조금 보기 좋게 됩니다.

 

 

버튼에 대한 내용은 끝났고 이제 뒷 배경을 삽입하는 겁니다. 그런데 이건 앞에서 다뤘던 동영상 삽입과 거의 비슷합니다. 아마 첨부된 파일중에 vpr-1000.png 파일이 있을겁니다. Object창에서 LayoutRoot를 누르고 해당 이미지 파일을 insert시키면 역시 하위 개념으로 삽입되게 됩니다.

 

 

여기까지는 하실 수 있으시겠지요? 다음은 버튼이 두개밖에 없으니까 조금 이상합니다. 원래는 Design 상에서 하나 더 만들어줘야 하겠습니다만 블랜드상에서도 이미지 수정이 가능하므로 복제해서 수정하는 방향으로 나가겠습니다. 일시 정지 버튼을 선택한후 alt를 누른 상태로 드래그를 하면 버튼이 복제 됩니다.

 

 

Object 창에서 해당 버튼이 Canvas로 되어 있는데 하위 개체를 보면 Canvas가 또 있습니다. 이게 바로 일시정지 모양을 구성하는 도형입니다. 이걸 지워주면 버튼 틀만 남고 나머지는 사용자가 직접 넣어주면 되겠지요.

 

 

뭐 완전 정지 버튼이야 여러분들이 만드실 수 있겠지요. 그냥 Rectangle을 삽입하고 곡률만 살짝 주면 멋진 정지 버튼이 완성됩니다.

 

 

자기가 만들고 싶은대로 얼마든지 커스터마이징할 수 있습니다.

그런데 지금까지 만든 건 Canvas 개체입니다. 사실 우리가 버튼으로서 뭔가 하려면 해당 개체도 Button으로 만들어줘야 합니다. 그러기 위해서는 위에서 만들어준 버튼 모양 Canvas도 Button을 만들어줘야 하겠지요. 우선 재생 버튼을 선택한 다음 다음 메뉴를 선택해줍니다.

 

 

이 Control안에는 다양한 개체가 있습니다. 우리는 여기서 Button을 선택해주면 됩니다.

 

 

그럼 갑자기 Object 창이 싹 바뀝니다. 이 창은 Item의 Template을 수정할 수 있는 창인데 여기서는 아무것도 바꾸지 않고 다시 원래 창으로 나옵니다. 나오기 위해서는 표시한 버튼들을 눌러주면 됩니다.

 

 

 

자 나와서 확인하면 해당 Canvas가 Button용 Control로 바뀌어 있습니다. 나머지 버튼들도 바꿔주고 이름도 각각 Play Stop Pause로 해줍니다.

 

 

이렇게 만들었습니다. 이 상태에서는 디자인 수정이 안됩니다. 정 수정하려면 다시 ItemTemplate으로 들어가야 하는데 이 방법은 다음에 소개하겠습니다.

 일단 됬는데 Text가 거슬리지요? 이건 Properties 중에서 찾아보면 Common Properties에 Content라는 항목이 있습니다. 이부분을 지워주면 해결됩니다.

 

이제 마지막으로 궁극적인 이벤트를 만들 때입니다. 일단 재생 버튼을 누르면 동영상이 재생되어야겠지요. 재생버튼을 누르고 Properties 창의 해당 아이콘을 선택합니다.

 

 

이게 바로 이벤트를 생성하는 창입니다. 우리는 클릭할 때 재생이 되어야 함으로 click이라는 항목에 대고 더블클릭을 하면 됩니다. 이때부터 개발 문제가 발생합니다.즉 Visual studio를 건드려야 된다는 거지요. 그런데 블랜드 4부터는 개발 도구가 내장되어 있어서 굳이 Visual Studio를 열지 않고 해당 이벤트를 생성 및 수정이 가능합니다. 더블클릭하면 해당 코드 창이 활성화 됩니다.

 

 

그런데 Blend 상의 스크립터는 InteliSense가 지원이 안되서 변수를 찾아내기가 힘듭니다. 그래서 이런 작업은 보통 Visual Studio에서 해주는 것이 편합니다. 우선은 다시 디자인뷰로 돌아가서 정지버튼이 눌렸을 때의 이벤트 일시정지 버튼이 눌렸을 때의 이벤트를 모두 생성해둡니다. 이렇게 말이지요.

 

 

이제 Visual Studio로 넘어갑니다. 그렇게 하기 위해서는 Project 창의 Page.xaml이 있을겁니다. 그 하위 개체로 Page.xaml.cs 라는 파일이 있습니다. 그걸 마우스 우클릭을 통해서 Edit Visual Studio를 선택해주면 됩니다.

 

 

여기서부턴 코드니까 그냥 보고 따라치시면 됩니다. 원리는 매우 간단합니다.

 

 

Visual Studio는 이렇게 자동완성시켜줍니다. 블랜드는 이게 안되서 일일이 알아야 한다는 단점이 있습니다.

 

 

그냥 동영상을 재생, 일시 정지, 정지로 나눠서 보겠다는 겁니다. 이걸 저장하신 후에 블랜드로 돌아와서 테스트를 해봅니다.

 

 

해당 키가 정상적으로 동작하는 것을 확인할 수 있었습니다. 동영상 플레이어 만들기. 참 쉽습니다!