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. 저장하고 닫습니다.

성공하셨나요?

파일을 첨부합니다.


 


[응용예제 1]



[응용예제 2]