BLOG ARTICLE 뮤직플레이어 | 1 ARTICLE FOUND

  1. 2008.01.21 3.2 [초급] MP3 연주기 만들기 2

음악파일을 연주하는 간단한 스크래치 프로젝트를 시작해 보겠습니다. 완성된 모습은 제 스크래치 프로젝트 페이지에서 확인하실 수 있습니다.

사용자 삽입 이미지

모양은 위와 같습니다. 음악이 연주되면 좌측과 같이 플레이 아이콘이 표시되며 음악이 중지되면 우측과 같은 중지 아이콘이 표시됩니다. 입력은 스페이스 키를 받으며 누를 때마다 시작, 중지가 번갈아 가며 실행됩니다.



1. 이미지 파일 생성

1) 기본 스프라이트 삭제
사용자 삽입 이미지
먼저 스크래치를 실행합니다. 좌측과 같이 기본 스프라이트가 있습니다.

우측 하단의 기본 스프라이트를 마우스로 우클릭하면 좌측과 같은 메뉴가 나옵니다. 이 중 delete를 클릭하여 기본 스프라이트를 삭제합니다.


2) 스프라이트 생성
스프라이트를 생성하는 방법은 두 가지가 있습니다. 페인트 에디터를 이용해서 새로 그리는 방법과 기존의 이미지 파일에서 불러 오는 방법이 있습니다.(기본 이미중에 하나를 무작위로 불러와서 생성하는 한 가지 방법이 더 있지만, 여기서는 제외합니다.)

사용자 삽입 이미지
우측 스테이지 하단을 보시면 좌측과 같은 버튼이 두 개 있습니다. 그 중 좌측의 버튼이 페인트 에디터를 이용하여 스프라이트를 생성하는 버튼이며, 우측의 버튼이 기존의 이미지 파일에서 불러와 스프라이트를 생성하는 버튼입니다.

아래의 페인트 에디터로 직접 그려서 스프라이트를 생성하는 a 방법과 기존의 이미지 파일에서 불러오는 b 방법 중에 하나를 선택하셔서 진행하시면 됩니다.

a. 페인트 에디터 이용

사용자 삽입 이미지
먼저 페인트 에디터를 사용하여 직접 스프라이트를 그려 보겠습니다. 좌측의 버튼을 클릭하여 아래와 같이 페인트 에디터를 엽니다. 각종 그리기 툴들을 이용하여 적당한 플레이 아이콘을 그린 후에 완료되면 아래의 [OK] 버튼을 클릭하여 저장합니다.

사용자 삽입 이미지

사용자 삽입 이미지
좌측과 같이 스프라이트가 새로 만들어졌습니다. 기본으로 'Costume1'로 되어 있는 부분을 마우스로 클릭하여 입력이 가능하도록 합니다. 아래와 같이 이름을 'play'로 변경합니다.

사용자 삽입 이미지






이제 정지된 모양을 추가하겠습니다. 같은 스프라이트에서 모양(costume)이 추가될 때는 [Paint] 또는 [Import] 버튼을 이용합니다.

사용자 삽입 이미지
[Paint] 버튼을 클릭하여 다시 페인트 에디터를 오픈하여 위와 같은 방법으로 종료 버튼을 그린 후에 [OK]를 클릭합니다.

사용자 삽입 이미지
play와 동일한 방법으로 이름을 'stop'으로 변경하여 줍니다.

좌측과 같이 각각의 모양들이 'play'와 'stop'이란 이름으로 저장되어 있음을 확인합니다.

이와 같이 페인트 에디터로 직접 스프라이트를 만들었으면 아래의 'b. 이미지 파일에서 불러 오기'는 건너 뛰고, 2.음악파일 등록으로 진행합니다.




b. 이미지 파일에서 불러 오기

이미지는 기존에 가지고 계신 이미지나 제가 만든 아래의 이미지를 다운로드 하셔서 압축을 푸시고 사용하시면 됩니다.

사용자 삽입 이미지
스테이지 하단의 좌측과 같은 볼러오기 버튼을 클릭합니다. 아래와 같이 파일선택 창이 나오면 play 이미지를 선택하고 [OK] 버튼을 클릭합니다. 스크래치에서는 jpg, bmp, png, gif 형식의 이미지 파일을 사용하실 수 있습니다.

사용자 삽입 이미지

사용자 삽입 이미지
다시 스프라이트 창으로 돌아와 Stop 이미지를 위해 좌측과 같이 [Import] 버튼을 클릭합니다. 위와 같이 파일선택 창이 나오면 정지 아이콘으로 사용할 stop 이미지를 선택하고 [OK] 버튼을 클릭합니다.

사용자 삽입 이미지
위의 a.페인트 에디터와 같은 방법으로 각 모양(costume)의 이름을 'play'와 'stop'으로 변경합니다.

이제 좌측과 같이 설정되어 있음을 확인합니다.









2. 음악 파일 등록

1) 음악 파일 불러 오기
사용자 삽입 이미지
이제 연주 할 음악파일을 선택합니다. 음악 파일은 mp3를 기본으로 wav, wma, aif, au 파일을 지원합니다.

좌측과 같이 Sounds 탭을 클릭하여 [Import] 버튼을 클릭합니다. 파일 선택창에서 플레이할 음악파일을 선택한 다음 [OK] 버튼을 클릭합니다.


2) 이름 변경
사용자 삽입 이미지
스프라이트와 같은 방법으로 마우스로 클릭한 후에 파일명으로 되어 있는 이름을 좌측과 같이 'myMusic'으로 이름을 변경합니다.



3. 스크립트 생성

1) 변수 isPlay 생성
현재 상태가 연주 중인지 정지 중인지를 알기 위해서 'isPlay'라는 변수를 하나 생성합니다. 이 변수가 '1'일때는 연주 중이며 '0'일 때는 정지 중을 나타냅니다.

사용자 삽입 이미지
좌측과 같이 붉은 색 [Varialbles] 버튼을 클릭한 후에 아래에 있는 [Make a variable]을 클릭합니다.




사용자 삽입 이미지
좌측과 같은 창이 나오면 변수명에 'isPlay"'를 입력하고 [OK] 버튼을 클릭합니다.

아래와 같이 isPlay 변수가 생겼음을 확인합니다.





사용자 삽입 이미지
[change isPlay by (1)] 현재 isPlay의 값에서 ()안의 수만큼 더합니다. ()안의 수를 -로 입력하면 그 수만큼 빼게 됩니다.

[set isPlay to (0)] isPlay의 값을 ()의 수로 설정합니다. 이 명령어 블록을 그대로 가져가면 isPlay는 0으로 설정됩니다.

[[v] isPlay] 변수이며 비교 및 사용시에 스크립트 영역으로 드래그해서 사용합니다. 체크[v]되면 스테이지에서 보이게 됩니다.

2) 명령어 블록 배치


a. 블럭 배치 방법
사용자 삽입 이미지
사용자 삽입 이미지
을 클릭한 후에 좌측과 같이 [When (flag) checked]를 마우스로 클릭한채로 Scripts 영역으로 드래그 하여 가져다 놓습니다.

삭제시에는 반대로 스크립트 영역 내의 블럭을 드래그 하여 블럭들이 있는 창으로 가져다 놓습니다.

사용자 삽입 이미지
스크립트 영역에서 여러 블럭들을 연결할 때는  해당 블럭을 드래그 하여 연결할 곳으로 가져 갑니다.

연결이 가능하면 좌측과 같이 붉은색 화살표가 가르키는 것과 같은 흰색 마크가 생깁니다. 여기서 마우스 버튼을 놓으면 그 위치에 블럭이 위치합니다.

b. 속성 변경 방법
사용자 삽입 이미지
좌측과 같이 블럭 중에서  하얀 배경색으로 되어 있는 부분은 마우스로 클릭 후에 키보드 입력으로 원하는 값으로 변경할 수 있습니다.

사용자 삽입 이미지
아래로 화살표가 있는 부분은 마우스를 클릭하면  선택 가능한 목록들이 표시됩니다. 마우스로 목록 중에서 선택될 부분을 클릭합니다.


c. 블럭 배치
이제 블럭들을 배치해 보겠습니다. 각각의 블럭들 항목에서 가져다가 스크립트 창에 블럭들을 아래와 같이 연결합니다.

사용자 삽입 이미지

[Control]에서 [when (flag) clicked]를 가져 옵니다. 사용자가 시작 버튼을 클릭하면 실행되는 부분입니다. 여기서 초기 시작시 필요한 행동이나 초기값을 설정할 수 있습니다.

[Variables]에서 [set isPlay to (0)]을 가져 옵니다. 처음에는 음악이 연주되지 않기 때문에 'isPlay' 변수 값을 '0'으로 설정합니다.

[Looks]에서 [switch to costume [stop]]을 가져 옵니다. 위와 마찬가지 이유로 정지 이미지가 표시되도록 합니다.

이제 음악의 연주와 중지를 위해 아래와 같이 각각의 블럭들을 가져와서 배치하고 설정합니다. 블럭들의 색을 참조하시면 블럭들이 포함된 위치를 알 수 있습니다.

사용자 삽입 이미지

각각의 스크립트 블록 명력들은 아래와 같은 동작됩니다.

[When [space] key pressed] 스페이스키가 눌러 졌을 때 아래에 연결된 블럭들이 실행됩니다.

[if <(isPlay) = 0>] 만약 현재 상태가 정지중이면 포함된 명령을 실행합니다.
[set isPlay to (1)]  현재 상태를 연주중으로 설정합니다.
[play sound [myMusic]] myMusic을 연주 합니다.
[switch to costume[play]] 버튼 모양을 연주중으로 변경합니다.

[else] 만약 현재 상태가 정지중이 아니면 포함된 명령을 실행합니다.
[set isPlay to (0)] 현재 상태를 정지로 설정합니다.
[stop all sounds] 연주를 중지 합니다.
[switch to costume[stop]] 버튼 모양을 중지로 변경합니다.


4. 실행 및 저장

1) 실행
사용자 삽입 이미지

사용자 삽입 이미지
좌측의 시작 버튼을 클릭합니다. 키보드에서 Space 키를 입력하시면 아이콘이 플레이 모양으로 변경되면서 등록한 음악이 연주가 됩니다. 중지 시에는 다시 Space키를 입력합니다.


2) 프로젝트 저장

사용자 삽입 이미지
툴바에서 [Save] 버튼을 클릭하여 지금까지 작업한 내용을 저장합니다. 저장된 파일은 [Open]을 이용해서 이후에 다시 불러 올 수 있습니다.

사용자 삽입 이미지

Project author 항목에는 제작자 이름을 입력합니다. About this project에는 이 프로젝트에 대한 설명을 입력합니다. 위의 두 입력은 선택사항이며 입력하지 않아도 무방합니다.

마지막으로 New Filename에 프로젝트 명을 입력하고 [OK]를 클릭하여 저장합니다.
(모든 입력창에서 한글은 입력되지 않습니다.)
스크래치로 음악을 연주하는 간단한 프로그램을 만들어 보았습니다. 다음 장에선 스프라이트를 움직이는 간단한 프로젝트를 만들어 보겠습니다.

AND