PART 1 앱 인벤터 프로젝트 02 페인트 통

2차원 그래픽 프로그램 1970년대 앱 인벤터에서는 아주 쉽게 화려한 그래픽 가능 개인용 컴퓨터 잠재력을 보여주는 초창기 프 로그램 매우 어렵고 조잡한 그래픽 화면 앱 인벤터에서는 아주 쉽게 화려한 그래픽 가능 여기서는 <페이트 통>이라는 간단한 그림 그리기 앱 3장 <두더지 잡기>, 5장 <무당벌레 추적> 게임 앱

무엇을 개발하는가? <페인트 통> 앱에서 개발하는 기능들 가상의 페이트 통에 손가락을 담가 색깔 선택 손가락으로 화면에 선을 그림 화면을 찍어 점을 그림 버튼을 클릭하여 화면을 깨끗이 지움 버튼을 클릭하여 점의 크기 조절 카메라로 사진을 찍고 그 위에 그림을 그림

무엇을 배우는가? <페인트 통> 앱을 만들며 배우는 것들 그림을 그릴 Canvas 컴포넌트 화면을 드래그하거나 터치할 때 발생하는 이벤트 처리 Arrangement 컴포넌트로 여러 컴포넌트를 배치 매개변수를 갖는 이벤트 처리기 변수 사용

프로젝트 생성 프로젝트 만들고, 라이브 테스팅 연결 세 가지 중요한 이름 프로젝트 이름은 “PaintPot” Screen1의 Title 속성은 “페인트 통” 세 가지 중요한 이름 프로젝트 이름 컴포넌트 이름 Screen1 화면 제목 Note _ 라이브 테스팅에 대한 문서는 http://appinventor.chonbuk.ac.kr

컴포넌트 설계 <페인트 통> 앱을 만들 때 사용하는 컴포넌트 빨강, 파랑, 초록에 해당하는 세 개의 Button 컴포넌트 버튼을 한 줄에 배치하는 데 사용하는 HorizontalArrangement 컴포넌트 화면을 지우는 Button 컴포넌트 점의 크기를 바꾸는 데 사용할 Button 컴포넌트 두 개 사진을 찍으라는 명령을 내리는 데 사용할 Button 컴포넌트 그림을 그리는 데 사용할 Canvas 컴포넌트 사진을 찍는데 사용할 Camera 컴포넌트 (보이지 않는 컴포넌트)

색깔 버튼 만들기 절차 Button 컴포넌트 끌어오기  Text 속성을 “빨강”, BackgroundColor 속성을 빨간색 Button1이던 버튼 이름을 RedButton으로 바꿈 같은 방법으로 BlueButton과 GreenButton을 만듦 컴포넌트에게 의미 있는 이름을 붙여주면 프로그램을 이해하는데 크게 도움이 됨

라이브 테스팅

Arrangement 컴포넌트로 깔끔하게 버튼 배치하기 절차 Layout 서랍에서 HorizontalArrangement 컴포넌트를 끌어옴 Width 속성을 Fill parent (화면 전체 너비 차지) 색깔 버튼을 HorizontalArrangement로 옮김 (세 버튼 컴포넌트는 부속 컴포넌트가 됨)

Canvas 컴포넌트 추가하기 절차 Canvas 컴포넌트를 끌어옴  Width는 Fill parent, height는 300으로 설정 kitty.png 다운로드 kitty.png 업로드 Canvas 컴포넌트의 PaintColor 속성을 빨간색으로 설정

아래쪽 버튼과 Camera 컴포넌트 추가하기 절차 HorizontalArrangement 컴포넌 트를 끌어옴. 두 개의 버튼 (Text 속성을 “사진 찍기”와 “지우기”) 배치 두 개 버튼을 추가 배치 Text 속성을 “큰 점”과 “작은 점” Camera 컴포넌트 끌어오기 (Non-visible components 영역 에 나타남)

컴포넌트 동작 프로그래밍 할 일들 DrawingCanvas 컴포넌트 버튼 컴포넌트 화면을 터치하면 DrawingCanvas.Touched 이벤트 처리  점을 찍어줌 화면을 드래그하면 DrawingCanvas.Dragged 이벤트 처리  선을 그려줌 버튼 컴포넌트 색을 바꿈 사진 찍음 화면을 지움 점의 크기를 바꿈

터치하여 점 찍기 절차 DrawingCanvas 서랍에서 DrawingCanvas.Touched 이벤트 처리기 블록 끌어옴 사용자 터치한 곳을 저장하고 있는 x와 y라는 매개변수

터치하여 점 찍기 절차 DrawingCanvas 서랍에서 DrawingCanvas.DrawCircle 명령어를 끌어와 끼움 원의 중심을 나타내는 centerx와 centery 매개변수, 반지름을 나타내는 radius 매개변수, 채울지 여부를 나타내는 fill 매개변수

터치하여 점 찍기 절차 x와 y의 get 블록을 끌어와 DrawCircle의 해당 홈에 끼움

터치하여 점 찍기 절차 반지름 radius 매개변수를 5로 지정

드래그하여 선 긋기 터치와 드래그의 차이점 절차 화면에 손가락을 댄 다음 이동하지 않은 채 떼면 터치 이벤트 발생 화면에 손가락을 댄 다음 떼지 않은 채 이동하면 드래그 이벤트 발생 절차 DrawingCanvas 서랍에서 DrawingCanvas.Dragged 이벤트 처리기 블록 끌어옴 startX와 startY: 드래그가 처음 시작된 곳의 위치 prevX와 prevY: 손가락의 바로 이전 위치 currentX와 currentY: 손가락의 현재 위치

드래그하여 선 긋기 절차 DrawingCanvas 서랍에서 DrawingCanvas.DrawLine 블록 끌어오기 get 블록 끼우기

색 바꾸기 절차 RedButton.Click 블록 끌어오기 set DrawingCanvas.PaintColor to 블록을 RedButton.Click에 끼우기 Color 서랍에서 빨간 블록을 끌어와 set DrawingCanvas.PaintColor to 블록에 끼움 1~3을 반복하여 파랑과 초록 버튼도 코딩함 지우기 버튼 코딩

사진 찍기 절차 TakePictureButton.Click 이벤트 처리기 블록을 끌어오기 Camera1.TakePicture블록을 끌어와 TakePictureButton.Click에 끼우기 Camera1.AfterPicture 이벤트 처리기 블록을 끌어오기 set DrawingCanvas.BackgroundImage to 블록을 Camera1.AfterPicture에 끼우기 get Image 블록을 DrawingCanvas.BackgroundImage 블록에 끼우기

사진 찍기

점 크기 바꾸기 점의 크기는 언제 정해질까? 사용자가 화면을 터치하면, DrawingCanvas.Touched 이벤트가 발생하고 아래 이벤트 처 리기 블록이 실행되고, 이때 radius가 5가 되어 반지름이 5인 원이 그려짐 5를 10으로 바꾸고 점이 커지는지 라이브 테스팅으로 실험해보자.

점 크기 바꾸기 한계점 해결책 점의 크기를 바꾸려면, 프로그래머가 매번 코드를 바꾸고 다시 실행해야 함 이런 방식의 프로그램을 “하드 코딩(hard coding)”되어 있다고 말함 프로그래머가 아니라 사용자가 자유롭게 점의 크기를 바꿀 수 있게 하려면? 해결책 변수(variable) 사용 사용자가 점의 크기를 지정하는 버튼을 누를 때마다 변수 값을 변경함 DrawingCanvas.Touched 블록은 변수 값을 radius로 사용

점 크기 바꾸기 변수 dotSize 정의하기 Variables 서랍에서 initialize global name to 블록 끌어와, name을 dotSize로 변경 초깃값 지정

DrawCircle에서 dotSize 참조하기 절차 get global dotSize 꺼내오기 DrawingCanavs.Touched 블록에 get global dotSize 끼우기

dotSize의 값 변경하기 절차 SmallButton.Click 이벤트 처리기에 set global dotSize to 끼우기  set global dotSize to에 숫자 블록 2 끼우기 BigButton.Click 이벤트 처리기에 set global dotSize to 끼우기  set global dotSize to에 숫자 블록 8 끼우기

dotSize의 값 변경하기

전체 앱 프로그램

확장해 보기