모바일 어플리케이션
모바일 앱 만들기 1강
애니메이션, DB
13강
연속이미지의 움직임 TinyDB
애니메이션
1 차시
2 차시 3 차시
2. TinyDB를 활용해 데이터를 저장하고 활용할 수 있다.
3. Canvas에서 연속된 이미지의 움직임을 만들 수 있다.
1. 애니메이션을 만드는 여러 속성 을 이해하여 설명할 수 있다.
학 습 목 표
애니메이션
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
1차시
물체가 아주 짧은 주기로 조금씩 이동하여 나타나는 현상
Canvas 컴포넌트에 Ball, ImageSprite를 배치하고 일정 시간 후에 이동시키거나 변환시켜 만듦
앱 인벤터의 애니메이션 1
ImageSprite 변환 예
애니메이션 만들기 2
Canvas 좌표계
사용자에 의한 애니메이션
물체 이동 주기를 제어하는 Clock.Timer 이벤트 물체 충돌 이벤트
타이머가 필요없는 애니메이션
캔버스 위에 선, 점과 같은 도형 그리기
좌표 변화로 움직이는 물체 표시하기
2
사용자에 의한 애니메이션
1
§
§
애니메이션 만들기
설정해놓은 시간 주기에 따라
스프라이트를 다른 위치로 이동시키는 방법 Clock 컴포넌트의 TimerInterval 속성으로 밀리 초(1/1000초) 단위로 시간 간격 설정
TimerInterval은 움직임 속도에도 영향을 미침
2
Clock.Timer 이벤트
2
§
§
블록 에디터 모드에서 타이머 이벤트 처리기에
타이머 이벤트가 발생할 때마다 수행해야 할 명령어 블록을 결합
§
애니메이션 만들기
캔버스 가장자리에 닿았을 때
EdgeReached 이벤트 처리기 사용,
앱인벤터가 자동으로 캔버스 경계를 확인함
2
충돌 이벤트
3
§
닿은 변을 나타내는 코드
Edge 1
Edge 3 Edge -1
Edge -3
애니메이션 만들기
참고
물체간의 충돌 처리
2
충돌 이벤트
3
§
CollidedWith
NoLongerCollidedWith
물체간의 충돌 처리충돌한 물체가 서로 떨어지는 순간 발생
애니메이션 만들기
ImageSprite, Ball의 속성 이용
2
타이머가 필요 없는 애니메이션
4
§
Heading 0~360
Speed, Interval
물체는 Interval 간격으로 Speed 화소만큼씩 이동
90
270
180 0
애니메이션 만들기
낙서하기 앱
연필 색 바꾸기 간단한 메모나
아이디어 스케치 혹은
낙서를 위한 앱
3
이미지 https://pixabay.com
3 만들기
자세한 실습영상은
강의 속에서 확인하세요.
참고 자료
§ 앱 인벤터2, David Wolber 외 3인, 오일석 이진선 역, 2016, 한빛 아카데미
§ 스마트폰 이미지 http://bitly.kr/9cFC
TinyDB
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
2차시
낙서하기 앱
연필 색 바꾸기 간단한 메모나
아이디어 스케치 혹은
낙서를 위한 앱
1
이미지 https://pixabay.com
저장과 열기, 화면 지우는 기능
새로운 컴포넌트
데이터를 저장하기 위한 눈에 보이지 않는 컴포넌트
앱을 위한 영구적인 데이터 저장소 여기에 저장된 데이터는
앱이 실행될 때마다 사용가능
낙서하기 앱 1
TinyDB
이미지 출처 : 앱 인벤터 메뉴
새로운 컴포넌트
낙서하기 앱 1
TinyDB
스마트폰에 DB생성하고 데이터저장
TinyWebDB
다른 사람과 데이터를 공유해야 하는 경우 웹 데이터베이스에 저장
비교
앱 인벤터로 만들어진 앱은 매번 실행될 때마다 초 기화되고 종료되면 저장 안 됨
3 만들기
자세한 실습영상은
강의 속에서 확인하세요.
참고 자료
§ 누구나 쉽게 만드는 스마트폰 앱, 앱 인벤터, CODABLE(코더블) 저, 2017, 혜지원
§ 꿀잼 앱인벤터 완전정복, 박영아 외 5인, 카오스북
§ 스마트폰 이미지 http://bitly.kr/9cFC
연속이미지의 움직임
MIT App Inventor / Anyone Can Build Apps That Impact the World / visual coding of block building method / appinventor.mit.edu/explore / The Cyber University of Korea / CUK,edu
I T / D E S I G N / M O B I L E A P P L I C A T I O N
3차시
연속이미지의 움직임 앱
다리와 팔 움직이기 좌우로 움직이기
1
이미지 https://pixabay.com
버튼 클릭할 때 뿐만 아니라 누르고 있어도
움직이기
3 만들기
자세한 실습영상은
강의 속에서 확인하세요.
참고 자료
§ 쉽고 재미있게 만드는 앱 프로그래밍 앱 인벤터, 이종원 저, 한빛아카데미
§ 스마트폰 이미지 http://bitly.kr/9cFC
학 습 정 리
애니메이션 만들기
사용자에 의한 애니메이션 Clock.Timer 이벤트 물체 충돌 이벤트
타이머없이 스프라이트 속성 이용해 움직이기
연속이미지의 움직임 TinyDB
데이터를 저장하기 위한 눈에 보이지 않는 컴포넌트
