|
얼마전 제가 이 팁과 관련된 질문도 받고 해서...소리가 시끄러우면 이퀄라이저를 사뿐히 눌러주세요. 다시 누르면 재생됩니다.
마우스 우클릭이 열려 있으니 스크립트를 직접 무비클립에 기입해 보세요.
질문의 요지인 즉슨 이퀄라이저를 만들때...사운드의 증폭에 따라 능동적으로 같이 움직이는 사운드 이퀄라이저를 어찌 만드느냐는 것이었죠.
준비물이 필요합니다.
1. 네이버나 다음, 티스토리나 텍스트큐브가 아닌 외부를 지원해 주는 업로드사이트
2. 가장 좋은 것은 스위시 쥬크박스 정품. 스위시 쥬크박스가 없으면 SwiftMp3 - 여길클릭
3. 디컴파일러
흠...좀 복잡하죠?ㅋㅋㅋㅋㅋ
먼저 스위시 쥬크박스나 SwiftMp3 로 음원을 swf 로 변환합니다.
변환을 할 때는 아래의 옵션대로 변환합니다. 프레임레이트는 12로 맞추고 음원은 무한반복을 줍니다. 스위시쥬크박스 음원은 초기 디폴트값이 무한반복이고 SwiftMp3 는 Never 에 체크를 하면 무한반복이 됩니다. 물론 무한반복 한번반복은 그리 큰 상관이 없습니다. 왜냐하면 나중 소개 드릴 일이 있을지 모르지만 맥스에서 스크립트로 무한반복 한번반복을 줄 수 있기 때문이죠.
이건 애초에 한번반복인 쇼인코딩을 통한 swf 음원을 로드무비로 받아 무한반복 시킬 때는 매우 유용한 기법일수도 있어서 나중에 소개를 드릴게요.
가장 중요한 것은 스펙트럼 데이터 옵션에 체크를 해야 된다는 거죠. 이걸 체크해야면 능동성을 가진 이퀄라이저를 만들 수 있습니다.
그리고 스위시 쥬크박스의 경우는 이퀄라이저의 막대기 숫자를 내가 정할 수 있는 옵션이 있지만 SwiftMp3 는 그것이 없습니다.
뭐 더 고버전 유료일 경우에는 그게 있을 수도 있겠지만...그래서 스위시 쥬크박스 인코딩이 최선이고 그게 없으면 차선으로 SwiftMp3 를 이용하라는 것이겠죠.
아래 그림은 차례대로 SwiftMp3 와 스위시 쥬크박스에서의 인코딩 옵션을 나타낸 것입니다.
mp3음원 - http://wittazzurri.swishmax.kr/swf/equalizer/PipoSong.mp3
SwiftMp3 인코딩 음원 - http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwiftMp3.swf
스위시 쥬크박스 인코딩 음원 - http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf
이걸 디컴파일러로 띄워 액션 스크립트 부분을 살펴 봅니다. 스위시 쥬크박스 인코딩 파일의 1번 프레임 액션은 아래처럼 나타납니다.
// [Action in Frame 1]
title = "";
artist = "";
album = "";
duration = "115";
id3 = "1";
s0 = "6";
s1 = "10";
s2 = "3";
s3 = "7";
s4 = "2";
s5 = "2";
s6 = "2";
s7 = "2";
s8 = "1";
s9 = "1";
흠...s0 에서 s9 까지의 변수가 보입니다. 0부터 9까지는 모두 10개...따라서 내가 옵션에서 정해준 갯수대로의 변수값이 프레임마다 심어져 있다는 걸 느끼실 거에요.
반면...SwiftMp3 의 경우에는 이 변수가 0번부터 17번까지 18개가 나타납니다. 물론 이퀄라이저를 만들 때는 변수가 18개라도 막대기를 숫자대로 만들 필요는 없습니다. 10개를 만들고 싶으면 저 변수값 중에서 0번부터 9번까지만 취하면 되는 것이구요.
이 기교를 익히기 전에 반드시 http://cafe.naver.com/iloveswish/81750 기교를 익히시기 바랍니다. 그래야 이해가 되니까요.
swi 를 열어봅니다. songClip 무비클립에 최종소스가 적혀 있는데 이거 싹 지우시고 아래과정을 따라하시기 바랍니다.
세이프를 복제합니다 그런데 예전 게시글에서는 1부터 시작한 포문을 사용했지만 오늘은 0부터 시작해야 합니다. 왜냐하면 인코딩된 음원의 변수 첫값이 0이기 때문이죠.
아래처럼 0부터 9까지를 범위로 준 막대기 클립을 복제합니다. 이건 시작값이 0이니까 좌측으로 이동시킬 필요가 없어집니다.
onSelfEvent (load) {
eqBars = 10;
clip._visible = 0;
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n;
}
음원을 로드무비로 받습니다. 흠...음원을 로드무비로 받을때는 굳이 무비클립을 따로 만들지 않고 스크립트로 무비클립을 생성해서 스크립트로 생성한 무비클립안에 로드무비 명령을 심는 것이 편할 것 같네요. 무비클립을 생성하는 명령은 아래와 같습니다.
createEmptyMovieClip("무비클립명", 심도)
문제는 심도네요. 심도를 어찌 주어야 할까요? 지금 무비클립 복제를 할 때 duplicateMovieClip("clip" + n, n) 명령을 주었습니다. 여기서 괄호의 마지막 n 은 이 복제클립의 심도를 나타냅니다. 복제클립의 마지막 심도는 9입니다. 0부터 9까지니까요. 음원이나 다른 로드 컨텐츠물이 제대로 보여지려면 복제 클립의 심도보다 생성 무비클립의 심도가 더 숫자가 커야 합니다. 따라서 음원의 심도는 10이 최하값입니다. 아래 소스에서 심도를 10 미만으로 주면 음원이 나오지를 않습니다.
createEmptyMovieClip("무비클립명", 10);
그런데...10이란 값은 특정값입니다. 특정값은 소스를 짤 때 별로 좋지 않다고 했죠? 될수 있으면 일반값을 줘야 합니다. 가만히 보면 이 10이란 값은 결국 eqBars 와 동일값임을 알게 되죠.
아래처럼 소스를 구성합니다.
onSelfEvent (load) {
eqBars = 10;
createEmptyMovieClip("loadSong", eqBars);
loadSong.loadMovie("http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf");
clip._visible = 0;
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n;
}
로드무비로 불러온 사운드의 s 변수값을 복제클립 막대기의 온엔터프레임 세로값으로 받으면 될까요?
onSelfEvent (load) {
eqBars = 10;
createEmptyMovieClip("loadSong", eqBars);
loadSong.loadMovie("http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf");
clip._visible = 0;
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n;
onEnterFrame = function() {
clip0._height = loadSong.s0;
clip1._height = loadSong.s1;
clip2._height = loadSong.s2;
clip3._height = loadSong.s3;
clip4._height = loadSong.s4;
clip5._height = loadSong.s5;
clip6._height = loadSong.s6;
clip7._height = loadSong.s7;
clip8._height = loadSong.s8;
clip9._height = loadSong.s9;
}
}
흠 막대기의 길이가 작군요...적당히 곱셈을 해 줍니다. 세로값 변수에 3을 곱하겠습니다.
onSelfEvent (load) {
eqBars = 10;
createEmptyMovieClip("loadSong", eqBars);
loadSong.loadMovie("http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf");
clip._visible = 0;
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n, onEnterFrame = function() {
clip0._height = loadSong.s0 * 3;
clip1._height = loadSong.s1 * 3;
clip2._height = loadSong.s2 * 3;
clip3._height = loadSong.s3 * 3;
clip4._height = loadSong.s4 * 3;
clip5._height = loadSong.s5 * 3;
clip6._height = loadSong.s6 * 3;
clip7._height = loadSong.s7 * 3;
clip8._height = loadSong.s8 * 3;
clip9._height = loadSong.s9 * 3;
}
}
곱셈값을 변수로 따로 만듭니다. 나중 이걸 2.7 이나 4등 숫자 하나만 바꾸면 핸들링 되도록 변수를 만들어 주는 것은 일종의 불문율이라고 생각하면 쉽습니다.
약간 크기를 더 키워 3.2 를 주고 변수 처리했습니다.
onSelfEvent (load) {
eqBars = 10;
eqH = 3.2;
createEmptyMovieClip("loadSong", eqBars);
loadSong.loadMovie("http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf");
clip._visible = 0;
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n, onEnterFrame = function() {
clip0._height = loadSong.s0 * eqH;
clip1._height = loadSong.s1 * eqH;
clip2._height = loadSong.s2 * eqH;
clip3._height = loadSong.s3 * eqH;
clip4._height = loadSong.s4 * eqH;
clip5._height = loadSong.s5 * eqH;
clip6._height = loadSong.s6 * eqH;
clip7._height = loadSong.s7 * eqH;
clip8._height = loadSong.s8 * eqH;
clip9._height = loadSong.s9 * eqH;
}
}
저 소스를 그대로 쓰느니 나는 '자살'을 하는 것이 낫다는 마음가짐으로 스크립트를 대하세요. 저건 너무나 당연하게도 포문으로 통합해야 합니다.
onSelfEvent (load) {
eqBars = 10;
eqH = 3.2;
createEmptyMovieClip("loadSong", eqBars);
loadSong.loadMovie("http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf");
clip._visible = 0;
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n, onEnterFrame = function() {
for (i = 0; i < eqBars; i++) this["clip" + i]._height = loadSong["s" + i] * eqH;
}
}
버튼을 만들어야겠네요. 자체 토글 버튼을 만들겠습니다.
이전 게시글과 원리는 똑같습니다. 원본세이프를 알파 0으로 부활시키고 불린값을 하나 만들어서 불린값이 1일 때와 0일 때를 분기해서 그걸 버튼에 심으면 되겟습니다.
온엔터프레임 콜백은 따로 분리해야겠네요...
onSelfEvent (load) {
eqBars = 10;
eqH = 3.2;
createEmptyMovieClip("loadSong", eqBars);
loadSong.loadMovie("http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf");
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n;
eqOption = 1;
onEnterFrame = function() {
for (i = 0; i < eqBars; i++) this["clip" + i]._height = eqOption ? loadSong["s" + i] * eqH : null;
}
tellTarget (clip) _alpha = 0, _width = _parent._width, onPress = function() {
eqOption ? (eqOption = 0, loadSong.stop()) : (eqOption = 1, loadSong.play());
}
}
아래는 스르르 줄어드는 소스입니다. 이전 게시글을 충분히 숙지하셨으면 금방 이해가 되겠죠.
onSelfEvent (load) {
eqBars = 10;
eqH = 3.2;
createEmptyMovieClip("loadSong", eqBars);
loadSong.loadMovie("http://wittazzurri.swishmax.kr/swf/equalizer/Pipo_SwishJukebox.swf");
for (n = 0; n < eqBars; n++) clip.duplicateMovieClip("clip" + n, n), this["clip" + n]._x = 10 * n;
eqOption = 1;
onEnterFrame = function() {
for (i = 0; i < eqBars; i++) eqB = this["clip" + i], eqB._height = eqOption ? loadSong["s" + i] * eqH : eqB._height > 5 ? eqB._height - 2 : 5;
}
tellTarget (clip) _alpha = 0, _width = _parent._width, onPress = function() {
eqOption ? (eqOption = 0, loadSong.stop()) : (eqOption = 1, loadSong.play());
}
}
단 이전의 게시글은 셋인터벌에서 0.1 초라는 간격이지만 이것은 온엔터프레임 고정속도이기 때문에 그것보다 2.5 배 속도가 빠릅니다. 그래서 줄어드는 값을 2픽셀로 주었습니다.
셋인터벌과 온엔터프레임 양쪽 모두를 이해시키기 위해 두 게시글의 소스를 나누었습니다. 이 소스를 한번 셋인터벌로 바꿔서 버튼을 외부로 뺀 토글형식으로 만들어 보는 연습들을 해 보시길...
이렇게 만든 파일은 반드시 로드로 불러온 음원과 동일사이트에 업로드 하시길...
http://wittazzurri.swishmax.kr/swf/equalizer/PipoSong.swf
로드파일과 메인파일이 다른 사이트에 있으면 스크립트의 많은 부분이 무력화됩니다 | 
wittazzurri[1].swf