다음과 같이 개체가 순서대로 쌓이는 스택패널을 하나 생성해 줍니다. 개체의 정렬은 Horizontal(가로)로 해주세요.
그리고 버튼 4개를 생성하여 넣도록 하겠습니다. 여기서부터는 고속으로 진행하겠습니다. ^^; 다음과 같이 버튼의 가로,세로 사이즈를 20,20으로 하고 마진값을 오른쪽에 5를 주십시오.
 |
그러면 다음과 같이 아기자기한 버튼들 4개가 나란히 놓여지게 됩니다. 버튼의 이름을 주는것도 잊지 마세요. ^^
 |
이렇게 생성된 버튼에 스타일을 입히도록 합니다. 스타일 입히는 것은 이전 강좌에서 너~~무 많이 나온 이유로 생략하도록 할께요 ^^ Over 효과만 주시면 됩니다
. 자, 저는 이렇게 스타일을 입혀 완성하였습니다!
 |
이제 각각 버튼에 코딩을 하도록 하겠습니다.
첫번째 버튼을 선택하여 프로퍼티 창에서 이벤트 패널을 누릅니다. 그리고 MouseEnter 칸에 더블클릭을 하면 자동으로 함수가 생성됩니다.
그리고 나서 코드창에 가서 다음과 같이 입력합니다. "버튼 1을 눌렀을때 전체 애니메이션(Storyboard5)는 멈추고 Storyboard1을 실행하라"
 |
2,3,4번의 버튼도 마찬가지로 적용시키면 됩니다. MouseEnter 이벤트를 생성한 후에 StoryBoard5.Stop(); 는 공통으로 넣어주시고 Begin 하는 스토리보드의 이름을 버튼에 맞도록 2, 3, 4로 바꾸어주세요
.
그리고 버튼을 담고 있는 스택패널을 선택한 후에 다음과 같이 이벤트를 받게 하기 위하여 Background 영역을 채워줍니다. Background 영역이 Null 처리 되어 있으면 마우스 이벤트를 받을 수 없어요. 그러나 미관상 이벤트를 받는 영역이 눈에는 보이지 않게 하기 위하여 알파값을 0으로 줍니다.
그리고 다시 이벤트 프로퍼티창으로 가서 MouseLeave에 더블클릭하여 함수를 생성합니다. MouseEnter가 아니라 Leave 입니다. 영역에서 벗어났을 경우니까요.
마지막으로 아래와 같이 "4개의 스토리보드를 멈추고 다시 5번 스토리보드가 실행되게 하라"는 코드를 삽입합니다.
 |
실행하면 각각 버튼에 마우스가 오버되었을때 해당 이미지가 나타나게 됩니다. 특정 영역을 벗어나게 되면 순서대로 지나가게 되구요. ^^ 잘 이해되셨나요~~
파일 첨부하도록 하겠습니다.
SlideAD.zip
