[엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1) Silverlight2008/10/21 17:48
안녕하세요. 엘리 입니다.
10월 8일에 Microsoft UX/RIA Partner Workshop에 참석했었습니다. 파트너는 아니지만 그냥 Silverlight에 관심 있는 개발자 입장으로요. ^^; REMIX08에서도 거론되고 Silverlight의 좋은 기능으로 많이 소개되었던 II7-Bit Rate Throttling (UXKOREA), 쉽게 구현할 수 있는 미디어 플레이어 (훈스닷넷), Cross Domain 설정, Silverlight Deep Zoom 기능 등 여러 기능들이 소개되었습니다. 각 기능들에 대해서 링크를 걸어두었으니 관심을 가지시고 읽어 보시기 바랍니다. Deep Zoom 소개는 영어로 소개하지만 영상도 있으니 가볍게 동영상을 보셔도 좋을 것 같습니다. ^^
세미나 후기라도 써보려고 오래된 똑딱이 디카도 가져가서 사진도 찍고 그랬는데 벌써 10월 말이니…-ㅅ-; 마지막에 경품을 받지 못해서 그런가 봅니다. 속으로는 ‘오~오~오~ 드뎌 경품 추첨이다.’ 라고 기대는 매번 하는데…표정은 티 안내고 앉아 있지만. ㅋㅋ 이번에도 아쉬움을 갖고 돌아왔습니다.
이번 시간에는 Expression Blend를 이용하여 간단한 Silverlight 시계를 만들어 보겠습니다. 먼저 개발을 위해 아래 파일들을 설치하시기 바랍니다. (Silverlight 다운로드 페이지)
- Microsoft Silverlight Tools for Visual Studio 2008 SP1
- Microsoft Expression Blend 2.5
우선 아래 그림과 같이 시계의 표면 및 이음 홈, 테두리, 그림자를 포함한 그래픽을 디자인해보겠습니다.
아래 절차를 따라 Expression Blend에서 새 프로젝트를 만듭니다.
1. Expression Blend를 실행합니다.
3. 이름 상자에 원하는 Silverlight 애플리케이션 이름을 입력합니다.
4. 언어 상자에 Visual C#을 선택합니다.
5. Silverlight 2 애플리케이션을 선택하고 확인을 클릭합니다.
여기서 F5키를 한번 눌러볼까요? 이걸 누르면 브라우저 창이 하나 열리면서 웹 페이지가 열립니다.
Silverlight 2 애플리케이션 새 프로젝트를 만들었고 다음으로는 시계의 그림자 부분을 디자인해보겠습니다.
1. Blend의 도구 상자에서 타원 (Ellipse)을 선택합니다. (처음은 사각형만 보이지만 마우스를 길게 클릭하거나 오른쪽 마우스 버튼을 클릭하면 다른 도구도 추가로 표시됩니다.)
2. 하얀 캔버스에 타원을 드래그 & 드롭을 하여 대략 330픽셀 너비와 높이의 원을 그립니다.
3. Blend 우측 상단에 속성 탭을 선택하여 Fill을 선택합니다. 단색 브러시를 확인한 후 검정색으로 채우고 Opacity를 30%로 변경합니다. ②, ④번은 싱크되어 있습니다. ④번에 black으로 입력하시면 16진수 값으로 변경이 되고 ②번 Fill 부분도 함께 변경이 됩니다. (아래 그림 참고)
4. 개체 및 타임라인 창에서 타원 이름을 shadowEllipse로 변경합니다.
이제 그림자는 완료하였습니다. 아주 간단하지요? 그럼 다음으로 시계 테두리를 그려 보겠습니다.
1. 그림자 원 shadowEllipse를 복사하여 동일한 크기의 원을 하나 더 만듭니다. shadowEllipse를 선택하여 CTRL+C와 CTRL+V (copy & paste)합니다. 이 원의 이름은 outerRimEllipse로 지정합니다.
2. 테두리 원에는 그라데이션을 지정합니다. 먼저 개체 및 타임라인 창에서 outerRimEllipse를 선택합니다. 모양 창에서 Opacity는 100%로 지정하고 브러시 창에서 Fill을 선택하고 그라데이션 브러시를 선택합니다.
5. 테두리 원 outerRimEllipse를 선택 도구를 사용하여 우측 상단으로 조금 이동하여 그림자 원을 살짝 보이게 합니다.
다음은 현재 까지의 그림입니다.
다음은 이음 홈을 만들어 보겠습니다. 이음 홈은 테두리 보다 좀 작을 뿐이지 디자인하는 방법은 비슷합니다.
1. 테두리 원 outerRimEllipse를 선택하고 CTRL+C, CTRL+V하여 동일한 원을 추가합니다. 이름은 bevelEllipse로 변경합니다.
3. outerRimEllipse의 복사본이라 bevelEllipse 그라데이션이 적용되어 있을 것입니다. bevelEllipse의 좌측 지점을 #FF2F2F32, 우측 지점 색상을 #FFE4E5F4로 변경합니다.
이제 서서히 뭔가가 되어 가는 것 같네요. ^^ 다음은 bevelEllipse를 이용하여 시게 표면을 만들어 보겠습니다.
1. bevelEllipse의 복사본을 만들고 새로운 이름으로 faceEllipse로 지정합니다.
2. faceEllipse를 선택하고 bevelEllipse보다 좀 작은 270 픽셀 정도로 크기를 변경합니다.
3. faceEllipse의 색상을 단색 브러시를 이용하여 검정색으로 변경합니다. 그럼 아래와 같은 그림입니다.
다음은 시계 바늘들을 고정하는 중앙 원을 만들어 보겠습니다. 이게 없으면 바늘이 굴러 댕길 겁니다. -ㅅ-;
1. 도구 상자에서 타원 도구를 선택하고 시계 표면 (faceEllipse)에 원을 하나 그립니다.
2. 새로운 원의 이름을 centerEllipse로 변경합니다.
3. centerEllipse의 너비와 높이를 30으로 설정합니다.
4. stroke thickness를 8로 설정하고 stroke를 원하는 색상으로 설정합니다.
5. centerEllipse 원을 faceEllipse 정중앙 (
다음은 시계 바늘들을 만들어 보겠습니다.
1. 도구 상자에서 사각형 도구를 선택합니다.
2. 먼저 초침을 만듭니다. 세 개 침 중에 가장 얇게 하고 원하는 색상으로 설정합니다. 방향은
하얀색 점 이동 시 정중앙으로 설정이 잘 되지 않으면 CTRL+= 키 또는 메뉴 보기, 확대를 사용하여 좀 더 세밀하게 이동 시켜 보시기 바랍니다.
3. 분침도 마찬가지로 초침의 2단계를 따라하여 만듭니다.
4. 시침도 동일하게 만들고 분침보다 StrokeThickness와 길이를 좀 더 길게 만듭니다.
세 개 바늘 모두 12방향을 향하고 있을 테니 바늘 위치를 조정하면 아래와 같은 그림일 것입니다.
'Silverlight' 카테고리의 다른 글
| [Expression Media] 2. EM을 이용한 HTML 갤러리 생성 (0) | 2009/07/05 |
|---|---|
| [Expression Media] 1. Expression Media란? (0) | 2009/07/04 |
| [엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1) (2) | 2008/10/21 |
| [엘리의 실버라이트 2.0] Silverlight 시작 (6) | 2008/10/02 |
| [엘리의 실버라이트 2.0] 관리되는 코드에서 HTML DOM에 액세스 (3) | 2008/09/21 |
| [엘리의 실버라이트 2.0] Syndication Feeds 액세스 (0) | 2008/09/11 |
