저번 강좌에서 메뉴를 구성하는 버튼을 만들었다면
이렇게 stack 패널로 묶은 버튼들을 애니메이션을 주어 더 효과적인 메뉴바를 만들어 보고자 합니다.
홈페이지들을 둘러보면 메뉴가 한쪽에 숨어있다가 마우스를 갖다대면 나타나는 메뉴들을 볼 수 있습니다.
1 - 숨어있는 버튼을 롤오버하면 나타나는 애니메이션
2 - 나타난 버튼을 롤아웃하면 다시 숨는 애니메이션 두개를 만들도록 합니다.
1) Stack Panel에 Background를 설정해줍니다. 그리고 애니메이션을 만들기 전에
먼저 메뉴들을 아트보드에서 아래의 그림처럼 뺍니다.
이렇게 되면 처음 실행했을 때 메뉴들이 보이지 않게 됩니다.
2) 메인화면에서 스토리 보드를 하나 만들어줍니다.
저는 스토리보드 이름을 btnEnter라고 하겠습니다.
녹화화면으로 들어가게 됩니다. 녹화화면에서 1초쯤 타임바를 옮긴다음 숨어있는 버튼들을 밑의 그림처럼 옆으로 쭉 빼줍니다.
그리고 key버튼을 눌러서 옆의 속성에 보시면 감속/가속 속성에서 빨리 나왔다가 서서히 감속하도록 그래프를 만들어줍니다. (밑 그림 참조)
실행해서 잘 만들어졌는지 확인해 봅니다. 마우스오버하면 나타나는 애니메이션은 이렇게 간단히 끝났습니다.
3) 다음은 마우스가 롤아웃 되었을 때의 애니메이션을 만들어보도록 하겠습니다.
방금 마우스 오버 애니메이션을 활용하겠습니다.
스토리보드의 이름을 클릭해주시고 우클릭하시면 복제가 있는데요. 복제 클릭을 하시면 btnEnter_Copy 복제 스토리보드가 생성됩니다.
그리고 그 스토리보드를 다시 클릭한 후 우클릭 -> 반전 하시면 스토리보드가 반전이 되면서 롤아웃 애니메이션이 만들어집니다.
굳이 또 애니메이션을 작성할 필요가 없어졌습니다.
4) 녹화를 끝내고 메인화면으로 돌아옵니다.
왼쪽 인터렉션 창 > 트리거 창을 보시면 이벤트 기능들이 있는데요. 여기서 이벤트를 주어서 버튼 오버시 애니메이션이 실행되도록 만들겠습니다.
이벤트 버튼을 클릭하시면 밑의 그림처럼 화면이 나옵니다.
stack 패널 레이어를 클릭하시어 리스트 박스에 나타나도록 하고, 오른쪽에 MouseEnter를 찾아줍니다. +를 클릭하시면
밑에 또 다시 리스트 박스가 나타나는데요.
이게 해석하자면 Stack 레이어가 마우스엔터(롤오버) 가 발생할 때 스토리보드 네임(btnEnter) 을 Begin(시작)한다. 라는 뜻입니다.
5) 한번 더 이벤트 버튼을 눌러서 똑같이 첫번째 리스트 박스에 Stack 레이어 선택, 이번에는 MouseLeave를 리스트 박스에서 찾아서 선택,
그리고 아까 숨길때 만든 스토리보드 네임(btnLeave) 을 선택합니다. 그럼 숨겨지는 이벤트 트리거도 만들어졌습니다.
6) F5를 눌러 실행해 봅니다 :-) 잘 되시나요?
밑에 제가 만든 실행 파일을 올려드리겠습니다.
StackMenu.exe
