앱인벤터2 강좌 8: 애니메이션 연습

이번 시간에는 간단한 폭발장면을 애니메이션으로 처리하면서 그 원리를 이해해 보자.

 

 

 먼저 스크린의 백그라운드 이미지를 멋진 장면으로 하나 세팅한다. 그리고 Palette 뷰에서 User Interface란을 열어 Image 요소를 드래그해서 스크린에 놓는다. 하단에는 애니메이션 이벤트를 발생시키기 위한 버튼 세개를 위치시킨다.

 

 HorizontalArrangement를 하나 드래그 해서 위치시키고 버튼 세개를 넣는다.   

 HorizontalArrangement를 스크린 하단에 위치시킬려면 스크린의 AlignVertical 속성을 "Bottom : 3 ▾"로 둔다. 그리고 Image 위아래에 있는 Label의 Height에 적당한 픽셀 수치를 주어서 원하는 위치에 Image를 위치시킨다.

 

 그리고 각각의 버튼에 쓰일 clock 세개를 화면에 드래그 시켜서 갖다 놓는다. TimerInterval은 300(0.3초)정도 주고 다른 옵션 항목은 체크를 해제시킨다.

 

 폭발 소리도 듣고 싶다면 Media란을 열어 Sound 요소를 화면에 꺼내 놓는다. 그리고 폭발소리가 들어있는 mp3 파일을 Upload 시킨다.(이 파일은 미리 준비해서 컴퓨터에 저장해 둔다.)

 

 

 

 먼저 폭발 애니메이션에 대해서 설명하겠다. 폭발 장면이 그려진 그림파일을 4장 준비해서 explosion_list에 끼워넣는다. 잘 보시면 5번 리스트가 비어 있는데 그이유는 아래 explosionClock.Timer 이벤트 블럭에서 설명한다. explosion_index가 0으로 초기화 되어 있는 것도 눈여겨 보자. 

 

 먼저 explosion 버튼을 눌러보자. 그러면 explosionClock을 호출하고 폭발음을 실행시킨다.

다음은 explosionClock 이벤트 블럭에 가보자.  Clock이 처음 호출되면 먼저 메인이미지 Visible을 true로 주어서 이미지를 보이게 한다. 그리고 explosion_index의 초기값 0에 1을 더해서 explosion_index를 1로 둔다. 그러면 메인이미지에 explosion_list의 1번에 있는 그림이 출력된다.

 

 그리고 0.3초후 두번째 Clock이 호출되면 explosion_index의 값 1에 1을 더해서 2의 값이 explosion_index 값으로 주어지고 메인이미지에 explosion_list의 2번에 있는 그림이 출력된다.

 

 이렇게 3번, 4번 그림까지 모두 출력되고 마지막으로 clock이 다섯번째 호출되어 explosion_index가 5가 되면 explosion_index를 0으로 만들고 화면의 그림을 보이지 않게 한다. 5번 리스트가 비어 있는 이유가 여기에 있다. 어차피 list 5번에 있는 그림은 화면에 나타나지 않으므로 빈 list를 주는 것이다. 그렇다고  list 5번을 생략해 버리면 explosion_index가  4가 되면 다시 index가 0이 되고 그림이 사라지므로 3장의 그림만 보이고 4번째 그림이 나타나지 않는다. 그러므로 반드시 필요한 항목이다. 그리고 clock의 TimerEnabled를 false시켜 애니메이션을 중지 시킨다.

 

 

 

이번에는 ok버튼을 누르면 화면에 OK 그림이 잠시 나왔다 사라지게 하는 애니메이션을 만들어 본다.

이 애니메이션은 퀴즈를 맞히거나 무언가를 요구했을때 OK 신호를 주는 방법으로 많이 사용하므로 잘 기억해 두어야 한다.

 먼저 ok버튼을 누르면 okClock.Timer를 호출한다. 그러면 메인이미지를 화면에 보이게 하고 ok_index를 1로 증가시킨다.

 

그러면 ok_list 1번에 있는 그림이 화면에 출력되고 0.3초후 okClock.Timer가 두번째 호출되면서 ok_index가 2가 된다. 

if 블럭에서는 ok_index를 0으로 세팅하고 메인이미지를 화면에서 사라지게 하면서 ok 애니메이션을 중지 시킨다.

 

 

 

마지막으로 no버튼을 누르면 화면에 NO 그림이 잠시 나왔다 사라지게 하는 애니메이션을 만들어 본다.

이 애니메이션은 퀴즈를 틀리거나 요구한 것이 아닐때 NO 신호를 주는 방법으로 많이 사용한다.

no버튼을 누르고 난 후의 상황은 ok 버튼을 누를때와 동일하므로 설명은 생략한다.

 

 

위 그림은 실제 스마트 폰에서 실행되는 화면을 녹화한 장면이다. 생각대로 잘 작동하는 것을 알 수 있다.