Web, Web Standards

Flash Activate

댓글 한 개

Flash의 활성화 이슈

웹 페이지에서 구성되는 기본적인 필수 요소는 아니지만 플래시는 그 미려한 모션과 다양한 액션등으로 많은 곳에서 사용 되고 있습니다.
2006년경 object를 HTML 에서 사용하는 방식에대해 미국의 Eolas사에서 MS에 소송을 걸게 되었고 판결이 나기까지 MS는 Object를 js를 이용해서 로드하게하는 패치를 진행하였습니다.
2008년 초에 MS는 소송에서 이기게 되었고 다시 <object>를 이용해 바로 Object를 로드할 수 있게 패치를 진행하였으나, 사용자의 업데이트율이 낮은관계로 아직까지 js로 Object를 로드해야 안전하게 사용자가 플래시를 사용할 수 있게 됩니다.

ngbFlashActivate()

플래시 구현시에 정의 할 수 있는 대부분의 요소들을 원하는것으로 정의가 가능 하기 위해 작업이 되었으며, 여러가지 상황에 대비해서 고려가 되었습니다. 현재 플래시CS3 에서 제공하는 플래시 구현 방식을 차용해서 script 방식과 script가 로드되지 않을때의 방식 모두를 지원하게 했습니다. 파라미터는 원하는대로 추가 할 수 있습니다.

JS Source
function ngbFlashActivate()
{
	var isIE  = (navigator.appVersion.toLowerCase().indexOf("msie") != -1) ? true : false;
	var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
	var fullParam = new String;

	this.clsid = "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"; //MS Object ClassID
	this.codebase = "https://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"; //Flash Version
	this.pluginspage = "http://www.macromedia.com/go/getflashplayer"; //Flash Plugin Link

	this.flashURL = new String;
	this.width = new String;
	this.height = new String;
	this.objId = new String;
	this.objClass = new String;

	this.wmode = new String;
	this.quality = new String;
	this.bgcolor = new String;
	this.allowScriptAccess = new String;
	this.allowFullScreen = new String;
	this.accessibility = new String;
	this.parameter = function( property, value )
	{
		if(isIE && isWin) { fullParam += "<param name='"+ property +"' value='"+ value + "' />\n"; }
		else { fullParam += " " + property +"='" + value +"'"; }
		switch ( property )
		{
			case "wmode": this.wmode = value; break;
			case "quality": this.quality = value; break;
			case "bgcolor": this.bgcolor = value; break;
			case "allowScriptAccess": this.allowScriptAccess = value; break;
			case "allowFullScreen": this.allowScriptAccess = value; break;
			default:;
		}
	}

	this.init = function( strFlashUrl, n4Width, n4Height)
	{
		this.flashURL = strFlashUrl;
		this.width = n4Width;
		this.height = n4Height;
	}
	this.loadFlash = function( showId )
	{
		if(this.wmode == ""){ this.parameter("wmode", "window")};
		if(this.quality == "") { this.parameter("quality", "high")};
		if(this.bgcolor == "") { this.parameter("bgcolor", "#FFFFFF")};
		if(this.allowScriptAccess == "") { this.parameter("allowScriptAccess", "always")};
		if(this.allowFullScreen == "") { this.parameter("allowFullScreen", "false")};

		var resultHTML = new String;
		var genIDAttr = (this.objId!="") ? " id='" + this.objId + "'" : "";
		var genClassAttr = (this.objClass!="") ? " class='" + this.objClass + "'" : "";
		var widthSizeAttr = (this.width !=0) ? " width='"+ this.width +"'" : "";
		var heightSizeAttr = (this.height !=0) ? " height='"+ this.height +"'" : "";
		if(isIE && isWin)
		{
			resultHTML = "<object " + genIDAttr + genClassAttr + " classid='"+ this.clsid +"' codebase='"+ this.codebase +"' " + widthSizeAttr + heightSizeAttr + ">\n";
			resultHTML += "<param name='movie' value='"+ this.flashURL +"' />";
			resultHTML += fullParam ;
			resultHTML += this.accessibility;
			resultHTML += "</object>";
		}
		else
		{
			resultHTML = "<object  " + genIDAttr + genClassAttr + "  type='application/x-shockwave-flash' data='" + this.flashURL + "' " + widthSizeAttr + heightSizeAttr + fullParam + ">\n";
			resultHTML += this.accessibility;
			resultHTML += "</object>";
		}
		(showId) ? document.getElementById(showid).innerHTML = resultHTML : document.writeln ( resultHTML );
	}
}
사용법
<script type="text/javascript">
	var flash = new ngbFlashActivate();
	flash.init('http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf','225','283','main_promotion');
	flash.accessibility = '<p><img src="" alt="대체컨텐츠" /></p>';
	flash.parameter('wmode','transparent');
	flash.parameter('flashVars','menu= 001');
	flash.loadFlash();
</script>

<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="225" height="283" id="Untitled-2">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<param name="wmode" value="transparent" />
	<param name="flashVars" value="menu= 001" />

	<!--[if IE]>
	<object type="application/x-shockwave-flash" data="http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf" quality="high" bgcolor="#ffffff" width="225" height="283" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" flashvars="menu=001">
		<p><img src="" alt="대체컨텐츠" /></p>
	</object>
	<![endif]-->
</object>

크게 스크립트 로드부분과 <noscript>에 의한 대체 컨텐츠 부분으로 구성이 되어 있습니다.
컨디셔널 코멘트를 사용하여 IE일때와 IE가 아닐때를 구분해서 IE용을 먼저 로드후 로드되지않을때 안의 컨텐츠를 로드하는 방식으로 구성되어 있습니다.

var flash = new ngbFlashActivate();
필수요소입니다. 플래시 오브젝트를 생성하고 특정 변수(flash)에 대입합니다. 특정 변수는 알아보기 쉽고 중복되지 않는 범위에서 자유롭게 결정합니다.

var 정의오브젝트명 = new ngbFlashActivate();
flash.init(‘http://s.nx.com/S2/Nexon2007/banner/banner_brand/main_promotion.swf’,’225′,’283′,’main_promotion’);
필수요소입니다. 플래시에서 기본적으로 필요한 요소들을 정의합니다.

정의오브젝트명.init('flash URL','가로사이즈','세로사이즈','플래시의 DOM ID');
flash.accessibility = ‘<p><img src=”” alt=”대체컨텐츠” /></p>’;
부가요소입니다. 플래시가 로드되지 않을 경우에 보여야 하는 컨텐츠를 구성하여 넣어 줍니다. 접근성 관련 콘텐츠입니다.

정의오브젝트명.accessibility = "대체 콘텐츠";
flash.parameter(‘wmode’,’transparent’);
부가요소입니다. 플래시에서 사용되는 각종 속성들(wmode, flashvars 등등) 정의 할 수 있습니다.
정의오브젝트명.parameter('속성', '속성값');
flash.loadFlash(); , flash.loadFlash(‘DOM ID’);
필수요소입니다. 각종 요소들과 정의된 옵션들을 조합해서 실제로 플래시 오브젝트를 표현해 줍니다.
loadFlash 함수안에 파라미터의 값이 있게 되면 파라미터의 값을 ID로 가진 앨리먼트 안으로 앨리먼트가 표현되게 됩니다.
함수안에 파라미터가 존재하지 않으면 오브젝트가 정의된 곳에 그대로 플래시오브젝트를 표현합니다.

각종 요소에 기본값이 세팅되어 있습니다.

  • wmode= “window”
  • quality= “high”
  • bgcolor = “#FFFFFF”
  • allowScriptAccess = “always”
  • allowFullScreen = “flase”

당연히 파라미터 지정을 새로이하면 값은 변경이 됩니다.

이걸 본 한사람의 반응
‘플래시를 스크립트로 구현한다는게 좀 구림 플래시오브젝트 여부를 판단해서 대체텍스트를 뿌려줄지 플래시 코드를 뿌려줄지 선택할수 있지 않을까?’
라고 했으나 더이상은 귀찮아서 작업하기 싫었어요;