Pageoff : Flash Write Script

간단히 플래시 무비를 HTML 페이지 안에 삽입하는 스크립트를 소개합니다. 흔하디 흔한 스크립트중 하나이긴 한데, 많은 경우에 여전히 embed 태그를 object 태그 안에 포함하는 형태를 가지고 있어 조금더 표준에 가깝고, 적절한 방법을 포스팅해 봅니다.

/*
Func. Name : Direct Flash Write

ex) flashWrite(url, w, h, vars, win, alt);
※ alt : Alternative Text or Image
*/
function flashWrite(url, w, h, vars, win, alt)
{

var id = url.split("/")[url.split("/").length-1].split(".")[0];
if(vars == null) vars='';
if(win == null) win='opaque';

var objStr = " <object ";

if(navigator.appName.match("Internet Explorer")){
objStr += "classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'";
} else {
objStr += "type='application/x-shockwave-flash' data='"+url+"' ";
}
objStr +=" id='"+id+"' style='width:"+w+"px; height:"+h+"px;'>";
objStr +="    <param name='base' value='.' />";
objStr+= "    <param name='showLiveConnect' value='true' />";
objStr +="    <param name='allowScriptAccess' value='always' />";
objStr +="    <param name='movie' value='"+url+"' />";
objStr +="    <param name='FlashVars' value='"+vars+"' />";
objStr +="    <param name='wmode' value='"+win+"' />";
objStr +="    <param name='menu' value='false' />";
objStr +="    <param name='quality' value='high' />";
objStr +="    <p>"+alt+"</p>";
objStr +=" </object>";

document.write(objStr);
}

<head>
<script type="text/javascript" src="movie.js"></script>
</head>
<body>
<h3>Direct Flash Write</h3>
<script type="text/javascript">

</script>
</body>

위 소스는 흔하게 돌아다니는 플래시 삽입 코드에 신현석님의 'Flash Object 표준으로 삽입' 내용을 참고하여 수정한 것입니다. 기존 코드에 있던 embed 태그를 제거하고, 비IE 브라우저를 위한 표준 Object 용법을 IE Conditional Comments 로 처리하여 적용하고 있습니다. 그리고 대체 문자나 이미지를 포함할 수 있도록 함수에 alt 인자를 추가하였습니다.

위의 코드가 플래시 무비를 본문(body 요소) 안에서 script 태그를 직접 작성하여 호출하는 방법이라면 아래 코드는 head 요소 안이나 body 마지막 영역에서 함수 호출과 함께 본문에 플래시 무비를 삽입할 수 있는 방법입니다.

/*
Func. Name : Remote Flash Write

ex)
window.onload = function()
{
document.getElementById("ID Value").innerHTML = flashWrite2(url, w, h, vars, win, alt);
}
*/
function flashWrite2(url, w, h, vars, win, alt)
{

var id = url.split("/")[url.split("/").length-1].split(".")[0];
if(vars == null) vars='';
if(win == null) win='opaque';

var objStr = " <object ";

if(navigator.appName.match("Internet Explorer")){
objStr += "classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0'";
} else {
objStr += "type='application/x-shockwave-flash' data='"+url+"' ";
}
objStr +=" id='"+id+"' style='width:"+w+"px; height:"+h+"px;'>";
objStr +="    <param name='base' value='.' />";
objStr+= "    <param name='showLiveConnect' value='true' />";
objStr +="    <param name='allowScriptAccess' value='always' />";
objStr +="    <param name='movie' value='"+url+"' />";
objStr +="    <param name='FlashVars' value='"+vars+"' />";
objStr +="    <param name='wmode' value='"+win+"' />";
objStr +="    <param name='menu' value='false' />";
objStr +="    <param name='quality' value='high' />";
objStr +="    <p>"+alt+"</p>";
objStr +=" </object>";

return objStr;
}

두 방식의 차이를 간단히 설명드리면, 전자의 방식은 가장 흔하게 사용되는 것으로 head 요소 안에 플래시 무비를 삽입하기 위한 함수(function) 코드를 작성 또는 불러오는 스크립트를 작성하게 되고, 본문(body) 안에서 플래시 무비가 나타날 위치에 직접 함수를 불러 적용시키는 방법입니다. 본문 안에 직접 적용하기 때문에 직관적일 수는 있겠으나 html 문서와 스크립트가 섞여 있기 때문에 유지보수에 불편함을 가지며, 내용과 동작의 분리(html과 css의 분리를 내용과 표현의 분리라고 볼 때, html과 javascript는 내용과 동작의 분리라고 볼 수 있음) 입장에서도 바람직하지는 않다고 보입니다.

직접 삽입 방식

원격 삽입 방식

후자의 방법은 head 안에 함수의 정의와 호출을 동시에 이루는 방식으로 브라우저에 의해 본문이 모두 로딩된 후에(onload) 함수를 호출하여 지정된 id 값의 위치에 플래시 무비를 삽입시키는 방식입니다. 적절하게 사용한다면 html과 javascript를 잘 분리시킬 수 있으며, 여러개의 플래시 무비를 삽입시킨 경우 사이즈나 플래시 변수 등의 수정을 용이하게 해 줄 수 있습니다. 단, 저속의 회선이나 로딩이 길어지는 경우 플래시 무비가 상대적으로 늦게 뜨는 문제가 있을 수 있습니다.