인벤터2 왕초보 강좌 11 : 슬라이더(Slider)로 남은 시간을 표시하자.

이번 시간에는 슬라이더란 것이 무엇인지, 어디에 사용되는지, 어떻게 사용하는지에 대해 알아보겠다. 

슬라이더는 게임창의 상단에서 시간이 줄어드는 것을 보여주든지, 또는 에너지가 얼마나 남아있는지 등의 시각적인 용도로 사용하는 컴포넌트이다. 이번 시간에는 버튼을 클릭하면 상단에 배치한 슬라이더가 슬라이딩 하는 상황을 연출해 보겠다. 

 

화면 상단에 슬라이더를 배치하고 그 아래 버튼을 두어서 버튼을 클릭하면 슬라이더가 움직이는 앱을 만들 것이다. 슬라이더의 속성창에 너비, 최대값, 최소값등을 입력하자. 섬네일 위치란 처음 슬라이더가 화면에 나타날때 슬라이더의 중간 막대기가 어디에 위치하는가를 말한다.

시계를 하나 배치한다. 시계는 보이지 않는 컴포넌트이기 때문에 스마트폰 화면 아래에 나타날 것이다. 시계의 속성창을 보자. '타이머 항상 작동'칸을 체크하면 별다른 이벤트가 없어도 타이머가 항상 돌아간다는 것이다. 우리는 버튼을 클릭했을때 타이머가 동작해야 하므로 체크 해제한다. '타이머 활성화 여부'는 타이머의 동작전체를 제어하는 항목이다. 체크해제 하면 타이머가 작동하지 않은다. '타이머 항상 작동' 항목도 '타이머 활성화 여부'에 체크가 되어 있어야 동작한다. 타이머 간격을 1000으로 설정했는데 이것은 1초란 의미다. 밀리세컨드 단위로 조절할 수 있다.

 

 

블록 코딩에서 가장 먼저 해 주어야 할 일이 타이머를 활성화하는 것이다. 디자이너 에디터에서 체크를 해제해 두었기 때문에 블록 코딩내에서 활성화 해 줘야 한다. 활성화 하는 방법은 '지정하기 시계1. 타이머 활성화 여부 값' 블록에 논리여부를 나타내는 '참' 블록을 끼워넣는 것이다. 이것이 앱인벤터2의 방식이므로 알아두고 가자.

 

시계 컴포넌트를 클릭하면 시계의 내부 블록들이 열린다. '언제 시계1. 타이머가 작동할 때' 블록을 끄집어 내서 에디터 내에 배치한다. 만약 이라면 실행(if ~do)이벤트 블록안에 전역변수인 slideValue의 값을 0부터 6까지 지정한다. 5초 부터 하나씩 숫자가 줄어들다가 0이 되면 다시 6으로 세팅한다. 5로 세팅하면 실제로는 4초 부터 하나씩 줄어드는 것이기 때문에 개발자가 원하는 숫자에서 +1을 해야 한다. 이 과정을 계속 반복하는 것이다. 

 

슬라이더 컴포넌트를 클릭하면 슬라이더의 내부블록들이 열린다. '지정하기 슬라이더1. 섬네일 위치 값' 블록은 슬라이더의 위치를 화면에 보여 주는 블록이다. 1초 마다 숫자가 하나씩 줄어들면서 슬라이더의 섬네일 위치를 조정한다. 그러므로서 시각적으로 슬라이더가 슬라이딩하는 효과를 나타낸다.

 

 

앱을 빌드하고 실행시켜보자. 이 앱의 초기 화면이다. 전체 5초의 구간에서 섬네일이 2초의 위치에 세팅이 되었다. 슬라이딩 시작 버튼을 누른다.

 

버튼을 클릭하면 섬네일이 5초 위에 위치하므로 슬리이더가 전체를 꽉 채운 것으로 보인다.

 

1초마다 슬리이더의 섬네일이 좌측으로 1초씩 이동하면서 슬라이더가 움직이는 것 같이 보인다.

 

0초가 되면 섬네일이 0초의 위치에 다다라서 시간이 5초가 흘렀다는 것을 나타낸다.

 

 

이해를 돕기 위해 이 앱의 동영상을 첨부한다. 5초 간격으로 슬라이더가 제대로 동작하는 것을 볼 수 있다. 이처럼 슬라이더는 시간의 상황이나 에너지 상태, 또는 레벨의 상황등을 시각적으로 보여 줄 수 있기 때문에 게임에서 많이 쓰이는 요긴한 컴포넌트이다.