앱인벤터 플레이어 컴포넌트
앱인벤터의 컴포넌트들을 이해와 실제 예제를 통해 실습을 통해 모바일 앱 개발에 활용도를 높이고자 한다.
이번 시간에는 미디어에서 플레이어 컴포넌트에 대해 이해하고 실습을 하고자 한다. 플레이어 컴포넌트는 소리를 재생 기능을 제공한다.
. 플레이어 컴포넌트
미디어 팔레트에서 플레이어 컴포넌트는 스마트폰에 소리 등을 재생하는 기능을 제공하는 컴포넌트이다. 플레이어 컴포넌트는 보이지않는 컴포넌트이다.
간단한 플레이어 앱을 위해 버튼 컴포넌트를 추가하여 버튼을 클릭하면 소리가 재생되는 앱을 만들 것이다.
팔레트
플레이어 컴포넌트는 팔레트에 “미디어”에 있다. 플레이어 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 추가된다. 본 예제에서는 플레이어 컴포넌트를 동작시키기 위해 버튼 컴포넌트를 추가하여 소리를 재생시킬 것이다.
뷰어
추가했을 때, 기본적으로 사각형이 뷰어 화면에 출력된다.
이미지선택버튼과 이미지 컴포넌트를 추가하여 화면을 설계하였다.
버튼에 이미지를 강아지를 설정하여 강아지 모양의 버튼을 클릭하면 ‘멍멍’ 소리가 들리는 간단한 앱을 만들어보자.
. 구글에서 강아지 사진 하나를 다운로드 받는다.
. 유튜브에서 멍멍 소리를 다운로드 받는다.
. 미디어에서 파일 올리기에 강아지 사진과 ‘멍멍’ 소리 파일을 올린다.
. 플레이어에 ‘소스’에 ‘멍멍’ 소리 파일을 지정한다. (파일이름은 한글이 안된다. 영어나 숫자 파일 이름을 사용한다.)
컴포넌트
컴포넌트에는 Screen1아래에 플레이 버튼 컴포넌트를 클릭하면 “플레이어1”의 플레이어 컴포넌트에서 소리 재생하기 블럭을 호출하여 소리를 재생할 것이다.
플레이어 속성값
플레이어 속성값은 아래 그림과 같다.
플레이어 속성값에 ‘소스’ 속성값에는 재생할 소리 파일을 지정해준다. 현재는 1.mp3 파일로 강아지 짖는 소리를 지정하였다.
‘볼륨’ 속성값은 소리 볼류 크기를 지정한다. 현재는 기본값으로 50 값이 지정되어 있다.
플레이어 컴포넌트 블록
플레이어 컴포넌트 이벤트 블럭들
플레이어 컴포넌트 이벤트 블럭에는 재생을완료했을때, 다른플레이어가시직될때, PlayerError 등의 이벤트가 발생하면 ‘실행’ 코드를 작성하는 블럭이 있다.
플레이어 컴포넌트 호출 블럭들
플레이어 컴포넌트 호출 블럭에는 일시정지하기, 시작하기, 정지, 진동하기 등의 블럭이 있다. 주로 플레이어를 제어하는 블럭들이다. 소리를 재생, 일시정지, 정지 및 진동하기 등의 기능을 제공한다.
플레이어 컴포넌트 가져오기/지정하기 블럭들
. 플레이어 컴포넌트 반복 블럭
소리 재생 반복 여부를 지정하는 블럭이다. 지정하는 값으로는 참과 거짓 블럭을 사용한다.
. 플레이어 컴포넌트 현재스크린에서만재생 블럭
현재 스크린에서만 재생할지 백그라운드에서도 재생할지를 지정하는 블럭이다. 사용하는 값은 참, 거짓 블럭이다.
. 플레이어 컴포넌트 소스 블럭
플레이어에 소리 재생 파일을 지정하는 블럭이다. 파일 업로드로 미리 저장된 파일을 지정할 수 있으며, 형식으로는 파일과 확장자명 입력해야 한다.
. 소리 파일이 휴대폰에 저장된 경우에는 절대 경로를 입력해야 한다.
. 웹 서버에 저장된 소리 파일을 재생할 경우에는 웹 서버의 파일 URL을 입력한다.
. 플레이어 컴포넌트 볼륨 블럭
플레이어에 소리 재생 시 볼륨 크기를 정하는 블럭이다. 볼륨 값은 0~100 사이의 값이며 기본값은 50이다.
지금까지 플레이어 컴포넌트의 블럭들에 대해 살펴보았다.
하기 예제 앱을 활용하여 간단한 소리 재생 앱을 만들어보자…
눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.
간단하지만 직접 해보면 이해하고 자신감이 생길거에요...
Just Do It!!!
Just Drag&Drop It!!!
감사합니다.
'앱인벤터 > 앱인벤터 컴포넌트' 카테고리의 다른 글
| 앱인벤터 녹음기 컴포넌트 (0) | 2022.02.16 |
|---|---|
| 앱인베터 소리 컴포넌트 (0) | 2022.02.15 |
| 앱인벤터 이미지선택버튼 컴포넌트 (0) | 2022.01.15 |
| 앱인벤터 카메라 컴포넌트 (0) | 2022.01.14 |
| 앱인벤터 캠코더 컴포넌트 (0) | 2022.01.13 |
댓글