적용버전 : XpressEngine 공통 플래시(Flash) 삽입하기

플래시(Flash) 삽입하기

플래시란?

어도비(Adobe)사의 플래시(Flash) 제작 프로그램을 이용하게 되면 움직임이 있는 에니메이션이나 링크버튼 등의 제작 및 활용이 가능합니다. 요즘은 링크버튼의 기능 보다는 상품의 홍보를 위한 광고용 멀티미디어 무비가 많이 제작되고 있지요.

플래시로 만들어진 파일을 흔히 무비(movie)라고 부르는데 그 이유는 플래시의 제작 방법이 마치 영화를 만들 듯 한컷 한컷 프레임을 연결하여 오브젝트(대상)의 움직임을 만들어 낼 수 있기 때문입니다. 그런데 재미있는 것은 플래시는 카메라가 필요없다는 것입니다. 일러스트 프로그램에서처럼 원을 하나 그려 넣고 가상의 필름처럼 프레임을 임의로 늘려 준 뒤에 움직임을 설정하거나 혹은 대상을 향해 X축으로 얼마큼, Y축으로 얼마큼 이동하라는 스크립트를 작성하면 그대로 실행이 됩니다. 이러한 기능을 액션스크립트라고 합니다.

image

액션스크립트의 기능은 무척 다양합니다. 변수를 입력받아 활용하기도 하고 계산기처럼 연산도 가능하며 다양하고 복잡한 프로그램 제작에 이용되기도 합니다. 하지만 단점도 있습니다. 플래시 파일을 재생할 수 있도록 도와주는 플레이어를 설치해야 하며, 플래시 파일 안에 악성 스크립트를 삽입하여 사용자 컴퓨터에 해를 주기도 하고, HTML과 CSS 문서의 용량보다는 크고 무겁기 때문에 웹페이지를 표시하는 속도 부분에서는 가장 늦게 출력되기도 합니다. 하지만 화려한 이미지 표현이 가능하고 대부분의 브라우저는 플래시플레이어를 자동으로 설치해 주기 때문에 광고 혹은 상품의 홍보를 위해서 가장 많이 사용됩니다.

XE 코어로 홈페이지를 만드는 경우 가장 주의해야 할 부분은 모바일에서 특히 애플사의 아이폰, 아이패드에서는 플래시를 지원하지 않습니다. 따라서 플래시 파일을 대체하여 사용될 내용을 미리 준비하여 HTML 문서내에 추가하거나 혹은 XE 모바일 페이지 구성을 활용하여야 합니다. XE 모바일 페이지 구성 및 설정은 XE 모바일에서 살펴보도록 하겠습니다.


플래시 제작

플래시 제작 도구를 이용해 플래시를 제작하고 퍼블리싱하게 되면 웹브라우저에서 사용될 소스를 포함한 완성된 HTML 예제 문서와 SWF 확장자를 가진 플래시 파일이 제공됩니다. 예제 문서 안에는 아래와 같이 익스플로러에서 사용할 수 있는 오브젝트(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)

위의 플래시 삽입 소스를 HTML 문서에 삽입하게 되면 아래 예제와 같이 출력됩니다.

TIP - 배경을 투명하게 하려면 위 소스에 wmode="transparent" 속성을 각각 추가하면 됩니다.


XE 코어에서 플래시 삽입하기

XE 코어에는 이미 플래시 삽입을 위한 함수가 미리 준비되어 있습니다. wmode도 transparent가 기본값이어서 배경도 투명하게 해줍니다. <script> 태그 안에 간단한 한줄 구문만 작성하면 플래시를 멋지게 불러와 표시합니다.

플래시 삽입을 위한 함수(메소드) : displayMultimedia(src, width, height, options)

사용 방법 :

<script type="text/javascript">displayMultimedia("flash_example_03_50.swf", "500","120",false);</script>

XE 코어에는 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 역시 최신 버전의 링크주소로 설정 되어 있습니다.