앱인벤터2 왕초보 강좌 24 : 시계(clock)의 사용법을 알려주마

이번 시간에는 앱인벤터를 사용하면서 어쩌면 가장 많이 사용하는 기능인 시계(clock)에 대해서 알아보도록 하겠다. 먼저 팔레트 뷰에 가서 센서항목을 클릭한 후 시계를 스마트폰 화면 가운데에 가져다 놓는다. 스마트폰 바깥에 시계를 놓으면  보이지 않는 컴포넌트 부분에 나타나지 않으므로 꼭 화면 가운데에 가져다 두어야 한다. 두개의 기능을 시험을 해 보기 위해서 두개의 시계가 필요하므로 두개를 가져다 둔다. 그리고 시계의 타이머 간격을 500으로 둔다. 0.5초를 의미한다. 1초는 좀 느리게 움직이는 감이 있고 0.5초 이하는 너무 빠른 느낌이 있다. 

 

이번 강좌에서는 버튼을 클릭하면 공이 위로 움직이는 기능과 또 다른 버튼을 클릭하면 이미지 스프라이트의 그림이 변하는 기능을 구현해 보려고 한다. 팔레트의 '그리기 & 애니메이션' 항목에 가서 캔버스를 하나 화면 가운데에 가져다 두고 높이와 넓이의 속성을 '부모 요소에 맞추기'를 선택해서 최대한 크게 키운다. 그리고 공하나와 이미지 스프라이트 하나씩 화면 가운데에 가져다 둔다. 

'

 

이제 버튼 두개를 배치시키기 위해 캔버스 하단에 레이아웃 중 '수평배치' 항목을 가져다 둔다.

 

수평 배치 레이아웃 안에 버튼을 두개 배치 시킨다. 버튼이 잘 끼워지지 않을 수 있는데 마우스를 수평 배치 레이아웃 속에서 잘 움직여 보면 두개의 버튼이 수평으로 배치된다. 버튼의 이름을 자신이 구현하고 싶은 동작의 이름으로 바꾼다. 필자는 '공 발사'와 '그림 변경'이라고 이름을 바꾸어 주었다.

 

이제 이미지 스프라이트의 그림을 변환시키기 위한 이미지를 가져오자. 미리 '픽사베이'나 다른 이미지 다운 사이트에서 과일주제의 그림이나 동물 주제의 그림 5개 씩을 다운받아서 가로  300픽셀, 세로 200~300픽셀 정도로 수정한다. 그리고 우하단부 '미디어' 파트 하단의 '파일 올리기' 버튼을 클릭한다.

 

파일 올리기 알림창이 뜨는데 '파일 선택' 버튼을 클릭해서 다운받아둔 파일을 하나씩 업로드 한다. 한장씩 밖에 업로드 할 수 없으므로 많은 그림을 올릴때는 좀 짜증이 나기도 한다. 이것이 교육용 플랫폼인 앱인벤터의 한계랄까..... 티스토리에 그림을 올릴때는 수십장도 한번에 쫙 올릴 수 있지 않은가!!!!

 

반응형

 

이제 블록 에디터로 가자. 먼저 '공 발사' 부분을 보자. 모든 이벤트의 시작은 버튼을 클릭하는 것으로 부터 시작한다. 물론 시계의 활성을 처음부터 '참'으로 주면 앱을 시작하는 것과 동시에 어떤 동작을 시작 할 수도 있다. 먼저 빈 함수를 하나 가져와서 그 함수안에 공의 초기값 좌표를 X축은 화면의 중간값 200으로, Y 축은 화면의 제일 하단에 위치하게 한다. 그리고 버튼 이벤트가 발생하면 공의 좌표를 X축은 화면의 가운데에 그대로 있고 Y축은 시계 클럭 한번에 20 픽셀씩 위로 이동하게 변수값을 준다. 이제 버튼을 클릭하면 초기값 함수를 호출하고 ballMoveClock의 활성화 여부를 '참'으로 준다. 그러면  'ballMoveClock.타이머가 작동할 때' 이벤트 블럭안의 ballMove 함수가 호출되면서 함수의 내용이 실행된다. 

또 이미지 변환을 위한 시계는 활성화 값을 '거짓'으로 주고 이미지 스프라이트에는 빈 이미지를 노출시킴으로써  이미지가 보이지 않는 것처럼 표시한다.

 

다음은 이미지 변환을 위한 블럭내용이다. 먼저 과일의 리스트를 만든다. 필자는 5개 과일의 리스트만 만들었지만 30~40개 정도의 리스트도 앱인벤터에서는 무난히 돌아간다. 그러나 50개가 가까와 지면 프로그램이 무거워 지면서 잘 작동이 안되므로 주의 바란다. 이미지 변환 버튼을 클릭하면 이미지 변환 타이머 활성은 '참'으로 주고 공 발사 타이머는 '거짓'으로 주어 공발사는 중지 시킨다. 이미지 변환 타이머가 활성화 되면 타이머 한 클럭에 imageCount를 하나씩 올려주면서 이미지 스프라이트의 이미지를 리스트의 인덱스 순서에 따라 노출 시켜준다. 그리고 imageCount가 5가 되면  imageCount의 값을 0으로 주어 이미지 리스트의 첫 이미지 부터 다시 나타나게 해 준다.

 

실제 앱을 스마트폰에 설치해서 앱을 구동해 보자. 공발사 버튼을 클릭하면 공이 위로 이동한다. 0.5초에 20픽셀씩 위로 상승한다.

 

 

공이 위로 상승하고 있다.

 

 

 

이제 그림 변경 버튼을 클릭해 보자. 그러면 이미지 리스트의 첫번째 그림부터 순서대로 5개가 다 나타나고 5개의 그림이 다 나오면 다시 리스트의 처음 그림부터 다시 반복된다.

 

 

 

이정도만 시계(clock)의 사용법을 알아도 앱을 개발하는데 많은 도움이 된다. 이해가 잘 안되는 부분이 있다면 처음부터 꼼꼼히 복습하면서 공부해 보고 또 댓글을 달아주어도 좋다. 필자가 아는 한도내에서는 최대한 자세히 설명 드리도록 하겠다.