지난 시간에는 번개 효과를 추가했으므로 이번엔 사운드를 추가해 애니메이션을 완성해 보겠습니다.
시작해보죠.
먼저 라이브러리에서 시작해야 합니다.
에셋을 많이 만들면 이렇게 좀 어수선합니다.
에셋을 정리할 새 폴더를 만듭니다.
클릭하고 새 폴더를 만든 다음 이름을 Lightning Assets로 합니다.
이 폴더 안에는 이 폴더를 넣습니다.
원본 PSD 폴더죠.
번개 비트맵과 번개 복사본도 이 폴더에 넣습니다.
이제 폴더 하나를 더 만들어 SOUND에 해당하는 파일을 넣습니다.
라이브러리를 체계적으로 관리하는 것이 중요한데요.
여기를 보면 상단에 폴더가 하나 있고 하단에 폴더가 하나 있습니다.
이 폴더 이름에 밑줄을 추가하여 _SOUND로 이름을 바꾸면 이 폴더가 맨 위에 배치됩니다.
Lightning Assets 폴더도 마찬가지로 밑줄을 추가하고 Enter를 누르면 이렇게 바뀌면서 폴더가 맨 위에 배치되고 라이브러리가 정돈됩니다.
Animate에는 모든 유형의 사운드를 가져올 수 있습니다.
Adobe 사운드 파일, WAV 파일, AIF 파일, MP3 파일 등을 가져올 수 있는데요.
가장 많이 사용하는 파일 유형에 속하죠.
그러면 사운드를 가져와 볼까요?
파일 메뉴에서 가져오기를 선택합니다.
스테이지로 가져오거나 라이브러리로 가져올 수 있죠.
사운드를 추가하기 전에 새 레이어를 추가합니다.
Animate에는 사운드를 넣는 전용 레이어가 없기 때문에 각 사운드를 하나의 오디오 채널로 간주하고 새 레이어를 추가하는 것이 좋습니다.
여기를 클릭하고 Waves를 입력합니다.
이 레이어에 첫 번째 사운드를 가져와 넣습니다.
첫 키프레임을 선택한 상태에서 파일 메뉴에서 가져오기, 스테이지로 가져오기를 선택합니다.
스테이지로 가져오기를 선택해도 사운드는 라이브러리에 자동 추가됩니다.
Waves.mp3를 두 번 클릭하면 타임라인에 있는 첫 번째 키프레임에 파형이 표시되고 라이브러리에도 추가된 것을 확인할 수 있죠.
Waves.mp3를 클릭하고 _SOUND 폴더로 드래그하면 이제 파도 소리를 들을 수 있습니다.
좋습니다.
이 파도 사운드 또는 첫 번째 키프레임을 클릭하면 속성 패널을 살펴볼 수 있는데요.
속성 패널에 사운드 섹션이 있습니다.
따라서 이 키프레임을 선택한 다음 이 드롭다운 메뉴에서 Waves.mp3를 선택할 수도 있습니다.
Animate에는 두 가지 유형의 사운드가 있는데요.
이벤트 사운드와 스트림 사운드입니다.
이벤트 사운드는 재생 전에 모든 사운드를 다운로드한 다음 ActionScript에 의해 중단될 때까지 또는 사운드가 끝날 때까지 재생됩니다.
반면 스트림 사운드는 아쉽게도 Canvas 영역에는 지원되지 않는데요.
스트림 사운드는 첫 프레임의 데이터가 다운로드되는 즉시 재생을 시작하고 각 프레임은 타임라인과 정확하게 동기화되므로 한 프레임이 진행되면 해당 프레임의 사운드만 재생되고 그다음 프레임이 진행되면 해당 프레임의 사운드가 재생되는 방식입니다.
사운드가 각 프레임에 분산되어 있죠.
하지만 아쉽게도 HML5 Canvas는 이벤트 사운드만 사용할 수 있어 내보낼 수는 있지만 플러그인은 사용할 수 없습니다.
이 경우 한 가지 옵션만 고를 수 있는데요.
이벤트 옵션입니다.
따라서 사운드가 첫 번째 키프레임에 로딩되고 끝까지 재생됩니다.
원하면 사운드를 반복할 수도 있죠.
반복을 선택하면, 1회라고 되어 있는데요.
이 파도는 전 애니메이션에 해당하는 약 130개 프레임에 걸쳐 재생되므로 1회 반복이면 충분할 것 같습니다.
하지만 이보다 더 긴 애니메이션이라면 사운드를 몇 차례 반복하거나 루프를 선택해 영구 반복하는 것도 좋겠죠.
하지만 이 경우 1회 반복이 적절합니다.
라이브러리로 돌아가 이번에는 번개를 가져와 추가하겠습니다.
하지만 타임라인에 가져오는 대신 번개가 치는 세 지점에 배치하려고 하는데요.
먼저 라이브러리로 가져온 다음 타임라인에서 적절한 위치로 가져와 배치하겠습니다.
이번에는 파일 메뉴에서 가져오기를 선택한 다음 스테이지로 가져오기의 단축키인 Command+R 대신 라이브러리로 바로 가져옵니다.
Lightning.mp3 사운드를 선택하고, 두 번 클릭하면 라이브러리에 추가됩니다.
그러면 이 사운드를 _SOUND 폴더로 드래그하여 파일을 찾기 쉽게 구성합니다.
이제 아래 타임라인에서 번개가 치는 시점을 살펴보죠.
여기가 되겠습니다.
새 레이어를 추가하고 Lightning으로 입력합니다.
그런 다음 여기에 키프레임을 추가합니다.
새 키프레임 삽입 아이콘을 클릭하면 되겠습니다.
키프레임이 삽입되면 이것을 클릭해 선택하고 속성 패널로 이동합니다.
이번에는 속성 패널의 프레임 섹션과 사운드 섹션이 표시됩니다.
드롭다운 메뉴를 보면 현재 이 라이브러리에 포함된 모든 사운드가 표시되어 있습니다.
Lightning.mp3와 Waves.mp3가 있죠.
Lightning.mp3를 선택하고 다시 타임라인에서 새 레이어를 추가하고 타임라인에서 번개가 치는 또 다른 지점을 찾습니다.
여기죠.
여기에서 이 레이어를 선택한 상태에서 키프레임을 추가하겠습니다.
두 번 클릭하고 Lightning으로 입력합니다.
다시 한번 이 키프레임을 클릭해 선택하고 속성 패널에서 Lightning.mp3를 다시 선택합니다.
한 번만 더 번개를 추가하면 되는데요.
이 정도가 되겠습니다.
프레임 66이 될 것 같은데요.
레이어를 복제하여 사운드를 추가할 수 있으므로 마우스 오른쪽 버튼으로 클릭하고 이 번개의 사운드 레이어를 복제합니다.
그러면 lightning_copy 레이어가 만들어지죠.
이것을 프레임 66까지 드래그하여 키프레임을 한번 클릭한 다음 마우스를 놓습니다.
클릭하고 누른 상태에서 옆으로 드래그합니다.
프레임 66에서 시작합니다.
좋습니다.
여기를 보면 사운드가 애니메이션이 끝난 후까지 배치되어 있어 타임라인이 길어졌는데요.
이 경우 클릭한 다음 드래그하여 이 구간의 레이어를 선택한 다음 마우스 오른쪽 버튼으로 클릭하고 프레임 제거 또는 Shift+F5를 누릅니다.
이제 타임라인이 조금 복잡해졌습니다.
번개 오디오 레이어 세 개가 있고 파도 오디오 레이어가 하나 있죠.
오디오 레이어도 폴더를 만들어 정리할 수 있습니다.
클릭하여 새 폴더를 추가하고 AUDIO 또는 SOUND로 입력하고 위로 드래그합니다.
Lightning을 클릭하고 Shift 키를 누른 상태에서 Waves 레이어를 클릭한 다음 이 폴더로 모두 드래그합니다.
폴더를 축소하면 깔끔하게 정리되죠.
Command+Enter를 눌러 테스트해 보겠습니다.
훌륭합니다.
모두 마쳤는데요.
사운드에 대한 이 튜토리얼이 유익했기를 바라며 다음 시간에 다시 뵙겠습니다.
