꾸숑의 IT 월드

지금까지 앱인벤터2 왕초보 강좌에서 강의한 내용을 토대로 게임을 하나 만들어 보도록 하겠다. 지금까지 강의한 내용만으로도 충분히 훌륭한 앱이나 게임을 만들 수 있다. 두더지 잡기 게임을 만들어 보면서 이제 앱인벤터의 수준을 한단계 더 업그레이드 해보자. 먼저 아래와 같이 디자이너 화면을 구성한다. 팔레트의 그리기 & 애니메이션 항목에서 캔버스와 스프라이트를 꺼내서 디자이너 화면을 만들자. 캔버스를 하나 배치하고 높이와 넓이를 '부모 요소에 맞추기'를 선택해 최대로 넓혀 준다. 캔버스 안에는 스프라이트를 여러개 배치해서 두더지가 올라오는 구멍을 만들 것이다. 두더지를 나타내는 스프라이트도 2개 배치한다. 캔버스 위아래로 스코어 창과 리셋창을 만들고 score:0라는 라벨과 두더지 잡기 게임에 대한 간단한 ..

앱인벤터2는 스크린 하나에 디자이너 에디터와 블록에디터 2개의 에디터가 같이 묶여 있기 때문에 스크린을 단순히 복사 이동 하는 것이 상당히 어렵다. 스크린을 생성하거나 삭제하는 것은 버튼 하나만 누르면 되는 반면 복사나 이동은 2개의 에디터를 한번에 처리해 줘야 하기 때문에 어려운 것이다. 이 시간에는 스크린을 복사하고 이동하는 방법에 대해 좀 심도있게 살펴보도록 하겠다. 아래 그림과 같이 '스크린2'가 빠지고 '스크린8'번이 '스크린2'의 역할을 하고 있는 앱이 있다고 가정해 보자. 이때는 '스크린8'번의 이름을 '스크린2'로 바꿔 주는 것이 좋을 것이다. 그런데 앱인벤터2 자체에서는 그러한 기능을 제공하지 않는다. 이때는 이 앱인벤터 aia 파일을 추출해서 aia 파일을 변환시켜주는 작업을 해 줘야 ..

이번 시간에는 앱인벤터를 사용하면서 어쩌면 가장 많이 사용하는 기능인 시계(clock)에 대해서 알아보도록 하겠다. 먼저 팔레트 뷰에 가서 센서항목을 클릭한 후 시계를 스마트폰 화면 가운데에 가져다 놓는다. 스마트폰 바깥에 시계를 놓으면 보이지 않는 컴포넌트 부분에 나타나지 않으므로 꼭 화면 가운데에 가져다 두어야 한다. 두개의 기능을 시험을 해 보기 위해서 두개의 시계가 필요하므로 두개를 가져다 둔다. 그리고 시계의 타이머 간격을 500으로 둔다. 0.5초를 의미한다. 1초는 좀 느리게 움직이는 감이 있고 0.5초 이하는 너무 빠른 느낌이 있다. 이번 강좌에서는 버튼을 클릭하면 공이 위로 움직이는 기능과 또 다른 버튼을 클릭하면 이미지 스프라이트의 그림이 변하는 기능을 구현해 보려고 한다. 팔레트의 '..

이번 시간에는 앱인벤터2 왕초보 강좌 19번째 시간으로 플레이어와 소리 컴포넌트의 차이에 대해서 알아보겠다. 먼저 다음과 같은 디자이너 화면을 구성한다. 플레이어와 소리 컴포넌트의 차이점을 알아보기 위해 각 컴포넌트의 재생과 중지 두개씩의 버튼을 준비한다. 수평배치 레이아웃을 두개 배치하고 그 안에 재생, 중지 두개씩의 버튼을 가져다 둔다. 속성은 알아보기 편한대로 적당히 수정한다. 먼저 플레이어 컴포넌트의 사용법에 대해서 알아보자. 플레이어 컴포넌트의 도움말을 보면 '오디오를 재생하고 전화 진동을 제어하는 멀티미디어 구성 요소. 멀티미디어 필드의 이름은 디자이너 또는 블록 편집기에서 설정할 수있는 소스 속성에 지정됩니다. 진동의 시간 길이는 밀리 초 (천분의 1 초) 단위로 블록 편집기에 지정됩니다. ..

이번 시간에는 이미지 선택 버튼의 사용법에 대해서 알아보고 작성한 앱을 직접 실행해 어떻게 적용되는지 알아보자. 먼저 다음과 같이 디자이너 에디터를 구성한다. 미디어 섹션에서 이미지 선택 버튼(imagePicker)을 드래그해 화면 상단에 배치하자. 레이블 하나는 이미지 선택버튼이 제대로 작동하는지를 알아보기 위해 텍스트를 보여 줄 것이다. 다음으로 '그리기 & 애니메이션'에서 '캔버스'를 하나 꺼내서 화면 하단부에 배치하고 높이와 너비를 '부모 요소에 맞추기'로 설정한다. 이미지 선택버튼의 이벤트 블록안에 이미지1 컴포넌트의 '지정하기 이미지1. 사진 값' 블록을 끼워넣자. 이미지 선택 버튼의 세부 블록을 보면 'imagePicker1. 선택된 항목' 블록이 있다. 이 블록을 이미지1 컴포넌트의 '지정..

이번 시간에는 미디어 섹션에 있는 '카메라'로 사진 촬영하는 법을 알아보자. 카메라로 사진을 찍기 위해서는 사진을 보이기 위한 '이미지'나 '캔버스'가 있어야 한다. 먼저 다음과 같이 디자이너 에디터를 준비하자. 팔레트의 '그리기 & 에니메이션' 파트에서 캔버스를 화면 중앙에 배치한다. 처음 캔버스를 가져가 두면 작은 크기의 캔버스가 나타난다. 속성창에 가서 캔버스의 높이와 너비를 '부모 요소에 맞추기'로 설정한다. 하단부에 버튼을 하나 가져다 두고 이름과 텍스트를 적당히 입력한다. 미디어섹션에서 카메라를 하나 드래그해서 화면 중앙에 드랍해 보자. 카메라는 보이지 않는 컴포넌트이기 때문에 스마트폰 화면에 나타나지 않고 스마트폰 하단부에 표시된다. 이제 블록 에디터에 가서 블록들을 배치해 보자. 먼저 버튼..

앱인벤터2에는 미디어섹션에 캠코더를 비롯한 카메라, 녹음기, 비디오 플레이어등 미디어에 관련된 여러가지 컴포넌트들이 준비되어 있다. 시간나는 대로 캠코더 부터 시작해 하나하나 강좌를 준비해 보도록 하겠다. 이번 시간에는 '캠코더의 사용법' 시간으로 캠코더로 동영상을 촬영하고 재생하는 것 까지 배워보도록 하자. 먼저 다음과 같이 디자이너 에디터를 준비하자. 상단에 버튼 두개 배치해서 '녹음 시작'과 '재생'이라고 글자를 입력하자. 버튼의 이름도 'start', 'replay'등으로 변경시켜 준다. 하단부에는 '비디오 플레이어'를 끌어다 두고 비디오 플레이어가 하단부 전체를 차지하도록 크기도 조정한다. 높이와 너비를 '부모 요소에 맞추기'로 설정하면 된다. '캠코더' 컴포넌트는 화면에 직접 나타나는 요소가 ..