지금부터 제 4 장에서 설명한 인사말과 동일한 블록을 갖춘 세배와 불꽃놀이를 추가하는 앱으로서 제 1 단계 내지 제 4 단계에 걸쳐 살펴본다.
~ 제 1 단계 ~
1. 본 예제의 제 1 단계에서는 세배를 위한 타이머를 4개 사용하고 불꽃놀이장면을 위한 타이머를 9 개 사용하는 구성에 대해 설명한다.
1-1. 프로젝트의 명칭을 NewYearBowVersion으로 한다.
1-2. 제 1 단계에서 사용하는 그림파일은 디자이너창의 미디어컬럼의 파일명칭을 클릭하여 컴퓨터에 다운로드할 수 있다. 디자이너창의 그림파일은 다음의 스크린샷과 같이 나타난다.
또는, 압축파일(NewYearBowVersion.zip)을 풀어서 폴더(assets)안에 있는 그림파일을 사용하여도 된다. 폴더(assets)안의 그림파일은 다음의 스크린샷과 같이 나타난다.
참고사항: 상기 9 개의 불꽃은 각각 4개의 층으로 이루어져 있고, 제 1 단계에서는 1 개의 층만을 사용하고, 제 2, 3, 4 단계에서는 4 개의 층으로 구분하여 사용하고, 특히 제 4 단계에서는 3 개의 층을 랜덤발생기에 의해 다채로운 색을 순간 조합하여 사용한다.
1-3. 디자이너창의 전체를 나타내는 스크린샷은 다음과 같다.
참고 사항: 상기 디자이너창과 이후 설명하는 블록에디터창에서 완성한 블록에 연동하는 넥서스S의 인사말과 불꽃놀이 화면은 다음의 스크린샷과 같이 나타난다.
1-2-1. 상기 스크린 샷에서 세배의 첫 장면은, 그림파일(newyearbow01.png)에 해당하고, 버튼(Button1)의 해당 속성컬럼의 이미지(Image)난에서 상기 그림파일을 선택하면 상기와 같이 나타난다.
1-2-2. 캔버스위에 이미지스프라이트(ImageSprite)을 9개 배치하고, 해당 구성요소(Components)컬럼에서 이미지스프라이트의 명칭을 각각 MagentaSprite1, RedSprite2, GreenSprite3, BrownSprite4, BlueSprite5, ThinGreenSprite6, ThinBluesprite7, PurpleSprite8, ThickBrownSprite9로 정정한다.
1-2-3. 세배장면의 연속동작을 위해 클록을 4개 사용한다. 해당 구성요소(Components)컬럼에서 이들 클록의 명칭을 BowClock1, BowClock2 BowClock3, BowClock4로 각각 변경한다.
1-2-4. 불꽃장면의 연속동작을 위해 클록을 9개 사용한다.
2. 블록에디터창에서 블록의 조합작업에 대해 설명한다.
2-1. 4종류의 인사말의 연속동작에 대해 설명한다.
2-1-1. 첫번째 타이머(BowClock1.Timer)에 의해 세배의 제 1 장면을 버튼이미지로 설정하고{(set Button1.image to), (text newyearbow01.png)}, 첫번째 타이머 자신은 동작을 멈추고{(set BowClock1.TimerEnabled to), (false)}, 세배의 제 2 장면(newyearbow02.png)을 나타내는 두번째 타이머를 구동한다{(set BowClock2.TimerEnabled to), (true)}.
즉, 세배의 제 1 장면을 타임인터벌기간(250msec)동안 유지한 다음, 첫번째 타이머는 동작을 멈추고 동시에 두번째 타이머가 구동된다.
2-1-2. 두번째 타이머(BowClock2.Timer)에 의해 세배의 제 2 장면을 버튼이미지로 설정하고{(set Button1.image to), (text newyearbow02.png)}, 두번째 타이머 자신은 동작을 멈추고{(set BowClock2.TimerEnabled to), (false)}, 세배의 제 3 장면(newyearbow03.png)을 나타내는 세번째 타이머를 구동한다{(set BowClock3.TimerEnabled to), (true)}.
즉, 세배의 제 2 장면을 타임인터벌기간(1000msec)동안 유지한 다음, 두번째 타이머는 동작을 멈추고 동시에 세번째 타이머가 구동된다.
2-1-3. 세번째 타이머(BowClock3.Timer)에 의해 세배의 제 3 장면을 버튼이미지로 설정하고{(set Button1.image to), (text newyearbow03.png)}, 세번째 타이머 자신은 동작을 멈추고{(set BowClock3.TimerEnabled to), (false)}, 세배의 제 4 장면(newyearbow04.png)을 나타내는 네번째 타이머를 구동한다{(set BowClock4.TimerEnabled to), (true)}.
즉, 세배의 제 3 장면을 타임인터벌기간(1000msec)동안 유지한 다음, 세번째 타이머는 동작을 멈추고 동시에 네번째 타이머가 구동된다.
즉, 세배의 제 4 장면을 타임인터벌기간(1000msec)동안 유지한 다음, 네번째 타이머는 동작을 멈추고 동시에 불꽃놀이용 제 1 타이머가 구동된다.
2-2. 불꽃놀이의 연속동작에 대해 설명한다.
2-2-1. 상기 세배용 네번째 타이머(BowClock4.Timer)에 의해 구동되는 불꽃놀이용 제 1 타이이머(Clock1.Timer)에 의해 마젠타 스프라이트가 실질적으로 나타나고{(set MagentaSprite.Visible to), (true)}, 마젠타불꽃이 나타나고{(set MagentaSprite1.Picture to), (text fireworkmagenta.png)}, 제 1 타이머 자신은 동작을 멈추고{(Clock1.TimerEnabled to), (false)}, 적색불꽃을 나타나게 하는 제 2 타이머를 구동한다{(Clock2.TimerEnabled to), (true)}.
참고 사항: “이미지스프라이트가 실질적으로 나타난다”란, 스프라이트를 화면에서 육안으로 직접 볼수는 없지만 이미지 스프라이트의 그림(불꽃)을 볼수 있도록 하는 상태를 말한다. 이하의 설명에서도 이와 같은 의미로 사용된다.
2-2-2. 불꽃놀이용 제 2 타이이머(Clock2.Timer)에 의해 적색 스프라이트가 실질적으로 나타나고{(set RedSprite2.visible to), (true)}, 적색불꽃이 화면에 나타나고{(set redSprite2.Picture to), (fireworkred.png)}, 제 2 타이머 자신은 동작을 멈추고{(set Clock2.TimerEnabled to), (false)}, 녹색불꽃을 나타나게 하는 제 3 타이머를 구동한다{(set Clock3.TimerEnabled to), (true)}.
2-2-3. 불꽃놀이용 제 3 타이이머(Clock3.Timer)에 의해 녹색 스프라이트가 실질적으로 나타나고{(set GreenSprite3.Visible to), (true)}, 녹색불꽃이 화면에 나타나고{(set GreenSprite3.Picture to), (fireworkgreen.png)}, 제 3 타이머 자신은 동작을 멈추고{(set Clock3.TimerEnabled to), (false)}, 갈색불꽃을 나타나게 하는 제 4 타이머를 구동한다{(set Clock4.TimerEnabled to), (true)}.
2-2-4. 불꽃놀이용 제 4 타이이머(Clock4.Timer)에 의해 갈색 스프라이트가 실질적으로 나타나고{(set BrownSprite4.Visible to), (true)}, 갈색불꽃이 화면에 나타나고{(set BrownSprite4.Picture to), (fireworkbrown.png)}, 제 4 타이머 자신은 동작을 멈추고{(set Clock4.TimerEnabled to), (false)}, 청색불꽃을 나타나게 하는 제 5 타이머를 구동한다{(set Clock5.TimerEnabled to), (true)}.
2-2-5. 불꽃놀이용 제 5 타이이머(Clock5.Timer)에 의해 청색 스프라이트가 실질적으로 나타나고{(set BlueSprite5.Visible to), (true)}, 청색불꽃이 화면에 나타나고{(set BlueSprite5.Picture to), (fireworkblue.png)}, 제 5 타이머 자신은 동작을 멈추고{(set Clock5.TimerEnabled to), (false)}, 엷은 녹색불꽃을 나타나게 하는 제 6 타이머를 구동한다{(set Clock6.TimerEnabled to), (true)}.
2-2-6. 불꽃놀이용 제 6 타이이머(Clock6.Timer)에 의해 엷은 녹색 스프라이트가 실질적으로 나타나고{(set ThinGreenSprite6.Visible to), (true)}, 엷은 녹색불꽃이 화면에 나타나고{(set ThinGreenSprite6.Picture to), (fireworkthingreen.png)}, 제 6 타이머 자신은 동작을 멈추고{(set Clock6.TimerEnabled to), (false)}, 엷은 청색불꽃을 나타나게 하는 제 7 타이머를 구동한다{(set Clock7.TimerEnabled to), (true)}.
2-2-7. 불꽃놀이용 제 7 타이이머(Clock7.Timer)에 의해 엷은 청색 스프라이트가 실질적으로 나타나고{(set ThinBlueSprite6.Visible to), (true)}, 엷은 청색불꽃이 화면에 나타나고{(set ThinBlueSprite7.Picture to), (fireworkthinblue.png)}, 제 7 타이머 자신은 동작을 멈추고{(set Clock7.TimerEnabled to), (false)}, 자색불꽃을 나타나게 하는 제 8 타이머를 구동한다{(set Clock8.TimerEnabled to), (true)}.
2-2-8. 불꽃놀이용 제 8 타이이머(Clock8.Timer)에 의해 자색스프라이트가 실질적으로 나타나고{(set PurleSprite8.Visible to), (true)}, 자색불꽃이 화면에 나타나고{(set PurpleSprite8.Picture to), (fireworkpurple.png)}, 제 8 타이머 자신은 동작을 멈추고{(set Clock8.TimerEnabled to), (false)}, 진한 갈색불꽃을 나타나게 하는 제 9 타이머를 구동한다{(set Clock9.TimerEnabled to), (true)}.
2-2-9. 불꽃놀이용 제 9 타이이머(Clock9.Timer)에 의해 진한 갈색스프라이트가 실질적으로 나타나고{(set ThickBrownSprite9.Visible to), (true)}, 진한 갈색불꽃이 화면에 나타나고{(set ThickBrownSprite9.Picture to), (fireworkthickbrown.png)}, 인사말의 제 1 장면을 버튼이미지로 설정하고{(set Button1.image to), (text introduction01.png)}, 제 9 타이머 자신은 동작을 멈춘다{(set Clock9.TimerEnabled to), (false)}.
2-2-10. 상기한 바와 같이 타이머의 연속적이 동작이 완료된다.
2-3. 세배의 그림을 버튼으로 사용한다. 이 버튼의 클릭이벤트핸들러는 마젠타스프라이트, 적색스프라이트, 녹색스프라이트, 갈색스프라이트, 청색스프라이트, 엷은 녹색스프라이트, 엷은 청색스프라이트, 자색스프라이트 및 진한 갈색스프라이트 등을 화면에서 사라지게 설정하고, 세배를 시작하는 첫번째 타이머(BowClock1.Timer)를 구동하고, 세배의 제 1 장면을 버튼이미지로 설정한다.
3. 지금까지의 설명한 블록을 종합한 2개의 스크린 샷을 이하 나타낸다.
