와..한때 잠깐 여름 날씨더니 다시 쌀쌀해졌어요..ㅠㅠ
간만에 바람쐰다고 한강을 다녀왔는데..강바람이 ㄷㄷ.. 그래도 마음이 시원해졌어요 ^_^
오늘은 지난 시간에 내보낸 버튼 디자인의 XAML 파일을 블렌드에서 불러와 모션을 줘보겠습니다.
1. 먼저 프로젝트 파일을 하나 생성하도록 합니다.
프로젝트 타입은 Silverlight 2 Application 을 선택하고 이름은 알맞은 것으로 지어주세요.
경로를 지정한 후 개발언어는 Visual C#을 선택하도록 합니다.
2. 파일을 생성한 후 오른쪽 패널을 살펴보면 프로젝트 파일에 대한 정보가 나오는 탭이 있습니다.
프로젝트 파일의 구성에 대한 설명은 차후에 하도록 하겠습니다.
3. C# 파일을 선택한 후 마우스 오른쪽 버튼을 눌러 Add Existing Item 메뉴를 선택합니다.
우리는 이곳에 만들어 둔 XAML 파일을 추가할 거예요. 대화창이 열리면 XAML 파일을 저장한
경로를 찾아 파일을 추가합니다.
4. 아래와 같이 추가된 것을 확인할 수 있어요..
5. 더블클릭 하여 파일을 열면 아트보드 영역에 디자인된 개체들이 나타납니다. 짠~
6. 왼쪽의 Interaction panel을 살펴보면 우리가 만들었던 디자인의 Viusal tree가 보여집니다.
디자인된 오브젝트를 감싸고 있는 Layer_1의 Canvas 이름을 MarkButton로 바꿔줍니다.
그리고 아래의 레이어도 다음과 같이 이름을 바꿔줍니다. 제가 다음과 같이 이름을 준 것은
디자인 오브젝트에 따라 편하게 관리하기 위해 임의로 지어준거에요.
7. Doucment 캔버스와 MarkButton 캔버스의 사이즈를 버튼의 크기만큼 줄여주도록 합니다.
디자인에서 XAML 파일을 불러오면 디자인의 아트보드 영역이 레이어로 넘어오기때문에 사이즈 조절이
필요합니다.
9. 그리고 mark1과 mark2의 Opacity 값을 0으로 해주어 초기상태에는 항상 보여지지 않도록 합니다.
10. 이제 마우스가 오버되었을때 효과를 주기 위해 스토리보드를 생성하도록 할께요. 아래 표시한 곳의 "+"를
누르면 스토리보드 생성 대화창이 뜹니다. 스토리보드 이름을 주고 확인합니다.
11. 스토리보드가 생성되면 이제 애니메이션을 만들 수 있어요.
스토리보드가 생성되면 Timeline recording is on 이 되어 녹화모드가 시작됩니다.
기본 상태에서 보이지 않는 mark1과 mark2를 선택하여 빨간 표시된 부분을 눌러 Keyframe를 삽입하도록
합니다.
12. Keyframe를 삽입한 후 표시된 부분의 PlayHead를 움직여 0.2초가 지난 시점에 Keyframe를 한번 더
넣도록 합니다. 그리고 마우스가 오버되었을때 사라진 부분이 다시 나타나게 하기 위하여 Appearance 패널의
Opacity 값을 다시 100으로 변경해줍니다.
13. 자! 이제 재생 버튼을 누르면 숨겨졌던 영역이 다시 나타나는 애니메이션을 확인할 수 있습니다.
^^ 하하 너무 쉬운 내용을 쓴 것 같아요..여러분께 이정도는 껌(?)~ 인데 말이죠;; ㅋㅋ
블렌드에서 애니메이션은 이렇게 만들어진답니다. 플래시와 비슷하죠?
오늘 한 작업은 효과를 주기위한 스토리보드를 만드는 단계였구요, 실제로 버튼이 된것은 아닙니다.
다음 단계에서 버튼으로 만드는 과정을 다루도록 하겠습니다.
그리고 활용강좌라 작업 단계에 대한 설명만 했는데 인터렉션 패널이나 타임라인의 구조에 대한 강좌도
곧 올리도록 하겠습니다.
Blend ː Silverlight/활용강좌2008/04/28 00:04
