하얀코코의 예제로 배우는 익스프레션 블렌드 & 실버라이트

블렌드메이트 O.T

하얀코코 — Thu, 04 Feb 2010 17:51:45 +0900

블렌드메이트 OT를 합니다.
저는 올해는 훈스닷넷 시삽은 아니구요~ 그냥 스터디 멘토만 합니다...
많이 많이 오세요...
신청은 여기서 댓글로 받아요~

[예제로 배우는 Expression Blend] Chapter 8. 실버라이트 이펙트 시리즈 1- 예쁜 동그라미 물결 이펙트(2)

하얀코코 — Mon, 01 Feb 2010 18:40:53 +0900

34. 이제 Main.xaml로 갑니다. 가면 아래와 같이 usercontrol 에 ! 모양이되어 있을 것입니다.
Project > Build Project 하도록 합니다.

빌드 하는 이유가 궁금하신 분들은
http://www.whitecoco.net/entry/예제로-배우는-Expression-Blend-Chapter-4-웨이브-효과-2-유저컨트롤-사용하기
를 참고 하시면 좋아요 ..

35. 작업화면의 Usercontrol에서 마우스 우클릭 > Group Into > StackPanel을 하여 StackPanel에 담습니다.

36. StackPanel을 선택하고 다음 그림과 같이 Layout 속성을 변경합니다.

(Set to Auto)버튼을 누르면 Auto로 바뀝니다.

37. 이제 StackPanel안의 UserControl1을 선택하고 Ctrl+C합니다.

38. StackPanel을 선택한 채로 Ctrl+V를 합니다. 일단 한 15개정도 붙여넣기를 합니다.
그림과 같이 StackPanel안에 꽉 차게 하면 됩니다. (캡쳐하려니 너무 커서 잘 보이게 할려고 잠시 50%로 했습니다.)

39. 이제 UserControl1.xaml.cs파일을 엽니다. 그리고 다음 그림과 같이 코드를 넣어줍니다.
간략하게 설명을 달을게요~

①번은 "double형의 Interval이라는 이름의 값을 외부에서 받겠다!!" 라는 뜻입니다.

②번은 아까 만들었지요? UserControl이 Load되면 들어오는 부분이요~ 그 부분에 밖에서 받은 Interval을
TimeSpan.FromSeconds()안에 넣어서 스토리보드를 실행시키는 시간을 주는겁니다.
이해가 안 될 수도 있지만~ 끝까지 해보면 아하~ 이런거구나! 하고 응용할게 많겠구나~ 라고 생각하실 거에요. *^^*

40. 자! 여기까지 하고 저장하고~ 일단 F5 눌러봅시다. ~~
커졌다 작아졌다 하지요? 그런데 모두 똑같이 움직이니까 너무 재미가 없잖아요?
그런데 우리가 Interval을 받을수 있게 만들어 뒀잖아요? 이제 그부분을 제어하러 가볼까요?~

41. Page.xaml로 이동합니다. 막 움직이지요?
다음 그림과 같이 StackPanel을 열고 UserControl1하나를 찍고 Properties패널의 맨 아래에 있는 Miscellaneous를 열어보세요
Interval이 보이죠??

42. 이제 순서대로 Interval에 시간을 입력해 주면 됩니다.
다음 그림과 같이 첫번째 UserControl1을 선택하고 Interval을 0.05로 줍니다.

43. 다음 그림과 같이 두번째 UserControl1을 선택하고 Interval을 0.1로 줍니다.

44. 다음 그림과 같이 세번째 UserControl1을 선택하고 Interval을 0.15로 줍니다.

45. 그렇게 마지막까지 0.05씩 증가시켜줍니다. 저는 0.8까지 되었네요

46. 이제 F5를 눌러 실행합니다. 성공하셨나요?? 축하합니다 *^^*

시작을 0.05부터 하니.. 좀 빨리 시작되죠?? 그래서 저는 다시 1.05부터 1.8로 바꿨어요 ㅋ

하나 하나 바꿀려니 좀 귀찮고 힘드시죠??
사실 더 좋고 간단한 방법도 회사에 같이 다니는 홍철의 씨가 알려 주셨지만 그 부분은 제가 혼자 못할거 같아서...
제가 혼자 할수 있는 수준으로 만들려고 그냥 이렇게 썼습니다. 철의씨 감사합니다 ㅋ

이해가 안되는 부분이 있으면 언제라도 댓글 달아주세요.
파일을 첨부합니다.

waveDotMotion.zip

[응용예제]

waveDotMotion2.zip

응용 예제도 잘 만들어 보세요.

안녕히 계세요~~

[예제로 배우는 Expression Blend] Chapter 8. 실버라이트 이펙트 시리즈 1- 예쁜 동그라미 물결 이펙트(1)

하얀코코 — Thu, 28 Jan 2010 20:25:46 +0900

Chapter 8. 실버라이트 이펙트 시리즈 1- 예쁜 동그라미 물결 이펙트(1)

이번 예제는
전에 제가 인터넷 돌아다니다가 봤던 것인데... 만들어 놓으면 좋겠다는 생각이 들어서 만들어 본 것입니다.

로딩중으로 쓰면 예쁠것 같아요.
제목은 머라고 쓸지 모르겠어서. 예쁜 동그라미 물결 이펙트라고 지었어요. *^^*

우선 만들기 전에 생각해 봅시다. 어떻게 만들면 될지..
첫번째로.. 우선 바탕은 저렇게 그라데이션을 주면 되고..
두번째로 원이 여러개 있는데 커졌다 작아졌다 하는 애니메이션이 들어있는 유저컨트롤을 만들고
세번째로.. 그 유저컨트롤을 쭉 나열해 주면 되겠네요.. 정말 간단하죠?

생각이 안되시는 분들은 걱정하지 마세요. 따라하다 보면 다 이해가 될거에요..

강좌를 오랜만에 쓰다보니 서론이 굉장히 길어졌습니다.

시작합니다.

1. waveDotMotion 라는 이름으로 실버라이트 프로젝트를 생성합니다.

2. LayoutRoot를 선택하고

3. Brush 패널로 가서 아래 그림과 같이 순서대로 ①백그라운드를 선택하고 ②그라데이션으로 변경한 후
③맨 끝을 콕 찍고요~ ④찍은 부분의 색상을 #FF210030으로 바꿔 줍니다.

4. LayoutRoot위에다가 원을 그리고 그 원에 다음과 같이 속성을 줍니다.
( Fill : #FFFFFFFF / Stroke : Nobrush / Width : 40 / Height : 40 )

5. 원을 선택하고 Alt키와 Shift키를 누르면서 아래로 드래그 합니다 (그러면 위치의 흔들림이 없이 복사가 잘 되요~)

6. 그렇게 복사를 해서 다음 그림과 같이 7개의 원을 만들어 줍니다.

7. 다음 그림과 같이 첫번째 원을 선택하고 Ctrl을 누른채 맨 아래 원을 선택합니다.
그리고 Transform 패널의 Scale탭에 가서 X:0.2 / Y:0.2로 바꿔 줍니다.

8. 그러면 다음 그림과 같이 원의 크기가 원래 크기의 20%로 줄어드는 것을 확인 할 수 있습니다.

9. 이번엔 그림과 같이 위에서 두번째 원을 선택하고 Ctrl을 누른채 아래에서 두번째에 있는 원을 선택합니다.
그리고 Transform 패널의 Scale탭에 가서 X:0.4 / Y:0.4로 바꿔 줍니다.

10. 그러면 원의 크기가 원래 크기의 40%로 줄어드는 것을 확인 할 수 있습니다.

11. 이번에는 다음 그림과 같이 위에 세번째 원을 선택하고 Ctrl을 누른채,
아래에서 세번째 원을 선택하고 Scale탭에 가서 X:0.6 / Y:0.6으로 바꿔 줍니다.

12. 이제 7개의 원을 하나로 묶어 주겠습니다. 다음 그림의 순서대로..
①첫번째 원을 선택하고 Shift를 누른채 ②맨 마지막 원을 선택합니다. (Shift를 누르면 중간것들이 다 선택이 되요~)
③선택한 지점에서 마우스를 우클릭 하고 Group Into로 가서 ④StackPanel을 선택합니다.

13. 그러면 다음 그림과 같이 StackPanel로 묶여 지는 것을 확인 할 수 있습니다.

14. StackPanel의 선택을 유지한 채 Opacity를 30으로 줍니다.

15. StackPanel에서 마우스 우클릭 하고 Make Into UserControl을 선택합니다.
UserControl로 만들어서 MainPage.xaml에서 재사용 하기 위해서입니다.

UserControl이 무엇인지 궁금하신 분들은
http://www.whitecoco.net/entry/예제로-배우는-Expression-Blend-Chapter-4-웨이브-효과-유저컨트롤-사용하기
를 참고 하시면 좋아요 ..

16. 다음과 같은 창이 뜨면 그냥 OK를 클릭합니다.

17. UserControl1.xaml의 화면이 오픈되었습니다.

18. StackPanel을 선택하고 Scale을 X:0 / Y:0으로 해 줍니다.

19. Storyboard1이라는 이름으로 스토리보드를 생성합니다.

20. 스토리 보드를 만들었으니 이제 모션을 줘야겠지요. 작은상태를 시작으로 커졌다 작아졌다 하는 것을 만들 것 입니다.
그래서 18번째 순서에서 X:0 / Y:0으로 해놨던 것입니다.

다음 그림과 같이 ①StackPanel을 선택하고 ②타임라인을 0.6로 이동시킨 후 ③Record KeyFrame을 선택합니다.
그리고 Scale을 다시 X:1 / Y:1로 바꿔 줍니다.

21. 다음 그림과 같이 0.6초의 위치에 키프레임이 생성되고 StackPanel이 원래의 크기가 되었음을 확인 할 수 있습니다.

22. 앞에 서는 커지게 해줬으니까. 이제 다시 작아지는 모션을 줘야겠지요?

다음 그림과 같이 ①StackPanel을 선택하고 ②타임라인을 1.3로 이동시킨 후 ③Record KeyFrame을 선택합니다.
그리고 Scale을 다시 X:0 / Y:0로 바꿔 줍니다.

혹시 0 이 안들어가고 자꾸 다른 숫자로 바뀌어도 당황하지 마세요.
저는 어쩔때는 0이 0.0000029로 나올때도 있구요.. 어쩔때는 1E-06나 1.7E-05로 나올때도 있습니다.
그런데 xaml코드를 보면 0으로 잘 되어 있습니다. 블렌드를 껐다 키면 0으로 잘 보여집니다.

23. 다음 그림과 같이 1.3초의 위치에 키프레임이 생성되고 StackPanel이 0 의 크기가 되었음을 확인 할 수 있습니다.

24.

Play를 눌러서 커졌다 작아지는 것을 확인 할 수 있습니다.

25. 이제 속도감을 주기 위해 Easing을 사용하겠습니다.
첫번째 키프레임을 선택하고 EasingFuction패널에서 Circle Out을 줍니다

26. 첫번째 키프레임을 선택하고 EasingFuction패널에서 Circle In을 줍니다.

27.

Play를 눌러서 커질 때 작아질 때의 속도감을 느낄 수 있습니다.
커질때는 Circle Out 그래프 모양 그대로 천천히 커지고
작아질때는 Circle In 그래프 모양 그대로 빨리 작아지는 것을 확인 할 수 있습니다.

28. 애니메이션이 계속 진행되게 하기 위해 다음 그림과 같이 Storyboard1를 선택하고 RepeatBehavior를 Forever로 줍니다.

29.

를 눌러 Storyboard1을 닫고 애니메이션 모드를 빠져나옵니다.

30. 다음 그림과 같이 LayoutRoot를 선택하고 Width:40을 줍니다.

31. 이제 자동으로 스토리 보드가 실행되게 해야 됩니다.
( Behavior를 사용할 수도 있지만...
지금 예제는 제가 여러번 테스트한 결과 지금 진행 할 방법으로 해야 매끄러워요~ )

아래 그림과 같이 순서대로 ①UserControl을 선택합니다. ②Properties패널에서 Events를 선택하고
③ Loaded에서 더블클릭합니다.

32. 그러면 다음 그림과 같이 UserControl1.cs가 열리고 핑크색 상자 부분처럼 UserControl을 로드했을때 들어오는 함수가 생겨요~

33. UserControl1.xaml.cs 저장하고 닫습니다.

너무 길어서 다음장에 이어서 해야 겠습니다.
바로 올릴테니 조금만 기다려 주세요~~~

제 1 회 닷넷 커뮤니티 컨터런스 2009

하얀코코 — Wed, 08 Apr 2009 00:03:05 +0900

닷넷 커뮤니티 컨퍼런스를 합니다.
실버라이트3의 등장과 디자인/개발 패러다임의 변화 세션에서 익스프레션 블렌드3의 데모를 진행하게 되었습니다.
이 세션에서는 실버라이트3가 디자이너와 개발자에게 제공하는 향상된 RIA 개발 경험을 소개합니다.

행사소개

닷넷 커뮤니티 컨퍼런스는 닷넷 개발자들의 권익을 높이고, 닷넷 개발자들이 함께 어울릴 수 있는 개발자들만의 축제의 장입니다. 닷넷 개발에 관련한 전문가분들을 패널과 스피커로 모시고 진행되며 닷넷 개발자들과 함께 현재의 닷넷 기술을 조망하고 앞으로 나아갈 방향을 함께 모색해보는 시간이기도 합니다. 2009년 새로운 도약을 준비하는 닷넷 기술과 어울려 즐길 수 있는 개발자들의 행사 닷넷 커뮤니티 컨퍼런스에 당신을 초대합니다.

==========================================================================================

실버라이트 3의 등장과 디자인/개발 패러다임의 변화

지난 3월, MIX09에서는 더욱 향상된 기능과 성능으로 무장한 실버라이트 3가 베일을 벗었습니다. 실버라이트 3는 RIA 개발 경험을 한 단계, 아니 최소한 두 단계 이상 끌어올릴 수 있는 다양한 장치들을 준비하고 있습니다. 이 세션에서는 실버라이트 3가 디자이너와 개발자에게 제공하는 향상된 RIA 개발 경험을 소개합니다.
특히 익스프레션 블렌드를 중심으로 보여주는 데모들은 디자이너가 RIA 개발 프로세스에 보다 적극적으로 참여하는 동기를 부여할 것입니다.

공인석 / HOONS닷넷

현재 휴플로우에서 근무중이며 HOONS닷넷 실버라이트 시삽을 맡고 있다. 실버라이트가 소개된 이래로 실버라이트를 활용한 개발에 매진하고 있다. 유령회사 공도소프트라는 블로그를 통하여 실버라이트에 관한 기술 자료, 컬럼, 강좌 등을 진행하고 있으며 HOONS닷넷 을 비롯한 관련 커뮤니티에 강사나 멘토로써 기여하고 있다.

김선구, 장미연, 이은아/ HOONS닷넷

HOONS닷넷에서 익스프레션 시삽을 맡고 있으며 익스프레션 기술 보급에 힘쓰고 있는 디자이너들이다. 이들이 익스프레션 툴과 함께하는한 익스프레션의 미래는 밝을 수밖에 없다는 것이 그들의 전망이고 또한 그렇게 되기 위해서 밤낮으로 노력하고 있다.

==========================================================================================
사이트보기

[한국 Microsoft 지원] 아카데미 정글 Expression Blend

하얀코코 — Mon, 23 Mar 2009 14:22:31 +0900

아카데미 정글에서 강의를 하게 되었습니다.

[예제로 배우는 Expression Blend] Chapter 7. 실버라이트 메뉴

하얀코코 — Mon, 09 Mar 2009 18:06:24 +0900

Chapter 7. 실버라이트 메뉴

이번 예제는 우리들이 많이 사용 할 수 있는 메뉴입니다...
활용도가 아주 높지요..
한번 따라해 보시고 각자 응용을 해보시기 바래요.
시작합니다.

1. sMenu 라는 이름으로 프로젝트를 생성합니다.

2. 아래와 같이 유저컨트롤을 선택하고 Width : 600 / Height : 200 으로 줍니다 .

3. 화면에 버튼을 올리고 Width : 80 / Height : 80 으로 줍니다 .

4. 아래와 같이 버튼에서 마우스 우클릭 > Edit Control Part > Edit a Copy 합니다.

5. Create Style Resource 창이 뜨면 스타일 이름을 menuButton 이라고 입력합니다.
This document를 선택하고 OK를 클릭합니다.

그러면 버튼 편집 모드로 들어가게됩니다.

6. Grid를 선택하고

Width : 80 / Height : 80을 줍니다.

7. 아래와 같이 MouseOver를 클릭하고, Grid를 선택 후 Width : 120 / Height : 120을 줍니다.
(버튼에 마우스를 올렸을때 가로세로를 120으로 만들기 위함입니다.)

그러면 아래와 같이 됩니다. (분홍색 테두리 지점을 잘 확인하세요~)

8. 아래와 같이 Pressed를 클릭하고, Grid를 선택 후 Width : 120 / Height : 120을 줍니다.
(버튼에 마우스를 클릭 했을 때 가로세로를 120으로 만들기 위함입니다.)

그러면 아래와 같이 됩니다. (분홍색 테두리 지점을 잘 확인하세요~)

9. 아래 지점을 클릭하고 0.2라고 입력합니다.
(이것은 80/80의 사이즈에서 120/120사이즈로 변하는데 0.2초가 걸리게 해라~~ 그런 것 입니다.)

(변경 전) (변경 후)

10. 손가락 끝 부분을 눌러 버튼의 편집 모드를 빠져 나갑니다.

11. 버튼을 선택하고 Width 와 Height의 오른쪽에 있는 Set to Auto를 각각 클릭하여 줍니다.
( * Set to Auto : 아래그림의 노란색 상자로 둘러진 버튼입니다. )

그러면 아래와 같이 Auto로 변합니다.

12. 버튼에서 마우스 우클릭 > Group Into > StackPanel을 선택합니다.
(말 그대로 버튼을 스택판넬 안에다가 넣겠다는 것입니다.)

13. 그러면 아래와 같이 버튼이 스택판넬 속에 들어 갔음을 확인 할 수 있습니다.

14. 스택판넬을 선택 후 아래와 같이 속성을 변경 해 줍니다.

( * 참고로 Orientation은 스택판넬 안에 담길 개체의 정렬 방향을 나타내는 것입니다.
우리는 가로방향으로 버튼을 나열할 것이므로 Horizontal로 합니다.)

15. 개체중의 스택판넬을 더블클릭하여 스택판넬에 노란테가 생기게 해줍니다.
(우리는 버튼을 복제할건데 스택판넬 안에 붙여지게 하기 위해서 입니다.)

그럼 화면은 아래와 같이 됩니다.

16. 아래와 같이 버튼을 선택하고 Ctrl + C한 후에 Ctrl + V 를 4번 합니다.

그러면 아래와 같이 되지요?

17. 아래와 같이 버튼을 복수 선택 후 Width : Auto, Height : Auto로 바꿔줍니다.
(복수선택은 Ctrl 이나 Shift를 이용하는것 알고 계시죠?)

18. 첫번째 버튼을 선택하고 Content속성을 whitecoco라고 넣어주고 Cursor를 Hand로 바꿔줍니다.

19. 나머지 버튼들도 모두 Cursor를 Hand로 바꿔주고 Content를 순서대로 이것저것 적어줍니다.
하얀코코는 다음과 같은 순서로 넣겠습니다.( whitecoco / hoons / silverlight / expression / google ) 헤헤~

20. 각 버튼의 네임을 넣어줍니다.. 하얀코코는 순서대로 btn_0, btn_1, btn_2, btn_3, btn_4로 입력하였습니다.

21. 아래와 같이 btn_0을 선택하고 Click에서 더블클릭하여 클릭이벤트 함수를 생성합니다.

22. btn_1부터 btn_4도 마찬가지로 클릭이벤트 함수를 생성합니다.

23.그러면 아래와 같지 cs 코드가 생성됩니다.
(이부분이 익숙하지 않으신 분은 http://whitecoco.tistory.com/entry/디자이너를-위한-실버라이트-Chapter-1-페이지-링크하기 이곳을 먼저 보시기 바랍니다.)

24. 아래와 같이 소스를 추가 해 줍니다. (눌렀을때 새창을 띄워주는 것입니다)

저장하고 닫습니다.

25. F5를 눌러 실행합니다.
성공하셨나요??

소스를 첨부합니다.

sMenu.zip

[강남-디블렉스] 8차 : 스터디 자료

하얀코코 — Mon, 02 Mar 2009 20:58:01 +0900

2월 28일에 진행했던 8차스터디 자료입니다.

우리는 싸이월드를 실버라이트로 만들어 보았고..리소스를 분류 하였습니다..
그리고 html에서 변수를 받는 실버라이트 메뉴를 만들어 보았습니다.

소스는 아래 첨부하였습니다.
온라인 강좌로도 곧 다시 구성하겠습니다..

8차.zip

8차를 끝으로.. 뒷풀이도 하고...

마지막 순간 까지 모두 한마음이 되어서 스터디를 하고.. 정말 즐거웠습니다..

모두 감사드립니다.

마지막 예제 자료 올리며.... 하얀코코

[강남-디블렉스] 7차 : 스터디 자료 ★★★★ 작품발표회 내용 ★★★★

하얀코코 — Mon, 02 Mar 2009 20:36:22 +0900

7차는 작품 발표회를 하였습니다. 발표자료입니다.

해당 주제를 선택하시면 작품을 감상 하실 수 있습니다.

순서	시간	이름	주제
1	10:00 ~ 10:15	이은아	디자이너 테마테스트용 뷰
2	10:15 ~ 10:30	박구	해당영역으로 이동하는 공 & C#
3	10:30 ~ 10:45	황인영	메뉴만들기
4	10:45 ~ 11:00	정수연	마녀가 날아가는 애니메이션
5	11:10 ~ 11:25	이길하	귀여운 곰
6	11:25 ~ 11:40	최윤미	선풍기를 응용한 예제
7	11:40 ~ 10:55	김영애	이미지뷰어
8	11:55 ~ 12:10	김성현	http://mall.homecc.co.kr/fl/fl_list.aspx에 있는 인테리어별상품보기만들기
9	12:10 ~ 12:25	신미란	Intro

모두 감사합니다.

[디자이너를 위한 실버라이트] Chapter 1. 실버라이트에서 링크걸기

하얀코코 — Fri, 20 Feb 2009 19:47:43 +0900

안녕하세요... 하얀코코입니다.

디자이너들에게는~
익스프레션 블렌드에서 화면을 구성하고 무언가를 해볼때에 C#을 잘 몰라서 많이 불편한 경우가 종종 있는데요.
그로인해.. 제가.. 간단한 C#에 대한 강좌를 추가하였습니다.

오늘은 첫번째로 어떤 버튼이나 이미지를 클릭하면 다른 사이트로 이동되는 것을 만들어보겠습니다.

시작합니다.

1. 익스프레션 블렌드를 켜고 goWhitecoco라는 이름으로 실버라이트 프로젝트를 생성합니다.

2. 아래와 같이 화면에 사각형을 그리고 이름을 rtg라고 준 후

커서를 Hand로 바꿔줍니다.

3. 사각형을 선택하고 Properties에서 아래 그림의 노란 사각형으로 둘러진 Events를 클릭한 후에
MouseLeftButtonDown에서 더블클릭을 합니다.

4. 그러면 비주얼스튜디오가 열리고 아래 그림과 같이 생겼을 것입니다.

private void rtg_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 라는 함수가 생긴것을
확인 할 수 있습니다.

5. 이제 이동시킬 url을 추가해 보겠습니다.

6. 파일을 저장하고 실행하면 사각형을 누르면 http://www.whitecoco.net으로 이동합니다. ㅋ

7. 새창으로 뜨게 만들고 싶으시다면

HtmlPage.PopupWindow(new Uri("http://www.whitecoco.net"), null, null);

이걸로 해주세요. ㅋㅋ
(첨부한 파일은 새창이 뜨는 것으로 만들었습니다.)

8. 버튼컨트롤에 적용하실 때는 Click 이벤트로 하시는거 잊지 마시구요
(생각이 안나시는 분들은 http://whitecoco.tistory.com/entry/예제로-배우는-Expression-Blend-Chapter-5-바람이-불지-않는-선풍기-3 을 참조하세요 *^^*)

소스는 아래에 첨부합니다.

goWhitecoco.zip

[예제로 배우는 Expression Blend] Chapter 6. 어설픈 큐브

하얀코코 — Tue, 17 Feb 2009 19:30:46 +0900

Chapter 6. 어설픈 큐브

지금 보시는 것은 제가 제목을 어설픈 큐브 라고 지었는데요..
한번 따라해 보시고 각자 응용을 해보시기 바래요.
시작합니다.

1. cube라는 이름으로 프로젝트를 생성합니다.

2. 화면에 사각형을 그립니다.
사각형의 속성을 Width : 40 Height : 40 , Stroke : No Brush, Fill : #FFFFCC00 으로 변경합니다.

3. 그러면 아래와 같은 모양이 됩니다.

4. 공간을 두면서 아래와 같이 복사합니다.

5. 5개의 사각형을 모두 선택 후 마우스 우클릭 > Path > Make Compound Path 합니다.
그러면 5개의 사각형이 아래와 같이 Path 하나로 변합니다.

6. 패스를 선택후 마우스 우클릭 > Make Control 한 다음,
아래와 같이 uc_cube라는 이름으로 유저콘트롤을 생성합니다.

7. uc_cube.xaml로 들어와 지면 LayoutRoot 를 선택하고 마우스 우클릭 > Change Layout Type > Canvas를 선택합니다. (작업상 그리드를 캔버스로 바꾸어주기 위함입니다.)

8. 패스를 선택 후 Transform 패널에서 센터 포인트를 아래 그림과 같은 지점으로 바꾸어 줍니다.

그러면 아래처럼 패스의 센터 포인트가 이동됩니다.

(포인트 이동 전) (포인트 이동 후)

9. 패스를 선택하고 Ctrl + C하고 Ctrl + V 하여 아래와 같이 복사합니다.

10. 패스의 이름을 p1, p2로 변경해 줍니다.

11. p2를 선택후 Transform 패널에서 Flip 탭을 선택 후 Flip X axis를 클릭하여 좌우반전을 시켜줍니다.

12. 그러면 p2가 아래와 같이 됨을 확인 할 수 있습니다.

13. p2를 선택하고 오른쪽으로 끌어서 p1의 위치와 같게 만듭니다.

(여기서 잠깐!! p2의 width값을 종이에 적어 놓습니다. 저는 232네요~)

14. p2의 FillColor를 #FF977900로 줍니다. 그리고 Width 값을 0 으로 줍니다. 그럼 아래와 같이 되죠?
(p2를 선택해 보면 Width값이 0이 되었기 때문에 오른쪽에 붙은걸 확인 하 실수 있을거에요.)

15. sb_cube 라는 이름으로 스토리보드를 생성 합니다.

16. 0.8초의 위치에 플레이헤드를 이동시킨 후 p1, p2를 둘다 선택하고 키프레임을 추가해줍니다.

17. 플레이 헤드를 0.8초에 유지한 채 p1을 선택하고, FillColor를 #FF977900로 바꾸고, Width값을 0으로 바꿔줍니다.
그러면 아래와 같은 모양이 됩니다.

(플레이 해보면 0.8초동안 p1이 색이 진해지면서 작아지는 것을 확인 하실 수 있습니다.)

18. 플레이 헤드를 0.8초에 유지한 채 p2를 선택하고, FillColor를 #FFFFCC00로 바꾸고,
Width 값을 아까 적어 놨던 값으로 바꿔줍니다. (저는 아까 적은 232로 할거에요~ㅋ)
그러면 아래와 같은 모양이 됩니다.

(플레이 해보면 0.8초동안 p2가 색이 환해지면서 커지는 것을 확인 하실 수 있습니다.)

19. 스토리보드 네임 (sb_cube)을 선택하고

RepeatBehavior의 속성을 Forever로 줍니다.

그리고 스토리보드를 빠져나옵니다.

20. Page.xaml로 이동하여 Project > Build Solution 해줍니다. 아래와 같이 되었는지 확인합니다.

21. 아래와 같이 복사해서 5줄을 만들어줍니다.

22. 파일에서 uc_cube.xaml.cs 에서 마우스 우클릭 > Edit in Visual Studio를 선택합니다.
(우리가 만든 스토리보드는 uc_cube.xaml안에 있으니까요~ ㅋ )

23. 아래의 생성자 부분에 다가.

   public uc_cube()
  {
        // Required to initialize variables
        InitializeComponent();
  }

24. sb_cube.Begin(); 을 추가해 줍니다.

   public uc_cube()
  {
        // Required to initialize variables
        InitializeComponent();
       sb_cube.Begin();
  }

25. 저장하고 닫습니다.

성공하셨나요?

파일을 첨부합니다.

cube.zip

[응용예제 1]

cube1.zip

[응용예제 2]

cube2.zip

[강남-디블렉스] 7차 : 스터디 자료

하얀코코 — Tue, 17 Feb 2009 14:41:54 +0900

7차는 작품 발표를 위한 날이기 때문에 따로 예습자료를 업로드하지 않습니다.

아래는 발표순서입니다.

위의 순서는 6차 모임때 다같이 사다리 게임을 통해 정하였습니다.

배분시간은 아래와 같습니다.

순서	시간	이름	주제
1	10:00 ~ 10:15	이은아	디자이너 테마테스트용 뷰
2	10:15 ~ 10:30	박구
3	10:30 ~ 10:45	황인영	메뉴만들기
4	10:45 ~ 11:00	정수연	캐릭터가 걸어가는 애니메이션
5	11:10 ~ 11:25	이길하
6	11:25 ~ 11:40	최윤미	선풍기를 응용한 예제
7	11:40 ~ 10:55	김영애	이미지뷰어
8	11:55 ~ 12:10	김성현	인테리어별 상품보기
9	12:10 ~ 12:25	신미란	인트로

1. 주제가 겹치지 않도록 될수 있으면 자기가 할 것을 말해주시면 제가 주제란에 입력해 놓도록 하겠습니다.
2. 1인당 15분의 시간이므로 넘치지 않도록 합니다.

다음주 토요일 7차에서 만나요~ ㅋㅋㅋㅋㅋㅋㅋㅋ

[강남-디블렉스] 6차 : 스터디 자료

하얀코코 — Tue, 17 Feb 2009 13:54:55 +0900

2월 14일에 진행했던 6차스터디 자료입니다.

6차.zip

스터디를 한번씩 더 되새기면서 WPF의 리소스 구조와
트리거의 사용에 익숙해 지시기 바랍니다.

마우스에 반응하는 패스애니메이션도 ..
여러번 반복 해보시기 바랍니다.

butterFly.exe

[강남-디블렉스] 6차 : 준비사항

하얀코코 — Mon, 02 Feb 2009 17:23:32 +0900

06_훈스닷넷익스프레션디자이너스터디6차.docx

안녕하세요 하얀코코입니다.

주말스터디 6차를 위해 예습 해오실 것들을 알려드리겠습니다.

이번에는 WPF에 대해서 알아보고 트리거 이용과 WPF에만 있는 컨트롤들의 쓰임새에 대해 알아보겠습니다.

그리고 패스를 따라다니는 애니메이션을 만들어 보겠습니다.

연이은 세미나와 특강으로 얼굴을 못본지 좀 되었네요...

작품은 잘 준비하고 계시겠죠??

토요일에 뵙겠습니다
안녕히 계세요.~~~

[강남-디블렉스] 5차 : 스터디 자료

하얀코코 — Mon, 02 Feb 2009 14:25:21 +0900

1월 17일에 진행했던 스터디 자료입니다.

5차.zip

스터디를 한번씩 더 되새기면서
미디어플레이어를 어떻게 더 만들수 있는지 다시 한번 해 보시기 바랍니다.

만들면서 구조를 다시한번 확인해보고..

어떻게 협업을 해 나가면 유리할 것인지 각자의 입장에서 잘 만들어 가면 될것 같습니다.

익스프레션 디자인에서도 그려보고 익스포트 해보고.. 여러번 반복 해보시기 바랍니다.

익스프레션 블렌드 세미나

하얀코코 — Wed, 21 Jan 2009 15:01:45 +0900

안녕하세요 디자이너들을 위한 익스프레션 블렌드 세미나를 하게 되었습니다.

익스프레션 블렌드 에 대해서 자세히 알아볼 수 있는 좋은 기회가 될 것 입니다.

세미나 참가 신청은 이곳(http://cafe.naver.com/expressionstudio/321)에서 댓글로 받는다고 합니다.

폴리텍 대학 익스프레션 블렌드 무료 특강

하얀코코 — Sat, 17 Jan 2009 15:20:19 +0900

* 인원 모집이 완료 되었습니다. 감사합니다.

아래와 같이 블렌드 무료 특강을 진행합니다.
직장인만 된다는 것이 아쉽습니다. ㅜㅜ

특강 개요

주최
한국 폴리텍 제1대학교(http://www.conso.co.kr)

교육시간
2009년 1월 31일 토요일 8시간(09:00~18:00)

모집기간
1/7 ~ 1/30

교육대상
고용보험에 가입되어 있는 직장인
실버라이트와 WPF에 관심이 있는 디자이너
디자인 워크플로우를 이해하고 싶은 개발자

접수방법
1. 02-6300-6300으로 전화하여 자리가 있는지 확인
2. 회사직인이 찍힌 교육 동의서와 함께 팩스로 보냄
교육동의서 다운로드(구로교육장),팩스번호 02-6300-6304
3. 서류 작성시 주의사항
- 회사의 기본사항 명기
- 교육생의 기본사항 명기
- 과정명은 "웹 컨텐츠"로 명기
- 훈련희망직종란은 공란
- 직업능력개발사업개산보험료액, 훈련비용지원한도액은 공란
- 기타 기본사항외에 불명확한 사항은 공란으로 두어도 무방함.

교육장소
서울시 구로구 구로3동 188-5 키콕스벤처센터 901호(약도)
문의 02-6300-6300

* 교육용PC와 교육자료가 제공됩니다.

커리큘럼

시간 (교시)	내용
1교시	실버라이트/WPF의 소개, 익스프레션 스튜디오
2교시	익스프레션 디자인 1. 익스프레션 디자인 구성과 사용법 2. 예제실습
3교시	익스프레션 블랜드 1. 익스프레션 블랜드 구성과 사용법 2. 스토리보드를 이용한 애니메이션 3. 간단한 C#구문 익히기 3. 유저컨트롤의 이해
4교시
5교시	스토리보드 예제 실습
6교시	익스프레션 블랜드 1. 레이아웃 익히기 2. 스타일과 템플릿
7교시	익스프레션 블랜드 1. 레이아웃 익히기 2. 스타일과 템플릿
8교시	레이아웃 예제 실습 / 스타일 예제 실습

강사 소개

김선구

웹디자이너, 액션스크립터로 일해 왔으며, Silverlight의 베타시절부터 Expression Blend와 Expression Design을 다루어 왔다 UX 디자인의 중요성을 깨닫고 Silverlight와 WPF 와 같은 기술로 향상된 UX 구현을 하는 인터랙티브 디자이너로 활동하고 있다.
훈스닷넷의 Expression 시삽을 맡고 있으며 하얀코코라는 닉네임으로 여러곳에 강좌를 기고하고 있다.
(http://www.whitecoco.net )

[강남-디블렉스] 5차 : 준비사항

하얀코코 — Tue, 13 Jan 2009 20:55:54 +0900

05_훈스닷넷익스프레션디자이너스터디5차.docx

안녕하세요 하얀코코입니다.

주말스터디 5차를 위해 예습 해오실 것들을 알려드리겠습니다.

이번에는 미디어 플레이어를 실제로 만들어보고.. 협업을 어떻게 하는지 알아보겠습니다.
그리고 익스프레션 디자인에서 어떻게 익스포트 하는지도 같이 진행하겠습니다.

아래 첨부한 소스를 미리 보고 집에서 연구해 보세요.

whitecocoMediaPlayer.zip

스터디를 한주 빼먹었더니 모두 보고싶네요.. ㅋ

안녕히 계세요~~

[강남-디블렉스] 4차 : 스터디 자료

하얀코코 — Tue, 06 Jan 2009 00:03:35 +0900

1월 3일에 진행했던 스터디 자료입니다.

스터디를 한번씩 더 되새기면서
콘트롤 스타일을 어떻게 더 잘 바꿀수 있는지 다시 한번 해 보시기 바랍니다.

4차.zip

아래 예제는 3차와 4차에서 박구님께 배웠던 C# 입니다..

VarFunc.zip

실버라이트 팁 모음

하얀코코 — Mon, 05 Jan 2009 16:34:51 +0900

마이크 스노우라는 블로거가 쓴 팁들이고 카테고리별로 정리해주었네요 (^^)

Animation

Tip #78 - Animating Objects with DoubleAnimationUsingKeyFrames

Tip #76 - Animating objects with DoubleAnimation.

Tip #30 - Fast Sprite Animation in Silverlight

Tip #17 - How to Animate a Rotating Image

Tip #16 - StoryBoard versus DispatcherTimer for Animation and Game Loops.

Tip #5 - Timers and the Main Game Loop

Browser

Tip #63 - How to Monitor HTTP Traffic for Errors

Tip #56 - Accessing the HTML DOM from Silverlight.

Tip #41 - Using Bookmarks in your Silverlight Application

Tip #34 - How to Center your Silverlight Application in your Browser

Tip #33 - How to Scale your entire App and its Elements to your Browsers Size

Tip #18 - How to Set Browser Cookies.

Tip #15 - Communicating between JavaScript & Silverlight

Tip #9 - How to Capture the Size of your Browser when it is Resized.

Controls

Tip #72 - How to call Page.xaml.cs from App.xaml.cs

Tip #62 - How to Create a Hyperlink

Tip #61 - How to Create a Tooltip

Tip #60 - How to load a XAML Control From a File or String

Tip #57 - How to Dynamically Load a Silverlight Control within another Silverlight Control

Tip #52 - How to Popup a Browser Window

Tip #51 - How to Enable and Disable Controls

Tip #49 - How to Implement a Progress Bar

Tip #48 - How to Implement a Combobox

Tip #47 - How to Implement a Password Box

Tip #39 - How to Create a Zoom Toolbar

Tip #37 - How to Dynamically Load and Display Silverlight Applications

Tip #32 - How to Declare a Custom User Control from a XAML Page.

Tip #29 - Creating a Transparent, Draggable Dialog with Rounded Corners

Tip #24 - How to Apply a XAML Template to a Class

Tip #11 - How to make your Silverlight Control Transparent.

Data

Tip #70 - Data Collection Support in Silverlight

Events

Tip #74 - Monitoring for App.Current Events - Startup, UnhandledException & Exit.

Game Development

Tip #50 - Main Game Loop Revisited!

Tip #43 - Making it Snow in Silverlight

Tip #35 - Full Screen Mode Implementation

Tip #4 - Building the Game Interface Using the Grid Control.

Silverlight Terrain Tutorial Part 3 - Creating Smooth Tile Transitions using Opacity Masks

Silverlight Terrain Tutorial Part 2 – Using Transform Matrices to Create 3D Looking Terrain.

Terrain Tutorial Part 1 – Creating a Scrolling Map

Images

Tip #13 - How to Get an Images Dimensions in Silverlight.

Tip #10 - How to Dynamically Load and Display Images

Tips #7 - Creating Transparent PNG files for Silverlight

Isolated Storage

Tip #20 - How to Increase your Isolated Storage Quota.

Tip #19 - Using Isolated Storage

Mouse and Keyboard

Tip #65 - Adding a Mouse Wheel Event Listener to your Controls

Tip #31 - How to Detect Alt, Shift, Control, Windows and Apple keys with Left Mouse Down in Silverlight

Tip #28 - How to Implement a Custom Mouse Cursor

Tip #27 - How to Change the Mouse Cursor

Tip #23 - How to Capture the Mouse Wheel Event

Tip #14 - How to Right Click on a Silverlight Application.

Tip #6 - Monitoring for Keyboard and Mouse Events.

Networking

Tip #12 - Full Implementation of a Silverlight Policy Server.

Performance

Tip #67 - Silverlight Performance Tips

Tip #40 - 1.05 != 1.05 - Peril with Floating Point Comparisons.

Project and Tools

Tip #71 - New Silverlight 2 Web Site Clean Up Check List

Tip #66 - How to copy XAML for Silverlight from Expression Designer

Tip #54 - How to Develop with Silverlight Tools for Free

Tip #26 - How to Change the Output XAP File Name.

Tip #25 - How to Build the XAP File to the Debug/Release Folders

Tip #2 - Creating a Silverlight Application Project with Visual Studio 2008

Tip #1 - Setup and Installation of Silverlight and Silverlight Tools

Resources

Tip #75 - Where to get the Localized Languages of Silverlight 2 Tools

Tip #69 - Silverlight 2 Developer Reference

Tip #68 - Great Silverlight Sessions to Watch from PDC 2008

Tip #38 - How to Customize the Silverlight Install Experience

Tip #8 - Silverlight Blogs and Resources

Tip #3 - Silverlight Game Support, Limitations and Workarounds

Sound and Video

Tip #22 - How to add Sound Effects, Music and Video to your Silverlight App.

Styles

Tip #55 - How to Apply Styles in Silverlight – Part I

Text

Tip #58 - Text Wrapping and Line Breaks in TextBlocks

Tip #46 - Font Support in Silverlight

Tip #45 - Text Formatting with the TextBlock control

Tip #36 – How to Create Reflections and Shadows for Images and Text.

Threading

Tip #73 - Threading in Silverlight

Utilities

Tip #77 - Creating an Efficient Random Generator

Web Service

Tip #64 - Deploying a Silverlight Application with a Web Service

Tip #44 - Silverlight-enabled WCF Services versus ASMX Web Services

Tip #42 - How to Create a Web Service for your Silverlight App

XAML

Tip #59 - How to Display Special Characters in XAML

Tip #21 - How to work with Shapes, Brushes and Gradients

출처 :
http://silverlight.net/blogs/msnow/archive/2009/01/02/silverlight-tips-of-the-day-summary-outline.aspx > 훈스닷넷

[강남-디블렉스] 4차 : 준비사항

하얀코코 — Thu, 01 Jan 2009 21:04:47 +0900

04_훈스닷넷익스프레션디자이너스터디4차.docx

안녕하세요 하얀코코입니다.

주말스터디 4차를 위해 예습 해오실 것들을 알려드리겠습니다.

이번 스터디의 주제는 콘트롤을 바꿔서 스타일을 적용하기 입니다.

올해부터 훈스닷넷에 글을 쓰니 제가 쓴 글 제목에도 시삽이라는 이미지가 박히네요..

열심히 하겠습니다.

[강남-디블렉스] 3차 : 스터디 자료

하얀코코 — Thu, 01 Jan 2009 21:02:05 +0900

12월 27일에 진행했던 스터디 자료입니다.

스터디때에 실수를 하여 많이 당황해서 죄송했습니다.

스터디를 한번씩 더 되새기면서 모든 레이아웃에 대해서 숙지해 보시기 바랍니다.

3차.zip

[강남-디블렉스] 3차 : 준비사항

하얀코코 — Thu, 01 Jan 2009 21:01:09 +0900

주말스터디 3차를 위해 예습 해오실 것들을 알려드리겠습니다.

이번 스터디의 주제는 레이아웃 입니다.

03_훈스닷넷익스프레션디자이너스터디3차.docx

[강남-디블렉스] 2차 : 스터디 자료

하얀코코 — Thu, 01 Jan 2009 21:00:09 +0900

2차 (12월 20일) - 스터디 자료입니다.

늦은 업로드 정말 죄송합니다. ㅠㅠ

스터디를 한번씩 더 되새기면서 따라해 보시기 바랍니다.

2차.zip

[강남-디블렉스] 2차 : 준비사항

하얀코코 — Thu, 01 Jan 2009 20:59:09 +0900

02_훈스닷넷익스프레션디자이너스터디2차.docx

주말스터디 2차를 위해 예습 해오실 것들을 알려드리겠습니다.

이번 주제는 스토리보드와 유저컨트롤, 그리고 간단한 C# 구문 입니다.

[강남-디블렉스] 1차 : 준비사항

하얀코코 — Thu, 01 Jan 2009 20:58:17 +0900

01_훈스닷넷익스프레션디자이너스터디1차.docx

안녕하세요 .
훈스닷넷 디자이너 오프라인 스터디 2팀 3팀 멘토를 담당한 하얀코코입니다.

1차 스터디를 위해 예습 해오실 것들을 알려드리겠습니다.
1차 주제는 실버라이트의 구성과 익스프레션 블랜드의 사용법 입니다.

안녕히 계세요~

제 2회 훈스닷넷 실버라이트 컨퍼런스 - 후기

하얀코코 — Thu, 01 Jan 2009 18:17:32 +0900

멋진 동영상 편집 해주신 최윤미 님 감사드립니다.

< 오른쪽은 짱묜님 그리고 가운데는 네이버 실버라이트카페 운영자 패러다임님 >

사진 찍어 주신 산소나무 김영수님 감사드립니다.

작년 한해동안 실버라이트를 공부하면서 많은 분들도 만나고 많은 도움도 받았습니다.

2009년에는 뜻하는 바를 모두 이루시길 바랍니다.

새해 복 많이 받으세요..

실버라이트 개발 환경 셋팅하기

하얀코코 — Thu, 01 Jan 2009 18:05:09 +0900

※ Visual Studio 2008 영문 버전을 기준으로 한 설치입니다.

아래 순서를 따라합니다. (설치파일의 이름을 클릭하면 다운 받을 수 있습니다.)

순서	이름	설명	비고
1	Daemon	*.iso파일을 읽어서 실행할수 있게 해주는 유틸입니다.
2	Visual Studio 2008	비주얼 스튜디오 2008 입니다.	트라이얼 버전으로 90일 사용가능합니다.
3	Expression Blend 2	익스프레션 블랜드 2 입니다.	트라이얼 버전으로 30일 사용가능합니다.
4	Visual Studio 2008 SP 1	비주얼 스튜디오 2008 서비스 팩입니다.
5	Silverlight Tools for Visual Studio 2008 SP1	비주얼 스튜디오에서 실버라이트를 개발 할수 있게 해주는 것입니다.	실행중인 웹브라우져가 있다면 모두 닫습니다.
6	Expression Blend 2 SP 1	익스프레션 블랜드 2 서비스팩입니다.
7	Deep Zoom Composer	딥줌콤포져 입니다.

위 순서대로 하면 개발 환경이 완료됩니다.
될수 있으면 하나 받고 설치하고 하나 받고 설치하고 그렇게 진행하시는것을 추천합니다.

이전에 설치하신내역은 제어판 프로그램 내역에서
모두 삭제하고 진행하시기 바랍니다.

[예제로 배우는 Expression Blend] Chapter 5. 바람이 불지 않는 선풍기 - 3

하얀코코 — Fri, 12 Dec 2008 01:41:24 +0900

Chapter 5. 바람이 불지 않는 선풍기 - 3

계속 이어서 하겠습니다.

50. sb_fanStart라는 이름으로 스토리보드를 생성합니다.

51. 타임라인을 1초에 놓고, 자물쇠로 잠근 것은 다 풀어주시고, Fan을 선택합니다.

그리고 아래와 같이 각도를 360이라고 적어줍니다.

52. 아래와 같이 되면 저 계란모양의 키프레임을 눌러주세요..

53. 키스플라인 곡선을 아래와 같이 만듭니다 (노란점을 잡고 당기면 됩니다.)

지금까지 한것을 플레이 시켜보면 Fan이 한바퀴 도는 것을 볼수 있는데요..
천천히 돌다가 점차 빨라지는 것을 만든 것입니다..
그러니까 선풍기가 돌때~ 조금 천천히 시작해서 점차 빨리 돌잖아요.. 그 시작 부분을 만든 것입니다.

54. 닫기를 눌러 스토리 보드를 빠져나갑니다.

55. sb_fanPlay라는 이름으로 스토리보드를 생성합니다.

56. 타임라인을 0.1초에 두고 Fan을 선택합니다.

57. 그리고 각도를 -360으로 줍니다. (이것은 0.1초동안 한바퀴를 돌리는 것입니다.)
* 여기서 왜 360이 아닌 -360으로 줍니까? 이렇게 생각 하실 수 있는데요.. 맞습니다.
그런데 실행결과상 360으로 주면 꼭 반대로 도는 것처럼 보입니다. 우리 눈의 착시 현상 인가봐요~ ㅜㅜ
어~ 자동차나 마차 바퀴를 보면 반대로 도는것처럼 보이는 경우가 있거든요..
처음에 그냥 360으로 했다가 이상해서 -360으로 그냥 해버렸습니다.
이게 나은거 같아서요~
(자기가 만든것에 따라서 -360으로도 해보고 360으로도 해봐서 자연 스러운 것으로 하시길 바래요~ ㅋ)

그러면 아래와 같이 키프레임이 생깁니다.

58. 스토리 보드의 이름을 선택하고

RepeatBehavior를 Forever로 줍니다. 그리고 스토리 보드를 빠져 나갑니다.

59. sb_fanStop 이라는 이름으로 스토리보드를 생성하고 1.6초의 위치에 타임라인을 이동시킵니다.
그리고 Fans을 선택하고 각도를 360도 로 줍니다.

60. 아래와 같이 키프레임을 선택합니다

61. 키스플라인 곡선을 아래와 같이 만듭니다 (노란점을 잡고 당기면 됩니다.)

돌다가 점차 느려지는 것을 만든 것입니다..
그러니까 선풍기가 멈출때~ 점차 도는 속도를 줄이면서 멈추잖아요. 그 부분을 만든 것입니다.

62. 스토리 보드를 빠져 나갑니다.

63. ON버튼을 선택합니다.

64. 아래 그림처럼 순서대로 클릭합니다. 2번 부분에서는 더블클릭합니다.

그러면 비주얼스튜디오가 열리는데.. 그냥 두고 다시 블랜드로 갑니다.

65. OFF버튼을 선택합니다.

66. Click에서 더블클릭합니다.

그러면 아래와 같이 소스가 생깁니다.

  public partial class Page : UserControl
  {
       public Page()
       {
            // Required to initialize variables
              InitializeComponent();
       }

private void btnOn_Click(object sender, RoutedEventArgs e)
{

}

private void btnOff_Click(object sender, RoutedEventArgs e)
{

}
}

67. 아래와 같이 소스를 수정합니다

  public partial class Page : UserControl
  {
        Boolean isOn = false;
        Boolean isOff = false;

        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
            sb_fanStart.Completed += new EventHandler(sb_fanStart_Completed);
            sb_fanStop.Completed += new EventHandler(sb_fanStop_Completed);
        }

        void sb_fanStop_Completed(object sender, EventArgs e)
        {
            isOff = true;
            sb_fanStop.Stop();
        }

        void sb_fanStart_Completed(object sender, EventArgs e)
        {
            sb_fanStart.Stop();
            sb_fanPlay.Begin();
        }

        private void btnOn_Click(object sender, RoutedEventArgs e)
        {
            if (!isOn)
            {
                if (isOff)
                {
                      sb_fanStop.Stop();
                 }
                sb_fanStart.Begin();
                isOn = true;
                isOff = false;
            }
        }

        private void btnOff_Click(object sender, RoutedEventArgs e)
        {
            if (isOn)
            {
                sb_fanStart.Stop();
                sb_fanPlay.Stop();
                sb_fanStop.Begin();
                isOn = false;
            }
        }
}

68. 저장하고 비주얼 스튜디오를 닫습니다.
69. 블랜드에서 F5를 눌러 실행합니다.

모두 성공하셨나요??
소스는 아래에 첨부할게요~

coolFan.zip

[ 응용예제 ]
coolFan2.zip

모두 안녕히 계세요~~~~ ^^;

[예제로 배우는 Expression Blend] Chapter 5. 바람이 불지 않는 선풍기 - 2

하얀코코 — Thu, 11 Dec 2008 01:14:04 +0900

Chapter 5. 바람이 불지 않는 선풍기 - 2

계속 이어서 하겠습니다.

22. 아래와 같이 사각형을 하나 추가합니다.
사각형의 속성은 Width:280 / Height : 5 이고 Stroke는 없고 Fill은 #FFE2B1B1 입니다.

23. 사각형을 선택하고 Ctrl+C하고 Ctrl+V합니다.

아무 변화가 없는 듯 하지만 아래처럼 사각형 하나가 더 생긴것을 알수 있지요~

24. 각도를 90도를 주면 아래와 같은 모양이 됩니다.

25. 아래와 같이 두개의 사각형을 선택하고 Ctrl+C하고 Ctrl+V합니다.

26. 아래 그림에 저 뭉툭하게 생긴 화살표같은거 있죠? 마우스를 저기로 가져가면 모양이 저렇게 변합니다.

Shift키를 누르고 마우스를 아래로 당기면 아래 그림과 같은 모양을 만들 수가 있습니다.

27. 한번 더 해서 아래와 같은 모양을 만듭니다.

28. 사각형을 모두 잠궈줍니다.

29. 아래와 같이 원을 그려줍니다.
원의 속성은 Width:288 / Height : 288 이고 Fill은 없고 Stroke는 #FFE2B1B1 입니다.

30. 사각형 잠금을 모두 풀고

아래와 같이 모두 선택합니다.

31. 아래 그림처럼 저 뭉툭하게 생긴 화살표 모양쪽으로 가져가서 Alt와 Shift를 누르면서 크기를 키워줍니다.

아래 그림 정도로요~~ㅋ

그리고 나서 모두 선택을 유지한 채로 Object > Align > Horizontal Centers 한번
Object > Align > Vertical Centers 한번 해줍니다.

32. 캔버스로 묶고, cover라고 이름주고, 잠궈둡니다~~ㅋ

33. 아래와 같이 원을 하나 추가합니다.
원의 속성은 Width:58/ Height : 58 이고 Stroke는 없고 Fill은 그라데이션으로 설정하며..
그라데이션의 시작컬러는 #FFEBEBEB, 끝컬러는 #FF9E9E9E 입니다.

34. 아래와 같이 작은 원 하나를 추가합니다.

35. 검은원에 반쯤 겹쳐지게 사각형을 그립니다.

36. 아래와 같이 두개체를 선택하고 마우스 우클릭 > Combine > Intersect 합니다.
(Intersect는 둘이 겹친 부분만 남겨줘요~)

그러면 아래 그림 처럼 반원이 됩니다.

37. 반원의 속성을 아래 그림처럼 순서대로 변경합니다. 흰색을 주고 Alpha값을 50%로 준 것입니다.

그럼 아래 그림처럼 됩니다. 이 반원의 이름은 반사광입니다.(설명하기 편할려고 지은 이름이에요~)

38. 안쪽의 회색 그라데이션 원을 선택하고 Ctrl+C, Ctrl+V 합니다.

39. 그럼 아래 그림처럼 원이 위에 덮어집니다.

레이어 쪽을 확인해 보면 맨아래에 원(Ellipse)이 하나 생성된 것을 알수 있습니다.
(복사된 것이 맨위로 왔다는 거에요~)

40. 원을 선택하여 Fan과 cover사이로 이동시켜줍니다.

(이동 시키기전의 위치) (이동 시킨 후의 위치)

41. 이동 시킨 후 아래와 같이 Fill을 #FF743232로 설정합니다.

그리고 나서 키보드에 있는 방향키에서 아래쪽 방향키를 살살 눌러줍니다.
그러면 조금씩 아래로 내려오는데 적당한 위치까지 내려오게 합니다. (안에 그림자처럼 보이게 할려고 한거에요 --;)

42. 이제 아래 그림과 같이 회색 그라데이션원, 반사광, 그림자 이렇게 세 개체를 잠궈줍니다.

43. 이제 body의 눈은 켜주고 자물쇠를 풀어줍니다.

44. body를 선택하면 아래 그림처럼 약간 위치가 어긋나 있을 수도 있기 때문에 방향키를 눌러 위치를 잡아줍니다.

위치를 잘 잡아주면 아래와 같이 됩니다.

45. body를 다시 잠궈줍니다.

하얀코코는 이제 선풍기를 켜고 끌 버튼을 만들어 줄 거에요~ㅋ

좀 걱정됩니다.. ㅠㅠ 화면안의 그림이 계속 빨간색이 반복 되가지고.. 혹시 눈이 아프실까봐요..
앞으론 반복이 되더라도 눈이 편한것으로 그림의 색상도 신경을 써야겠네요...
자~ 계속 따라하세요~

46. 아래 그림과 같이 버튼 두개를 놓아 줍니다.

47. 아래 그림처럼 위에 있는 버튼을 선택하고

Content 속성을 ON으로 고칩니다.

그러면 아래처럼 버튼안에 글자가 바뀌게 됩니다.

48. 글자가 ON으로 바뀐 버튼을 선택한 상태에서 아래와 같이 Name을 btnOn으로 줍니다.
(이것은 이 버튼의 이름을 btnOn이라고 쓰겠다는 것입니다.)

그러면 아래와 같이 레이어쪽에서도 이름이 바뀌지요. (레이어에서 직접 이름을 바꿔도 되는것 알고 계시죠?)

49. 아래 그림 처럼 나머지 버튼은 OFF로 바꿔줍니다.

그리고 Name을 btnOff로 줍니다.

너무 길지요?? 이제 곧 끝나가요~ 다음회에 이어서 하겠습니다..

[예제로 배우는 Expression Blend] Chapter 5. 바람이 불지 않는 선풍기 - 1

하얀코코 — Wed, 10 Dec 2008 02:04:44 +0900

Chapter 5. 바람이 불지 않는 선풍기 - 1

웨이브 모션 강좌를 올린지 벌써 일주일도 넘게 지났습니다.
이번꺼가 좀 오래걸렸습니다. 흑 ㅎㅎ

오늘은 위와 같은 선풍기를 만들어 볼게요~
이 선풍기의 특징은 켤때는 속도를 내면서 날개가 돌고 끄면 점차 도는 속도를 늦추면서 멈추는 것입니다.
시작합니다.

1.coolFan 이라는 이름으로 프로젝트를 생성합니다.

2. UserControl을 선택하고

Width : 400 / Height : 550을 줍니다.

3. 툴바에서 원

을 선택하고 화면에 그려준 후 아래와 같이 설정합니다.

아래와 같은 원이 되었습니다.

4. 사각형

을 선택하고 아래와같이 선풍기 기둥을 그려줍니다.

5. 기둥 선택이 유지된 상태에서 스포이드

를 선택하고 아래와 같이 방금 그렸던 원을 클릭합니다.

그러면 아래와 같이 선풍기 기둥에도 그 그라데이션이 그대로 적용이 됩니다.

6. 아래와 같이 선풍기 기둥에서 마우스 우클릭 > Order > Send to Back을 선택하여 맨뒤로 보내줍니다.

아니면 아래처럼 마우스를 잡고 위로 끌어당겨도 됩니다.

(끌어 당기기 전) (끌어 당긴 후)

7. 아래와 같이 선풍기의 기둥아래 굵은 기둥의 사각형을 만들어 줍니다.

아래와 같이 세 개체를 모두 선택하고

Object > Align > Horizontal Centers 를 선택하여 한줄로 딱 맞게 합니다.

8. 아래와 같이 세 개체를 선택한 후 마우스 우클릭 > Group Into > Canvas 를 선택합니다.

캔바스로 감싸지면

이름을 body라고 줍니다.

아래와 같이 선풍기 몸통 부분이 만들어졌습니다.(선풍기 몸통부분을 따로 나눠 놓은 것입니다.)

아래와 같이 잠궈두겠습니다. 몸통은 이제 안 건드릴거니까요~ (눈도 안보이게 꺼놓으면 작업하기 더 편하고 좋아요 )

자~ 이제 선풍기의 날개를 만들어 보겠습니다.

9. 사각형

을 선택하고 화면에 사각형을 그린 후 아래와 같이 설정합니다.

아래와 같은 사각형이 그려집니다.

10. 아래와 같이 사각형에서 마우스 우클릭 > Path > Convert to Path 를 선택합니다.
(이것은~ 사각형, 즉 Rectangle을.. Path로 바꾸는 것입니다. )

11. Direct Selection

을 선택하면 사각형의 패스를 볼수가 있어요..
바로 아래와 같이 생겼다는 것을 알수가 있지요..

12. 자~ 화면을 좀 확대해 주세요 하얀코코는 300%로 확대하여 보고 있어요~
(컨트롤을 누른 상태에서 플러스를 눌르면 확대되고, 컨트롤을 누른상태에서 마이나스를 눌르면 축소되요~ ㅋ)

펜

을 선택하고 아래와 같이 저 아래 중간 지점을 클릭합니다. (점을 추가해 주는 것이에요~)

13.Direct Selection

을 선택하고 아래 그림과 같은 위치를 선택합니다.
(Ctrl을 누른 상태에서 클릭하면 두 지점을 동시에 선택 할 수가 있지요~)

그리고 Delete 키를 눌러요~

14. Direct Selection

을 선택하고 아래 그림과 같은 위치를 선택합니다.

그리고 키보드에 방향키중에 위로 올라가게 하는것을 조금씩 눌러서 위로 올려요 (선택한 점을요.. ㅋ)

* 여기서 주의 : 막 빨리 올리다가...
선택해서 올리고 있는 점이 선택되지 않은 위의 점과 겹치게 되면
블랜드가 에러가 나면서 퍽! 하고 꺼지는 경우가 발생합니다... 주의하세요

15. 화면을 100%로 만들고

을 선택하고 아래와 같이 저 맨아래 점을 선택합니다.

Shift를 누른상태에서 아래 방향 방향키를 세번 눌러줍니다.

이제 날개 하나가 완성이 되었습니다.

16. 아래와 같이 날개를 4장으로 만들어주세요~
(선택하고 컨트롤 누르면서 끌면 복사되고 시프트 누르면 수평이동 되고 다 아시죠?? )

17. 아래 그림 처럼 하나를 선택 하고

각도를 -45로 줍니다.

그럼 아래처럼 바뀌어요~ ㅋ

18. 아래 그림처럼 각각의 날개에도 각도를 넣어주면 선풍기 4장의 날개가 되요.

너무 떨어져 있으면 아래와 같이 약간 간격을 두면서 모아 주세요~~ㅋ

19. 아래 그림처럼 날개 하나를 선택하고 그라데이션을 변경합니다. 한쪽은 흐린색 한쪽은 진한색으로요~

20. 그라데이션을 변경하지 않은 나머지 세장을 선택하고

아래처럼 처음에 그라데이션을 변경한 날개를 스포이드로 찍습니다.
(그러면 세장에 똑같이 변경한 그라데이션이 적용이 되요~ ㅋ)

21. 날개 네장을 이제 다 만들었으니깐.. 캔버스로 묶고 Fan이라고 이름을 줍니다~ (잠궈놓으면 더 좋아요~ㅋ)

자~ 다음회에 이어서 하겠습니다.