메뉴 건너뛰기

XE Guidebook

참고 / 기타
2014.08.21 19:03

9-03 플래시 파일(swf) 삽입하기

조회 수 1019 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

          

플래시(Flash) 파일(swf) 삽입하기 
 
 

플래시 파일(swf)이란 어도비(Adobe)사의 플래시(Flash) 제작 프로그램을 이용하여 만들어진 파일로, 플래시는 마치 영화를 만들 듯 한컷 한컷 프레임을 연결하고 프레임의 설정과 액션 스크립트로 오브젝트(대상)의 움직임을 만들어 내는 기능이 뛰어나, 화려한 이미지의 표현이 많이 필요한 광고 혹은 상품의 홍보를 위한 웹 디자인이나 콘텐츠 제작에 많이 사용된다.
 
그런데 플래시 파일은 실행을 하기 위해서는 반드시 플레이어를 설치해야 하며, HTML과 CSS 파일의 용량보다 크고 무겁기 때문에 웹페이지를 표시하는 속도 부분에서는 가장 늦게 출력되는 단점이 있다.
 
XE Core로 웹사이트를 만들 경우, 모바일에서 특히 애플사의 아이폰이나 아이패드에서는 플래시를 잘 지원하지 않기 때문에, 플래시 파일을 대체할 수 있는 다른 내용을 HTML 문서 내에 추가하거나 혹은 XE 모바일 웹페이지 구성을 활용하여야만 한다.
 
☞ XE 모바일 웹 페이지 구성 및 설정 참조
 
 
● 플래시 파일의 퍼블리싱 후, 만들어 지는 기본 소스코드 형식
 
플래시 제작 도구를 이용하여 플래시를 제작하고 퍼블리싱하게 되면, 웹브라우저에서 사용될 소스를 포함하여 완성된 HTML 예제 문서와 SWF 확장자를 가진 플래시 파일이 제공된다.
 
HTML 예제 문서 안에는 아래와 같이 익스플로러에서 사용할 수 있는 오브젝트(object) 소스가 있고, 그 외의 웹브라우저에서도 출력할 수 있는 임베드(embed) 소스가 포함되어 있다.
 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="120" id="flash_example_03_50" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="flash_example_03_50.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="flash_example_03_50.swf" quality="high" bgcolor="#ffffff" width="500" height="120" name="flash_example_03_50" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
ㆍclassid와 codebase는 플래시 제작 도구의 버전에 따라 플러그인(재생 도구, 플래시 플레이어)을 자동으로 다운로드 할 수 있도록 도와주는 역할을 한다.
ㆍ임베드(embed) 소스에서는 pluginspage의 링크주소가 같은 기능을 한다.
ㆍ플래시 파일(swf)은 일반적으로 위 스크립트가 포함된 문서와 같은 디렉터리에 위치하도록 하는 것이 좋으며,
  HTML 문서와는 별도로 다른 디렉터리에 플래시 파일이 있다면 플래시 파일의 경로를 제대로 설정해야 한다.
  (예: /xe/layouts/사용자 레이아웃 디렉터리/파일이름.swf)
ㆍ배경을 투명하게 하려면 wmode="transparent" 속성을 각각 추가하면 된다.
 
 
● XE 코어에서 플래시 삽입하기
 
XE Core는 플래시 삽입을 위한 함수 displayMultimedia(src, width, height, options)가 미리 준비되어 있어, <script> 태그 안에 아래와 같이 간단히 한 줄 구문만 작성하면 플래시를 멋지게 실행시킬 수 있다.
 
<script type="text/javascript">displayMultimedia("flash_example.swf", "680","420",true);</script>
 
XE Core에는 xe/common/js/common.js 문서에서 displayMultimedia 함수를 이용하여 function displayMultimedia(src,width,height,options)를 정의해 두고 플래시를 불러와 사용할 수 있도록 하고 있다. 따라서 레이아웃 등에서 플래시 파일을 삽입하여 사용하려면 <script type="text/javascript">displayMultimedia("swf의 주소", "가로크기","세로크기",옵션);</script>와 같이 미리 정의된 구문을 적어 주면 된다.
 
ㆍ옵션은 true와 false로 구분하며, 자동실행(autostart) 여부를 설정할 수 있다.
  메뉴의 경우에는 자동실행 할 필요가 없기 때문에 false, 무비의 경우에는 true를 옵션으로 주면 된다.
ㆍwmode="transparent" 속성은 기본값으로 설정되어 있다.
ㆍclassid와 codebase는 최신 버전의 링크주소로 설정되어 있다.
 
 



List of Articles
번호 분류 제목 글쓴이 조회 수
3 참고 / 기타 9-01 /xe/ 하위 주소없이 도메인 고정하기 XE4Uself 30582
2 참고 / 기타 9-02 용어 정리 XE4Uself 584
» 참고 / 기타 9-03 플래시 파일(swf) 삽입하기 XE4Uself 1019
Board Pagination Prev 1 Next
/ 1