홈페이지나 상세페이지를 제작하다보면 가끔 동영상을 넣어야할 때가 있다.

동영상을 유투브에 올려서 페이지에 유투브를 삽입하는건 사실 간단하지만, 위의 이미지처럼 전체적인 웹페이지의 디자인과 어울리도록 플래시에 동영상을 삽입하여 웹에 올리는 방법을 알아보자.

 

 

 

 

 

 

일단 동영상이 들어갈 페이지를 디자인하는데 이때 당연히 원본 동영상의 비율에 맞게 동영상 위치를 잡아줘야 한다.

(난 그냥 위처럼 원본동영상을 캡쳐해서 비율유지하고 사이즈만 조절해 넣는다)

 

그런다음 영상이 들어갈 부분을 제외하고 배경이 될 이미지를 jpg로 저장한다. 

 

 

 

 

 

 

 

동영상은 wmv같은 원본파일 그대로 올린다면 용량을 감당할수가 없기때문에 무조건 인코딩을 한번 거쳐야한다.

동영상 인코딩 프로그램은 많이 있지만 난 가장 대중적으로 사용되는 '다음팟인코더' 프로그램을 사용했다.

 

다음팟인코더 다운로드

 

 

다음팟인코더를 다운받고 실행시켜 아래와 같은 순서로 진행해주면 된다.

 

1. 인코딩할 동영상을 마우스로 끌어다 넣고

2. 사용자 설정 선택

3. 세부설정 클릭

 

 

 

 

 

 

1. 세부설정에서 형식을 '[FLV]플래시 비디오'로 지정해주고,

2. 비디오코덱의 '+'를 클릭하여 세세한 설정들을 지정해주면 된다.

( 비트레이트 600정도면 화질이 나쁘지 않은 선에서 낮은 용량의 동영상파일을 확보할 수 있다.

물론 좀 더 고화질을 원하거나 반대로 용량을 좀 더 낮추고 싶다면 여기서 설정을 변경해주면 된다.)

3. 포토샵에서 동영상이 들어갈 화면 사이즈를 넣어주는데

4. 이때 '화면 비율 유지'는 꼭 체크해줘야 가로세로 사이즈가 맞지 않아도 동영상이 찌그러지지 않는다.

( 만일 동영상의 정확한 비율의 가로세로 사이즈가 아니라면 가로와 세로 둘 중에 큰 쪽에 맞춰서 동영상이 생성된다.)

 

 

 

 

 

 

세부 설정을 마치고 나면 동영상이 저장될 폴더를 지정해주고 인코딩 시작.

그럼 flv형식의 동영상 하나가 생성된다.

( 난 이렇게 했더니 29.8MB의 동영상이 2.83MB로 줄었다.)

 

 

 

 

 

 

 

그럼 플래시를 열고 작업사이즈를 변경해준다. (플래시 CS3, 액션스크립트 2.0 기준)

물론 이 작업사이즈는 동영상 사이즈가 아닌 포토샵에서 디자인한 전체 사이즈이다.

 

 

 

 

 

 

File > Import > Import to Stage 로 동영상 배경이 될 jpg이미지를 불러온다.

 

 

 

 

 

 

 

불러온 배경레이어는 잠그고 새로운 레이어 하나를 추가한다.

 

 

 

 

 

동영상을 삽입하기 전 반드시 플래시를 저장해줘야하는데 삽입할 동영상과 같은 위치에 저장해주는게 좋다.

(퍼블리싱 후 나중에 파일 위치가 변경되면 동영상이 나오지 않는다)

 

 

 

File > Import > Import Video 클릭.

 

 

 

 

 

 

다음팟인코더로 인코딩시킨 'flv형식'의 동영상을 불러온다.

 

 

 

 

 

 

여기서 플래시에 동영상을 넣는 방식은 크게 두가지가 있다.

 

하나는 플래시의 지정된 위치로 동영상을 불러들이는 방식과 (1번째 Progressive download from a web server)

각 프래임에 동영상이 직접 들어가는 방식인데 (5번째 Embed video in SWF and play in timeline)

프레임에 직접 집어넣는 방식은 몇초의 짧은 동영상이라면 상관없겠지만 아니라면 로딩시간과 용량의 문제로 난 별로 선호하지 않는다.

 

그런고로 여기선 첫번째 방식을 사용하겠다.

 

 

 

 

 

스킨에서 동영상의 모양을 지정해주는데 난 아무런 버튼도 없는 동영상을 삽입할거므로 'None' 을 선택했다.

 

 

 

 

 

 만일 미디어버튼을 넣고싶다면 아래처럼 여기서 맘에드는 스킨을 고르면 된다.

 

 

 

 

 

 

불러 온 동영상의 로딩될 위치를 잡아주면 되는데

이 상태로 아무것도 하지 않는다면 동영상은 처음 한번만 재생된다. (만일 불러들이는게 아닌, 동영상을 프레임에 직접 넣었다면 플래시의 특성상 반복재생 됨)

 

그러므로, 반복적인 재생을 시킬게 아니라면 아래의 액션을 넣는 작업은 따로 하지않아도 된다.

이렇게 플래시로 불러온 동영상은 html에서 'loop' 명령이 먹지않았기 때문에 플래시 내에서 반복재생이 되도록 액션을 사용했다.

 

동영상 선택 후 이름을 지정해주고 (난 임의로 'ad'라고 지정)

액션이 들어갈 동영상 레이어의 1프레임을 선택 후 'F9'를 눌러 액션스크립트 창을 연다. 

 

 

 

 

액션을 아래처럼 넣어주면 되는데 빨간 밑줄이 동영상에서 지정한 이름이다.

 

 

 

 

 

 

이렇게 완료 후 'Ctrl+Enter' 를 눌러 swf로 퍼플리싱을 시킨다.

그럼 생성된 swf파일과 인코딩 동영상인 flv파일을 같이 서버에 올리면 된다.

 

 

 

 

 

마지막으로 html에 아래처럼 넣어주면 웹에서 동영상이 반복되어 보여진다는 것.

<EMBED SRC="동영상주소.swf" width="플래시가로크기" height="플래시세로크기"><br>

 

 

 

 

 

글이 긁어지지 않는 관계로 반복재생 플래시 액션은 파일로 올려놓을테니 필요하신분은 사용해보시길...

(플래시 액션스크립트 2.0 기준으로 3.0에선 안될지도...)

 

 

동영상삽입코드.txt

 

 

 
 
 
Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 안녕하세요 정성스러운 포스팅 구경하고 갑니다
    굿 포스팅이네요 ㅎㅎㅎ
    수고하세요

    2015.01.30 16:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 감사합니다~근데 요새는 모바일에서 재생이 안되기때문에 플래시는 잘 사용안하죠..ㅎㅎ

      좋은 주말되세요^^

      2015.01.31 11:03 신고 [ ADDR : EDIT/ DEL ]