반응형

SW 배움터/앱인벤터2 83

앱인벤터2 강좌 8: 애니메이션 연습

이번 시간에는 간단한 폭발장면을 애니메이션으로 처리하면서 그 원리를 이해해 보자. 먼저 스크린의 백그라운드 이미지를 멋진 장면으로 하나 세팅한다. 그리고 Palette 뷰에서 User Interface란을 열어 Image 요소를 드래그해서 스크린에 놓는다. 하단에는 애니메이션 이벤트를 발생시키기 위한 버튼 세개를 위치시킨다. HorizontalArrangement를 하나 드래그 해서 위치시키고 버튼 세개를 넣는다. HorizontalArrangement를 스크린 하단에 위치시킬려면 스크린의 AlignVertical 속성을 "Bottom : 3 ▾"로 둔다. 그리고 Image 위아래에 있는 Label의 Height에 적당한 픽셀 수치를 주어서 원하는 위치에 Image를 위치시킨다. 그리고 각각의 버튼에 쓰..

앱인벤터2 강좌 7: 로또 번호 생성기 제작하기

이번에는 로또 번호 생성기를 제작해 보겠다. 위의 그림과 같이 "HorizontalArrangement" 속에 6개의 버튼을 넣어서 6개의 숫자가 표시되록 한다. 각각의 버튼은 텍스트의 색깔을 달리해서 나오는 숫자가 잘 보이도록 한다. 각 버튼은 "num1", num2", ~,"num6"등의 이름이 붙여져 있는데 여기에 45개의 숫자에서 추출한 번호가 표시된다. 버튼을 사용하던 라벨을 사용하던 텍스트 박스를 사용하던 그것은 상관없고 본인 편한대로 사용하면 됩니다. 저는 버튼을 사용했습니다. 그 아래 "645 선택"이란 버튼을 누르면 45개의 숫자 중에서 6개의 숫자가 선택되어 화면에 표시된다. "Blocks" 패널 화면에서 "Built-in" 안에 있는 "Lists" 요소를 클릭해서 "make a lis..

앱인벤터2 강좌 6: TinyDB 와 TinyWebDB 사용법

오늘은 TinyDB 와 TinyWebDB의 사용법에 대해서 알아보겠다. 먼저 TinyDB부터 알아본다. "TinyDB"는 본인 스마트폰의 메모리를 이용해서 저장하는 방식이므로 쉽고 즉시 결과를 확인할 수 있는 장점이 있다. TinyDB의 사용법은 아주 간단하다. 다음과 같이 "ScreenEditor" 화면에 TinyDB를 테스트할 수 있는 2개의 버튼과 저장내용을 확인할 수 있는 텍스트 박스 하나를 준비한다. 첫번째 버튼은 TinyDB에 무엇을 저장하기 위한 버튼이고 두번째 버튼은 TinyDB에 들어있는 내용을 확인해 보기 위한 출력용 버튼이다. 마지막에 있는 "여기에 저장 내용이 출력됩니다"란 TextBox는 TinyDB에 저장한 내용을 확인해 볼 수 있는 텍스트박스이다. 다음으로 Block에디터로 이..

앱인벤터2 강좌 5: delay를 주는 2가지 방법

앱인벤터에서 단계별로 어떤 이벤트를 실행시키고 싶으면 delay를 줘야한다. delay를 시키는 방법은 여러가지가 있을 수 있겠으나 여기에서는 2가지 방법을 소개한다. 먼저 아래 그림과 같이 systemTime을 이용하기 위한 버튼과 clock을 이용하기 위한 버튼등 2개의 버튼을 준비한다. clock은 타임인터발을 1000으로 두고 나머지는 설정은 해제한다. 1000은 1초를 의미한다. 스크린하단의 delayTime은 실제 지연시간이 제대로 작동하는지 확인하기 위한 용도이다. 먼저 systemTime을 이용한 delay 방법을 살펴보자. "start" 버튼을 누르면 "안녕하세요"라는 말이 나오고 1초 후에 ""반갑습니다" 라는 말이 나오게 하자. 그러기 위해서는 "delay"블럭이 삽입되어야 한다. 중..

앱인벤터2 강좌 4: 두더지 잡기

이번에는 두더지 잡기 게임을 만들어 보겠습니다. 화면에 25개의 두더지 구멍이 있고 이 구멍으로 두더지 두마리가 0.8초 간격으로 임의로 출몰합니다. 이 두더지를 손가락으로 정확히 터치하면 점수가 1점씩 올라가고 점수가 50점이 되면 메시지가 나오면서 "계속" 또는 "그만"을 선택하게 합니다. 디자이너 블럭에 위와 같이 25개의 홀과 2마리의 두더지를 배치합니다. 캔버스를 화면전체에 배치하고 각각의 홀과 두더지 위치에는 이미지 스프라이트를 배치해서 이미지를 홀과 두더지 그림으로 전환합니다. 두더지 두마리가 움직이기 때문에 클락을 두개 배치합니다. 각각의 클락은 언제나 활성화가 되도록 "TimerAlwaysFires" 와 "TimerEnabled"를 체크하고 TimerInterval은 0.8초로 설정합니다..

앱인벤터2 강좌 3: 스피드 터치 게임

앱인벤터2로 간단한 게임을 만들어 보았다. 5X5 즉 25개의 숫자를 임의로 배치하고 1부터 25까지 최대한 빨리 찾는 게임을 제작해 보겠다. 1)5X5 즉 25개의 빈칸에 1부터 25까지의 수를 25개의 버튼에 임의로 배치하는 디자인 화면. 실제 게임을 시작하면 각각의 버튼에 임의로 숫자가 나타난다. 2) 먼저 리스트에 25개의 숫자를 더하고 각각의 버튼에 1부터 25까지의 숫자를 배치하는 루틴. 여기서 주의할 점은 한번 나온 숫자는 제거를 하고 나오지 않은 숫자가 계속 나오게 해야 한다는 점. 3)이제 각 버튼을 눌렀을 때 1부터 순서대로 버튼을 눌렀는지 비교하는 부분. 25개 각각의 버튼에 대해 올림차순으로 제대로 눌렀는지 확인하고 맞으면 그 번호를 보이지 않게 하고 틀리면 "noAppearCloc..

앱인벤터2 강좌 2: 숫자 야구게임

여러분들이 중.등학교 시절에 친구들과 많이 해 보셨을 숫자 야구게임을 앱인벤터2를 이용해서 모바일게임으로 제작해 보았다. 1)먼저 디자이너 에디터에 위와 같이 10개의 입력 숫자 버튼을 배치하고 화면 중간에 있는 "입력" 버튼 옆의 빈칸에 누른 숫자가 입력되도록 화면을 구성한다. 2)블럭 에디터로 이동해서 빈 리스트를 만든다음 0부터 9까지의 숫자를 더하고 컴퓨터가 3개의 숫자를 랜덤하게 선택하게 한다. 여기서 중요한 것은 한번 선택한 숫자는 제거해서 다시 그 숫자가 선택되지 않도록 하는 것이다. 3)디자이너 에디터에 배치했던 0부터 9까지의 숫자 버튼 중에서 아무것이나 하나를 누르면 화면 중간의 빈칸에 내가 누른 숫자가 앞에서 부터 하나씩 입력되도록 한다. 4)내가 입력한 숫자와 컴퓨터가 선택한 수를 ..

앱인벤터2 강좌 1: 초기 화면에서 동영상 작동시키기

I. 앱인벤터에서 초기화면에 동영상을 작동시키기 위해선 단순히 "videoPlayer.Start"만 시켜서는 작동하지 않는다. 타이머의 도움을 받아야 한다. 1) 디자이너 화면에서 videoPlayer 컴포넌트에 동영상 자료로 video source를 설정한다. 2) Screen Initialize 블럭에 VideoPlayer1.Start 명령만 설정하면 다음과 같이 "블랙" 스크린만 나타난다. 3) 블랙화면만 나타남. 4)"Clock.Timer" 블럭안에 "VideoPlayer1.Start" 블럭을 끼워주면 간단히 해결됨. 5)초기화면부터 동영상이 작동하는 모습 6)첫 화면 하단의 버튼 "촛불전환" 이나 "횃불전환" 버튼을 누를때 동영상이 전환되어 나오는 프로젝트의 전체 내용. 간단한 것처럼 보이나 "..

반응형