플짤 플레이어 (이미지 이용) 만들기 강좌
|
간만에 만들려니 좀 헤매서;; 나중에 까먹었을 때 제가 참고하려고 씁니당 플레이어 만드실 때 가장 많이들 하시는 이미지 틀을 이용한 flv(mp4) 영상 플레이어(일시정지) 입니다 액션스크립트 자체가 분할연결플짤로 써도 되는 거긴 하지만 일시정지 오류가 나므로 이 강좌에선 단일파일로 했습니다 최대한 모든 과정 상세하게 쓰려고 노력했으니 질문ㄴㄴ오류.. 물으셔도 저도 몰라여.. 스페셜땡스투 디씨플갤 형님들 준비물 : 포토샵(프로그램) / 플래시(프로그램) / 동영상(mp4) 저는 Adobe Photoshop cs5 / Adobe Flash cs6 사용했습니다 STEP 01 동영상 준비하기 (구글 드라이브 이용) 01. 인코딩 많은 분들이 동영상 인코더 중에서 메구이와 다음팟인코더를 많이 쓰시는데요. 용량대비 화질 효율은 메구이가 짱인데 저도 메구이가 거부하는 파일은 가끔씩 다음팟 씁니다. 고화질엔 메구이가 짜장이지 말입니다. 그치만 쓰는 법이 좀 복잡하니까 검색 해 보시고.. 다음팟 설정은 저는 H264 2pass 비트3천~4천 mp4 이렇게 설정해서 합니다. 참 다음팟으로 인코딩한 영상은 yamb 다운받아서 mux 한 번 해줘야 빨리 재생되고 끊기지 않아요! 우리모두 제한 없다고 비트 심하게 처넣거나 용량 크게 만들지 맙시다 ㅠㅠ... 구글느님이 막아버리시면 저포함 티스토리 다 문닫음 여튼 이건 플레이어 강좌니 인코딩 파트는 생략하도록 합니다. 02. 업로드해서 주소 따기 제 2의 주민등록번호 구글 아이디로 로그인 한 다음 구글 드라이브(클릭) 에 들어갑니다 폴더를 만들어줍니다. 여기서 공유 설정 -> 웹에 공개로 해야 재생됩니다 빨간 업로드 버튼 눌러서 올릴 동영상을 확장자 mp4에서 jpg로 바꾼 다음에 업로드합니다 * 혹시 확장자가 안나오게 설정되어 있다면 문서에서 Alt 누르면 한 줄 더 뜨는데 거기서 도구->폴더 옵션->보기 에서 알려진 파일 형식의 파일 확장명 숨기기 체크해제 업로드 후에 파일명을 눌러서 새 탭에서 열면 https://docs.google.com/file/d/고유주소/edit 이런 형태로 뜹니다 구글 드라이브 플짤 주소 생성사이트(클릭) 가셔서 저 주소를 복사해서 붙여넣기 하시면 https://www.googledrive.com/host/고유주소 형태로 만들어 줍니다. "https://www.googledrive.com/host/고유주소" 형식으로 어떤 메뉴를 클릭하면 어느 영상이 뜨는지, 알아보기 쉽게 메모장에 정리한 다음 창을 꺼 주세요 STEP 02 기본 틀 만들기 (포토샵) 01. 포토샵으로 동영상 틀 을 만들어줍시다 tip 영상이 재생될 틀을 만들때는 영상 사이즈의 가로x세로 길이에 각각 영상 테두리x2 만큼 더해준 다음 stroke 혹은 style->stroke 에서 안쪽으로 설정하고 테두리 값을 줘야 정확하게 직각으로 테두리가 나온다 ex ) 640x360 동영상에 영상 테두리 2인 플레이어를 만들고 싶을 때 테두리 레이어를 맨 위에 놓은 다음 (전체 다 그룹으로 묶어도 되긴 하지만) 저는 메모리가 후달리므로 일단 png로 저장했습니다 02. 플레이어 틀을 만들어줍시다 머 대충 만듭시다. 메뉴버튼 디자인을 포토샵에서 할 것인가 플래시에서 할 것인가는 자유지만 저는 이쪽이 편해서 이렇게 했습니다. 모처럼 만들었으니 이름도 박읍시다 (여기에 링크 걸 겁니다) 하는 김에 영상에 마우스 갖다대면 드는 일시정지 화면도 만들어봅시다. 뒤에 영상이 재생되고 있을 것이니 백그라운드 블랙으로 작업하고 저장할 땐 인터레이스png로 하는 거 잊 지 마세용 아니면 내친김에 여기서 배경 검은색으로 쫙 깔고 투명도50% 정도로 해주면 덜 귀찮을 수 있습니다 이제 포토샵으로 할 건 다했으니 끕시다. 플래시로 하다가 이미지 수정하고 싶을 땐 라이브러리->이미지 우클릭하면 포토샵으로 수정하기 누르면 수정 가능해요. STEP 03 플레이어 만들기 (플래시) : 틀 이미지 불러오기 -> 동영상 재생 부분 만들기 01. 파일->뉴 도큐먼트 (컨트롤+N) ▶ 만들어둔 틀 (png파일) 을 import to stage (컨트롤+R)
액션스크립트 3, 도큐먼트 사이즈는 플레이어 틀 사이즈와 똑같게 설정 이미지 불러온 후 properties(설정) 에서 X축 Y축 위치값 0 으로 고정, 가로폭 세로폭 사이즈 맞는지도 확인 * properties가 안보이면 Window에서 찾아서 체크 임포트한 이미지가 깨져보이지 않게 하기 위해 라이브러리에서 이미지파일 우클릭->Properties 위와같이 설정 (모든 이미지를 위와 같이 설정해줘야 깨져보이지 않습니다) 02. 아래 fla파일을 플래시 버전에 맞춰서 다운로드한 다음 불러옵니다 설명하는 저와 만드시는 여러분의 편의를 위해 다운받아 쓰도록 합시다. 아래 파일에서 mov와 액션스크립트, 버튼까지 다 골라서 뽑아먹을 겁니당. cs5 이하 여러분은 죄송합니다 ㅠㅠ 03. 도구 툴에서 검은 화살표 X, Y축 포지션을 동영상 틀 테두리와 같게 설정하신 후 (여기선 2) , 저 초록색 부분에 대고 더블클릭해서 들어갑니다
아래 캡쳐가 심볼 5에 들어간 상태입니다. 다 포개져 있는 상태지만 휙휙 옮겨보면 저렇게 btn (심볼6) + mov1 + mov2 로 구성되어 있습니다 btn이 일시정지 버튼이므로 가장 최상단에 올라와야 합니다 (타임라인 참조) ▼ 04. mov1, mov2, btn(심볼6) 의 사이즈를 모두 영상 크기 사이즈로 바꾼 다음 예쁘게 포갭니다 mov1 와 mov2는 propertise 창에서 X, Y축 좌표 0으로 맞추고 가로세로도 영상 크기 사이즈로 맞추면 편합니다. 근데 btn은 직접 조절하고 옮겨가며 파란 테두리가 딱 예쁘게 맞도록 해줘야 합니다. 왜 그런진 저도 모르겠네요; 아시는 분은 덧글점 05. 이제 일시정지 버튼효과를 만들어 봅시다. 심볼6을 더블클릭 -> 또 더블클릭 해서 symbol 3으로 들어갑시다 그 다음 타임라인에서 over에 갖다댄 다음 다시 클릭하면 저렇게 까만 네모가 선택이 됩니다 얘가 동영상 재생 중에 동영상에 마우스오버하면 씌워지게 될 겁니다 step 2에서 포토샵으로 일시정지 버튼 만들때 이 효과도 적용하신 분들은 저 네모 걍 지우시면 됩니다 역시 화면 크기에 맞게 예쁘게 맞춘 후 (직접 봐가면서 <-> 조절해서 맞추세요) 씌울 색상과 투명도를 설정할 수 있습니다 반드시 타임라인 over에 가있는 상태에서 일시정지 그림 파일을 import to stage (컨트롤+R) 해 줍니다 이 때 이미지가 찌그러질 수 있는데 눈으로 보고 맞춥시다. ㅠㅠ 가로세로 크기 맞게 적어넣어도 깨집니다 이런 거 은가이 짜증나죠;; 아마 사이즈를 절대크기가 아닌 상대크기로 인식해서 생기는 문제인 거 같은데 저도 해결방법은 아직 못찾았습니당 간단할 거 같은데 아시는 분은 덧글을.. STEP 04 플레이어 만들기 (플래시) : 버튼 만들기 -> 액션스크립트 작성 -> 완성 거의 다 왔습니다!!!! 01. 버튼 마우스오버 효과 넣기 역시 직접 만들기 귀찮으니까 fla에서 뽑아먹도록 합시다. 플레이어만들기.fla 탭으로 넘어가 scene1 (장면 1) 로 나갑시다. 심볼3을 복사해서 만들던 도큐먼트에 붙여넣기 합니다 얘를 복사하면 됩니다. 컨트롤 씨 컨트롤 브이~ (^人^) 복사했으면 이제 버튼 마우스오버 효과(일괄)를 적용해봅시다 심볼3을 더블클릭 -> 또 더블클릭해서 아래 화면처럼 Symbol 1에 들어갑니다 타임라인 over 에 갖다대면 기본으로 적용되어 있는 효과가 보입니다. 효과를 원하지 않으시면 저 네모를 지우면 되고, 투명도와 테두리 색상 등을 조정해서 만드시면 되겠습니당. 기본적으로 이 over가 마우스오버 시 나오는 부분이기 때문에 이 외에도 이미지를 이용해서 다양하게 꾸밀 수 있습니다. 컨트롤+엔터 해서 미리 봐가면서 만들어줍시다. (이때 오류나는 건 무시해도 됩니다) 02. 버튼 이름 지정한 후 알맞게 배치하기 버튼 효과를 넣었으면 다시 씬1로 나와 심볼을 복사한 다음에 만들 메뉴 갯수만큼 붙여넣기합니다. 그리고 순서에 맞게 인스턴스네임을 버튼0, 버튼1, 버튼2, 버튼3,.. 버튼n-1 로 지어 준 다음, x, y, w, h 수치 조절하시면서 적절하게 배치합니다. 나름의 순서규칙을 정한 후 맞게 하셔야 안 헷갈리십니다 (^人^) * 블로그 링크 만들기 얘를 복사해서 붙여넣으 신 후 역시 크기 조절과 위치 조절 해주시면 됩니다. 인스턴스네임은 gall입니당 03. 액션스크립트 붙여넣기 이제 마무리 단계입니다! 첨부파일로 다시 돌아간 후 이번에는 F9를 눌러 액션창을 켭니다. 그럼 뭐가 나올 텐데 싸그리 복사한 다음, 다시 돌아와 F9를 누른 후 복붙합시다. 주의할 사항은 두가지인데요 우선 영상 주소 리스트에서 마지막 [] 다음에는 쉼표(,) 찍으면 안되고 다른 [] 다음에는 반드시 쉼표(,)가 필요합니다. 그 다음 동그라미 쳐진 부분의 숫자를 영상 갯수로 맞춰주셔야 합니다. 그래야 버튼들이 다 제대로 작동해요. 이제 마지막으로 휠을 굴려서 gall.addEventListener(MouseEvent.CLICK, qqq); function qqq(event:MouseEvent){ navigateToURL(new URLRequest("이동할주소")); } 이동할주소 부분에 블로그 주소 적으시면 끗! 없으신 분은 이것도 지우시고 인스턴스네임 gall인 심볼도 지워주세용. |
플레이어만들기cs5.fla
이제 컨트롤 + 엔터로 미리보기 해 봅시다 (이 때 맨 처음 누른 영상은 재생이 안되는데 이건 미리보기에서만 그런 겁니다. 맞게 따라오셨다면 문제 ㄴㄴ해)
output에서 이렇다할 오류가 뜨지 않고 0 1 2 3 이런 숫자들만 나오면 성공입니다!
제대로 작동하는 걸 확인하셨으면 컨트롤+쉬프트+알트+S 눌러서 swf 파일로 import 하신 다음,
구글드라이브에 올려서 위에 있던 주소따는 블로그에서 embed 태그 따서 가로세로 사이즈 조절하고 붙여넣기 하시면 됩니다.
예제는 이런 느낌으로 완성되었습니다 ^人^
~그럼 안녕~