프로젝트 수행 시 GNB 펼침을 위해 flash 출력을 투명으로 설정, DIV로 코딩된 페이지를 비스타에서 볼 경우 아래와 같이 object영역이 먼저 표시되고 컨텐츠가 출력되는 현상이 발생했다.(비스타UAC(사용자 계정 콘트롤)과 보호모드 사용함.)
여러 소스 중 해당 문제를 해결하는 방법으로 SWFObejct 함수를 사용했다. 해당 함수를 사용할 경우 비스타에서 사이즈를 %로 했을 때 파일이 나오지 않는 문제, object영역 표시 후 보이는 현상, 파이어폭스에서 zindex가 적용되지 않는 문제 등이 해결되었다.
자세한 내용은 아래 사이트 참조하길.. 단, 작업 중 실수일지 몰라도 아래 사이트에서 제공하는 소스는 몇 몇의 컴퓨터에서는 플래시가 보이지 않는 문제가 있어 수정했다. 그리고, 역시 작업 중 실수일지 몰라도 아래 페이지에서 설명은 좀 다르지만, 해당 DIV의 id와 so.write(“id”)가 같아야 출력된다. swfobject_수정.js가 수정된 내용이고, 나머지는 모두 원본소스이다. 참고 사이트 : http://blog.naver.com/logon77?Redirect=Log&logNo=110011578861
사용방법 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'를 붙이는 것이다.
"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>