7. 배경화면의 추가작업 등
이들의 버튼에 잠자리터치(dragonfig.touched)의 기능을 추가하여 버튼을 터치할 때마다, 상기한 바와 같은 페인트색의 변경 및 잠자리의 이동과 정지를 반복한다. 두 버튼의 차이점은 캔버스 페인트색 변경 버튼(ColorButton)에만 캔버스에 직접 그린 그림을 모두 지우는 블록(call Canvas1.Clear)을 추가한 점이다.
1-1. 디자이너창에서 다른 이름으로 저장하기 버튼(Save As)을 클릭하여 새로운 프로젝트 명칭을 DragonfigAniamtionVersion으로 한다.
1-2. 이하의 스크린샷에 나타난 바와 같이, 원형버튼, 임의 형상의 버튼, 배경화면용 버튼 앱의 아이콘 및 잠자리 등을 준비하여 미디어 컬럼에서 업로드한다. 이전에 업로드한 두개의 잠자리 이미지는 삭제한다.
1-2-1. 디자이너 창의 캔버스 속성(Properties)컬럼에서 캔버스의 배경화면의 파일(greengrass.png)을 배경이미지(BackgroundImage)로 선택한다. 캔버스의 폭은, 상기 참고사항에서 설명한 바와 같이, Fill parent로 하고 높이는 450 픽셀로 한다.
1-2-2. 원형버튼(ImageButton)과 캔버스 페인트색 변경 버튼(ColorButton)도 해당 버튼의 속성컬럼에서 이미지 파일(cyan.png, buttonversion01)을 이미지(image)로 각각 선택한다.
두 버튼을 수평으로 정렬하기 위해, 폭을 Fill parent로 설정한 수평배열구성요소에 배치한다.또한, 화면의 상단과 20 픽셀정도 여유를 두고 두 버튼의 상부에 수직배열구성요소를 드래그하여 설치하고 수직방향의 속성컬럼에서 폭을 Fill parent로 하고 높이를 20 픽셀로 설정한다. 원형버튼과 화면좌측 사이의 간격 및 원형버튼과 페인트색 변경 버튼 사이의 간격을 유지하기 위해 이들 사이에 각각 수평배열구성요소를 드래그하여 설치하고 속성컬럼에서 폭과 높이를 각각5 픽셀, 10 픽셀로 설정한다.
이와 같이 설정한 디자이너 창의 확대부분은 다음의 스크린샷과 같다.
1-2-3. 본 예제에서는 잠자리의 그림파일(dragonfig1.png)은 1 개만 사용한다. 상기에서 설명한 바와 같이 원래의 잠자리 그림파일은 2개 모두 삭제한다.
1-2-4. 클록을 추가하고 그 명칭을 ColorButtonClock으로 정정한다. 이 클록은 상기한 두 버튼에 고정이미지가 동시에 나타내기 위하여 사용한다.
2. 컬러리스트, 이미지리스트 및 이미지버전리스트에 대해 설명한다.
2-1. 컬러리스트의 컬러는 앱인벤터에 내장된 컬러이므로 별도로 업로드할 필요는 없다. 이 컬러리스트는 캔버스의 페인트색으로 직접 사용하는 색을 미리 준비한 리스트이다.
아래의 스크린샷에 나타난 바와 같이 컬러로 표시된 블록은 블록에디터에서 직접 생성할 수 있다. 블록에 기재된 번호는 앱인벤터컬러번호(App Inventor Color Number)로서 앱인벤터 컬러 차트(App Inventor Color Chart)가 게시된 사이트
이 컬러차트에는 자연색에 근접한 컬러가 다양하게 준비되어 있다.
참고 사항: 컬러는 모두 숫자로 표시할 수 있다.
2-2. 이미지리스트와 이미지버전리스트는 각각 상기 컬러리스트의 색과 동일한 순서로 동일색을 나타내는 파일이 나열된 리스트이다.
컬러리스트의 색과 동일하게 하기 위해 포토샵 등을 이용하여 앱인벤터 컬러 리스트에 있는 컬러를 그대로 아래의 이미지파일에 복사한다. 따라서, 앱인벤터에 내장된 컬러와 동일한 컬러를 독립적으로 블록을 생성할 수 있다.
디자이너 창에서 업로드된 파일은 에디터블록에서 블록으로 생성하려면, 텍스트블록(text text)에서 상기 업로드된 파일의 명칭을 아래의 스크린샷과 같이 기재하면 된다.
이미지리스트에는 고정 이미지 파일이 나열되어 있고 이미지버전리스트에는 순간 이미지 파일이 나열되어 있다.
원형버튼(ImageButton)과 캔버스 페인트색 변경 버튼(ColorButton) 중 어느 한 버튼을 터치할 때마다 이미지리스트와 이미지버전리스트가 동기하여 두 리스트에서 순차적으로 해당 파일이 선택된다. 이와 같이 동기화하도록 현재컬러인덱스(CurrentColorIndex)를 사용한다.
2-3. 캔버스 페인트색 변경 버튼(ColorButton)은, 캔버스 페인트색 변경 버튼(set ColorButton.Image to)에 순간이미지(buttonversion02.png)로 설정하고, 해당 타이머(ColorButtonClock.TimerEnabled)를 구동하고, 현재 컬러 인덱스(set global currentColorIndex to)를 1만큼 증가시키고, 컬러리스트의 컬러개수를 초과할 때마다 현재 컬러 인덱스를 1로 설정하여 순환한다.
현재 컬러인덱스에 의거하여 컬러리스트(ColorList)와 이미지버전리스트(ImageVersionList)에서 각각 컬러를 선택하여 캔버스의 페인트색(Canvas1.PaintColor)과 원형버튼의 순간이미지(ImageButton.Image)로 각각 설정한다.
잠자리를 터치할 때에 발생하는 기능블록을 그대로 사용하고, 캔버스에 그려진 페인트색을 지우는 블록(call Canvas1.Clear)을 추가하여 캔버스에 그린 그림을 한꺼번에 삭제한다.
2-4. 원형버튼(ImageButton)은 상기 캔버스 페인트색 변경 버튼(ColorButton)의 조합블록과 동일하다. 차이점은 캔버스에 그려진 페인트색을 지우는 블록(call Canvas1.Clear)을 추가하지 않는다.
2-5. 원형버튼(ImageButton) 또는 캔버스 페인트색 변경 버튼(ColorButton) 중 어느 한 버튼을 터치하면 상기한 바와 같이 타이머(ColorButtonClock.Timer)를 구동한다.
따라서, 캔버스 페인트색 변경 버튼의 이미지(set ColorButton.Image to)를 고정 이미지(buttonversion01.png)로 설정하고, 원형버튼의 이미지(set ImageButton.Image to)는 현재컬러인덱스(global currentColorIndex)에 의거하여 이미지리스트(global ImageList)에서 선택되는 고정이미지로 설정하고, 타이머 자신은 구동을 정지한다. 그 결과, 버튼을 터치할 때마다 순간 이미지가 나타나고 해당 타이머의 구동에 의해 고정이미지로 전환된다.
2-6. 스크린의 초기화블록(Screen1.Initialize)에서는 잠자리의 이동위치를 절대위치에서 상대위치로 변경하고 캔버스의 페인트색도 시안(number -16711681)으로 변경하고, 캔버스 페인트색 변경 버튼의 이미지(set ColorButton.Image to)를 고정이미지(buttonversion01.png)로 설정하고, “잠자리를 날게 하려면 잠자리를 터치하세요.”라고 기재된 임시 통보서를 호출한다.
참고 사항: 디자이너창에서 해당 속성컬럼의 이미지란에 해당 해당 이미지가 설정되어 있으면,캔버스 페인트색 변경 버튼의 이미지는 별도로 설정하지 않아도 된다.
2-7. 이전의 예제에서는 잠자리의 이미지가 두 개로 구별되어 있지만 본 예제에서는 잠자리의 이미지를 한 개만 사용한다. 이에 관련하여 잠자리의 이미지파일을 모두 삭제한다.
2-7-1. 잠자리 터치블록
2-7-2. 잠자리 드래그블록
2-7-3. 잠자리 가장자리 도달블록
2-8. 캔버스에서 터치하는 블록은 변경하지 않고, 드래그하는 블록를 다음과 같이 간단하게 변경한다. 즉, 캔버스에서 임의의 위치에서 드래그하면 선을 그리는 블록으로 변경한다.
3. 지금까지의 설명한 블록을 종합한 4개의 스크린샷을 이하 나타낸다.
5. 요약
본장에서는 캔버스위에서 이미지스프라이트(잠자리)의 애니메이션에 대해서 중접적으로 설명하였다. 즉, 4개의 타이머의 연동에 의한 잠자리의 회전방법에 대해 설명하였다. 구체적으로는, 이미지스프라이트(잠자리), 잠자리 터치에 의한 회전, 멈춤, 이동, 잠자리의 드래그에 의한 회전, 잠자리의 가장자리 도달에 의한 회전, 캔버스 터치에 의한 잠자리 이동 및 캔버스 위의 드래그에 의한 캔버스의 색칠, 잠자리의 이동 및 복수의 타이머의 연동에 의한 잠자리의 회전 등에 대해 설명하였다.
또한, 버튼을 터치할 때마다 순간 이미지가 나타나도록 별도의 타이머를 사용하고 이 타이머를 이용하여 두 버튼간의 연동를 복습하였다.
댓글 없음:
댓글 쓰기