이번장에서는 신나는 음악에 맞추어 케릭터가 춤을 추는 에니메이션을 만들어 보겠습니다. 연속적으로 케릭터가 동작하는 방법과 스크래치에 포함된 케릭터, 배경 이미지와 음악을 활용하는 방법을 알아 보겠습니다.   


1. 배경화면 설정
스크래치는 페인트 툴과 녹음 기능을 이용하여 원하는 이미지와 효과음을 직접 만들어 사용할 수도 있고, 존재하는 파일을 불러 와서 사용할 수 있습니다. 이와 함께 사용자가 스크래치에 이미 준비되어 있는 각종 그림과 음악 파일들을 사용할 수 있습니다.

스크래치가 설치된 폴더를 보면 Media란 폴더가 있습니다. 이곳에는 배경과 커스튬에 사용할 수 있는 이미지 파일과 효과음과 배경음으로 사용할 수 있는 음악 파일들이 있습니다. 이곳에 있는 파일들을 이용하면 손쉽게 원하는 스크래치 프로그램들을 만들 수 있습니다.

1) 배경화면 설정
스크래치 우측하단의 Stage의 사각형 부분을 클릭하면 Backgrounds란 텝이 나타납니다. New background:에서 [Import] 버튼을 클릭합니다.

Backgrounds/Indoors 폴더를 선택합니다. spotlight-stage 이미지 파일을 선택하고 [OK] 버튼을 클릭합니다. 기존의 background1로 되어 있는 파일은 (X) 버튼을 클릭하여 삭제합니다.


2. 커스텀 설정

1) 기본 스프라이트 삭제
새로운 스크래치 프로젝트를 만들면 좌측과 같이 스크래치의 기본 캐릭터가 Sprite1로 설정되어 있습니다.

 기본 캐릭터에 마우스 오른쪽 버튼을 클릭하여 나오는 메뉴에서 delete를 클릭하여 삭제합니다.


2) 스프라이트 추가
좌측과 같은 우측 중간에 위치해 있는 버튼을 클릭하여 스프라이트를 파일로 부터 추가합니다. 아래와 같은 창이 뜨면 Costumes/People에서 breakdancer-1이란 스프라이트를 추가합니다.


3) 커스튬 추가
춤추는 에니메이션을 위해서 기본 스프라이트에  커스튬을 추가합니다. 스프라이트의 Custumes 탭에서 New costume의 [Import] 버튼을 클릭하여 breakdance-2부터 4까지 파일을 아래와 같이 추가 합니다.

3. 배경음 설정
Stage가 선택된 상태에서 아래와 같이 Sounds탭을 선택한 후에  New sound:의 [Import] 버튼을 클릭합니다. 창이 뜨면 Sounds/Music Loops밑의 Drum을 선택합니다. 아래와 같이 Drum 사운드 파일이 등록되었음을 확인합니다.


4. 스크립트

1) 에니메이션
스크립트 블럭을 가지고 와서 아래와 같이 배치합니다.

[switch to costume (custume)]은 현재 스프라이트의 커스튬(이미지)를 설정된 커스튬으로 변경해 주는 명령어 입니다. 아래와 같이 화살표를 클릭하면 현재 스프라이트에 등록된 custume을 선택할 수 있습니다.

[repeat (5)]는 블럭안의 명령어들이 ()안에 지정된 숫자만큼 반복해서 실행됩니다. [wait (0.5) secs]는 ()안에 지정된 초만큼 기다렸다 다음 블럭이 실행됩니다.

여기선 custume1을 보여 주고 0.5초씩 멈추어 가며  2, 3, 4 custume을 반복해서 5회 보여 준 후에 다시 custume1 부터 반복해서 보여주게 만들어 줍니다. 이 명령어들로 케릭터가 반복적으로 춤을 추는 것처럼 보이는 에니메이션을 만듭니다.

2) 배경음악 출력
Stage를 클릭하고 Scripts에서 아래와 같이 블럭을 배치 합니다.


[forever]로 배경음악을 반복해서 연주 하도록 합니다. [play sound (Drum) until done]은 음악이 끝날 때까지 다음 명령어가 실행되지 않습니다. [play sound (Drum)]은 연주가 끝나지 않더라도 계속 연주를 하기 때문에 겹쳐서 들리게 됩니다.

이제 깃발 버튼(Start)을 클릭하여 실행하여 봅니다. 음악에 맞추어 브레이크 댄스를 추는 모습을 볼 수 있습니다.

이번 장에서는 이전 포스트에서 만들었던 프로젝트를 스크래치 홈페이지에 올려 다른 사람들과 공유하는 방법에 대해서 알아 보겠습니다.

업로드 하기전에 이전 포스트에서 작업했던 프로젝트를 조금 변경해 보겠습니다. 연주/정지 명령을 키보드 스페이스 입력으로 되어 있던 부분을 마우스 클릭으로 받도록 변경해 보겠습니다.

1. 프로젝트 수정

상단 툴바의  [Open] 버튼을 클릭하여 이전 포스트에서 작성해 놓은 프로젝트를 불러 옵니다. 

1) 키보드 입력 블럭 제거
[when space key pressed]를 제거합니다.

[when space key pressed] 블럭을 마우스로 드래그 하면 해당 블럭들 전체가 이동을 합니다. 그렇기 때문에 그 하단의 [if <(isPlay)=0>] 블럭 부분을 마우스로 클릭한 후에 이동하여 분리합니다.

분리된 후 [when space key pressed] 블럭을 좌측의 블럭들 목록으로 드래그 하시면 삭제됩니다.






2) 마우스 클릭 블럭 추가

스프라이트에 마우스 버튼이 클릭되었을 경우에 행동을 지정하기 위해  [when (sprite name) clicked]를 사용합니다. (sprite name)은 해당 스프라이트의 이름입니다. 저는 위의 이미지와 같이 'Play'로 변경하였습니다.

첫번째 스프라이트는 기본값으로 'Sprite1'로 지정되며, 이 경우에는 [when Sprite1 clicked]로 되어 있을 것입니다. 이 블럭을 클릭하여 아래와 같이 [if <(isPlay)=0>]  상단에 결합 합니다.


3) 블럭 수정
기존의 연주 상태를 나타내기 위해 스프라이트를 사용했지만 버튼으로 사용하기 위해 스프라이트의 이미지를 반대로 설정합니다. 이전에는 연주중이면 연주중이라는 표시를 위해 play 이미지를 사용했지만, 이제 연주를 중지하는 명령의 의미로 사용하기 때문에 연주 중에는 stop이미지를 사용합니다. 반대로 연주가 중지 중일때도 동일하게 적용합니다.

이를 위해 [switch to costume [custume]] 블럭들의 모양(custume)을 위의 붉은색 표시와 같이 이전과는 반대로 이미지를 설정합니다. 이제 기존의 space 키 대신에 마우스로 버튼을 클릭하여 음악을 연주/중지 할 수 있습니다.


2. 프로젝트 업로드

1) 업로드
상단 툴바에서 좌측과 같은 Share!를 클릭합니다. 아래와 같은 업로드 창을 보실 수 있습니다.

스크래치 사이트에 회원가입이 되있어야 업로드를 할 수 있습니다. 회원등록을 하지 않으셨으면 아이디 입력란 하단에 Create account을 클릭하여 스크래치 사이트로 들어가 회원 가입을 합니다. (회원가입에 관련된 내용은 이전 포스트를 확인해 주세요.)


Your scratch website login name: 스크래치 사이트의 로그인 아이디를 입력합니다.

Password: 스크래치 사이트의 로그인 패스워드를 입력합니다.

Project name: 프로젝트 이름을 입력합니다.

Project notes: 프로젝트에 관한 간단한 설명을 입력합니다.

Tags: 프로젝트의 미리 정의된 태그를 설정합니다.

More tags: 사용자가 필요한 태그를 입력합니다.

[v] Compress sounds and image 포함된 음악, 이미지 파일의 압축 여부를 선택합니다.

각각의 입력을 확인한 후 [OK] 버튼을 클릭합니다. 좌측과 같은 진행 창이 오픈되어 업로드 상황을 확인할 수 있습니다.

"Your project is now online at scratch.mit.edu" 란 메시지가 나오면 성공적으로 업로드 된 것입니다. [OK]를 클릭합니다.



2) 스크래치 사이트에서 확인
이제 확인을 위하여 스크래치 사이트로 가서 로그인을 한 후에 우측 상단 메뉴의 my stuff를 클릭합니다. 아래와 같이 업로드 한 프로젝트들을 보실 수 있습니다.


a. 상세 보기
조금 전에 올린 playDemo2를 클릭하여 상세보기로 들어 갑니다. 아래와 같이 실행 화면과 기타 프로젝트에 관련된 정보를 볼 수가 있습니다.



b. 다른 웹사이트 올리기
상세보기에서 좌측을 보시면 'Link to this Project'란 메뉴가 있습니다. 이 메뉴 중 Embed는 프로젝트와 이미지를 직접 HTML을 넣을 수 있는 소스를 제공합니다. 이 소스를 복사하여 홈페이지나 블로그 편집창에서 붙여 넣으시면 해당 사이트(블로그)에서 바로 실행할 수 있습니다. Post는 del.icio.us, Digg, Facebook, Reddit과 같은 웹사이트에 바로 등록할 수 있게 해줍니다.


c. 댓글
스크래치 사이트에서는 다른 사람들이 올린 프로젝트에 댓글을 달 수가 있습니다. 아래는 위의 샘플 프로젝트에 달린 댓글들입니다.

좌측에 보시는 것처럼 제가 올린 프로젝트에 두 개의 댓글이 등록되어 있습니다.

위의 댓글은 "뭐 이런 간단한 것을 올렸냐"는 의미인 것 같습니다. 아래 댓글은 "너무나 간단해서 신선하다" 그런 의미인 것 같고요.

보시는 바와 같이 댓글을 통해 다른 사람들과 의견을 교환할 수 있습니다. 잘 만든 프로젝트에는 칭찬이 달리고 못 만들었더라도 격려와 개선사항에 대해서 알려 줍니다. 나이 어린 사용자들이 많아서인지 악플은 거의 없는 것 같습니다.

이상으로 만들은 프로젝트를 스크래치 사이트로 업로드 하는 방법에 대해서 알아 보았습니다. 꼭 잘만들지 않았더라도 업로드 하고 공유하여 다른 사람들의 의견과 조언을 들을 수 있습니다. 또한 꾸준히 올려 본인만의 프로젝트 갤러리를 만들어 발전하는 모습을 쉽게 확인할 수 있습니다.

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


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

예제로 사용된 MP3에 대하여...

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>] 만약 현재 상태가 정지중이면 포함된 명령을 실행합니다.
[else] 만약 현재 상태가 정지중이 아니면 포함된 명령을 실행합니다.

4. 실행 및 저장

1) 실행

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


2) 프로젝트 저장

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


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

마지막으로 New Filename에 프로젝트 명을 입력하고 [OK]를 클릭하여 저장합니다.
(모든 입력창에서 한글은 입력되지 않습니다.)

스크래치로 음악을 연주하는 간단한 프로그램을 만들어 보았습니다. 다음 장에선 스프라이트를 움직이는 간단한 프로젝트를 만들어 보겠습니다.