예전 강의 때 버튼도 만들어 보았고, 애니메이션도 만들어 봤을 겁니다 :)
이 두개를 오늘 활용하는 의미로,
버튼에 + 애니메이션을 주어 기존에 마우스오버/마우스클릭 시 좀 더 효과적으로 보이도록 적용해 보도록 하겠습니다.
1) 먼저 각자의 취향대로 버튼을 만들어봅시다! (다들 없으시다면 저번 강의를 도움 삼아 만들어주시고요~)
저는 이렇게 간단하게 사각형 하나에 블링한 효과 하나 넣었습니다. :) 도구>버튼만들기>버튼 이름 지정하여 확인 눌러줍니다.
2) 버튼을 클릭했을 때나 롤 오버 했을 때 애니메이션이 나와야 하기 때문에 버튼 우클릭 > 컨트롤 구성요소 편집 > 템플릿 편집하여
버튼 안으로 들어갑니다. 버튼 안으로 들어가면 아까 만들었던 버튼들의 요소가 보입니다. 저는 사각형 두개가 보이네요 :)
여기서 애니메이션을 해야할 텐데요. 애니메이션을 하기 전에 어떻게 만들것인가 구상 합니다.
저는 이 버튼에다가 투명유리처럼 보이게 하는 애니메이션을 줄까 하는데요.
3) 애니메이션을 주기 전에 먼저 움직일 요소를 만들어야 합니다.
저는 이렇게 사각형 두개를 써서 지나가게 하면 유리처럼 보일 것 같아 이렇게 사각형을 두개 그린 후 투명도를 주었습니다.
그리고 오른쪽 창에서 변형에서 기울임을
이렇게 움직일 객체까지 준비를 다 마치셨다면, 투명상자의 속성을 Hidden으로 주어 숨겨둡니다.
이제 왼쪽 이벤트에서 IsMouseOver를 클릭합니다. 그러면 다음과 같이 애니메이션 녹화버튼이 뜹니다.
4) IsMouseOver속성 클릭하면 밑에 활성상태인 경우 속성 - 이라 해서 밑에 속성 및 액션이 보이는데요.
이게 바로 마우스를 오버했을 때 액션을 실행하도록 하는 부분입니다. 다음을 활성화할 경우 액션 옆에 + 버튼을 눌러줍니다.
밑의 그림처럼 제어 할 스토리 보드가 없다고 나옵니다. 확인 버튼을 눌러 스토리보드를 만들어줍니다.
5) 기존 애니메이션 만들 때처럼 똑같이 나옵니다. 이제 움직일 사각형 두개를 0초에서 Hidden-> Visible로 시키고 왼쪽 끝으로 옮기면 타임라인에 키가 생깁니다. :)
1초 뒤로 타임바를 옮긴 후 왼쪽에 있던 사각형을 오른쪽 끝으로 옮겨줍니다. 그리고 밑의 단추색을 초록색으로 바꾸어줍니다.
실행하면 옆으로 샥 옮겨가는 애니메이션과 함께 색이 변하게 됩니다. 다 만들었으면 x버튼을 눌러 애니메이션을 종료 합니다.
6) 돌아와서 다시 이벤트 IsMouseOver를 누릅니다. 그러면 밑에 액션 밑으로 방금 만들었던 스토리보드 네임이 보입니다.
이렇게 해서 마우스 오버했을 때 실행되는 애니메이션을 만들었습니다. F5를 눌러 실행해봅니다.
7) 실행해서 마우스 오버를 해 봅니다. 애니메이션이 실행되시는 것을 볼 수 있는데 엇, 마우스를 떼고 난 후에 색이 다시 원래대로 돌아가지
않는 것을 볼 수 있습니다. 왜냐하면 당연히 마우스 아웃 되는 애니메이션을 만들지 않았으니까요. 윈도우를 닫고 다시 블랜드로 돌아옵니다.
8) 다시 버튼 우클릭 > 컨트롤 구성요소 편집 > 템플릿 편집 하여 버튼 안으로 들어갑니다. 마우스 오버 이벤트를 클릭하시면 아까 했던 액션 밑에 - 다음을 비 활성화 할 경우 액션이 있습니다. 이게 마우스가 롤아웃이 되었을 때의 애니메이션을 액션한다는 것인데요. + 버튼을 눌러주시고
아까 만들었던 애니메이션과 반대로 하여 롤 아웃 되었을 때 원래 상태로 돌아가는 애니메이션을 만들어 주어야 합니다.
9) 스토리보드 이름이 있는 리스트 박스의 화살표 클릭 > 새 스토리 보드를 눌러 만듭니다.
10) 아까는 유리가 지나갔었는데요. 마우스 아웃했을 때는 오버되었던 파란색이 원래 색으로 돌아오도록만 해주겠습니다.
근데 스토리 보드를 시작하려고 보니 버튼이 원래 색상이죠?
1초뒤로 타임바를 옮긴 후 원래 색상이 아닌 다른색상으로 선택하여 키가 찍히게 한 후 다시 원래 색상을 찍어주세요.
왜 그런 번거로운 일을 하냐면, 그냥 키를 찍어주면 아무런 변화가 없기 때문에 블랜드가 변경시켜주지 않거든요.
그래서 따른 색상을 좀 찍어주다가 원래 색상으로 찍어주어야 인식이 됩니다. 하셨으면 X버튼을 눌러 종료 합니다.
11) 다시 마우스오버 이벤트로 가셔서 다음을 비활성화 할 경우 액션에 가시면 방금 만든 스토리보드가 보입니다. 설정해 주시고 저장해주세요. :)
그리고 F5를 눌러 실행해주세요 :)
btnBlue.exe
