[예제로 배우는 Expression Blend] Chapter 5. 바람이 불지 않는 선풍기 - 2
Expression Blend 2008/12/11 01:14 |
Chapter 5. 바람이 불지 않는 선풍기 - 2
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로 줍니다.
너무 길지요?? 이제 곧 끝나가요~ 다음회에 이어서 하겠습니다..
계속 이어서 하겠습니다.
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로 줍니다.
 |
너무 길지요?? 이제 곧 끝나가요~ 다음회에 이어서 하겠습니다..
댓글을 달아 주세요