/*
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);
}
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">
<!--
flashWrite('club_day.swf','645','294','','window','대체 텍스트 또는 이미지');
//-->
</script>
</body>
<script type="text/javascript" src="movie.js"></script>
</head>
<body>
<h3>Direct Flash Write</h3>
<script type="text/javascript">
<!--
flashWrite('club_day.swf','645','294','','window','대체 텍스트 또는 이미지');
//-->
</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;
}
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>
<script type="text/javascript" src="movie.js"></script>
<script type="text/javascript">
<!--
window.onload = function()
{
document.getElementById("feel").innerHTML = flashWrite2('club_daㅇy.swf','645','294','','window','<img src="alt_img.png" width="300" height="100" alt="대체 텍스트 또는 이미지" />');
}
//-->
</script>
</head>
<body>
<div id="feel"></div>
</body>
<script type="text/javascript" src="movie.js"></script>
<script type="text/javascript">
<!--
window.onload = function()
{
document.getElementById("feel").innerHTML = flashWrite2('club_daㅇy.swf','645','294','','window','<img src="alt_img.png" width="300" height="100" alt="대체 텍스트 또는 이미지" />');
}
//-->
</script>
</head>
<body>
<div id="feel"></div>
</body>
두 방식의 차이를 간단히 설명드리면, 전자의 방식은 가장 흔하게 사용되는 것으로 head 요소 안에 플래시 무비를 삽입하기 위한 함수(function) 코드를 작성 또는 불러오는 스크립트를 작성하게 되고, 본문(body) 안에서 플래시 무비가 나타날 위치에 직접 함수를 불러 적용시키는 방법입니다. 본문 안에 직접 적용하기 때문에 직관적일 수는 있겠으나 html 문서와 스크립트가 섞여 있기 때문에 유지보수에 불편함을 가지며, 내용과 동작의 분리(html과 css의 분리를 내용과 표현의 분리라고 볼 때, html과 javascript는 내용과 동작의 분리라고 볼 수 있음) 입장에서도 바람직하지는 않다고 보입니다.
 직접 삽입 방식 |  원격 삽입 방식 |
후자의 방법은 head 안에 함수의 정의와 호출을 동시에 이루는 방식으로 브라우저에 의해 본문이 모두 로딩된 후에(onload) 함수를 호출하여 지정된 id 값의 위치에 플래시 무비를 삽입시키는 방식입니다. 적절하게 사용한다면 html과 javascript를 잘 분리시킬 수 있으며, 여러개의 플래시 무비를 삽입시킨 경우 사이즈나 플래시 변수 등의 수정을 용이하게 해 줄 수 있습니다. 단, 저속의 회선이나 로딩이 길어지는 경우 플래시 무비가 상대적으로 늦게 뜨는 문제가 있을 수 있습니다.
이올라스 분쟁도 끝났고 OS(브라우져)최신 패치만 충실히 했다면 이제 더 이상 오브젝트 활성화를 요구하는 창은 안봐도 되니 전 최근 작업물에선 제외를 시켜버리고 있습니다.
답글삭제가끔 클레임이 들어오기도 하지만 설득을 시켜보고 안되면 그냥 스크립트를 통해서 해주기도 하지만요..
그리고
asp 나 asp.net 을 기본 서버사이드 언어로 사용하는 경우
object 안에 object 를 불러오면 에러를 내버립니다.
짜증나죠; ㄷㄷ;
@rootbox - 2008/08/06 16:57
답글삭제현석님 글에
"asp 코드에서 위의 코드를 사용하면 오브젝트 중첩 오류가 발생하는데 첫번째 오브젝트를 <%="<object"%>와 같이 표기하여 오류를 피할 수 있다." 되어 있더라구요. 직접 테스트 해본 것은 아니지만 저렇게 하면 된다고 하니.. 되겠죠 ^^ ㅎㅎ
저희 회사가 워낙에 프로모션, 자잘한 이벤트 페이지가 많다 보니 거의 매번 플래시 삽입 스크립트를 쓰거든요; 딱히 개발도 없는 그런 페이지들... 그래서 오늘 좀 여유 있는김에 수정해서 올려봤어요
답글삭제이미 자바스크립트를 사용하고 있어서 컨디셔널 코멘트를 안써도 충분히 구현이 될 것 같습니다. Active-X가 있는지 체크해서 IE용 코드를 뿌리거나, 표준 코드를 뿌리거나, 플래시가 없으면 대체 콘텐츠를 뿌리거나 하는게 더 좋을 것 같네요.
답글삭제@신현석 - 2008/08/06 18:13
답글삭제아아 맞아요~!
단순하게 코드 그대로 삽입할 생각만 했네요~!
코드를 조금 수정했습니다. IE를 체크하는 간단한 Detection을 추가해서 컨디셔널 코멘트를 넣지 않고, 스크립트 안에서 바로 처리하도록 했습니다. 원래 이렇게 했어야 맞는건데, 제가 급하게 올려버렸어요! 성미만 급해서!! 흑
답글삭제만약에 한페이지내에 1개 이상의 플래시 컨텐츠가 사용이 될때에는
답글삭제확장성에 있어서 좀 걸리네요...뭐 물론 조금만 손본다면야 가뿐하겠지만 말이죠...
좋은 소스감사합니다!!!
이 쏘스를 넣으니 익스플로어에서는 플래시 플레이어가 없을때 자동 인스톨 창 및 대체이미지와 문구가 뜨는데 파이어폭스에서는 이미지도 문구도 않나오고 자동인스톨 창도 안뜨네요.. 파이어 폭스에서는 아무런 반응도 없는 현상 어찌 해결할까요????
답글삭제