Download presentation
Presentation is loading. Please wait.
1
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. ㈜한백전자 교육사업부 4장 리소스 테스트
2
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-1학습 목표 2 터치 이벤트 블록을 이용해 사용자의 터치를 인식 PNG 그림 파일과 MP3 음향 파일을 이용한 앱 제작 블록에디터를 이용해 사운드 재생 방법을 이해
3
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-2 기반 지식 3 블록에디터 – 블록에디터의 세부항목은 “Built-in”(내장블록), “Screen1”, “Any Component” 항목이 존재 – 각 세부항목의 버튼을 클릭하면 세부메뉴가 열림 – “Built-in”은 “기본적으로 내장된”이란 뜻인데 모든 앱을 만드는데 필요한 기본적인 표준 블록들을 모아 놓은 메뉴 – “Screen1”은 하나의 인터페이스와 블록도를 가지고 있는데, 직접 앱을 만들기 위한 선언한 상수나 변수 및 컴포넌트들을 묶어서 만든 특별한 블록들을 모아 놓 은 메뉴 – any component에서는, screen1에 포함된 컴포넌트 등을 하나하나씩 대입하지 않고 모든 같은 종류의 컴포넌트에게 같은 기능을 부여할 때 사용
4
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-3 실습 소개 4 – 이번 장에서는 고양이 이미지를 터치하면 “야옹”하는 음성을 재생 – 사용자의 터치 이벤트를 감지하여 효과음을 재생
5
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-4 구현 절차 5 이미지와 효과음 준비 – Hello Purr 프로젝트를 만들기 위해서 고양이 그림과 “야옹” 소리가 필요 – 함께 제공되는 CD안의 경로에 리소스 존재 [CD]\AndroXStudio\Inventor_Tutor\5 장 \ 리소스 \kitty.png [CD]\AndroXStudio\Inventor_Tutor\5 장 \ 리소스 \meow.mp3
6
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-4 구현 절차 6 화면 구성하기 1) 이미지 추가하기 – 앱인벤터를 실행한 “HelloPurr”라는 이름으로 새 프로젝트를 생성한 후,“Screen1” 화면으로 “Button”컴포넌트를 드래그 – “Button”컴포넌트는“Palette”의 “UserInterface”에 위치
7
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-4 구현 절차 7 – “Components”의 목록에 있는 “Button1” 항목을 선택한 후,“Properties” 목록에 “images” 항목에 있는 “none……”을 클릭
8
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-4 구현 절차 8 – “add” 버튼을 클릭한 후 “Upload File……” 대화상자에서 “찾아보기” 버 튼을 클릭한 후 준비한 리소스의“kitty.png”을 선택 – “OK”버튼을 눌러 그림파일을 업로드
9
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-4 구현 절차 9 – “Text” 속성에 있는 “Button1”의 “Text”를 삭제
10
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 4-4 구현 절차 10 – 디자이너의 모습
11
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 11 4-4 구현 절차 2) 레이블 추가하기 – 그림이 포함된 버튼 아래 레이블을 추가 – “Screen1” 화면으로 “Label”컴포넌트를 끌어다 “Button”컴포넌트 아래 에 드래그
12
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 12 4-4 구현 절차 – “Components”의 목록에 있는 “Label1” 항목을 선택한 후 배경색을 변경하 기 위해 “Properties” 목록에서“BackgroundColor”항목의 “none”을 클 릭해 “Blue”를 선택
13
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 13 4-4 구현 절차 – “Label1”의 글자 속성을 적용하기 위해 “FontBold”를 체크하고, “FontSize” 는 “30”으로, “Text”에는 “고양이를 만져주세요”를, “Text Color”은 “Yellow”를 선택
14
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 14 4-4 구현 절차 3) 화면구성 결과
15
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 15 4-4 구현 절차 4) 소리 재생을 위한 컴포넌트 추가 – 버튼을 누를 때마다 소리를 재생하기 위해 “Sound”컴포넌트를 추가 – “Screen1” 화면으로 “Sound”컴포넌트를 끌어다 드래그 – “Sound”컴포넌트는 “Palette”의 “Media”에 위치 – “Sound”컴포넌트는 화면 표시가 없으므로 “Screen1”아래 “Non-visible components”에 나타남
16
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 16 4-4 구현 절차 – “Components”의 목록에 있는 “Sound1” 항목을 선택한 후 “Properties” 목록의“Source” 항목에 있는 “none……”을 클릭
17
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 17 4-4 구현 절차 – “add” 버튼을 클릭한 후 “Upload File……” 대화상자에서 “찾아보기” 버 튼을 클릭한 후 준비한 리소스의“meow.mp3”을 선택 – “OK”버튼을 눌러 사운드파일을 업로드
18
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 18 4-4 구현 절차 – 효과음 추가까지 완료되면 “Components”아래 “Media”에는 업로드 된 2개 의 파일이 나타남
19
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 19 4-4 구현 절차 야옹 소리 재생 구현 – 버튼을 누르면 고양이 소리가 재생되도록 구현하자 상단의 “Blocks”를 선택 해 블록에디터를 실행 – 블록에디터가 실행되면 추가한 컴포넌트에 대한 동작을 정의하기 위해 “Button1”을 선택한 후 Button1. Click을 끌어서 편집 창에 드래그
20
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 20 4-4 구현 절차 – 버튼을 누르면 소리가 재생되도록 “Sound1”을 선택한 후 Sound1. Play를 끌어다가 Button1. Click 내부에 드래그
21
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 21 4-5 결과물 – 동작테스트를 하기 위해 “Connect to Device……”버튼을 클릭 – 실습장비에서 앱을 동작
22
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 22 4-6 정리 컴포넌트들을 선택해 언제 무엇을 할지 설정가능 디자이너에서 컴포넌트를 선택하고, 일부 컴포넌트들은 눈에 보이 지 않음 자신의 컴퓨터에서 소리나 그림을 업로드 해서 앱에 미디어형태로 추가 “When…do…”블록은 이벤트 핸들러 (event handlers) 를 나타 내며, 이것은 어떤 일이 일어났을 때 무엇을 할지를 컴포넌트에게 알려주는 일 “Call…”블록은 해야 할 일을 알림
23
본 문서의 저작권은 ㈜한백전자에 있으며, 허락 없이 무단 복제 및 전제를 불허합니다. 23 4-7 과제물 1.이번 장에서 만든 결과물을 이용하여 여러분이 좋아하는 동물 사진을 넣어 보자. 2.터치 했을 때 자신이 좋아하는 동물 울음 소리가 나도록 해 보 자.
Similar presentations
