태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

ActionScript2.0 'onSoundComplete' 활용 온라인 강의 예제 만들기

오늘은 ActionScript2.0을 다시 공부하는 하루가 되어버렸다.
내 머리가 슈퍼컴퓨터라고 한들 자주 쓰지않으면 녹이 쓸기 마련인 탓에 한동안 플래시와 친하게 지내지 않았더니 갑작스런 요청으로 제작하는 온라인 강의 파일 몇 개 제작하는 것도 쉽지가 않구만.

보내온 스토리보드를 보니 별로 복잡한 것들이 아니라서 4개의 강의는 금방 해치울 수 있었는데 마지막 한 개가 골머리를 아프게 만들어 버린다. 결과물에만 초점을 맞춘다면 단순 무식하게 노가다성 작업으로 작업을 마칠 수 있지만 성질 까칠한 탓에 그 꼴을 두고 보지 못하는 까닭이다. 아래는 스토리보드 최종 재생화면 이다.

사용자 삽입 이미지
이미지에서 보는 바와 같이 상단 타이틀은 무비클립으로 효과를 주고 무비 재생과 동시에 강사의 강의 사운드 m-23-1 이 재생되기 시작하고 타임라인은 [부제]레이어의 중간인 10프레임에서 정지했다가 사운드 재생이 완료되고 나면 11프레임으로 넘어가 두번째 강의 사운드 m-23-2 가 재생이 되고 이 사운드 스크립트가 재생이 완료되고 나면 16프레임으로 넘어가 팝업 클립이 재생되기 직전의 24프레임에서 정지해 마우스 버튼을 이용 팝업 클립을 호출 할 수 있도록 하면 되는 스토리였다.
 
논리적으로 구현이 가능한 스토리라 잠시 생각을 정리하고 몇 가지 액션을 적용해서 작업을 마친다음 무비테스트를 하니 제멋대로 짬뽕이 되어 사운드도 겹치고 쇼를 하고 있다. 몇 차례 디버거를 통해서 어느정도 안정은 되었지만 요구하는 구현이 나오지 않았다.
 
문제는 사운드가 재생이 완료되고 난 다음 다음 이벤트를 구현할 수 있는 스크립트를 알아내는것이 관건이였다. 기존에 알고 있는 액션스크립트 지식으로는 해결하기 힘들어 관련자료를 수집에 들어갔다. 우여곡절 끝에 onSoundComplete 구문을 찾아 문제해결의 실마리를 찾았다 싶었는데 function() 함수를 염두에 두지않아 원하는 결과를 구현할 수 없었다.

좀 더 관련수집에 들어가 플래시 개발자 커뮤니티인 FlashDeveloper 의 '사운드가 모두 플레이된 후에 특정 함수를 호출 실행시키기' 를 통해 힌트를 얻을 수 있었다.

아래는 그 후 정상적인 온라인 강의 무비를 제작한 플래시 작업화면과 타임라인의 모습이다.
사용자 삽입 이미지

온라인 강의 무비 제작 플래시 화면

사용자 삽입 이미지

온라인 강의 무비 제작 타임라인


액션스크립트2.0의 'onSoundComplete' 구문의 핵심은 사운드가 재생이 완료되고 난 다음 다음 이벤트를 구현할 수 있는 스크립트라는 점이고 이 구문을 이용한 사운드레이어 액션 적용은 다음과 같다.

[사운드 레이어 1프레임 ActionScript]
var s1:Sound = new Sound();
s1.attachSound("m-23-1");
s1.onSoundComplete = function() {_root.gotoAndPlay("11");
};
s1.start();

[팝업 레이어 10프레임 액션]
stop();

[사운드 레이어 11프레임 ActionScript]
var s2:Sound = new Sound();
s2.attachSound("m-23-2");
s2.onSoundComplete = function() {_root.gotoAndPlay("16");
};
s2.start();

[팝업 레이어 15프레임 액션]
stop();

[사운드 레이어 24프레임 ActionScript]
stop();

다음은 마우스 버튼으로 팝업 이벤트를 처리하면서 완료하는것으로 온라인 강의 무비를 요구하는 스토리보드 내용대로 마감할 수 있었다. 이렇게 구현한 온라인 강의 플래시무비는 다음과 같다.


온라인 강의 무비가 재생되면 강사의 강의 설명음성이 재생된다. 음성 강의 1~2번까지 순차적으로 재생이 완료되는 시점인 "마우스를 클릭해 보세요"라는 말이 끝나면 항목이 5개의 클립 이벤트 항목이 순차적으로 호출되고 버튼이벤트를 실행할 수 있는 프레임에 멈추게 된다.

역시 사람은 배워야 한다. '아는것이 힘이다'라는 말이 뼈에 사무치는 하루였다. 알고보면 별것도 아닌데 모르면 손발이 고생하는 까닭이다. 오늘의 경험을 바탕으로 한번 알게된 지식은 이렇게 정리해 놓으므로써 다음에 유용하게 쓸 수 있지않을까 싶다. 물론 이와 비슷한 무비를 제작하고자 하는 사람이 있다면 이 글이 작은 힘이 되었으면 하는 바람도 남겨본다.
신고
※글에 대한 여러분 의견을 남겨 주십시오. 감사합니다!
  1. Favicon of http://www.matzang.com BlogIcon MZX 2007.11.03 11:32 신고  댓글주소  수정/삭제  댓글 남기기

    좋은정보 감사합니다. ^^

  2. Favicon of http://techroad.net BlogIcon 학주니 2007.11.03 13:10 신고  댓글주소  수정/삭제  댓글 남기기

    언젠가 써먹을만한 고급정보(^^)네요.. ^^

  3. Favicon of http://m-log.net BlogIcon 엠의세계 2007.11.03 16:56 신고  댓글주소  수정/삭제  댓글 남기기

    플래쉬는 쓸줄 모르겠어서 뭐라 말할수가 없군요... 하지만 마지막에 사람은 배워야 한다는 말은 공감합니다.
    학교에서 포토샵을 잠깐 배웠는데 강사가 스파르타라서 꽤 많이 배울 수 있었습니다. 그런데.....역시 방학 끝나고 나니 다 까먹더군요. 계속 연결해서 이것저것 해봤으면 좋았을 걸 하고 후회중입니다.

  4. Favicon of http://seoltang.com BlogIcon ㄹㅔㅈㅕ 2007.11.04 23:03 신고  댓글주소  수정/삭제  댓글 남기기

    저도 플래시 많이 써봤지만 쓸줄 아는 액션스크립트는 stop, geturl 등등 아주그냥 초급적인거만 많이 써봤어요.. 주로 웹 디자인용으로 사용을 해서.ㅋㅋ 마루님께서 말씀하신걸 읽어보니 뭔소린지 모르겠군요.ㅡㅡ;ㅎㅎㅎ 공부 더 해야겠습니다.ㅋ

  5. Favicon of http://0ple.wo.tc BlogIcon 공상플러스 2007.11.05 17:07 신고  댓글주소  수정/삭제  댓글 남기기

    아직도 구닥다리 MX버젼 쓰는 1인. 그래도 쓸만한..ㅋㅋ
    (그래도 마우스피하기 쯤은 기본 아니겠습니까.. 쿠하하!!)

  6. 미션임파썩을 2010.10.17 12:48 신고  댓글주소  수정/삭제  댓글 남기기

    오오감사합니다.
    플래이리스트를 만들고있었는데..onSoundComplete이벤트를 몰라서...흑흑
    음악이끝나고 다음 노래가 안나오는형상이낫쥬......
    감사합니다.


우드스