앱인벤터 (애니메이션 만들기)

1. 고양시 유레카 꿈의 학교
(앱인벤터)
http://injaram.com

2. 03-1 애니메이션 만들기
여러 장의 이미지를 겹쳐 놓은 상태에서 한 장씩 보이도록
하여 움직이는 것처럼 보이게 하는 효과

3. 03-1 무엇을 만들 것인가?
버튼을 클릭했을 때(액션 이벤트)
다른 사진이 나타나도록 한다.

4. 03-1 스케치 및 동작 구상
움직이는 모양의 이미지 2장을
준비하고, 버튼에는 첫 번째 이
미지를 배치한 후
 [버튼 1]을 클릭했을 때,
다른 이미지로 변경한다.
• 클릭할 때마다 2개의 이미지 한 번
씩 나타나서 움직이는 것처럼 보이
게 한다.
3

5. 03-1 사용할 컴포넌트
 버튼 1개, 이미지 2장
4
컴포넌트 이름 속성
Button btnImage Height : 120 pixels
Width : 150 pixels
Image : cake_01.png
Text : -

6. 03-1 사용할 미디어
 이미지 2장 (움직이는 것처럼 보이기 위한 비슷한 이미지)
5
cake_02.pngcake_01.png
parrot1-b.pngparrot1-a.png

7. 03-1 디자이너창
6

8. 03-1 블록 조합 (클릭 이벤트)
7

9. 03-2 애니메이션 만들기
Clock 컴포넌트 추가
☞ Clock( ) : 시간의 흐름에 따라 변하도록 하고자 할 때 사용

10. 3-2 무엇을 만들 것인가?
액션 이벤트(사용자 행동) 없이 2장의 이미지가
스스로 움직이는 애니메이션을 만든다.
9

11. 03-2 스케치 및 동작 구상 ( )
스케치는 03-1의 애니메이션 만
들기와 같은 프로젝트를 이용하고,
동작 방법만 변경한다.
 시간 간격(TimerInterval) 마다,
다른 이미지로 변경한다.
10

12. 03-2 사용할 컴포넌트
 버튼 1개, 이미지 2장
 추가 : Clock
11
컴포넌트 이름 속성
Button btnImage Height : 120 pixels
Width : 150 pixels
Image : cake_01.png
Text : -
Non-visible 컴포넌트
Clock Clock1
TimerInterval : 1000

13. 03-2 디자이너 창( )
12

14. 03-2 블록조합 ( )
13
☞ 시간 조절 : TimerInterval

15. 03-3 애니메이션 만들기
여러 장의 이미지로 애니메이션 효과 만들기

16. 03-3 무엇을 만들 것인가?
여러 장(2개 이상)의 이미지가
자동으로 바뀌는 애니메이션 효과를 만든다.
15

17. 03-3 스케치 및 동작 구상
2장 이상의 이미지를 자동으로 바
뀌도록 만든다.
 시간 간격(TimerInterval) 마다,
다른 이미지로 변경한다.
16

18. 03-3 사용할 컴포넌트
 Image : 1개, Clock : 1개
17
컴포넌트 이름 속성
Image Image1
Height : 150 pixels
Width : 150 pixels
Image : ballerina-a.png
Non-visible 컴포넌트
Clock Clock1
TimerInterval : 500

19. 03-3 사용할 미디어
 이미지 여러 장 (움직이는 것처럼 보이기 위한 비슷한 이미지)
18
ballerina-a.png ballerina-b.png ballerina-c.png ballerina-d.png

20. 03-3 디자이너창
19

21. 03-3 블록조합
20

22. 03 더 해보기_1 (버튼으로이미지제어)
 하나의 버튼(Play/Stop)으로 2
가지 동작 만들기
① 버튼을 클릭할 때마다
몇 번을 눌렀는지 카운트합니다.
② 만약 홀수 번을 클릭했으면
이미지의 움직임을 멈추고
짝수 번을 클릭했을 경우에는
이미지를 움직입니다.
21

23. 03 더 해보기_2 (흔들기)
 팔 운동: 핸드폰을 흔들었을 때,
이미지가 바뀌도록 만들기
☞ 힌트 : ‘AccelerometerSensor’ 컴포넌트
활용.
☞ AccelerometerSensor : 가속도 센서로
AccelerometerSensor.Shaking은 스마
트 폰을 흔들었을 때 반응을 합니다.
22

24. 03 더 해보기_3 (팔운동,카운트)
 팔 운동 횟수 카운트 : ‘더 해보기
_1’에 카운트 기능 추가
 ‘Label’ 컴포넌트를 추가해서 몇 번 흔
들었는지 카운트를 해 보세요.
 ‘Button’을 클릭하면 ‘Label’의 숫자
를 0으로 초기화 하세요.
23

25. 03 더 해보기_4 (가위/바위/보)
 가위/바위/보 게임
 랜덤하게 움직이는 가위/바위/보 이미지를 만드세요.
 스마트 폰을 한 번 흔들면 이미지가 멈추고,
다시 흔들면 이미지가 움직이도록 만들어보세요.
24