제 6 장 풍선 상승 애니메이션 3 (블록에디터 작업)

6. 구성요소에 활력 불어넣기

1. 블록에디터를 오픈하고 블록에디터의 좌측에 위치한 사용자블록(My Blocks)탭을 선택하면 상기 디자이너 창에서 작업한 캔버스, 풍선, 스크린, 사운드 및 스타트스탑버튼 등에 각각 대응하는 복수의 드로워(Drawer)가 나타난다. 이외에도, 나중에 설명하는 바와 같이 변수블록 등을 정의할 때에 자동생성되는 블록을 저장하는 사용자정의(My Definitions)드로워가 나타난다.

2. 우선, 디자이너창에서 업로드된 풍선이미지파일을 임시 저장하는 변수블록으로서 풍선리스트블록에 대해 설명한다.

2-1. 블록에디터에 좌측에 위치한 내장블록(Built-In)탭을 선택하고, 정의(Definition)드로워를 열고, 변수블록(def variable)을 선택하여 작업영역으로 드래그한다.

  

2-2. 이 변수블록(def variable)에서 variable을 더블클릭하여 BalloonList로 정정하여 이미지파일의 임시저장장소인 풍선파일리스트로 사용한다.

  

2-3. 다음에, 내장블록(Built-In)탭의 리스트(Lists)드로워를 열고 리스트만들기블록(call make a list item)을 선택하여 작업영역으로 드래그한다. 

2-4. 다음에, 내장블록(Built-In)탭의 텍스트(Text)드로워를 열고 텍스트블록(text text)을 선택하여 작업영역으로 드래그한다. 

  

2-5. 텍스트블록(text text)의 text를 더블클릭하여 cwBalloon.png로 정정하고, 정정된 텍스트블록을 콘트롤키(Ctrl)와 문자키(c, v)를 사용하여 정정된 텍스트블록을 28회 반복적으로 복사하여 붙여넣는다. 이와 같이 에디터의 작업영역에서 복사해서 붙여 넣은 28개의 텍스트블록의 텍스트(cwBalloon.png)를 각각 더블클릭하여 다음의 스크린샷과 같이 28개의 풍선이미지파일로 정정한다.

29개의 텍스트블록에는 상기한 바와 같이 디자이너창에서 업로드된 이미지파일명칭과 동일하다.  즉, 이미지의 파일명칭에는 확장자도 포함한다.

  

2-6. 에디터의 작업영역에서, 상기 풍선리스트블록(def balloonList as)에 리스트만들기블록(call make a list item)을 플러그인하고, 리스트만들기블록(call make a list item)의 소켓(item)에 순차적으로 상기 텍스트블록을 29개 플러그인한다. 

  

3. 다음에는, 외부에 드러나지 않는 히든 인덱스 변수(Hidden Index Variable)를 정의한다.

3-1. 이 변수는 풍선리스트의 이미지파일명의 순서를 나타낸다. 예를 들면, 다음에 설명하는 풍선을 터치할 때마다 또는 캔버스의 최상단에 도달할 때마다 다른 모양의 풍선이 선택되어 캔버스에 나타나는 풍선의 이미지파일이 어느 것인지를 구분하기 위해서는, 현재 어느 이미지파일인 지를 기억할 필요가 있다.  이와 같이 프로그램에서 기억할 필요가 있는 경우에는 사용자가 직접 변수를 정의하여야 한다.  이 경우에는 앱은 현재 풍선이미지의 순차번호(즉, 풍선리스트의 인덱스)를 기억할 필요가 있다.

3-2. 풍선이미지리스트블록(def BalloonList)과 마찬가지로, 내장블록(Built-In)탭의 정의(Definition)드로워를 열고 변수블록(def variable)을 선택하여 작업영역으로 드래그한다.  이 변수블록(def variable)에서 variable을 더블클릭하여 BalloonIndex로 정정한다.

  

참고사항: 상기 블록에서 직사각형상의 노란색 표시는 이 블록의 소켓에 초기화하고자하는 번호블록을 연결하면 사라진다.

3-3. 내장블록(Built-In)탭의 수학(Math)드로워를 열고, 숫자블록(number 123)을 선택하여 클릭한다. 이 숫자블록(number 123)에서 123을 더블클릭하고 1로 변경한다.

  

3-4. 상기 풍선인덱스블록에 숫자블록을 플러그인한다.

4. 풍선띄우기의 앱을 시작할 때 스크린을 초기화하는 이벤트에 의해 스크린초기화이벤트핸들러(Screen1.initialize)를 트리거한다.   이에 대한 상세설명은 이하와 같다.

4-1. 사용자블록(My Blocks)탭을 선택하고 스크린(Screen1)드로워를 열고 스크린초기화이벤트핸들러(Screen1.Initialize)블록을 선택하여 작업영역으로 드래그한다.

  

4-2. 상기 스크린초기화블록에 조합하고자 하는 숫자블록과 풍선블록을 각각 4회 작업영역으로 드래그하여 서로 플러그인 하는 방법이 동일하므로 일괄적으로 설명한다.

4-2-1. 숫자블록에 대해서는, 내장블록(Built-In)탭의 수학(Math)드로워를 클릭하여 열고, 4개의 숫자블록(number 123)을 각각 순차적으로 선택하여 클릭한다. 각각의 숫자블록(number 123)에서 123을 더블클릭하고 90, 20, 140 및 232으로 변경한다.

  

4-2-2. 풍선블록에 대해서는, 사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고, 풍선헤딩설정블록(set Balloon1.Heading to), 풍선좌표설정블록(set Balloon1.X to, set Balloon1.Y to) 및 풍선속도설정블록(set Balloon1.Speed to) 등을 각각 순차적으로 선택하여 작업영역으로 드래그한다.

  

4-3. 상기 4개의 풍선설정블록 각각의 소켓(to)에 해당 숫자블록을 이하 설명하는 바와 같이 플러그인한다.

4-3-1. 풍선이 상부수직방향으로 향하게 하기 위해 풍선의 헤딩(Balloon1.Heading)각도를90도로 한다.   여기서, 헤딩각도는 풍선이 상부방향으로 이동할 뿐만 아니라 풍선그림자체도 시계방향으로 90도 회전하기 때문에 편의상 풍선이미지를 앱인벤터에 업로드하기 전에90도 시계방향으로 회전한 풍선그림을 미리 준비하여 한다.

  

4-3-2. 다음에, 풍선의 초기위치는 캔버스내의 하부중앙에 놓이도록 X, Y좌표(단위는 픽셀임)를 각각 140, 232로 설정한다.  

4-3-3. 또한, 풍선의 속도(단위는 픽셀임)는 20정도로 설정한다.  

  

4-3-4. 이와 같이 만든 조립블록을 스크린초기화이벤트핸들러에 조합한 블록은 다음과 같다

  

5. 풍선을 터치하면 다른 모습의 풍선으로 변경된다.

5-1. 사용자블록(MyBlocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 터치이벤트핸들러블록(Balloon1.Touched)을 선택하여 작업영역으로 드래그한다.

참고사항: 풍선터치블록을 작업영역으로 드래그할 때에, 풍선의 터치한 점에 대한 좌표의 인수블록(name x, name y)이 자동생성됨과 동시에, 사용자블록(My Blocks)탭의 사용자정의(My Definitions)드로워에도 이들 인수블록에 대응하는 변수값의 블록(value x, value y)도 자동생성된다.

5-2. 풍선리스트(BalloonList)에 저장된 풍선파일의 전체개수(call length of list list)와풍선인덱스(global BalloonIndex)가 동일한 경우, 풍선인덱스(set global BalloonIndex to)를 0으로 설정한다.

  

5-3.  상기한 바와 같이, 풍선인덱스(set global BalloonIndex to)를 0으로 설정하면, 풍선리스트에 풍선이 없는 것에 해당한다.  이 때에 풍선인덱스의 값(0)에 1을 가산한 값을 풍선인덱스의 값으로 하여 풍선의 나타남을 반복한다.

  

5-4. 전역풍선리스트(global BalloonList)에서 전역풍선인덱스(global BalloonIndex)에 대응하여 선택된 풍선을 그림으로 설정하는 블록조합은 다음의 스크린샷과 같다.

  

5-5. 풍선을 터치하면, 디바이스(안드로이드폰)는 100ms 동안 진동하도록 사운드의 진동블록(Sound.Vibrate)을 100으로 설정한다.

5-6. 상기한 복수의 기능블록조합을 풍선의 터치이벤트핸들러에 조합한 블록의 스크린샷은 다음과 같다.

  

6. 풍선을 드래그하면 드래그한 현재위치로 풍선이 이동한다.

6-1. 사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 드래그이벤트핸들러(Balloon1.Dragged)를 선택하여 작업영역으로 드래그한다.

  

참고사항: 풍선드래그블록을 작업영역으로 드래그할 때에, 풍선의 최초 좌표, 직전 좌표 및 현재 좌표에 관한 인수블록(name startX, name startY, name prevX, name prevY, name currentX, name currentY)이 자동생성됨과 동시에, 사용자블록(My Blocks)탭의 사용자정의(My Definitions)드로워에도 이들 인수블록에 대응하는 변수값의 블록(value startX, value startY, value prevX, value prevY, value currentX, value currentY)도 자동생성된다.

6-2. 풍선을 드래그하여 현재위치(value currenX, value currentY)로 이동하도록 풍선의 이동 호출블록(call Balloon1.MoveTo x y)을 사용한다.

사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 이동 호출블록(call Balloon1.MoveTo x y)을 작업영역으로 드래그한다.  내장블록(Built-In)탭의 사용자정의(My Definitions)드로워를 열고 2개의 현재위치값블록(value currentX, value currentY)을 각각 순차적으로 작업영역으로 드래그하고, 이들의 블록(value currentX, value currentY)을 풍선의 이동호출블록(call Balloon1.MoveTo x y)의 해당 소켓(x y)에 각각 플러그인한다.

  

6-3. 캔버스에서 풍선을 드래그하면 디바이스(핸드폰)는 100ms 동안 진동하도록, 사운드의 진동블록(Sound.Vibrate)을 100으로 설정한다.

   

6-4. 상기한 복수의 기능블록조합을 풍선의 드래그이벤트핸들러에 조합한 블록의 스크린샷은 다음과 같다.

  

7. 풍선이 캔버스의 상측변(상부 가장자리)에 도달할 때 풍선은 사라지고, 다른 모습의 풍선이 캔버스의 하단중앙에 나타는 블록의 조합에 대해 설명한다.

7-1. 사용자블록(MyBlocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 캔버스 가장자리도달이벤트핸들러(Balloon1.EdgeReached)를 선택하여 작업영역으로 드래그한다.

  

참고 사항 1: 상기 풍선의 캔버스 가장자리도달이벤트핸들러블록(Balloon1.EdgeReached)을 작업영역으로 드래그하면, 가장자리인수(edge)가 이벤트핸들러의 우측에 자동생성된다.  이 인수에 대응하는 가장자리값 블록(value edge)이 사용자블록(My Blocks)탭의 사용자정의(My Definitions)드로워에 자동생성된다.

참고 사항 2: 풍선이 캔버스의 가장자리에 도달하는 위치는 상단부분(북쪽)이므로 가장자리(edge)를 1인 경우이다.   참고로, 북동, 동, 남동, 남, 남서, 서, 북서는 각각 2, 3, 4, -1, -2, -3, -4에 대응한다.

7-2. 풍선이 상부방향(북쪽)에 도달하는 경우만을 생각하므로 조건블록(if)를 사용한다.  

내장블록(Built-In)탭의 제어(Control)드로워를 열고 조건블록(if)을 선택하여 작업영역으로 드래그한다.

사용자블록(My Blocks)탭의 사용자정의(My Definitions)드로워에 자동생성된 가장자리값블록(value edge)을 작업영역으로 드래그한다. 내장블록(Built-In)탭의 수학(Math)드로워를 열고 숫자블록(number 123)을 작업영역으로 드래그하고, 숫자블록의 숫자(123)를 더블클릭하여 1로 정정한다.   또한, 수학(Math)드로워를 열고 등호블록(=)을 작업영역으로 드래그한다.  가장자리값이 1이 되도록, 즉 가장자리가 북쪽이 되도록, 부등호블록(=)의 양측에 가장자리블록(value edge)과 숫자블록(number 1)을 각각 위치한다.  이 조합블록을 조건블록(if)의 소켓(test)에 플러그인한다.

  

7-3. 풍선이 상단에 도달했을 때 육안으로 보이지 않도록 한다.

사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 비지블가능설정블록(set Balloon1.Visible to)을 선택하여 작업영역으로 드래그한다.   또한, 내장블록(Built-In)탭의 논리(Logic)드로워를 열고 불 논리의 거짓블록(false)을 선택하여 작업영역으로 드래그한다.  풍선의 비지블설정블록(set Balloon1.Visible to)의 소켓(to)에 거짓블록(false)을 플러그인한다.

  

7-4. 풍선이 상단에 도달하여 사라진 다음, 풍선의 원래의 위치(캔버스내의 하단중앙: 140, 232)로 리턴하기 위해 풍선의 이동 호출블록(call Balloon1.MoveTo x y)을 사용한다.

사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 이동호출블록(call Balloon1.MoveTo x y)을 선택하여 작업영역으로 드래그한다.  내장블록(Built-In)탭의 수학(Math)드로워를 열고 숫자블록(number 123)을 2회 작업영역으로 드래그하고, 숫자블록(number 123)의 숫자(123)을 더블클릭하여 140과 232으로 각각 정정한다. 이동호출블록(call Ballon1.MoveTo x y의 소켓(x, y)에 정정된 숫자블록(number 140, number 232)을 각각 플러그인한다.

  

7-5. 원래의 위치에 도달한 때에 풍선은 육안으로 보이게 하기 위해 풍선의 비지블설정블록(set Balloon1.Visible to)을 불 논리(Boolean logic)의 참(true)으로 설정한다.

즉, 사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 비지블설정블록(set Balloon1.Visible to)을 선택하여 작업영역으로 드래그한다.   또한, 내장블록(Built-In)탭의논리(Logic)드로워를 열고 불 논리의 참블록(true)을 선택하여 작업영역으로 드래그한다.   풍선의 비지블설정블록(set Balloon1.Visible to)의 소켓(to)에 참블록(true)을 플러그인한다.

  

7-6. 풍선리스트에 저장된 풍선파일의 전체개수(call length of list list)와 풍선인덱스(global BalloonIndex)가 동일한 경우, 풍선인덱스(set global BalloonIndex to)를 0으로 설정한다.

  

7-7.  상기한 바와 같이, 풍선인덱스(set global BalloonIndex to)를 0으로 설정하면, 풍선리스트에 없는 것에 해당한다. 이 때에 풍선인덱스의 값(0)에 1을 가산한 값을 풍선인덱스의 값으로 하여 풍선의 나타남을 반복한다.

  

7-8. 전역풍선리스트(global BalloonList)에서 전역풍선인덱스(global BalloonIndex)에 대응하여 선택된 풍선을 그림으로 설정하는 블록조합은 다음의 스크린샷과 같다.

  

7-9. 풍선이 북쪽에지에서 원래의 위치로 이동하면 디바이스(핸드폰)은 100ms 동안 진동하도록,사운드의 진동블록(Sound.Vibrate)을 100으로 설정한다.

  

7-10. 상기한 복수의 기능블록조합은 풍선이 도달하는 경우에 이용되므로 다음으 스크린샷과 같이 조합할 수 있다.

  

7-11. 상기 설명한 조건블록조합을 가장자리 도달 이벤트핸들러에 조합한 블록의 스크린샷은 다음과 같다.

  

8. 버튼을 터치할 때마다 풍선이 나타나고 사라지는 반복동작을 하는 기능블록을 가진 토글버튼(StartStopButton)에 대해 설명한다.

8-1. 사용자블록(My Blocks)탭의 시작멈춤버튼(StartStopButton)드로워를 열고 나타남 사라짐 버튼의 클릭이벤트핸들러(StartStopButton.Click)을 선택하여 작업영역으로 드래그한다

  

8-2. 풍선이 나타나는 장면과 사라지는 장면을 토글버튼으로 제어하기 위해 조건블록(ifelse)을 사용한다.

내장블록(Built-In)탭의 제어(Control)드로워를 열고 조건블록(ifelse)을 선택하여 작업영역으로 드래그하고, 수학(Math)드로워를 열고 등호블록(=)을 선택하여 작업영역으로 드래그하고, 논리(Logic)드로워를 열고 불 논리의 참블록(true)을 선택하여 작업영역으로 드래그한다.

또한, 사용자블록(My Blocks)탭의 풍선(Ballon1)드로워를 열고, 풍선의 비지블블록(Balloon1.Visible)을 선택하여 작업영역으로 드래그한다.

불 논리의 참블록(true)의 좌, 우측에 풍선비지블블록(Balloon1.Visible)과 참블록(true)을 각각 위치한 조합블록을 조건블록(ifelse)의 소켓(test)에 플러그인한다.

  

8-2-1. 풍선이 육안으로 보이는 경우에는,

사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 비지블설정블록(set Balloon1.Visible to)을 선택하여 작업영역으로 드래그한다.   또한, 내장블록(Built-In)탭의 논리(Logic)드로워를 열고 불 논리의 거짓블록(false)을 선택하여 작업영역으로 드래그한다.  풍선의 비지블설정블록(set Balloon1.Visible to)의 소켓(to)에 거짓블록(false)을 플러그인한다.

  

나타남을 시작멈춤버튼의 텍스트(set SpotButton.Text to)로 설정한다.

  

참고사항: 텍스트블록의 사각형은 한글의 “나타남”을 나타낸다. 텍스트블록(text text)의 텍스트(text)를 더블클릭하여 문자(나타남)를 직접 타이핑하거나 복사해서 붙여 넣기를 한다.

8-2-2. 풍선이 육안으로 보이지 않는 경우에는,

사용자블록(My Blocks)탭의 풍선(Balloon1)드로워를 열고 풍선의 비지블설정블록(set Balloon1.Visible to)을 선택하여 작업영역으로 드래그한다.   또한, 내장블록(Built-In)탭의 논리(Logic)드로워를 열고 불 논리의 참블록(true)을 선택하여 작업영역으로 드래그한다.   풍선의 비지블설정블록(set Balloon1.Visible to)의 소켓(to)에 참블록(true)을 플러그인한다.

  

사라짐을 나타남사라짐버튼의 텍스트(set SpotButton.Text to)로 설정한다.

  

참고사항: 텍스트블록의 사각형은 한글의 “사라짐”을 나타낸다. 텍스트블록(text text)의 텍스트(text)를 더블클릭하여 문자(사라짐)를 직접 타이핑하거나 복사해서 붙여 넣기를 한다.

8-6. 이상 설명한 두그룹의 블록조합을 조건블록(ifelse)의 섹션(then-do, else-do)에 위치시킨다.

  

8-7. 상기 조건블록(ifelse)을 나타남사라짐버튼클릭이벤트핸들러에 조합한 스크린샷은 다음과 같다.

  

참고 사항: 상기 블록조합은 육안으로 관찰되지는 않지만 풍선은 계속 움직이고 있기 때문에 풍선이 상부에 도달하면 새로운 풍선으로 바뀌면서 하부에 다시 나타난다. 즉, 버튼에서 사라짐을 터치할 때 풍선은 멈추지 않고 계속해서 이동하는 버그가 발생한다. 이러한 버그를 제거하기 위해 사라짐을 터치할 때에는 풍선이 멈추도록 구동설정블록(set Ballon1.enabled to)을, 다음의 스크린샷에 나타난 바와 같이, 상기 조건블록에 추가한다.

9. 지금까지 설명한 블록조합을 3개로 나타낸 스크린샷은 다음과 같다.