[슈퍼액션]온라인강좌 1.플래시동영상(FLV)의 모든것을 알아보자 1부

안녕하세여 숀팬입니다. 요즘 정말 확실히 봄이긴 봄인가봅니다 -_-; 졸음이 솔솔... 귀찮니즘이 지대루 발동이 되는군요 카페활동도 맞춤법사건 이후 제대루된 글도 못쓰고 ㅋ   강좌를 하기전에 국어부터 해야하는거 아닌지.. ㅋ 아무튼 제가 맞춤법을 틀려도 너그럽게 이해해주시고 태클은 사양하겠습니다 아참! 그리고 드디어 오프라인 소모임 슈퍼액션이 이번주 주말부터 시작합니다 ^^ 장소구하기가 정말 힘들었습니다. 다행히 장소를 적극적으로 알아봐주신 웹디모 영자님께 감사드립니다 ^^ 그리고 한두달이 아닌 1년 2년~쭉 나가는 오프라인 소모임이 되도록 열심히 하겠습니다 ^^ 현제는 비록 인원이 처음 생각했던것 보다 많아 졌지만.. 다들 열심히 하시려는 맘은 똑같으니.. 저를 비롯한 7분과 열심히 해서 온라인으로 이렇게 강좌로 여러분들께 도움을 드리겠습니다.   자 오늘은 슈퍼액션의 첫 강좌로 플래시 동영상을 선택하였습니다. 저는 사실 대부분들 다 아실꺼라서 대충대충해서 강의를 저번에 올렸는데 많은 반응을 보이시면서 메신져로 많은 질문을 주시더군요  -_-;; 그래서 다시 플래시 동영상에 대해 알아보기로 했습니다. 저번강의랑 똑같은 내용이면 재미가 없겠죠? ^^; 이번시간에는 모든걸 알아보겠습니다.   1.다른 동영상파일(mov,mpg,wmv,..)로 flv를 만드는방법 2.flv를 NetStream방식(외부연동)으로 0kb의 동영상을 play 시키는 방법 3.플래시 동영상을 무한반복 시키는 방법 or 플래시동영상이 끝나는시점을 체크하는방법 4.flv의 play , stop , pause 시키는 방법 5.flv를 막대바로 sound제어하기 (drag방식) 6.flv를 막대바로 동영상흐름제어하기 (drag방식)   자.. 이정도면 정말 플래시동영상의 모든것이라고 해도 과언이 아닌데요 ^^ 이정도 지식과 외부연동(xml)로 제어하는 방법까지 아시면 UCC를 직접 만들수 있는 희망이... ㅋ   자 이제 시작해 볼까요? ^^ 음.. 참고 예제로는 저는 얼마전에 작업한 휘센홈페이지에서 메인에 썻던 그 동영상으로 작업해보겠습니다 여러분들은 아무동영상 파일 하나를 준비해주시고 플래시를 열어주시면 됩니다 ^^   1.다른 동영상파일(mov,mpg,wmv,..)로 flv를 만드는방법   정말 많은 사람들이 이 부분을 모르시더군요 -_-; 자 준비해주신 동영상 파일을 아무 폴더에 넣어주세요 그리고 C:\Program Files\Macromedia\Flash 8 Video Encoder 해당 폴더에 가서 Flash 8 Video Encoder를 실행해 주시기 바합니다. 이런 폴더가 없으신분은 플래시 버젼 8로 깔아주시기 바랍니다 이 비디오 인코더는 플래시 8부터 지원이 됩니다 그이하버젼은 절대루 안됩니다 ^^ 자 다음을 실행하면 창하나가 뜨시죠? 만약에 이창을 띄우는 도중 에러가 발생하시면 100% 코덱문제입니다. 해결방법은 quick time을 설치해주시면 해결이 됩니다   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds36/20_cafe_2007_05_02_16_47_463841f859a6a" border=0> 자 이런 창이 뜨시면 오른쪽에서 보시면 Add... 라는 버튼이 보입니다 그걸 클릭하면 동영상을 선택 하라는 창이 뜨는데요 아까 동영상을 가지고 계신 폴더로 가서 동영상을 선택합니다 그리고 열기버튼을 누르시면 비디오 인코더안에 해당동영상이 선택이 되어있을껍니다. 그리고 그 Add..버튼 밑으로 보시면 갑자기 Settings라는 버튼이 활성화 되어있습니다. 그버튼을 눌러봅시다 그럼 새로운 동영상제어창이 뜰껍니다.   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds26/7_cafe_2007_05_02_16_47_46384204b179c" border=0> 자 동영상이 미리볼수있는 화면과 여러가지 션택버튼이 있습니다. 왼쪽하단에 보시면 Show Advanced Settings 버튼이 있습니다 그걸 클릭해 보죠  자 그럼 더더욱 자세히 셋팅할수있는 선택버튼들이 많은데요 먼저 하나하나 설명을 드리자면 1.video codec은 해당코덱으로 flv로 만든다는소리인데요  보통 On2 VP6으로 선택하시면됩니다 더 자세한사항은 -_-; 저두 몰라염 ㅋ 그리고 그바로 밑에 보시면 Encode alpha channel 은 해당 영상을 alpha처리를 할것인지  묻는 소리인데요 즉 투명값을 주느냐 안주느냐 를 묻는 말입니다  해당사항은 보통 에펙에서 영상을만든다음 flv를 만들때 쓰여집니다.  체크를 하고 flv를 만들면 보통 기본이 되어있는 백그라운드 색깔은 보여지지 않고 해당 내용물들만 flv되어집니다 ^^ 그리고 2.Quality는 무조건  high 로 선택해주세요 flv를 직접 내장해서 보여주지 않고 외부로 스트리밍방식으로 보여주기때문에 정작 flv는 용량이 엄청 커두 상관이 없습니다 ^^ 그리고 3.Frame rate는 해당 flv의 속도를 나타내는데요 이 flv가 언제 어떻게 쓸수 없는 상황이라 보통 Same as source를 선택합니다 즉 import되어지는 플래시파일의 fps를 따르겠다라는 소리 입니다. 그리고 4.Resize video는 해당 flv의 크기를 제어주는곳인데요 내장형이면 직접 크기를 제어해주겠 지만 외부로 제어할때는 액션으로 외부 flv의 크기까지 제어할수있으니 원래 동영상의 크기로 해주 셔도 상관없으니 체크안해주셔두 됩니다. 그리고 5.Encode audio는 영상에 제공되는 소리를 압축하는 방법인데요 영상에 소리가 필요없으면 체크를 꺼주시면 flv의 용량이 줄어들겠죠 ㅎㅎ 자.. 이렇게 다들 알아서 선택을 해주시고 그 밑에 ok를 누릅니다.   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds34/9_cafe_2007_05_02_16_47_463842127402b" border=0> 자 ok를 누르면 창이 사라지고 다시 그전에 창이 보여지는데요 오른쪽 하단 밑쪽에 보면 strat Queue버튼이 있습니다 그걸 누르시면 이제 알아서  flv가 만들어 집니다 ^^   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds38/20_cafe_2007_05_02_16_47_4638421d230af" border=0> 자 이렇게 해서 다끝나면 이 프로그램을 종료합니다. 해당 flv는 동영상이 들어있는 폴더에 들어있습니다 확인해보세여 ^^   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds26/1_cafe_2007_05_02_16_47_46384229614b7" border=0> 자 flv를 만드는 방법에 대해서 알아 보았습니다 ^^ 아시는 분들은 약간 지겨운내용일 수 있으나 모르시는 분들을 위해서 이해해 주시고 다음 단계로 넘어가겠습니다.   2.flv를 NetStream방식(외부연동)으로 0kb의 동영상을 play 시키는 방법   자 여기서부터는 약간 머리가 아파오기 시작할껍니다 -_-; 액션이 시작하기 때문이죠 하지만 모르는건 그냥 넘어가고 안되면 그냥 막외우는 방식 추천드립니다. flv에 사용되는 액션은 다~ 거기서 거깁니다 그렇기때문에 거의 변화가 없죠. 한가지 샘플을 만들고 이걸 무한~재활용할수있게 해주시면 되는거죠 ^^ 꼭 자세히 이해할필요는 없다고 생각합니다. 하지만 재활용도 재활용 나름이겠죠? 그냥 무한 액션드레그보다는 액션한줄한줄을 이해해서 다르게 수정도해보고 이걸응용해서 홈페이지도 바꿔보는 그런 ~ 디자이너 되시길 바래염 전 디자이너가 아니지만 만약 배너 디자인을 하게되면 포토샾의 스킬을 쓰는게 아니라 에펙이나 플래시 프리미엄등의 영상효과를 캡춰해서 더많이 씁니다 ㅋㅋ 디자이너라고 무조건 포토샾 으로 해결하라는법 없잖아염 ㅋㅋ;; 자자 서론이 꽤 길었습니다. 플래시를 열어보아염~ 자 화면을 열고 나신후 이제 만들었던 flv를 직접 import를 하지 않고 외부에서 불러서 동영상을 play 시켜볼까요 우선 라이브러리에가셔서 new Video를 선택합니다.   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds26/10_cafe_2007_05_02_16_48_4638423746950" border=0> 자 누르게되면 video 속성창이 뜹니다. simbol네임은 아무이름을 짓고 그 및 Type에서는 저희는 액션스크립트로 컨트롤을 하기 때문에 Video(ActionScript - controlled)를 선택하고 ok를 누릅니다. 자 그럼 라이브러리에 보시면 Video1이라는 빈비디오 오브젝트가 생성되었습니다. 이걸 스테이지로 끌어옵니다. 이제 이 video1이라는 빈오브젝트가 심볼이 되겠죠 ^^ 음.. 아직도 오브젝트 냐 심볼이냐 의  의미를 모르시는분들이 많은거 같은데요 쉽게 설명드릴께요 라이브러리 에 들어있는 자체 즉 오리지널 원본의 파일을 오브젝트라고 불리우고 이제 이 라이브러리에서 스테이지밖으로 빠져나와서 그성질의 변형(크기.색깔등등)이 이루어지게되면 그건 심볼화라고 불리어집니다 ^^   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds34/46_cafe_2007_05_02_16_48_46384241de322" border=0> 자 이제 이 빈비디오심볼을 클릭하시면 하단에 속성창에 보입니다. 이 빈비디오파일도 심볼이기때문에 심볼의 네임을 정해줄수 있습니다 ^^ 자 다음과 같은 네임을 정해줍시다.   my_video  자 이제 이 빈비디오심볼네임은 my_video 입니다. 자 이제 디자인에 맞게 빈비디오 심볼의 성질을 변화 시켜봐염 솔직히 크기밖에 없습니다 ㅋ 알맞게 크기를 정해주세요   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds38/42_cafe_2007_05_02_16_48_4638424e65685" border=0> 자 이렇게 준비하셨다면 준비는 끝났습니다. 멋지게 액션을 넣어봅시당 레이어 하나 추가 해주시구 첫프레임 선택후 f9 눌러서 액션창을 열어보아여~ 그리고 다음과 같은 액션을 추가해줍니다.   //////////////////////////////////////////////////////////////////// myURL="whisen_ad.flv"; // 로드 될 영상 파일 //////////////////////////////////////////////////////////////////// var connection_nc:NetConnection; var stream_ns:NetStream; connection_nc = new NetConnection(); connection_nc.connect(null); stream_ns = new NetStream(connection_nc);  //stream_ns를 새로운 netstream으로선언 //////////////////////////////////////////////////////////////////// //stream_ns.setBufferTime(5); my_video.attachVideo(stream_ns);  //my_video라는 빈비디오클립에 stream_ns를 접속시켜라 //////////////////////////////////////////////////////////////////// stream_ns.play(myURL);  //stream_ns를 play시켜라. //////////////////////////////////////////////////////////////////// my_video._width=225;  //동영상 가로 my_video._height=169; //동영상 세로 ////////////////////////////////////////////////////////////////////   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds33/5_cafe_2007_05_02_16_48_4638425a8ed90" border=0> 자 이제 다 끝났습니다 ^^ 자 액션하나하나를 설명드릴께요 저번에는 NetStream이 먼지부터 자세히 나갔는데 이렇게 자세히 나가서는 불필요한 시간만 낭비하는 거 같아서 그냥 중요한 액션구문만 자세히 설명나가구요 아닌것은 이런게 있다는 정도로 설명드리겠 습니다.//////////////////////////////////////////////////////////////////// myURL="whisen_ad.flv"; // 로드 될 영상 파일 ////////////////////////////////////////////////////////////////////   자 우선 myURL은 보시다시피 flv가 있는 해당경로를 써주시면 됩니다. var connection_nc:NetConnection; var stream_ns:NetStream; connection_nc = new NetConnection(); connection_nc.connect(null); stream_ns = new NetStream(connection_nc);  //stream_ns를 새로운 netstream으로선언 //////////////////////////////////////////////////////////////////// 자 여기서부분은 NetStream을 써주시는 공식과 같은데요 공식은..... 머 필요없습니다 무조건 외우세염 ㅋ 이런 공식들은 전부 플래시에서 제공하는 공식들이구요 f1(도움말)에 자세히 나왔습니다. 한번 볼까요?   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds35/45_cafe_2007_05_02_16_48_46384266b20ca" border=0> 정말 자세히 나와있군요 -_-; 저보다 훨낳습니다 머리에 쏙쏙;; 왜 사람들이 f1(도움말)이 중요한걸 모르는지... 이렇게 자세히 나왔는뎅;; 여러분들도 한번씩 읽어 보시기 바랍니다. 아 플래시영문버젼인데 왜 저는 도움말이 한글로 나오냐구요? 영어를 못해서 -_-; 네이버같은곳에서 한글도움말을 찾아서 덮어씌었습니다. 영어잘하시는분들은 해석으로 아니신분은 저처럼하시거나 아님 아예 플래시8을 한글로 까시기 바랍니다. 한글로 깐다구 쪽팔린게아니에여 .. 모든 스크립터분들은 100% 한글판으로 작업하신다능... 자 이 부분은 도움말을 보시고 이해를 하시던가 아니면 그냥 외우세여 -_-;; 전 첨에 그냥외웠다능 ㅋㅋ 한 100번써보니까 저절로 -0- 외워지던데요;; 고등학교 공부하는줄알았음;; 그다음 보시면   //stream_ns.setBufferTime(5); my_video.attachVideo(stream_ns);  //my_video라는 빈비디오클립에 stream_ns를 접속시켜라 //////////////////////////////////////////////////////////////////// stream_ns.play(myURL);  //stream_ns를 play시켜라. //////////////////////////////////////////////////////////////////// my_video._width=225;  //동영상 가로 my_video._height=169; //동영상 세로 //////////////////////////////////////////////////////////////////// 자 이제 stream_ns를 NetStream을 선언하셨으면 이제 이 stream_ns를 어디다가 넣을껀지 알려줘야 겠죠 그부분이  my_video.attachVideo(stream_ns);  //my_video라는 빈비디오클립에 stream_ns를 접속시켜라 입니다. attachVidio로 이어주는거죠 attachMovieClip을 보신분들이 있을껀데요 그거와 마찬가지의 의미라고 생각하시면됩니다 이 attachMovieClip를 모르시는분들은 슈퍼액션 소모임에 오시면 자세히 볼수있습니다 ㅋ(홍보;;) 그다음 액션들은 제가 설명을 안해줘도 다 이해하셨을꺼라 생각합니다. 그리고 이부분 //stream_ns.setBufferTime(5); 이건 NetStream방식이 스트리밍방식이 때문에  바로바로 뿌려주는 방식입니다. 하지만 인터넷 속도에 큰영향을 미치기도 합니다. 그래서 갑자기 인터넷이 느려지면 뚝끊기는현상이 발견되죠 이건 그현상을 막기 위한 액션입니다. 즉 저건 미리 5초정도 보여줄 영상가지 버퍼링하라는소리죠 ^^ 이건 하셔도 되지만 안하셔도 무방합니다 ^^ 자 이제 준비가 다 됐습니다 이제 저장을 해볼까요? 동영상과 flv가 있던 폴더에 아무이름을 적고 저장을 합니다. 그리고 ctrl + enter 키를 눌러서 실행을 해보아염 잘되시죠? ^^   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds36/31_cafe_2007_05_02_16_49_46384273bccb8" border=0> 자 영상부분이 차지하는 크기가 얼마인지 비교해볼까요?   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds39/3_cafe_2007_05_02_16_49_4638427fa2265" border=0> 역시 0kb입니다 ㅋㅋㅋ 자 여기까지 잘따라 오셨나요? 정말 최대한 자세히 설명한다고 했는데 그래도 부족해 보입니다. 그래도 저번보다는 더 쉽게 더 짧게 준비를 했는데요 ㅎㅎ 오늘은 이렇게 1번2번 만 하고 내일 3~6번까지 전부 다해보겠습니다. 사실 퇴근시간이 다가와서 ^^;   그럼 다들 한번씩 해보시고 더이상 플래시 동영상에 골치 아파 하지 마시길 바랍니다. 그리고 이 강좌는 스크랩 및 무단복사는 금지합니다 죄송합니다 (__)   아참 슈퍼액션소모임이신분들은 소모임 자료실에 직접 만드시고 올려주시기 바랍니다 체크 들어갑니다 안하신분들은 -_-; 다음오프모임때 점심쏘기 -_-;   <IMG class=c alt="이미지를 클릭하면 원본을 보실 수 있습니다." src="https://t1.daumcdn.net/cafefile/pds26/18_cafe_2007_05_02_16_49_4638429390c9c" border=0>