원글출처 : 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에서 가져올 사용자 컨트롤이 모두 있는지 확인해보겠습니다.
아래의 첨부된 이미지에서 처럼 자산 라이브러리[ >> ]를 클릭하면 모든 사용자 컨트롤이 확인 가능합니다.

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

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

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

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


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

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

아래의 그림에서 처럼 MediaElement에 LoadedBehavior 속성값으로 Stop을 설정합니다.

원래 원문을 살펴보면 MediaElement의 AutoPlay의 속성값으로 False를 넣으라고 되어 있는데 Blend 2.5에서 해당 속성을 찾을 수 없었습니다.
자아. 아무튼 계속 진행합니다.
이제 각각의 버튼 사용자 컨트롤에 이벤트를 연결해야 합니다. 마우스의 왼쪽 버튼이 해당 버튼을 클릭하였을 때 동작하는 이벤트의 이름을 MouseLeftButtonDown 속성값에 넣어줍니다. 아래의 그림 처럼 말이지요.


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


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

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

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


이번 강좌에서 우리는 play, pause, stop 과 같은 미디어 플레이어에 필요한 버튼을 만들어 보겠습니다.

앞의 강좌에서 사용했던 버튼을 이용해서 우리는 마우스오버나 클릭과 같은 행위에 응답하는 버튼을 생성할 것 입니다. 이전에 만들어 두었던 버튼을 이용하고자 한다면 Make Control...을 이용해서 간단하게 선택할 수 있습니다.

저는 새롭게 만들어 보겠습니다.^^
먼저 사용자 컨트롤을 하나 생성합니다.
그리고 Rectangle객체를 선택하고, 그려 넣습니다.

Rectangle 객체의 모서리를 마우스로 잡고 그림처럼 화살표 방향으로 이동합니다.
그러면 모서리가 둥글게 처리 됩니다.

이제 버튼 모양이 만들어 졌습니다.

버튼에 보기 좋게 배경색을 넣겠습니다. 앞의 강좌에서도 설명했지만 그레데이션을 선택하고, 팔레트에서 두 개의 포인트를 이용하여 색상을 선택합니다.


그러면 위의 그림과 같은 버튼이 만들어지게 됩니다.
이렇게 만들어진 객체를 복사해서 새로운 버튼으로 만들겠습니다.

먼저 제일 상단 메뉴에 보면 Tool 이라는 것이 보일 것 입니다. 그곳에서 Make Control... 을 선택합니다.
그러면 다이얼로그 상자가 열리면서 컨트롤의 이름을 넣으라고 합니다.
저는 그곳에 btn_play 라는 이름을 넣었습니다.
이름을 넣고 OK를 클릭하면 솔루션 탐색기에 btn_play.xaml 파일이 생성된 것을 확인할 수 있습니다.

이제 플레이 모양을 넣기 위해 Pen 을 선택합니다.
Pen을 선택하고 그림을 그릴려고 했더니.. 오우~ 제가 Artboard를 400%로 해놓고 작업을 했었네요.^^;
100%로 축소 했더니 버튼이 콩알만 합니다. 그래서 이것을 확대할 필요가 생겼습니다.

그래서 확대 했습니다. 확대하고 나니깐 아까 모서리 둥글게 처리한게 거의 보이지 않네요.^^;
그래서 다시 모서리를 둥글게 처리 했습니다. 그랬더니 버튼 아래로 하얀 그리드가 보이네요.
그래서 아래의 그림처럼 화살표 방향으로 하얀 그리드를 마우스로 드래그 했습니다.
그랬더니 버튼까지 같이 늘어나네요. 이런 낭패가...ㅎㅎ


다시 버튼 객체를 선택하고 하얀 그리드 안에 알맞게 맞춰 넣습니다.

위에서 선택한 Pen 을 이용하여 3개 의 점을 찍었더니 삼각형이 그려졌습니다.
그런데 삼각형이 똑바르게 그려지지 않았네요.^^;
그래서 이것을 보정하고자 합니다.

Pen을 이용해서 그림을 그릴 경우 직선이나 포인트가 원하는 위치에 제대로 찍히지 않아서 원하는 모양이 나오지 않을 경우에는 아래 그림처럼 Direct Selectcion 메뉴를 이용해서 그것을 보정할 수 있습니다.
아래의 그림은 Direct Selection을 이용해서 삼각형 모양을 변형시켜 본 예 입니다.
여러분도 아래의 그림처럼 포인트를 잡고 노란 화살표 방향으로 포인트를 이동시켜 보시기 바랍니다. ^^

버튼이 너무 작아서 똑바로 그릴려고 해도 잘 되었는지 확인하기 힘드네요~
그래서 Artboard 를 400%로 확대했습니다. 우와~ 댑따 잘보이는군요.ㅋ


삼각형을 잘 그렸으나 Rectangle 객체 위에 올바르게 놓여진 것 같지는 않습니다.
그래서 Expression Blend 2.5의 왼쪽에 있는 Toolbox에서 Selection을 선택하고, Rectangle객체를 선택해서 원하는 곳으로 약간 자리 이동했습니다.
자아. 이렇게 해서 play 버튼을 만들어 보았습니다.
미디어 플레이어에는 단지 play 버튼만 존재하는 것이 아니므로 다른 버튼도 만들어 보겠습니다.
기존에 이미 만들어 놓은 버튼이 있으므로 역시 복사해서 사용하도록 하겠습니다.

앞에서는 그냥 생성해서 사용했으므로 컨트롤을 복사하는 방법에 대해 조금 자세하게 설명해 보겠습니다.
먼저 왼쪽의 Object and TimeLines에서 LayoutRoot 를 선택하고 상단메뉴에서 Tool을 선택하고 Make Control...을 선택합니다.

그러면 아래의 그림처럼 다이얼로그 상자가 열립니다. 가운데 Name 부분에 버튼 컨트롤의 이름을 입력합니다.
저는 아래의 그림처럼 이름을 btn_pause로 정했습니다.

그리고 다시 Rectangle 객체를 이용해서 일시정지 마크를 만들어서 넣었습니다.
이후 작업은 위에 설명한 것과 동일합니다.


아래의 정지 버튼도 위와 동일한 방법으로 생성합니다.
그럼 이제 원하는 버튼이 모두 생성되었겠죠? ^^


다음 시간에는 위에서 생성한 버튼을 이용하여 아주 간단한 미디어 플레이어를 만들어 보겠습니다.

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

안녕하세요~ 세티 입니다.
오늘은 Blend2.5를 이용해서 실버라이트로 버튼을 360도 회전 시키면서 크기를 작게 만드는 애니메이션 효과를 만들어 보겠습니다.

이러한 애니메이션 효과를 만들기 위해선 Blend에 있는 타임라인(timelines)을 사용해야 합니다. 타임라인은 두 개 또는 그 이상의 키프레임을 열거한 것을 말하고, 키프레임이란 객체의 스냅샷을 말합니다. 그럼 어떤 순간의 스냅샷을 까요? 우리는 객체의 속성에 어떤 값을 할당함으로써 그 객체의 성격을 결정할 수 있습니다.

타임라인이란

가령 예를 들어서 색상을 변경한다던가 회전 또는 크기 조절 나타나기도 하고 사라지기도 하는 부분들을 말하는 겁니다. 나타났다가 사라지는 객체를 만들기 위해서는 두 개의 키프레임(객체의 스냅샷)이 필요하겠죠.

하나의 키프레임에서는 객체의 모습이 보일 것이고 다른 하나의 키프레임에서는 객체가 사라지게 될 것입니다. 이것을 시간을 두고 배치를 하게되는데 그 때 우리는 타임라인에 키프레임을 배치한다라고 표현할 수 있는 겁니다. 그럼 타임라인에 배치된 키프레임의 시간 간격에 따라 그 객체의 성격이 자동으로 변경되겠죠.

대충 무슨 소린지 이해는 하시겠죠? 보다 확실히 이해하기 위해 간단한 예제를 통해서 위에 언급한 내용에 접근해 보겠습니다. 그것에 대한 적절한 예제 애니메이션으로는 버튼을 360도 회전시키면서 작아지고 배경색이 파란색인 버튼을 자주색으로 변경되는 애니메이션을 만들어 보겠습니다.

먼저 Blend 2.5를 이용해서 버튼 객체를 생성합니다.(이전 강좌에서 작성한 예제를 이용하셔도 됩니다.)


다음으로 타임라인 판넬을 열기 위해서 Object and Timeline Inspector를 클릭하는데 아래의 그림을 참조합니다.


적절한 타임라인 이름을 입력하고 OK를 클릭하면 아래의 그림처럼 화면이 변경된 것을 확인하게 될 겁니다. 빨간 글씨로 Timeline recording is on 이라는 부분을 볼 수 있을텐데요, 말 그대로 타임라인에 키프레임을 넣으면 되고, 알아서 그걸 잘 녹화뜨고 있다.~ 라는 의미로 받아들이면 될 겁니다.



자아~ 그럼 이제 타임라인에 키프레임을 배치해서 애니메이션을 만들어 보겠습니다.
먼저 키프레임에 넣을 객체를 만듭니다. 저는 모서리가 부드러운 파란색 그레데이션 처리가 된 버튼을 만들었습니다.



그리고 두 개의 키프레임을 준비할 것입니다. 하나는 원형 그래도 있는 객체의 스냅샷인 키프레임을 준비할 것이고요, 다른 하나는 360도 회전된 후 이미 작아져있는 그리고 배경도 자주색인 객체의 스냅샷인 키프레임을 준비할 것입니다.

키프레임을 넣기 위해선 객체의 스냅샷을 찍어야 하는데 어떻게 찍어야 할까요? 매우 간단합니다. 아래의 그림에 표시된 부분(recording keyframe)을 단지 클릭만 하면 됩니다.



가볍게 눌러보아요~ 그럼 노란색 라인에 하얀 점이 표시가 되죠? 이제 처음 시작되는 키프레임 설정이 끝난 겁니다. 그 다음으로는 두번째 키프레임을 만들어 보겠습니다.

키프레임 아래를 보면 타임라인을 확대하는 버튼이 있습니다. 타임라인은 1000%까지 확대가 가능하다고 합니다. 확대하기 위해서는 아래 이미지에 표시된 영역을 마우스로 클릭하고 적절한 숫자를 입력하면 됩니다.



이제 마우스로 노란선을 드래그 해서 0.25초 바로 앞 라인에 위치 시킵니다. 요렇게 말이죠.


이제 버튼 객체가 360도 회전할 수 있도록 애니메이션을 줍니다. 360도 회전 시키기 위해선 Transform 판넬에서 Rotate 탭을 클릭하면 됩니다.


그 다음 마지막으로 버튼의 모양을 줄이기 위해서 Scale을 조절합니다. x, y 모두 0.5 씩 입력하도록 합니다.
요렇게 말이죠.^^



그러면 모양이 요렇게 되겠죠???



그리고 타임라인에는 우리가 특별한 스냅샷을 찍는 행위를 하지 않았음에도 자동으로 키프레임이 들어가 있는 것을 볼 수 있을 겁니다. 어떻게 들어갔냐구요?? 위에 빨간 글씨로 기록중!! 이라고 써있잖아요~ ^^



자아~ 이제 만든 것을 한번 돌려볼까요??
매우 간단한 합니다. 아래 그림에 표시된 ▶를 가볍게 눌러주면 됩니다.


멋지게 회전하나요? ^^

이제 만들어진 결과물을 웹 브라우저에 출력해서 확인을 해봐야겠습니다.
타임라인이 만들어내는 애니메이션을 마우스 클릭할 때 시작될 수 있도록 CS 파일에 코딩을 해보겠습니다.
그러기 위해선 먼저 XAML코드를 건드려야 하는데요~ Grid 엘리먼트에 MouseLeftButtonDown="ButtonMouseClick" 속성과 속성값을 코딩합니다. 요렇게 말이죠.



그 다음 CS 파일에 메서드를 추가해 줍니다.


이제 모든 준비가 끝났습니다. F5 키를 눌러서 빌드하고 렌더링 된 결과를 확인해 보십시오.
이상으로 애니메이션에 대한 설명을 마치도록 하겠습니다.

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

안녕하세요~ 세티 입니다.
오늘도 지난 번과 마찬가지로 실버라이트 퀵 스타트를 기준으로 번역하면서 나름 제 표현을 가미하면서 진행해 보겠습니다.

먼저 우리는 겹쳐져 있는 2개의 rectangle을 가지고 있습니다. 하나는 푸른색의 배경색을 가지고 있고, 다른 하나는 붉은 빛의 배경색을 가지고 있습니다. 이 중에서 붉은 빛의 배경색을 가지는 rectangle 을 가장 위에 둡니다. 일반적인 버튼의 경우 마우스가 버튼 위에 위치하게 되면 아무런 액션도 일어나지 않습니다. 여기서 우리는 아무 애니메이션도 없는 버튼에 애니메이션을 주기 위해 프로시저 코드를 사용할 것입니다.

예제를 위해 mouseover 이벤트를 이용하여 작성해 보겠습니다.

먼저 Blend 2.5를 실행합니다.
그리고 LayoutRoot에 2개의 Rectangle을 만듭니다.
먼저 처음 버튼에는 파란색 그레디언트 효과를 주었습니다.

그리고 버튼을 복사하여 하나의 Rectangle을 똑같이 붙여넣었습니다.

복사한 객체의 색상은 아래의 그림처럼 변경했습니다. 그리고 Visibility 속성을 Collapsed로 변경했습니다.

다음으로 Artboard의 XAML 탭을 클릭하고, 다음의 내용을 코딩합니다.

코드를 보면 쉽게 이해하시겠지만 Grid는 MouseEnter 이벤트와 MouseLeave 이벤트를 가지고 있습니다. 이 이벤트에 행위를 담당하게 될 C#코드의 이벤트를 연결합니다.

여기서는 Grid객체의 MouseEnter 이벤트가 실행되면 C#에서 ButtonMouseEnter 메서드가 실행될 것이고, MouseLeave 이벤트가 실행된다면 C#의 ButtonMouseLeave 메서드가 실행될 것입니다.

Grid의 이벤트가 실행될 때 특정 행위를 주기 위해 이제 C# 코드에 프로시저를 코딩합니다.
그러기 위해선 먼저 솔루션 탐색기에 있는 XAML 파일을 확장해서 C# 파일을 열어야 합니다. 아래의 그림처럼 말입니다.

그리고 Page.xaml.cs를 두 번 클릭하여 해당 파일을 오픈합니다. VisualStudio가 설치되어 있는 분은 자동으로 실행되면서 CS 파일이 오픈될 겁니다. 그 곳에 ButtonMouseEnter 메서드와 ButtonMouseLeave 메서드를 코딩합니다.

자아 이제 다 되셨으면 VS를 닫고 Blend 2.5에서 F5키를 눌러서 프로젝트를 빌드 합니다.

그러면 아래처럼 실행되면서 버튼이 하나 보일 것입니다.

위의 그림에서 설명한 것 처럼 마우스를 하얀 여백에 두었다가 배경색이 있는 Grid로 마우스를 움직여 보세요.
Grid에 마우스가 올라가는 순간 Grid에 설정된 Mouse 관련 이벤트가 작동하면서 C# 코드에 있는 해당 메서드를 실행하게 됩니다. 그러면서 아래의 그림과 같은 결과를 렌더링하게 됩니다.

어때요? 매우 이해하기 쉽죠?
오늘은 이것으로 마치겠습니다.~

원글출처: http://silverlight.net/quickstarts/blend_quickstart/part1_drawing_painting_and_text.aspx

본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

아..요즘 무지 바쁜 세티 입니다. 얼른 실버라이트 소개 자료를 올려야 한다고 생각하는데 바쁘다는 핑계로 실천이 안되고 있네요. 이번주라는 고비만 넘기면 한가한 세티가 되기 때문에 다시 부지런히 올리도록 하겠습니다. ^^*

[세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(1)  강좌에 이어서 계속 진행하겠습니다.

 이제 Blend를 이용해서 XAML을 코딩해 보도록 하겠습니다. XAML 문법을 다 익혀서 손으로 코딩해도 좋겠지만 도구를 사용하면 코드도 깔끔해지고, 생산성도 향상되고, 또 무엇보다 개발시 사람이기에 발생할 수 있는 의도적이지 않은 실수를 줄여주기 때문입니다.

 이번 강좌를 통해서 Blend를 이용하여 XAML 코드를 실행하고 실버라이트 애플리케이션을 빠르고 쉽게 만드는 방법을 배우게 될 것입니다. XAML 은  애니매이션 표현하는데 필요한 기능들을 가지는 Visual 객체들(예를 들어서 shape나 text, video등)이 선언되어 있고 실버라이트의 런타임에서 사용됩니다. 그러한 이유로 Blend에서 화면을 보면서 무언가를 생성해 낼 수 있습니다. 또한 Visual Basic.NET이나 C#과 같은 언어를 이용해서 Silverlight 애플리케이션을 생성하는데 사용할 수도 있습니다. 아무튼 우리는 그러한 작업에 Blend를 어떻게 이용하게 될것 인지 차츰 알아보게 될 것입니다.

자아~ 그럼 Blend안에 새로운 프로젝트를 하나 생성합니다. 이 때 화면은 Design view로 되어 있을 겁니다.

오른쪽에 있는 View 탭을 한번씩 눌러봅니다. 자 어때요? XAML view 탭을 클릭하면 Root 엘리먼트가 UserControl로 되어 있는 XAML 코드가 보이고, Split View 탭을 클릭하니깐 상단에는 Artboard가 보이고 하단에는 XAML 코드가 보이죠? ^^

우리는 이 탭을 이용해서 작업하면서 결과물을 쉽고 빠르게 확인을 해볼 수 있습니다.
이제 Blend가 잘 실행되는 것을 확인했고, 프로젝트도 잘 만들어 졌으니 객체와 속성들을 간단하게 다뤄 보겠습니다. 자아~ 그럼 따라와 보세요~

1. 마우스로 가볍게 Canvas(Artboard)를 선택합니다.
2. 그 다음에는 왼쪽에 있는 Objects and Timeline에서 LayoutRoot를 선택하고, 오른쪽에서 Properties를 선택합니다. 그러면 아래의 그림처럼 Blend가 바뀌게 될 겁니다.
3. 그 다음에 오른쪽 하단에 있는 배경색 설정판에서 적절한 색을 선택합니다.

아 여기서 참 Blend는 재미있는 기능을 하나 제공합니다. 그게 뭐냐면 Property를 검색해 주는 검색 기능이 들어가 있다는 겁니다. 아래 그림 처럼 말이죠.

저는 Width라는 속성을 찾기 위해 검색 키워드를 입력해 보겠습니다. 여러분도 입력해 보세요~
와~ 어떠세요??? 저랑 똑같은 결과가 나왔나요??? 전 아래 그림 처럼 결과가 나왔습니다.
오홍~ 멋지죠?? ^^ 이렇게 쉽게 원하는 Property를 찾을 수 있도록 기능도 제공하고 있습니다.
흠흠~ Cool~ 한 사용자 경험을 위해 멋지게 노력한 흔적이 보입니다.^^

배경색을 설정했으므로 Rectangle 객체를 이용하여 무언가를 만들어 보도록 하겠습니다.

4. 도구상자에서 Rectangle을 선택합니다.
5. 그리고 선택한 Rectangle을 Canvas 위에 적절하게 그려 줍니다.

아참... 위 그림에서 왼쪽의 도구상자를 보면 하단에 오른쪽으로 하얀색 삼각형 표시가 조그맣게 붙어있는 걸 볼 수 있죠? 그 표시는 여러개의 객체를 가지고 있다는 표시 입니다. 마우스로 그 부분을 꾹 눌러보세요~
그럼 또 다른 객체들을 확인할 수 있습니다. 요렇게 말이죠. ^^

Canvas에 그려진 Rectangle의 네 귀퉁이를 둥글게 처리할려고 합니다. 왜 둥글게 처리하냐구요?? ㅎㅎ
버튼을 만들려고 하기 때문입니다.^^

6. 마우스로 객체를 다시한번 선택해 주고 Property의 Appearance를 찾아서 RadiusX와 RadiusY 값을 설정해 줍니다. 전 둘다 16으로 설정했습니다.


그랬더니 짜잔~ 네모박스의 네 귀퉁이가 모두 둥글게 변한 걸 확인해 볼 수 있을 겁니다.
흠~ 멋지네요.

Objects and Timeline Inspector의 rectangle에 마우스를 올리고 오른쪽 버튼을 클릭하여 이것의 이름을 변경합니다. 이 객체에 지정되는 이름은 code에서 객체로 접근하기 위해 사용됩니다. 강좌 후반부에는 code에서 객체의 이름을 이용하여 접근하는 것을 보게될 것입니다.
전 이 객체의 이름을 SetiObject 라고 설정 하겠습니다.

또한 이 객체를 별도의 컨트롤로 분리할 수도 있습니다. 분리하는 방법은 rectangle 객체에 마우스를 올리고 오른쪽 버튼을 클릭하면 열리는 Action Panel에서 Make Control...을 선택하는 겁니다.

가볍게 객체에 마우스를 올리고 Make Control..을 선택합니다.

그러면 객체의 이름을 적는 다이얼로그 상자가 활성화 되고, 원하는 컨트롤의 이름을 적습니다. 기본적으로 객체이름 뒤에 Control 이 붙어서 표시되는데 이 예제에서는 SetiObjectControl 로 표시됩니다.

자아~ 가볍게 OK 를 눌러봅니다.

오~ 그랬더니 변화가 생겼습니다. 기존 Page.xaml 코드에는 컨트롤에 대한 XAML 코드가 생기고, 솔루션 탐색기에는 새롭게 생성된 SetiObjectControl에 대한 SetiObjectControl.xaml 이 생성되었습니다.

아래는 생성된 SetiOjectControl에 대한 XAML 코드 입니다.

또한 탐색기의 SetiObjectControl.xaml 을 확장해 보면 SetiObjectControl.xaml.cs 파일이 있는 것을 볼 수 있습니다. 이 파일은 C#을 위한 파일이며, 객체를 제어할 코드를 넣을 수 있도록 되어 있습니다.

이렇게 분리된 XAML 파일에 행동 제어를 위한 C# 코드와 XAML 코드가 한 쌍으로 이루어짐으로써 효과적인 사용자 컨트롤(User Control)을 만들 수 있게 되는 겁니다.

이 컨트롤에 배경색을 넣어보도록 하겠습니다.
먼저 Artboard의 View 탭을 Design 탭으로 다시 변경하고, 왼쪽의 Object and Timelines에서 객체의 Root인 LayoutRoot를 선택합니다. 그리고 Blend 툴의 제일 오른쪽에 있는 Properties를 선택합니다.

Brush에서 Background를 선택합니다.

이제 Rectangle 객체 안에 색을 채워 넣겠습니다. Blend 툴의 왼쪽에 위치한 Object and Timelines에서 SetiObject를 선택합니다. 그러면 위에서 배경색을 채우는데 사용했던 Brushes가 Fill로 변경되는 것을 확인할 수 있습니다.

그 다음으로 그레디엔트를 선택하고 Rectangle을 채웁니다.
Blend 툴은 아래 그림에서 보는 것처럼 여러 곳에 포인트를 찍고 디자이너가 부분적으로 색을 달리해서 적용할 수 있도록 되어 있습니다.

보통 Glass Layer 같은 것을 만들 때 이 기능을 사용합니다. glass 효과를 주기 위해 아래와 같은 설정을 줍니다.
그레디엔트 포인트 1 알파값 75%
그레디엔트 포인트 2 투명
그레디엔트 포인트 3 알파값 75%
그레디엔트 포인트 4 투명
그레디엔트 포인트 5 알파값 75%
그레디엔트 포인트 6 투명

이렇게 설정을 하게 되면 아래의 그림과 같은 효과를 만들어 낼 수 있습니다.

만들어 놓고 보니깐 Artbord에 있는 이미지가 너무 작아 보입니다. 이것은 아래 그림에 나오는 부분에서 크기를 조절하여 확대해서 볼 수 있습니다.

자아 이제 마지막으로 Rectangle 객체 안에 채워진 그레디엔트를 사선으로 만들어 보겠습니다.
아래 그림 처럼 하시면 됩니다.^^

오왕~ 되게 쉽죠?? ㅎㅎ

이것으로 Blend 2.5를 이용한 그리기 강좌를 마치겠습니다.
수고 하셨습니다.~

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

안녕하세요~ 세티 입니다.

이번 시간에는 Expression Blend2.5를 이용하여 버튼을 만들어 보겠습니다. 버튼을 만들면서 Expression Blend2.5 에 대한 적응력도 키우고, 버튼을 만드는 것과 같은 간단한 작업을 함께 함으로써 실버라이트에 대한 이해력도 더욱 늘려보는 계기로 삼을까 합니다.

지난 강좌에서 Expression Blend 2.5를 설치해 봤습니다. 설치된 도구를 실행합니다.

네에~ 아주 실행이 잘 되는군요~ Expression Blend 2.5를 실행하면 Project를 실행할거냐? Help 파일을 볼거냐? 아니면 Sample 파일을 볼거냐 하고 묻는 창이 하나 뜹니다. 우리는 여기 Project를 선택하고 New Project를 선택해 봅니다.


와~ 선택했더니 New Project 팝업에서 Project type을 선택하라고 합니다. 여기서 언급되는 Project type에 대해 간략하게 설명하고 넘어가겠습니다.

WPF Application(.exe) - 실행 가능한 WPF 응용 프로그램을 생성할 때 선택합니다.
WPF Control Library - 단독 실행이 불가능한 dll과 같은 WPF 컨트롤을 만들 때 선택합니다.
Silverlight 1 Site - JS를 이용한(닷넷이 아닌) 실버라이트 웹 사이트를 만들 때 선택합니다.
Silverlight 2 Application - 닷넷언어를 이용한 실버라이트 애플리케이션을 만들 때 선택합니다.

자아 우리는 여기서 Silverlight 2 Application을 선택합니다. 그리고 OK를 누릅니다.
그러면 가운데에 아무것도 없는 하얀판이 하나 있고, 오른쪽에는 SetisSilverlight라는 솔루션과 프로젝트 그리고 기타 폴더와 xaml 파일이 나타나게 됩니다.

여기서 F5키를 한번 눌러볼까요? 이걸 누르면 브라우저 창이 하나 열리면서 웹 페이지가 열립니다.

데스크탑에 IIS(웹서버,Internet Information Server)가 없다면 가상 IIS를 만들어서 웹 애플리케이션을 실행할 수 있도록 도와줍니다. 이 가상 IIS 기능은 웹 개발의 편리성을 위해 Visual Studio 2005 에서 처음 소개 되었으며, 제작중인 웹 애플리케이션을 테스트 하는데는 더할나위 없을 만큼 편리한 도구 입니다. 물론 FTP나 기타 고급 기능은 제공하지 않고 있습니다.^^

이제 웹 브라우저를 닫고, Expression Blend 2.5 를 다시 봅니다.
언제나 그렇듯 이런 낯선 도구를 만나면 한숨부터 나옵니다. 휴우~ 뭔가를 또 알아야 한다는 그 부담감...
그 부담감을 즐거움으로 승화시키는 것이 어렵긴 하지만 우리는 엔지니어 이거나 디자이너 이거나 배우는 학생이거나 하기 때문에 어쨋든 이 고비를 넘어야 합니다. Expression Blend 2.5 라는 도구와 친해지는 것만이 낯설음을 친숙함으로 변화시키는 지름길인 것 같습니다. 전체적으로 한번 쭉 훝어보기 보다는 천천히 한 부분씩 잘라서 살펴보는게 좋을 것 같습니다.

왼쪽부터 한번 살펴볼까요?

옆의 그림처럼 가장 왼쪽에 있는 것이 Toolbox(도구상자) 입니다.
위에서 Expression Blend 2.5 를 실행했을 때 가운데 하얀판 보이던거 있죠?
그게 Artboard라고 하는 겁니다. 그 Artboard에 Toolbox에 있는 것(객체, object)을 선택해서 올려놓을 수 있는 것이죠.

그런데 이 Toolbox가 기존 Visual Studio 에 있는 Toolbox 보다 조금 더 강화된 사용자 경험(여기서의 사용자는 개발자와 디자이너 입니다.)을 포함한 것 같습니다. Toolbox에 있는 ">>" 이걸 클릭하면 Asset Library라는 팝업이 하나 열리는데요~ Expression Blend 2.5에서 지원하는 컨트롤들을 Gallery type,Detail type으로 분리해서 보여주거나 Search 기능을 두어 쉽게 찾아볼 수 있도록 한 점, 그리고 객체들의 네임스페이스를 Detail에서 제공하고 있는 점 등이 매우 맘에 듭니다.


그 바로 옆에는 객체와 타임라인 Inspector가 보입니다. 이 패널은 artboard 상의 모든 객체를 보여주며, 애니메이션을 위한 타임라인도 생성할 수 있게 해줍니다.

그 다음 가운데로 이동하여 하얀판을 봅니다 이 하얀판은 Artboard라고 하며 Design View라는 이름으로 부를 수도 있습니다.

이 Artboard는 우리가 생성할 웹 애플리케이션의 디자인 UI를 보여줍니다. Artboard의 오른쪽에 보면 Design, XAML, Split라는 탭이 있으며, 그것을 클릭하면 선택된 형태로 결과를 보여줍니다.

마지막으로 가장 오른쪽을 봅니다.

이것은 탐색기라고 해도 좋을 것 같은데 Table이라고 불러도 좋을 것 같습니다.

전 탐색기라는 표현이 더 좋기 때문에 그냥 탐색기라고 부르겠습니다. 탐색기의 위에 보면 3가지의 탭이 있습니다. Project Tab을 클릭하면 솔루션 탐색기가 짜잔~ 하고 열립니다.

그리고 Property를 클릭하면 객체의 Property를 설정할 수 있는 화려한 도구가 나타납니다. 그리고 Resource를 클릭하면 현재 Artboard상에서 사용되는 객체중에서 마우스로 선택된 객체의 리소스를 확인할 수 있습니다.




[세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(2) 에서 이어서 다루겠습니다.

원글출처: http://www.microsoft.com/expression/products/Features.aspx?key=blend2dot5
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요~ 세티 입니다.^^
오랜만에 다시 강좌를 시작합니다.~ 잠시 재충전의 시간을 가지고 싶었거든요.ㅎㅎ

지난 강좌에서는 실버라이트 1.0을 이용하여 실버라이트 애플리케이션을 만들어 보았습니다. 예제를 하나하나 따라하면서 XAML 코드를 직접 코딩하다 보면 실버라이트에 대해 감을 잡을수 있어서 좋습니다. 그러나 좀 더 복잡하고 다양한 효과를 위해선 보다 복잡해지는 XAML 코드가 만들어지게 될텐데요~

이것을 일일이 손으로 코딩한다는 것은 생산성이나 기타 효율적 측면에서 매우 안타까운 일임에는 틀림없을거 같습니다. 그래서 우리는 Expression Blend 2.5 라는 툴을 이용해서 실버라이트에 대한 학습을 이어가 볼까 합니다.

이번 학습을 하는데 필요한 도구의 다운로드 주소는 다음과 같습니다.
다운로드 : Expression Blend 2.5 June 2008 Preview 다운로드

링크를 클릭하면 Expression Blend 설치 위자드가 나옵니다. 가벼운 마음으로 Next를 클릭합니다.

오~ 라이센스에 동의하겠냐고 묻는 화면이 나옵니다.
너무 당연한 거지만 동의해야 쓸 수 있겠죠? ㅋ 가볍게 동의해 줍니다. Next~
뭔가 표준설치 하겠냐 아니면 선택해서 설치할거냐 전체 설치할거냐 하고 묻는 화면이 나옵니다.
학습할 때는 뭔가 다 준비해놓고 학습하면 나중에 재설치할 필요가 없으니 아주 편합니다.
가볍게 Complete를 선택하고 Next를 클릭합니다.
설치하겠냐고 묻죠? Install을 클릭합니다. ^^
설치가 쭉 되는 화면을 볼 수 있습니다.

설치를 다 했다고 알려주는군요~ 오.. 제법 빨리 설치됩니다. 용량도 작구요..ㅎㅎ
설치가 다 되면 시작 프로그램에서 Expression Blend를 찾아서 실행해하면 아래와 같은 프로그램이 실행되는 것을 확인할 수 있습니다.

사실 이런 설치과정을 강좌에 넣고 싶진 않았지만 그래도 MS 도구에 친숙한 분들이라면 모를까 처음 접근하는 분들이나 또는 MS 도구에 친숙하지 않은 분들은 설치과정을 하나하나 확인하고 싶어할 수도 있다는 생각에 강좌의 제일 첫 글로 넣어봤습니다.

다음 강좌 부터 Expression Blend를 이용한 본격적인 학습을 시작하도록 하겠습니다.^^ 

위의 코드도 천천히 해석해 보도록 하겠습니다.

위에 언급한대로 두 점 사이에서 애니메이션이 발생하도록 <DoubleAnimation> 엘리먼트를 <Storyboard> 안에 넣습니다. 그리고 이 Storyboard의 주인공이 될 엘리먼트를 지정합니다. 여기서는 ellipse가 되겠네요.
그래서 stroryboard.TargetName = "ellipse" 라고 합니다.
DoubleAnimation이 두 점 사이의 값을 이용한 애니메이션 발생에 필요한 엘리먼트 이기 때문에 나머지 한 점의 값을 설정합니다. 이미 Ellipse에는 한점(Canvas.Left = "30") 이라는 값이 설정되어 있으므로 <DoubleAnimation>의 Storyboard.TargetProperty 속성값으로 "(Canvas.Left)"를 설정하고 To="300" 을 설정해서 30px 에서 300px 까지 왼쪽에서 오른쪽으로 움직이도록 설정합니다.
그리고 마지막으로 Duration = "0:0:1" 을 설정하게 되는데 이것은 애니메이션되는 Ellipse의 애니메이션 시간을 의미합니다. (약 1초 일 겁니다.^^;)

그럼 이어서 애니메이션의 또 다른 타입에 대해 알아보겠습니다.
실버라이트는 앞에 언급한 DoubleAnimation 처럼 ColorAnimation과 PointAnimation 이라는 것도 지원합니다.
오호~ 두 가지 애니메이션이 뭘 하는 건지 대충 감이 오죠? ^^
바로 색상과 포인트를 지원하는 애니메이션 입니다.
역시 또 코드를 보면서 이해의 폭을 넓혀 가보도록 하겠습니다.

먼저 Storyboard 엘리먼트를 보겠습니다. 그 내부에 보면 ColorAnimation 엘리먼트가 2개 위치하고 있습니다.
앞의 코드에서 방아쇠 언급하면서 상세하게 코드를 설명했으니 이번엔 대충 보셔도 아하~ 하면서 눈치챌 수 있을 겁니다. 2개의 ColorAnimation 엘리먼트는 역시나 각각의 Ellipse 엘리먼트를 가리키고 있네요.

 <ColorAnimation
               Storyboard.TargetName="e1_brush"
               Storyboard.TargetProperty="Color"
               From="Red" To="Blue" Duration="0:0:5" />

해석해 보면 ColorAnimatin 엘리먼트가 가리키는 객체의 이름은 "e1_brush" 이고, 이 ColorAnimation이 가리키는 속성은 Color이며, Red에서 Blue로 5초 동안 변화시켜라.
그럼 이 객체가 가리키는 엘리먼트는 무엇일까요?

 <Ellipse.Fill>
      <SolidColorBrush x:Name="e1_brush" Color="black"/>
 </Ellipse.Fill>

바로 이 코드 입니다. Ellipse.Fill or Ellipse.Shape를 써서 그리고자 하는 형태를 지정하면 될 것이구요~
이 Ellipse의 기본 컬러가 black으로 지정되어 있습니다. 이 코드가 Ellipse 객체에 색상을 채워주는 역할을 합니다. 아마 이 예제를 실행하면 저 black은 너무 순간적이라 체크하기 어려울 것입니다. 저 부분을 green으로 변경하고 Duration 을 1분으로 설정해 보시면 시작할 때 설정된 green과 ColorAnimation에 설정한 From = "red" 에 의해 첫 시작시 색상이 다홍색 으로 보이는 것을 확인할 수 있습니다.

자 두번째 ColorAnimation의 동작은 위와 동일하지만 코드가 약간 다르네요.
 <ColorAnimation
               Storyboard.TargetName="e2"
               Storyboard.TargetProperty="(Fill).(Color)"
               From="Red" To="Blue" Duration="0:0:5" />

타겟속성이 아예 Fill의 Color라고 직접적으로 명시되어 있군요.
그럼 Ellipse 엘리먼트는 어떻게 되어 있을까요?

<Ellipse x:Name="e2" Fill="Black"
      Height="100" Width="100" Canvas.Left="30" Canvas.Top="130"/>

보시는 것처럼 Ellipse 엘리먼트에 Fill 속성이 있고, 색상이 직접 할당되어 있는 것을 확인할 수 있습니다.
결국 동작은 2가지 타입 동일합니다.

아래는 색상이 변화하는 과정을 이미지로 캡쳐해 본 것 입니다.

음~ 역시 신기합니다.^^
이렇게 우리는 적당한 시간을 주고 객체의 변화를 실감나게 지켜볼 수 있는데요~ 앞에 언급한 Storyboard와 DoubleAnimation 객체는 Timeline 객체 타입 입니다.

아래는 Timeline이 가지는 유용한 속성입니다.
Storyboard.TargetName : 애니메이팅 하기 위한 객체의 이름
Storyboard.TargetProperty : 애니메이팅하기 위한 속성
BeginTime: 이 속성에 단지 "2"라는 숫자만 넣으면 이틀 뒤에 움직입니다. ㅡㅡ; 그래서 하나의 문법을 따라야 하는데 hours:minutes:seconds 라는 룰을 따라야 하고 다음과 같이 표시할 수 있습니다.
"0:0:2"
이렇게 설정하면 2초 뒤에 애니메이션이 시작합니다.
Duration : timeline의 길이를 의미합니다. 즉 애니메이션이 설정된 시간만큼 움직인다는 뜻이죠.

아래의 코드를 복사하여 예제로 만든 xaml 코드에 붙여넣고 직접 실행하고 결과를 확인해 보시기 바랍니다.
그리고 값을 변경해가면서 어떻게 애니메이션이 움직이는지 결과를 눈으로 직접 확인해 보시면 코드를 이해하는데 많은 도움이 될 것 입니다.

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard
              Storyboard.TargetName="e1"
              Storyboard.TargetProperty="(Canvas.Left)"
              BeginTime="0:0:5">
            <DoubleAnimation To="300" />
            <DoubleAnimation To="300" Storyboard.TargetName="e2"/>
            <DoubleAnimation To="80" Storyboard.TargetName="e3" Storyboard.TargetProperty="Width"/>
            <DoubleAnimation From="200" To="300" Storyboard.TargetName="e4"/>
            <DoubleAnimation To="300" Duration="0:0:5.3" Storyboard.TargetName="e5"/>
            <DoubleAnimation FillBehavior="HoldEnd" To="200" Storyboard.TargetName="e6"/>
            <DoubleAnimation FillBehavior="Stop" To="200" Storyboard.TargetName="e7"/>
            <DoubleAnimation RepeatBehavior="Forever" To="300" Storyboard.TargetName="e8"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <Ellipse x:Name="e1" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="30"/>
  <TextBlock Canvas.Left="0" Canvas.Top="30">e1</TextBlock>
  <Ellipse x:Name="e2" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="50"/>
  <TextBlock Canvas.Left="0" Canvas.Top="50" Foreground="Red">e2</TextBlock>
  <Ellipse x:Name="e3" Fill="Purple"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="70"/>
  <TextBlock Canvas.Left="0" Canvas.Top="70" Foreground="Purple">e3</TextBlock>
  <Ellipse x:Name="e4" Fill="Blue"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="90"/>
  <TextBlock Canvas.Left="0" Canvas.Top="90" Foreground="Blue">e4</TextBlock>
  <Ellipse x:Name="e5" Fill="Green"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="110"/>
  <TextBlock Canvas.Left="0" Canvas.Top="110" Foreground="Green">e5</TextBlock>
  <Ellipse x:Name="e6" Fill="Black"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="130"/>
  <TextBlock Canvas.Left="0" Canvas.Top="130" Foreground="Black">e6</TextBlock>
  <Ellipse x:Name="e7" Fill="Orange"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="150"/>
  <TextBlock Canvas.Left="0" Canvas.Top="150" Foreground="Orange">e7</TextBlock>
  <Ellipse x:Name="e8" Fill="Red"
      Height="20" Width="20" Canvas.Left="30" Canvas.Top="170"/>
  <TextBlock Canvas.Left="0" Canvas.Top="170" Foreground="Red">e8</TextBlock>
</Canvas>

이상 입니다. ^^

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



이번 시간에는 실버라이트가 제공하는 미디어엘리먼트(MediaElement)에 대해 알아보겠습니다. 실버라이트의 MediaElement 객체는 WMV와 WMA파일, mp3와 같은 타입의 파일을 플레이하기 위해서 사용합니다.

MediaElement에 대해 알아보기 위해 우리는 웹 페이지에 미디어 파일을 추가 하고 유용한 MediaElement 속성과 미디어를 재생하는 컨트롤 방법을 다뤄보고 풀-스크린으로 미디어를 재생해 보고 비디오를 이용한 페인팅을 다뤄보겠습니다.

먼저 학습을 위해 간단한 샘플을 만들겠습니다. 그러기 위해선 하나의 웹 페이지를 생성하고 그 속에 미디어를 삽입하도록 하겠습니다.

작업순서.
1. Canvas 태그에 MediaElement를 추가합니다.
2. Source 속성에 URI 경로를 설정합니다.

아래는 예제 코드 입니다.

와~ 단 한줄의 코드로 미디어를 재생할 수 있다니... 정말 대단합니다.^^

실버라이트 XAML 코드는 앞의 강좌에서 언급했듯이 엘리먼트 하나하나가 속성을 가지고 있고, 또 객체로 되어 있습니다. 그래서 보다 다양한 멀티미디어 효과를 줄 수 있고, 보다 쉽게 그러한 기능들을 추가할 수 있습니다. 앞에 만든 미디어에 동그란 원을 하나 추가 해보겠습니다. 동그란 원을 추가 위해서 Ellipse 엘리먼트를 사용하도록 하겠습니다.

이야~ 렌더링이 잘 되었군요. 요즘 인기 많은 소녀시대의 '채연' 님을 동그란 원안에 넣어봤습니다.^^;
음! 여러 UI엘리먼트를 조합해서 원하는 결과물을 정말 쉽고 편하게 만들어 낼수 있겠군요.

계속 이어서 MediaElement에 대해 조금 더 알아보겠습니다. 다른 엘리먼트들과 마찬가지로 MediaElement도 몇 가지 유용한 속성을 가지고 있습니다.

MediaElement를 위한 유용한 속성값은?
Stretch - MediaElement에 비디오를 채운다. 가능한 값으로는 None, Uniform, UniformToFill 그리고 Fill 이 있으며, 기본값은 Fill 입니다.

Stretch = "none" 일 때

Stretch = "UniformToFill"일 때

그 다음으로는 볼륨과 관련된 속성이며, IsMuted와 Volumn 이 있습니다. 미디어가 소리 조절이 안되면 안되겠죠.^^;
IsMuted - true와 false를 설정할 수 있으며, 기본값은 false 입니다.
Volumn - 0에서 1까지 설정이 가능하며 기본값은 0.5 입니다.

다음으로는 미디어 재생과 관련된 메서드가 있겠는데요~ Play, Pause, Stop 메서드를 사용하여 미디어 재생을 컨트롤 할 수 있습니다. 미디어 재생과 관련된 예제 코드는 아래와 같습니다.

그러나 이러한 미디어를 작은 화면으로 본다는 것은 너무 답답한 일임에 틀림없습니다.^^
따라서 우리는 이 미디어를 풀-스크린 모드로 보기를 원하며, 또 그렇게 되어야 할 것입니다.
미디어 재생에서 실버라이트 플러그-인의 FullScreen 속성을 설정하기 위해서는 ActualWidth와 ActualHeight의 사이즈를 설정해야 합니다.

아래의 코드를 위에 작성한 코드에 추가 합니다. 추가할 코드는 다음과 같습니다.

<!-- 풀 스크린 모드를 위한 XAML 코드 -->
    <Canvas MouseLeftButtonDown="toggle_fullScreen"
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />       
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock>
    </Canvas> 

풀-스크린 제어와 관련된 메소드는 이미 위의 js 파일에 추가해 놓았으며, 해당 메소드의 이름은 canvas_loaded(Object, Param), toggle_fullscreen(Object, Param), onFullScreenChanged(Object, Param) 입니다.

여기까지는 기본적인 미디어 기능이었습니다. 하지만 요즘처럼 다양한 멀티미디어 콘텐츠가 응용되는 세상에서 단순하게 미디어 재생만 된다면 좀 재미가 없겠죠? 그래서 소개할려는 것이 비디오브러쉬 입니다.
우리는 실버라이트 MediaElement와 VideoBrush 기능을 사용하여 글자의 배경에 미디어를 재생할 수 있습니다.

VideoBrush 기능을 사용하기 위해선 아래와 같은 순서로 작업을 해야 합니다.
1. VideoBrush 엘리먼트를 생성합니다.
2. MediaElement를 생성하고 Name을 할당합니다.
3. MediaElement의 Opacity를 0.0으로 설정합니다.

아래는 예제 코드 입니다.

VideoBrush를 이용해서 MediaElement에 미디어를 정지, 잠시정지, 재생등을 할 수는 있지만 MediaElement의 크기를 변경할 수는 없습니다. 이와 같은 기능을 원한다면 multiple VideoBrush 객체를 이용해야 합니다.
이상으로 실버라이트가 제공하는 미디어 기능에 대해 간단하게 살펴보았습니다.

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

앞에서 우리는 실버라이트에서 사용 가능한 여러가지 엘리먼트들을 살펴 보았습니다. 기억해 두셔야 할 점은 앞 강좌에서 다룬 실버라이트 엘리먼트가 전부는 아니라는 점 입니다.
매우 기초적인 내용을 다루었고, 그러하기 때문에 알아야 할 것들이 그 만큼 많음을 기억해주셨으면 합니다.

자아~ 아무튼 부지런히 공부해 봅시다.^^
이번 강좌에서는 Image와 관련된 엘리먼트와 기능에 대해 간단하게 배워볼까 합니다. 실버라이트에서 Image 엘리먼트는 비트맵 이미지를 보여주는데 사용됩니다. 다시 말해 Image 엘리먼트는 실버라이트에서 JPG 그리고 PNG 이미지를 보여주기 위한 방법을 제공하며, 이미지를 보여 주기 위해서 Image 엘리먼트에 간단하게 Source 속성을 설정하기만 하면 됩니다.

이미지를 다른 크기로 보여주길 원할 때 Stretch 속성에 적절한 값을 설정하면 되는데 그 값은 None, Fill, Uniform, UniformToFill 입니다. 아래의 코드를 통해 각각 어떤 모양으로 렌더링 되는지 확인해보면 명확히 알 수 있습니다.

                                            (이미지 출처 : http://www.silverlight.net)

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

모든 실버라이트에서 사용되는 Canvas, shapes, MediaElement, TextBox와 같은 UIElement 객체들은 속성을 사용합니다. 아래의 객체는 모든 그래픽에서 사용되는 공통 속성 입니다.

• the Opacity property
• the OpacityMask property
• the Clip property
• the RenderTransform property

이 객체들에 대해서 하나씩 알아보도록 하겠습니다.

먼저 Opacity 속성 입니다.
Opacity 속성은 UIElement의 알파값 이나 슬라이드 값을 조정하여 활성화 시켜줍니다. Opacity 속성값에는 0에서 1사이의 값을 설정하게 되며 0을 설정하게 되면 완전 투명하게 됩니다. 기본적으로 Opacity 값은 1.0을 설정하고 있습니다. 아래의 코드는 Opacity 설정에 대한 예제 코드이며, 렌더링된 결과 입니다.

OpacityMask 속성값은 UIElement의 어떤 특정 부분에 대한 알파값을 조정합니다. 예를 들어서 OpacityMask 값을 사용하면 오른쪽에서 왼쪽으로 진행되면서 점차 희미해지는 객체를 만들 수 있습니다. 객체에서 OpacityMask를 사용하게 된다면 LinearGradientBrush, RadialGradientBrush, ImageBrush를 대부분 사용할 수 있습니다.
아래의 코드와 렌더링 결과물은 OpacityMask를 사용했을 때 어떻게 그려지는 지에 관한 것입니다.

다음으로 Clip 속성을 살펴 보겠습니다.
Clip 속성은 엘리먼트에 의해 그려진 어떤 한 부분을 선택할 때 사용됩니다.Clip 속성을 사용하기 위해서는 Geometry 객체를 사용해야 합니다. Geometry는 선택된 나머지 영역을 hidden 처리 하게 됩니다. 아래의 코드는 RectangleGeometry를 사용하여 Ellipse 엘리먼트를 Clip한 것입니다.

마지막으로 RenderTransform 속성은 Transform 객체를 사용하며,  엘리먼트를 다양한 각도로 움직이고 조정합니다. 이런 것을 가능하게 하는 Transform은 RotateTransform, SkewTransform, ScaleTransform, TranslateTransform 등이 있습니다. 아래의 코드는 여러가지 Transform을 렌더링 하는 예제 입니다.

이상으로 공통 그래픽 속성에 대해 간략하게 살펴봤습니다. 역시 코드를 눈으로 보는 것 보다는 직접 단 한번이라도 코딩을 해보시고 그 결과를 확인하는 것이 무엇이든 가장 빠르고 쉽게 익히는 비결인 것 같습니다.
귀찮더라도 꼭 한번 코딩을 해보십시오.

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



이전 강좌에서는 Canvas 객체를 이용한 표현에 대해 살펴보았습니다. 이번 강좌에서는 모양을 나타내기 위해 필요한 객체와 요소들을 알아보도록 하겠습니다.
먼저 실버라이트는 원, 직사각형, 라인, 선분을 이어 만든 도형, 다각형, 그리고 경로 엘리먼트들이 모두 기본적으로 Vector 그래픽 으로 제공됩니다. 이 엘리먼트들은 shape 엘리먼트로 잘 알려져 있습니다.

먼저 가장 기본적인 shapes에 대해 살펴보겠습니다.
실버라이트가 제공하는 가장 기본적인 shape는 원, 직사각형, 그리고 선 입니다.
타원(Ellipse) 엘리먼트는 달걀 모양의 타원이나 정확한 원을 기술하는데 필요한 엘리먼트 입니다.
가로, 세로 높이를 설정하기 위해 Width와 Height를 설정합니다.
직사각형 엘리먼트는 정사각형이나 직사각형을 기술하는데 필요한 엘리먼트 입니다. 이것 또한 가로, 세로 높이를 설정하기 위해서는 Width와 Height를 설정하며, RadiusX, RadiusY 값을 이용하여 사각형 모서리의 휘어짐을 결정합니다.
Line 객체의 경우 높이, 넓이를 나타내는 Width, Height 대신에 X1, Y1, X2, Y2를 사용합니다.

다음의 코드는 Canvas 객체에 Ellipse, Rectangle, Line 객체를 이용해서 그린 것 입니다.

추가적으로 Ellipse, Line 그리고 Rectangle 엘리먼트들에 대해 실버라이트는 3개의 다른 shape 엘리먼트를 제공합니다. 그것은 Polygon, Polyline, Path 입니다.
보통 우리가 도형을 그릴 때 점(포인트)를 찍고 그 점을 하나의 선으로 연결해서 그림을 그리게 됩니다. Polyline 객체는 여러 개의 점(포인트)를 선으로 연결하여 모양을 만들어 내며, 닫혀진 형태가 아닌 열린 형태의 모양을 만들게 됩니다. 그러나 이것과는 다르게 Polygon 객체는 닫힌 모양을 만들어 내게 됩니다.

다음의 코드를 이용하여 어떤 결과가 렌더링 되는지 직접 실습해 보도록 하겠습니다.

먼저 코드를 보면 Polyline과 Polygon 객체의 경우 그것이 각각 가지는 포인트의 숫자는 모두 동일합니다.
그러나 생성된 그림의 결과를 놓고 본다면 polygon은 자동으로 닫힌 모양으로 만들어내고, Polyline은 열린 모양으로 만들어진다는 것을 확인할 수 있습니다.

마지막으로 Path 엘리먼트는 커브나 호를 포함하는 복합적인 모양을 표현할 때 사용할 수 있습니다. 이러한 표현을 위해 특별한 애트리뷰트 문법을 사용해야 하는데 그것은 Data 라고 불리는 속성값으로 할 수 있습니다.
아래의 코드는 복합적인 모양 표현을 위해 Data 애트리뷰트를 사용한 예 입니다.

 보통 이런 복합적 모양의 그림을 마크업으로 그리기 위해서는 Path Markup 문법을 알아야 하는데 이것은 매우 번거롭고 귀찮은 작업이므로 개발툴을 이용하여 직접 작업하는 것이 좋습니다.
만일 Path Markup 문법에 대해 자세히 알고 싶다면 다음의 링크에서 보다 상세한 정보를 얻을 수 있을 것 입니다.

주소참고 : Path Markup Syntax 에 대해 공부하기

실버라이트에서 모양을 만들 때 대부분 이 모양을 만들어 내는 엘리먼트들은 2개의 Part를 가지는데 하나는 stroke이고 또 다른 하나는 Fill 속성 입니다. 아래의 그림은 사각형이 가지는 Stroke와 Fill 속성을 표시한 그림입니다.

하지만 모든 모양이 하나의 Fill과 하나의 Stroke를 가지는 것은 아닙니다. Line의 경우 하나의 stroke만 가지며, Fill 속성을 설정한다고 해서 Line에 어떤 효과를 주는 것은 아닙니다.

모양을 그릴 때 Stroke와 Fill 속성과 더불어 Brush 효과를 추가로 설정할 수 있습니다. Brush 객체는 총 5가지의 타입을 가지고 있으며, 이것을 사용하여 원하는 것을 표현할 수 있습니다. 5가지 타입은 다음과 같습니다.

• SolidColorBrush
• LinearGradientBrush
• RadialGradienBrush
• ImageBrush
• VideoBrush

특정한 색상을 어떤 영역에 사용하기 위해선 SolidColorBrush를 사용합니다. XAML은 SolidColorBrush를 생성하기 위해 몇 가지 방법을 제공합니다.

"Black", "Gray"와 같은 직접적인 이름을 사용하는 방법
6진수 사용(#rrggbb or #0033FF)
8진수 사용(#aarrggbb or #990033FF)
또한 8 비트 컬러 표현을 위해 3~4 진수 표현법도 사용될 수 있겠지만 이것은 일반적으로 잘 사용되지는 않습니다.

실버라이트는 또한 선 또는 곡선 형태의 그라디에이션을 지원합니다. 보통 그라디에이션을 표현하기 위해서는 2개의 경사도만 필요한데, 이러한 경사도를 여러개 추가해서 더욱 다양한 그라디에이션 표현을 가능하게 합니다.
이러한 그라디에이션을 표현하는 타입은 LinearGradientBrush와 RadialGrandienBrush 입니다.
LinearGradientBrush 은 StartPoint와 EndPoint 속성을 사용하여 표현하게 됩니다.
반면에 RadialGradienBrush는 기본적으로 원의 중심에서 부터 그림을 그려나가기 시작합니다. GradientOrign, Center, RadiusX, RadiusY 속성을 이용하여 표현을 하게 됩니다.

마지막으로 ImageBrush를 이용하여 이미지를 그릴수도 있습니다. 기본적으로 이미지는 모양의 모든 전체 영역에 Fill이 적용되어 있습니다. 그러나 Stretch 속성을 이용하여 서로 다른 설정을 할 수 잇습니다.

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


결과는 아래의 그림과 같으며, 상단 그리고 왼쪽으로 바짝 붙어 있는 것을 볼 수 있을 겁니다.

이제 위에 제시한 코드를 이용해서 왼쪽으로 50픽셀 상단에서 하단으로 50픽셀 만큼 이동시켜 보겠습니다.

코드를 수정한 후 렌더링된 결과는 아래의 이미지와 같으며, 정확히 50픽셀 이동된 것을 확인할 수 있습니다.

다음으로 z-index에 대해 알아보도록 하겠습니다.
Canvas 엘리먼트 내에 위치한 자식 객체는 모두 순서대로 렌더링 됩니다. 젤 위에 있는 것이 먼저 렌더링 되고 나면 그 다음에 위치하는 자식 객체가 렌더링 되면서 제일 처음에 렌더링된 그림 위에 덮어쓰여 집니다. 이런 식으로 표현되는 Canvas 내의 객체에 대해 그  순서를 변경하고 싶으면 zorder를 이용해서 변경하게 됩니다.
Canvas.ZIndex라고 설정하면 되며, 값이 클수록 Canvas에서 멀어지고 값이 낮을수록 Canvas에서 가깝게 위치하게 됩니다.

먼저 3개의 원을 표시할 것이므로, Canvas의 크기를 더욱 키우도록 하겠습니다.
앞에서 만들었던 crObjS.js 에서 캔버스의 크기를 가로 500픽셀, 새로 500픽셀로 변경합니다.

그 다음에 3개의 원을 추가 합니다.

이제 브라우저를 통해 원이 잘 추가 되었는지 확인합니다.

잘 되었으면 이제 코드에 ZIndex를 설정합니다. Ellipse 엘리먼트에 Canvas.ZIndex 애트리뷰트를 설정하고 ZIndex 속성에 값을 설정하면 됩니다.

렌더링 된 결과는 다음과 같습니다.

Canvas 나 Shape 그 외 다른 많은 엘리먼트들은 높이와 넓이 속성을 가지고 있으며, 특정한 값을 할당함으로써 그것을 효과적으로 이용할 수 있습니다. 이것을 확인해보기 위해 Canvas 엘리먼트에 높이와 넓이를 주고 적절한 배경색을 주도록 하겠습니다.

위에 코드를 제시하였고, 아래는 렌더링된 결과 입니다.

위의 그림에서 빨간색 영역은 Canvas의 영역이고, 회색 부분은 호스팅된 Plug-in의 영역 입니다. Canvas와 Ellipse 객체의 기본적이 높이와 넓이 값은 모두 0 이라는 것을 참고하셨으면 합니다.

마지막으로 Canvas는 또 다른 Canvas를 포함할 수 있습니다. 그것이 가능한 이유는 Canvas 또한 또 다른 객체 이기 때문입니다.

위의 코드를 참고해서 Canvas 객체 2개를 추가합니다. 그리고 각 Canvas에 적절한 컬러를 할당합니다.
브라우저를 통해 렌더링 해보면 하단의 이미지와 같은 모양이 그려진 것을 확인할 수 있습니다.

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

이전 강좌에서 작성한 파일들을 이용하여 HTML 페이지에 Silverlight 플러그인이 추가된 Silverlight 프로젝트를 생성하고, 아무런 내용이 없는 XAML 파일을 생성합니다.
먼저 SimpleXAML.xaml 파일을 생성합니다. XAML 파일에 Canvas를 생성하고, Silverlight와 XAML 네임스페이스를 마크업 합니다.

위의 코드에서 XAML 파일은 <Canvas>라는 태그로 시작되는데 xmlns 라는 어트리뷰트는 Silverlight 네임스페이스에 대한 선언이고, xmlns:x 라는 어트리뷰트는 xaml 네임스페이스 입니다.
준비된 Canvas에 우리는 어떤 도형을 그리기 위해 아래의 코드를 추가합니다.

만약 실버라이트 1.0 컨트롤이 설치되어 있지 않다면 설치해야 코드로 작성된 실버라이트 결과물을 확인할 수 있습니다.

결과는 아래의 이미지와 같습니다.

우리는 실습을 통해 Silverlight를 직접 만들어 보았습니다.
매우 쉽지 않습니까?? ^^
XAML 같은 경우는 Expression Blend 같은 툴을 이용하여 직접 생성한 후 별도의 XAML 파일로 만들어 display 되기를 원하는 HTML 파일과 같은 경로상에 두면 됩니다.

다음 시간에는 이 샘플 예제에서 사용된 <Canvas>라는 태그에 대해 살펴보도록 하겠습니다.
<Canvas> 태그는 실버라이트 애플리케이션을 생성할 때 매우 빈번하게 사용되는 중요한 녀석입니다.

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

안녕하세요~ 세티 입니다.^^

지난 시간에는 디자이너를 위한 실버라이트에 대한 소개를 해봤는데요~ 이번에는 이어서 개발자에 대한 실버라이트 소개를 해볼까 합니다.

실버라이트 애플리케이션에 대한 강력함을 보고 싶다면 다음의 주소를 방문하여 볼 수 있습니다.
실버라이트 애플리케이션 보기 : www.silverlight.net

자바스크립트를 이용해서 실버라이트를 개발하고자 한다면 실버라이트 1.0 릴리즈 버전이 필요하지만 닷넷을 이용해서 실버라이트를 개발하고자 한다면 실버라이트 1.1 알파 버전이 필요합니다.

실버라이트로 개발하기 전에 먼저 실버라이트에 대한 정보를 얻을 필요가 있습니다. 그래야 훌륭한 애플리케이션을 만들 수 있을 테니깐요.^^

아래의 표에서 실버라이트 1.0과 1.1에 대한 정보를 얻을 수 있습니다.

Run Time
- 윈도우즈를 위한 실버라이트 1.0(Microsoft Silverlight 1.0 - for Windows)
- 맥을 위한 실버라이트(Microsoft Silverlight 1.0 - for Mac)
- 윈도우즈를 위한 실버라이트 1.1 알파(Microsoft Silverlight 1.1 Alpha September Refresh - for Windows)
- 맥을 위한 실버라이트 1.1 알파(Microsoft Silverlight 1.1 Alpha September Refresh - for Mac)
- ASP.NET을 위한 실버라이트 컨트롤이 포함된 릴리즈(Microsoft ASP.NET Futures (July 2007))

개발툴
- Microsoft Visual Studio 2008 Beta 2
- Microsoft Silverlight Tools Alpha for Visual Studio 2008 Beta 2

디자이너 툴
- Expression Blend 2 August Preview : 이 툴은 디자이너를 위한 툴 입니다.
- Expression Design : 이 툴은 실버라이트 자원을 만드는데 필요한 일러스트와 그래픽 디자인을 위한 툴 입니다.
- Expression Encoder : 비디오와 같은 것들을 만드는데 필요한 툴 입니다.

소프트웨어 개발 kit
- Microsoft Silverlight 1.0 Software Development Kit (SDK)
  : 실버라이트 1.0을 타겟으로 하고 있으며, 문서, 샘플, 템플릿 등이 포함되어 있습니다.
- Microsoft Silverlight 1.1 Software Development Kit (SDK) Alpha September Refresh
  : 실버라이트 1.1을 타겟으로 하며 문서와 샘플이 포함되어 있습니다.

이상으로 개발자가 실버라이트로 애플리케이션을 개발하기 위해 준비해야 할 것이 무엇인지 알아봤습니다.

다음 시간에는 자바스크립트를 이용한 실버라이트 개발에 대해 조금씩 진행해 보도록 하겠습니다.^^
물론 실버라이트 1.0 입니다.~

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

안녕하세요~ 세티 입니다.

디자이너를 위한 실버라이트를 간략하게 소개합니다.
뭔가 새로운 것이 나왔을 때 그것에 대해 알고 싶고, 찾고 싶고 정리된 내용으로 내 머릿 속에 들어와 주길 바라지만 인터넷의 지식이라는 것이 모두 흩어져서 존재하고 단편적이라 전체를 이해하는 수단으로서는 사실 그리 좋지는 않더라구요...ㅎㅎ 아무튼 실버라이트는 개발자 보다는 디자이너 분들에게 더욱 임팩트가 있지 않을까 하는 생각이 듭니다. 그래서 디자이너 분들이 실버라이트로 무언가를 만드는데 있어 필요한 것들을 간략하게 소개해 볼까 하구요~ 제작과 관련된 것 보다는 실버라이트가 뭐고, 툴은 어디서 얻어야 하고, 샘플은 또 어디서 구해야 하는지에 대해 간략하게 적어 보겠습니다.

1. 실버라이트를 경험해 보자.
먼저 실버라이트로 제작된 애플리케이션을 보고 싶다면 아래의 사이트로 방문하시면 됩니다.
http://www.silverlight.net

2. 실버라이트가 뭐하는 건데요?

• 사용자 경험을 애플리케이션에 반영하는데 필요한 흥미있는 크로스 플랫폼 입니다.
• 미디어 솔루션이며, 매우 강력합니다.
• 리치 인터펙티브 애플리케이션(RIA)을 제작하는데 최적의 기술 입니다.

3. 그러면 플러그 인 하고 툴은 어디서 구하나요?

• 자바스크립트를 사용하여 실버라이트 애플리케이션을 개발하기 위해서는 실버라이트 1.0 릴리즈가 있어야 합니다. 그리고 닷넷(Visual Basic 이나 Visual C#)을 이용하여 개발하기 위해서는 실버라이트 1.1 알파 버전이 있어야 합니다.

          실버라이트 플러그인 다운로드 주소 : Microsoft Silverlight 1.0 Release Candidate

4. 실버라이트 디자인하기
자아~ 플러그 인을 얻었으니깐 이제 실버라이트를 제작해 봐야겠죠? 그리고 그러기 위해선 툴이 필요할거구요
실버라이트 개발툴을 구하기 위해선 아래의 주소로 방문하시면 됩니다.

 Expression Studio

아.. 참고로 디자이너가 사용하는 툴이 Expression Studio 입니다.^^
디자이너가 사용하게 될 Expression Studio는 총 3가지가 있습니다.

1. Expression Blend 2 August Preview - 실버라이트로 웹에 접속된 사용자를 위한 프로페셔널 디자인 툴
2. Expression Design - 실버라이트를 위해 필요한 자원을 생성하기 위한 프로페셔널 일러스트레이션과 그래픽 디자인 툴
3. Expression Encoder - 비디오 기술을 위한 툴 입니다.

5. 실버라이트로 개발하기

• 실버라이트 애플리케이션에 자바스크립트 추가를 도와주는 통합개발환경으로는 비주얼 스튜디오 2008 베타를 사용한다.

6. 실버라이트 SDK?

• 실버라이트 SDK는 상업적인 애플리케이션을 빌딩하는데 있어서 필요한 문서, 샘플, 템플릿을 포함하고 있다.

7. 샘플과 문서를 이용해서 실버라이트 배우기

• 처음 애플리케이션을 만드는 것이라면 QuickStarts 를 보면 매우 좋습니다.
• 만약 실버라이트에 관한 질문이 있다면  Forums 를 방문해 보세요~

이상으로 디자이너가 실버라이트로 무언가를 개발하기 위해 필요한 것들이 어떤 것들이 있는지 알아봤습니다.
다음 시간에는 개발자를 위한 실버라이트 소개를 해볼까 합니다.~

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

실버라이트 1.0 릴리즈를 실행하기 위해 추천되는 시스템

• 윈도우즈 XP, 윈도우즈 서버 2003, 윈도우즈 비스타: 128MB RAM, 인텔 펜티엄 2 450MHz 나 더 빠른 프로세서

• 매킨토시 OS 10.4.8 이나 상위버전 : !GB 메모리, Power PC G3 500MHz 나 더 빠른 프로세서 또는 인텔 코어 듀오 1.83GHz나 더 빠른 프로세서

실버라이트 1.1 알파

• 윈도우즈 XP, 윈도우즈 서버 2003, 윈도우즈 비스타: 128MB RAM, 인텔 펜티엄 2 450MHz 나 더 빠른 프로세서

• 매킨토시 OS 10.4.8 이나 상위버전 : !GB 메모리, 인텔 코어 듀오 1.83GHz나 더 빠른 프로세서

실버라이트의 브라우저와 OS 지원여부
실버라이트는 크로스-브라우저 플러그인이며, 작은 사이즈로 디자인 되어져 있다.
실버라이트는 아래의 것들과 호환된다.

• IE6.0, IE7.0 그리고 파이어폭스 1.5와 2.0 브라우저를 사용하는 윈도우즈 XP SP2, 윈도우즈 비스타 및 윈도우즈 서버 2003

• 사파리 파이어폭스 1.5와 2.0을 사용하는 Mac OS 10.4.8
  

실버라이트 1.1 알파는 다음의 것들과 호환된다.

• IE6.0, IE7.0 그리고 파이어폭스 1.5와 2.0 브라우저를 사용하는 윈도우즈 XP SP2, 윈도우즈 비스타 및 윈도우즈 서버 2003

• 사파리 파이어폭스 1.5와 2.0을 사용하는 Mac OS 10.4.8