안녕하세요.^^
지난 시간에 이어서 테이프 효과 버튼 만들기를 하도록 하겠습니다.
1.모션 효과를 주기 전에 버튼에 마우스가 오버되었을 경우 어떤 효과가 나도록 할 것인지
먼저 구상을 합니다.
묜이는 일반 상태에서는 테이프의 끝부분이 보였다가, 마우스를 갖다 대면 테이프가 활성화 되는
효과를 주어야겠다고 생각했습니다. 그림으로 보여드릴께요^^
(투명부분을 보여드리기 위해 검은 배경을 임시로 깔았습니다)
2.자 이해되셨나요?
그렇다면 우리가 저번시간에 그린 테이프에서 추가 작업이 이루어져야겠네요.
3. 1번과 2번영역으로 나뉘어 져야합니다. 마우스가 오버될 경우 1번이 활성화 되어야하니까요.
그런데 지난시간에 작업한 테이프 효과 파일에서는 초록색 부분중 1번영역에 해당하는 부분과
분리가 되지 않은 상태이기 때문에 저 부분을 한번 더 나누어주도록 하겠습니다.
일단 테이프의 색깔 있는 부분을 선택하여 하나 더 복사한 후 Divde 메뉴를 사용하면 세 영역으로 분리됩니다.
그럼 투명한 부분으로 쓰일 두개의 영역은 남겨두고 제일 끝 부분을 삭제한 후, 원본에서 그림자로 쓰이는
진한 부분을 하나 더 복사하여 원본과 같이 밑에 대어줍니다.
보기엔 달라진게 없어 보이겠지만 실제로 이루어지는 구성은 이렇게 바뀌는거에요 ^^;
(아.. 점점 설명이 어려워지는것 같네요 ㅠ_ㅠ)
4. 그리하여 아래와 같은 구조로 파일이 구성하게 되었다면
검은색 배경을 지워주고 오브젝트를 모두 선택합니다.
5. XAML로 내보내는 방법은 슬라이스 영역이나 선택된 오브젝트 등 여러가지 방법으로 내보낼 수 있습니다.
그런데 이번에 알게된 사실은 슬라이스로 영역을 맞추거나 선택한 오브젝트만 내보내더라도
내보낼 부분을 꼭 문서의 0,0 좌표 부분에 맞추어주어야 실버라이트용 XAML로 내보내지더라구요.
그렇게 하지 않으면 내보내질 영역과 실제 오브젝트와 영역이 일치하지 않게되는 현상이 있습니다.
PNG나 GIF와 같은 이미지로 내보낼 경우나 WPF Resource Dictionary로 내보낼 경우에는 괜찮은데 말이죠;
이 문제는 제가 더 알아보도록 하겠습니다.
6. File 메뉴의 Export 를 선택하면 다음과 같은 창이 나옵니다. 주의해야할 부분은 내보낼 형식을 꼭
XAML Silverlight Canvas 로 선택해야 한다는거예요. 실버라이트용 xaml로 내보내야 하기 때문입니다.
7. Exprot All 을 눌러주면 본인 지은 이름으로 xaml 파일이 생성됩니다. 저는 bookmark 라고 지어주었어요.
지정한 파일 경로를 확인하면 다음과 같은 xaml 파일이 생성된 것을 확인할 수 있습니다.
이렇게 디자인에서 작업한 파일을 XAML로 내보내는 과정까지 하였습니다.
블렌드에서는 이 xaml 파일을 불러들여 모션을 주는 작업을 할께요..^^
설명을 최대한 쉽게 하고 싶었는데.. 그게 마음대로 잘 안되는것 같습니다. T^T;;
이해가 안가는 부분이 있다면 댓글을 달아주시기 바래요..^^ 설명해드리겠습니다..
그럼 오늘은 이만 마칠께요~!
Design & Web/Design 활용강좌2008/04/27 03:56
