[예제로 배우는 Expression Blend] Chapter1. 푸른하늘의 구름 - 1

Expression Blend 2008/11/06 23:53 |
Chapter1. 푸른하늘의 구름 - 1
cloud-image.zip


이번 강좌는 푸른하늘에 구름이 떠다니는 간단하면서 활용도가 높은 예제입니다.




시작합니다.

1. File > New Project 를 선택합니다


2. 아래와 같이 설정한 후 OK 클릭합니다. (저는 cloud 라는 이름을 사용했어요~ ㅎ )


3. 확인을 누르면 아래와 같이 창이 뜹니다.


4. 아래그림처럼 노란숫자중 1번의 LayoutRoot를 선택하고 2번의 Properties를 선택하면 노란색 테로 둘러진 속성탭이
    보여집니다
   (즉 지금은 LayoutRoot의 속성이 Background가 흰색이고 Opacity가 100%라는 것 등... 여러정보를 볼수있지요~)
   또 분홍색 숫자로 된 3의 Split을 선택하면 분홍색 테로둘러진 xaml 소스를 볼수가 있어요..


5. LayoutRoot를 선택하고 백그라운드의 색에 그라데이션을 줍니다. (진짜 하늘처럼요~)
   노란테두리로 박스를 쳐놨습니다. 그라데이션 탭을 잘 선택하시고 왼쪽끝의 색상을 #FFA7D5F2 로 줍니다.. 
 

6.아래처럼 LayoutRoot가 하늘배경이 되었습니다


7. 자 이제 구름을 가져와야하는데요.. 우선 구름이미지를 넣을 폴더를 하나 생성합니다.
   Project > cloud 에서 마우스 우클릭 > Add New Folder 를 선택합니다.


아래와 같이 폴더의 이름을 Images라고 지어줍니다.


8. 이제 진짜 구름을 가져오겠습니다 (구름 이미지의 출처 : http://blog.naver.com/7201min/130009329943)
   첨부파일의 cloud-image.zip 를 다운받으신 후 압축을 풀어 PNG파일을 선택하고 Ctrl + C 합니다.
 

9. 아까 생성한 Images 폴더에서 마우스 우클릭 > Paste 합니다.


아래와 같이 Images 폴더안에 이미지가 들어갔습니다..


10. 구름을 끌어다 놓을 공간을 위해서.. (어~ 그러니까 구름을 화면밖에서, 즉 하늘영역 밖에서 생성하려구요. )
     아래와 같이 화면을 50%로 설정합니다.


11. 구름을 선택하여 화면으로 끌어옵니다.(여기서는 1.PNG를 선택했습니다)


12. 구름의 크기를 적당하게 줄입니다 (Alt를 누르면서 줄이면 이미지의 중심점을 향해 비율고정상태로 줄일수 있어요.)


13. 구름을  줄인후 하늘에서 약간 위쪽으로 놓고 노란테두리 안의 내용처럼 Name은 cloud1, Opacity는 70%로 줍니다


14. 두번째 구름은 5.PNG를 끌어다 놓고 크기를 줄인후 아래와 같이 위치를 잡고
     노란테두리 안의 내용처럼 Name은 cloud2, Opacity는 80%로 줍니다


14. 세번째 구름은 2.PNG를 끌어다 놓고 크기를 줄인후 아래와 같이 위치를 잡고
     노란테두리 안의 내용처럼 Name은 cloud3, Opacity는 100%로 줍니다


15. 자~ 이제 하늘도 있고 구름도 세개나 있습니다.


구름이 떠다니는 애니메이션은 다음장에 이어서 하도록 할께요~

Posted by 하얀코코
TAG ,
Trackback 0 : Comment 0

Trackback Address :: http://www.whitecoco.net/trackback/1 관련글 쓰기

댓글을 달아 주세요