~ 제 2 단계 ~
1. 본 예제의 제 2 단계에서는 인사말 장면을 위한 타이머를 1개 사용하고 불꽃놀이장면을 위한 타이머를 9 개 사용하고 불꽃놀이용 타이머를 관리하는 메인 클록을 사용하는 구성에 대해 설명한다.
1-1. 프로젝트의 명칭은 NewYearBowVersion02로 한다.
1-2. 제 2 단계에서 사용된 그림파일은 디자이너창의 미디어컬럼의 파일명칭을 클릭하여 컴퓨터에 다운로드할 수 있다. 디자이너창의 그림파일은 다음의 스크린샷과 같이 나타난다.
또는, 압축파일(NewYearBowVersion02.zip)을 풀어서 폴더(assets)안에 있는 그림파일을 사용하여도 된다. 폴더(assets)안의 그림파일은 다음의 스크린샷과 같이 나타난다.
참고사항: 상기 9 개의 불꽃은 각각 4개의 층으로 이루어져 있고 제 2 단계에서는 4 개의 층으로 구분하여 사용한다.
1-3. 디자이너창의 전체를 나타내는 스크린샷은 다음과 같다.
참고 사항: 디자이너 창에서 스크린의 헤드를 클릭하고, 속성컬럼의 아이콘(Icon)난에서 선택된 그림파일(universe.png)을 선택한다. 이 그림은 안드로이폰이나 어뮬레이터에 앱을 다운로드하면, 앱의 아이콘으로 표시된다. 이 아이콘을 디폴트로 하면 앱인벤터의 로고가 앱에 표시된다. 경우에 따라서, 아이콘을 선택하라는 알림메시지가 나타나는 경우도 있다.
참고 사항: 상기 디자이너창의 구성요소와 이하 설명하는 블록에디터에서 완성한 블록에 연동하는 넥서스S의 세배와 불꽃놀이 화면은 이하의 스크린샷과 같다.
1-2-1. 상기 스크린 샷에서의 세배의 첫장면은, 그림파일(introduction01.png)에 해당하고, 버튼(Button1)의 해당 속성컬럼의 이미지(Image)난에서 상기 그림파일을 선택하면 상기 스크린샷과 같이 나타난다. 폭을 Fill parent로 설정한 수평배열구성요소내에 그림파일을 배치하고, 폭을 65 픽셀로 설정한 수평구성요소를 그림파일의 좌측에 배치하여, 그림파일이 중앙에 위치한다.
1-2-2. 캔버스위에 이미지스프라이트(ImageSprite)을 9 개 배치하고, 이미지스프라이트의 명칭을 각각 MagentaSprite1, RedSprite2, GreenSprite3, BrownSprite4, BlueSprite5, ThinGreenSprite6, ThinBluesprite7, PurpleSprite8, ThickBrownSprite9로 변경한다. 즉, 제 1 단계와 마찬가지로 변경한다.
1-2-3. 세배 장면의 연속동작을 위해 단일의 클록(BowClock1)을 사용한다. 타이머 구동(TimerEnabled)난의 체크표시를 지우고, 타임인터벌은 500 msec 로 한다.
1-2-4. 불꽃장면의 연속동작을 위해 9 개의 클록을 사용한다. 이들 명칭을 각각 MagentaClock, RedClock, GreenClock, BrownClock, BlueClock, ThinGreenClock, ThinBlueClock, PurpleClock, ThickBrownClock으로 변경한다. 타이머 구동(TimerEnabled)난의 체크표시를 지우고, 타임인터벌은 50 msec 로 한다.
1-2-5. 불꽃의 연속동작을 전체적으로 제어하는 클록(Clock1)을 1 개 사용한다. 타이머 구동(TimerEnabled)난의 체크표시를 지우고, 타임인터벌은 100 msec로 한다.
2. 블록에디터창에서 블록의 조합작업에 대해 설명한다.
2-1. 이미지리스트는 세배의 연속동작을 위한 그림파일을 순차적으로 정렬한 목록이다.
2-2. 인덱스에 대해 설명한다.
2-2-1. 이미지인덱스는 세배의 동작순서를 제어하기 위해 사용되는 변수이다.
2-2-2. 스프라이트인덱스는 9 종류의 불꽃의 각각에 대해서 4 가지 형상을 순차적으로 나타나도록 제어하기 위해 사용되는 변수이다.
2-2-3. 파이어워크인덱스는 9 종류의 불꽃을 순차적으로 나타나도록 제어하기 위해 사용되는 변수이다.
2-3. 스크린초기화블록은 앱을 시작할 때 초기화하는 블록으로서 이미지리스트에서 첫번째 이미지(newyearbow01.png)를 선택하여 버튼의 이미지로 나타난다.
참고 사항: 세배 장면은 버튼의 이미지로서 나타난다.
2-4. 버튼을 클릭하면, 즉 인사말 장면을 터치하면, 불꽃놀이를 전반적으로 제어하는 메인 콘트롤 클록의 타이머를 중지하고(set Clock1.TimerEnabled to, false), 마젠타 스프라이트, 적색스프라이트, 녹색스프라이트, 갈색스프라이트, 청색스프라이트, 연한 녹색스프라이트, 연한 청색스프라이트, 자색스프라이트 및 진한 갈색스프라이트 등이 화면에서 실질적으로 사라지고, 세배 화면에 관련된 이미지인덱스를 0으로 초기화하고, 세배의 바뀜을 제어하는 타이머를 구동한다(set BowClock1.TimerEnabled to, true).
2-5. 세배 장면을 클릭하면 상기한 바와 같이 세배의 바뀜을 제어하는 타이머가 구동된다. 이 타이머에 의해 이미지 인덱스가 1만큼 증가하고, 이미지리스트에서 증가한 인덱스에 의거하여 이미지를 선택하여 버튼이미지로 하고, 이미지인덱스가 이미지리스트의 이미지 파일의 개수와 동일하게 될 때에 타이머 자신은 동작을 멈추고(set BowClock1.TimerEnabled to, false), 파이어워크인덱스를 0으로 초기화하고, 불꽃놀이 전체를 제어하는 클록을 구동한다(set Clock1.TimerEnabled to, true).
2-6. 세배바뀜을 제어하는 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머에 의해 파이어워크인덱스를 1만큼 증가하여 0 + 1 = 1 이 되고, 절차블록 1을 호출한다.
2-7. 절차블록 1에 의해, 마젠타스프라이트의 X, Y좌표는 캔버스에서 (50, 10)으로 설정되고, 파이어워크 인덱스를 제어하는 타이머 자신은 구동을 멈추고, 마젠타클록의 타이머가 구동된다.
2-8. 절차블록 1에 의해 구동된 마젠타클록의 타이머에 의해, 마젠타스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1 만큼 증가시켜서 스프라이트인덱스가 1 (0 + 1)로 되어 마젠타색 불꽃의 제 1 형상이 마젠타스프라이트의 그림으로 나타나고 타이머의 타임인터벌이 경과하면, 스프라이트인덱스가 2 (1 + 1)로 되어 마젠타색 불꽃의 제 2 형상이 마젠타스프라이트의 그림으로 나타나고 타이머의 타임인터벌이 경과하면, 스프라이트인덱스가 3 (2 + 1)로 되어 마젠타색 불꽃의 제 3 형상이 마젠타스프라이트의 그림으로 나타나고 타이머의 타임인터벌이 경과하면, 스프라이트인덱스가 4 (3 + 1)로 되어 마젠타색 불꽃의 제 4 형상이 마젠타스프라이트의 그림으로 나타나고, 파이어워크의 메인 콘트롤 타이머를 구동하고(set Clock1.TimerEnabled to, true), 마젠타클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
참고 사항: “이미지스프라이트가 실질적으로 나타난다”란, 스프라이트를 화면에서 육안으로 직접 볼수는 없지만 이미지 스프라이트의 그림을 볼수 있는 상태를 말한다. 이하의 설명에서도 이와 같은 의미로 사용된다.
2-9. 마젠타 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 1 + 1 = 2로 되고, 절차블록 1을 호출한다.
2-10. 파이어워크인덱스가 2이므로 절차블록 1에서 절차블록 2를 호출한다.
2-11. 절차블록 2에 의해, 적색스프라이트의 X, Y좌표는 캔버스에서 {(캔버스폭 – 150), 10}으로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 적색클록의 타이머가 구동된다.
2-12. 절차블록 2에 의해 구동된 적색클록의 타이머에 의해, 적색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1 만큼 증가시켜서 스프라이트인덱스가 1 (0 + 1)로 되어 적색 불꽃의 제 1 형상이 적색스프라이트의 그림으로 나타나고 타이머의 타임인터벌이 경과하면, 스프라이트인덱스가 2 (1 + 1)로 되어 적색 불꽃의 제 2 형상이 적색스프라이트의 그림으로 나타나고 타이머의 타임인터벌이 경과하면, 스프라이트인덱스가 3 (2 + 1)로 되어 적색 불꽃의 제 3 형상이 적색스프라이트의 그림으로 나타나고 타이머의 타임인터벌이 경과하면, 스프라이트인덱스가 4 (3 + 1)로 되어 적색 불꽃의 제 4 형상이 적색스프라이트의 그림으로 나타나고, 파이어워크의 메인콘트롤타이머를 구동하고, 적색클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
참고 사항: 설명이 중복되는 부분이 많으므로 이 후 설명에서는 간략하게 설명한다.
참고 사항: 파이어워크인덱스를 2로 설정하는 블록은 생략하여도 되지만, 확인하는 차원에서 삽입한다. 이 후의 컬러타이머에서도 마찬가지이다.
2-13. 적색 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 2 + 1 = 3으로 되어, 절차블록 1을 호출하고, 절차블록 1은 절차블록 2를 호출하고, 절차블록 2는 절차블록 3을 호출한다.
절차블록 3에 의해, 녹색스프라이트의 X, Y좌표는 캔버스에서 {(캔버스폭 / 2) – 50, 75}로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 녹색클록의 타이머가 구동된다.
2-14. 마찬가지로, 절차블록 3에 의해 구동된 녹색클록의 타이머에 의해, 녹색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1만큼 증가시키면서 녹색불꽃은 4 종류의 형상으로 연속해서 변화한다. 다음에, 파이어워크의 메인콘트롤타이머를 구동하고, 녹색클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
2-15. 녹색 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 3 + 1 = 4으로 되어, 마찬가지로 절차블록 4를 호출한다.
절차블록 4에 의해, 갈색스프라이트의 X, Y좌표는 캔버스에서 (40, 135)로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 갈색클록의 타이머가 구동된다.
2-16. 마찬가지로, 절차블록 4에 의해 구동된 갈색클록의 타이머에 의해, 갈색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1만큼 증가시키면서 갈색불꽃은 4 종류의 형상으로 연속해서 변화한다. 다음에, 파이어워크의 메인콘트롤타이머를 구동하고, 갈색클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
2-17. 갈색 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 4 + 1 = 5로 되어, 마찬가지로 절차블록을 연속적으로 호출하여 절차블록 5를 호출한다.
절차블록 5에 의해, 청색스프라이트의 X, Y좌표는 캔버스에서 {(캔버스폭 – 140), 135}로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 청색클록의 타이머가 구동된다.
2-18. 마찬가지로, 절차블록 5에 의해 구동된 청색클록의 타이머에 의해, 청색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1만큼 증가시키면서 청색불꽃은 4 종류의 형상으로 연속해서 변화한다. 다음에, 파이어워크의 메인콘트롤타이머를 구동하고, 청색클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
2-19. 청색 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 5 + 1 = 6으로 되어, 마찬가지로 절차블록을 연속적으로 호출하여 절차블록 6을 호출한다.
절차블록 6에 의해, 연한 녹색스프라이트의 X, Y좌표는 캔버스에서 {5, (캔버스높이 – 30)}으로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 연한 녹색클록의 타이머가 구동된다.
2-20. 마찬가지로, 절차블록 6에 의해 구동된 연한 녹색클록의 타이머에 의해, 연한 녹색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1만큼 증가시키면서 연한 녹색불꽃은 4 종류의 형상으로 연속해서 변화한다. 다음에, 파이어워크의 메인콘트롤타이머를 구동하고, 연한 녹색클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
2-21. 연한 녹색 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 6 + 1 = 7로 되어, 마찬가지로 절차블록을 연속적으로 호출하여 절차블록 7을 호출한다.
절차블록 7에 의해, 연한 청색스프라이트의 X, Y좌표는 캔버스에서 {75, (캔버스높이 - 30)}으로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 연한 청색클록의 타이머가 구동된다.
2-22. 마찬가지로, 절차블록 7에 의해 구동된 연한 청색클록의 타이머에 의해, 연한 청색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1만큼 증가시키면서 연한 청색불꽃은 4 종류의 형상으로 연속해서 변화한다. 다음에, 파이어워크의 메인콘트롤타이머를 구동하고, 연한 청색클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
2-24. 연한 청색 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 7 + 1 = 8로 되어, 마찬가지로 절차블록을 연속적으로 호출하여 절차블록 8을 호출한다.
절차블록 8에 의해, 자색스프라이트의 X, Y좌표는 캔버스에서 {150, (캔버스높이 - 30)}으로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 자색클록의 타이머가 구동된다.
2-25. 마찬가지로, 절차블록 8에 의해 구동된 자색클록의 타이머에 의해, 자색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1만큼 증가시키면서 자색불꽃은 4 종류의 형상으로 연속해서 변화한다. 다음에, 파이어워크의 메인콘트롤타이머를 구동하고, 자색클록의 타이머 자신은 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
2-26. 자색 클록의 타이머에 의해 구동되는 파이어워크의 메인 콘트롤 타이머(Clock1.Timer)에 의해 파이어워크인덱스를 1 만큼 증가하여 8 + 1 = 9로 되어, 마찬가지로 절차블록을 연속적으로 호출하여 절차블록 9를 호출한다.
절차블록 9에 의해, 진한 갈색스프라이트의 X, Y좌표는 캔버스에서 {(캔버스폭 - 105), (캔버스높이 - 30)}로 설정되고, 파이어워크 인덱스를 제어하는 메인 콘트롤 타이머 자신은 구동을 멈추고, 진한 갈색클록의 타이머가 구동된다.
2-27. 마찬가지로, 절차블록 9에 의해 구동된 진한 갈색클록의 타이머에 의해, 진한 갈색스프라이트가 실질적으로 나타나고, 불꽃의 형상의 종류를 식별하는 스프라이트인덱스를 1만큼 증가시키면서 진한 갈색불꽃은 4 종류의 형상으로 연속해서 변화한다. 다음에, 파이어워크의 메인콘트롤타이머를 구동을 중지하고, 자색클록의 타이머 자신도 구동을 중지하고, 불꽃형상은 일단락되어 스프라이트인덱스는 0으로 초기화한다.
3. 상기한 바와 같이 인사말 장면을 터치하면, 인사말이 연속해서 나타나고, 불꽃놀이가 시작되어 9 종류의 불꽃이 캔버스에 나타나고 모든 동작은 멈추게 된다.
4. 지금까지의 설명한 블록을 종합한 10개의 스크린샷을 이하 나타낸다.
