Javascript :: swfObject를 사용하자~

 

swfobject_1.4-logon77.zip

얼마전 부터 플래시를 활성화 시키기가 좀 짜증나 졌다.

익스플러워 업데이트 되고 부터 이런저런 자바스크립트 소스들이 나오기 시작했는데...

어도비에서 제공되는 익스텐션도 괜찮았다.

하지만 요즘 들어 swfObject를 제일 많이 사용하는 것 같다.

 

http://blog.deconcept.com/swfobject/ 를 가보면 소스와 사용법을 볼수있다.

 

주의 할건 플래시를 넣은 table 이나 div 위에 height 값을 정해 주지 않고 그 않에 파일을 import 하면 다른 링크로 갈때나 새로고침 할때 플래시 컨텐츠가 순간 올라간다

 

우선 간단하게 정리해 본다.

 

 

사용방법

 

SWFObject.js 파일을 include 해서 간단한 코드만 몇 줄 작성하면 된다.

아래 샘플을 보자.

 

<script type="text/javascript" src="swfobject.js"></script>
 <div id="flashcontent">
 This text is replaced by the Flash movie.
 </div>
 <script type="text/javascript">
 var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
 so.write("flashcontent");
 </script>

<div id="flashcontent">[...]</div>

위 코드는 Flash plug-in 버전이 낮거나 설치 되있지 않으면 출력된다.

 

 

var so = new SWFObject(swf, id, width, height, version, background-color);

 

기본 파라미터 :

 

swf - swf 파일경로와 파일명.

id - object나 embed tag의 ID.

width - Flash movie width.

height - Flash movie height.

version - Flash content에서 요구하는 player 버전. format : 'majorVersion.minorVersion.revision'. ex) "6.0.65". 또는 major 버전만 기입해도 된다("6").

background color - background color.

 

 

추가 파라미터 :

 

useExpressInstall - 만약 ExpressInstall 기능을 사용할려면 'true'로 설정

quality - quality 설정. default는 "high".

xiRedirectUrl - 만약 ExpressInstall을 이용해 upgrade를 완료한 유저를 redirect 하길 바란다면 교체될 URL을 여기서 정할수 있다.

redirectUrl - 만약 최신 plug-in버전을 가지고 있는 않는 유저를 redirect 시킬려면 이 파라미터를 사용해라. 그러면 redirect 될것이다.

detectKey - 사용 않해봐서 모르겠다..ㅡㅡ; 해석도 맞는지 모르겠다. 원문을 참고해라.

이것은 SWFObject script가 detection을 우회할때 찾을 url 변수 이름이다. default는 'detectflash'. Example : 너는 ?detectflash=false 를 파일명 뒤에 붙이는 걸로 Flash 탐지를 우회해서 간단하게 페이지에 플래시를 보여준다.

This is the url variable name the SWFObject script will look for when bypassing the detection. Default is 'detectflash'. Example: To bypass the Flash detection and simply write the Flash movie to the page, you could add ?detectflash=false to the url of the document containing the Flash movie.

 

 

so.write("flashcontent");

 

열거된 HTML element 내부에 재배열 하는 것으로 SWFObject script가 페이지에 flash 컨텐츠를 쓰는 것이다.(만약 적합한 플러그인 버전이 인스톨 되 있다면)

굳이 div 레이어에 넣지 않아도 된다. td 태그에도 id와 name값을 지정해 주고 so.wirte(id)를 호출해주면 된다.

 

 

SWFObject가 작동되는 브라우져

 

SWFObject는  PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, and Opera Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, and Opera 7.5+에 작동되고 있다.

 

 

 

plug-in 탐지에 있어서 SWFObject's built는 무시 당할수 있다. 만약 새로운 브라우저가 언젠가 런치 되거나, 유저시스템에서 plug-in 탐지 실패의 어떤 이유 때문에, SWFObject에 대한 탐지 built를 비활성화 할 우회 링크를 include 할 수 있고, 우회링크는 항상 페이지에 플래시 컨텐트를 보여줄것이다. 우회 링크를 사용하는 방법은, 간단하게 플래시 컨텐츠가 있는 페이지로 링크를 거는 것이다. url에 'detectflash=false'를 붙이는 것이다.

 

<a href="mypage.html?detectflash=false">Bypass link</a>

 

 

 

추가 파라미터를 추가하는 샘플

 

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addParam("salign", "t");
   so.write("flashcontent");
</script>

 

사용가능은 전체 파라미터

 

 

"Flashvars" parameter 사용법

 

변수이름/변수값으로 추가로 추가 해주면 된다. Flash Player 6 이상에서 작동.

 

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addVariable("variable1", "value1");
   so.addVariable("variable2", "value2");
   so.addVariable("variable3", "value3");
   so.write("flashcontent");
</script>

 

 

html에 get방식으로 넘어온 값을 가져오는 방법

 

http://www.example.com/page.html?variable1=value1&variable2=value2 이렇게 넘어 왔다면:

아래처럼 getQueryParamValue()을 사용해 값을 가져오면 된다.

 

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   so.addVariable("variable1", getQueryParamValue("variable1"));
   so.addVariable("variable2", getQueryParamValue("variable2"));
   so.write("flashcontent");
</script>

 

getQueryParamValue()는 location.hash에서 변수값을 읽어 온다.

 

 

SWFObject에서 'Express Install' 사용하기

 

expressinstall.as는 위 사이트 가서 소스를 받으면 들어 있다. so_tester.fla 참조

 

#include "expressinstall.as" 
 //ExpressInstall object 초기화 
 var ExpressInstall = new ExpressInstall(); 
 // 만약 업데이트가 필요하면, 'start upgrade' 버튼을 보여준다. 
 if (ExpressInstall.needsUpdate) { 
 // ExpressInstall.init()을 호출하는 것으로 자동으로 업데이트를 시작할수 있다.
 // 유저에게 보여줄 메시지와 start 버튼이 있는 무비클립을 attach 시켜서 중앙으로 이동시킨다.
 var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
 upgradeMsg._x = Stage.width / 2;
 upgradeMsg._y = Stage.height / 2;
 // attach 한 무비클립내의 버튼에 Expressinstall updater 시작하는 action 기입
 upgradeMsg.upgradeBtn.onRelease = function() { 
 // ExpressInstall.init() method는 실제로 update를 실행 시킨다.
 ExpressInstall.init();
 }
 // expressinstall가 호출 되었으면 timeline을 멈춰라.
 stop();
}

 

ExpressInstall을 체크하는 프레임에는 아무것도 작성하지 않는 것이 중요하다.

 

만약 팝업윈도우나, ExpressInstall update을 완료했을때 다른 url로 보낼려면, xiRedirectUrl 속성을 사용하여, 플래시 무비가 있는 활성화된 페이지 대신에 유저를 보낼 페이지로 redirect 시킬수 있다.

 

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699", true);
   so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // 반듯이 존재해야 하는 페이지
o.write("flashcontent");
</script>