정보공간_1

[3기 강남 백정의] 웹에 올리는 SWF파일과 Actionscript와 Javascript의 연동 본문

IT 놀이터/Elite Member Tech & Talk

[3기 강남 백정의] 웹에 올리는 SWF파일과 Actionscript와 Javascript의 연동

알 수 없는 사용자 2013. 2. 5. 22:19

Flash를 통해 개발한 SWF 파일을 HTML이하 웹 상에 구현할 때 태그를 활용하거나 Flash 기본 라이브러리, 등 을 이용하는 방법과 Javascript와 연동하는 방법에 대해서 소개해보겠습니다.

기본적으로 바로 퍼블리쉬 하여서

기본적으로 swf파일과 퍼블리쉬하면서 만들어지는 js파일을 HTML파일과 같은 곳에 두고 HTML파일 내에 필요한 부분에 바로 삽입하여 사용할 수 있습니다. 쉽게 사용할 수 있지만 이 방법은 세부적인 사항을 수정하기 힘들고 HTML태그로 제어하는데 있어 문제가 생길 수 있습니다. 또한 코드의 가독성이 떨어지고 HTMl파일에 있다보니 보안도 좋지 않습니다. 테스트를 할 경우나 홍보 페이지등에만 사용하는 것을 권장합니다.

그 다음 방법은 외부 Javascript를 만들어두고 fucntion 호출을 이용한 방법입니다.

 html파일에 이런식의 코드를 두고 function을 호출합니다.

script에 다음과 같은 function을 만들어둡니다. html파일의 가독성을 높이고 js파일의 수정만으로 버전과 세팅 정보를 수정할 수 있어 매우 용이합니다.

참조 : FlashInsert 코드에 대해서는 오픈소스로 사용되고 있는 것을 알고 있지만 출처가 있을 시 바로 수정하겠습니다.

그리고 마지막으로 swfObject라는 오픈 소스를 활용하는 방법입니다. 

html파일 내에 다음과 같이 해두고 swfObject.js파일을 insert해둡니다. 가장 추천하는 방법이고 모든 세팅 정보를 쉽게 바꿀수 있고 swfobject를 사용함으로써 부가적인 이벤트제어와 마우스 휠 제어 등에 많은 장점이 있으므로 대규모 프로젝트에는 반드시 사용하고 일반적으로 swfObject를 많이 사용하고 있습니다.

참조 : http://code.google.com/p/swfobject/

Flash 작업을 할 경우 Javascript와 많은 연동이 필요한데 이 작업을 쉽게 할 수 있는 방법을 소개합니다. 8버전 이후로 사용 가능한 ExternalInterface 클래스를 이용한 방법을 소개합니다.

Language version: ActionScript 3.0

Browser Operating System Operating System
IE 5.0 이상 windows
Nescape 8.0 이상 windows Macintosh
Mozilla 1.75 이상 windows Macintosh
FireFox 1.0 이상 windows Macintosh
Safari 1.3 이상 Macintosh

Property

available : Boolean -외부랑 가능여부 항상 True

objectId : String - <object>나 <embed> 태그 안에 있는 id

Public Method

addCallBack(functionName:String,closure:Function):void - 자바스크립트에서 플래시로 호출할 메소드를 추가해주는 fucntion

call(functionName:String,...arguments)):* - 플래시로 자바스크립트메소드를 호출할때 사용합니다. 앞부분은 자바스크립트 함수명,뒷부분은 보낼 인자인데 0 이상의 갯수

 

우선 ExternalInterfaceExample란 이름의 fla파일과 as파일 만듭니다.  fla파일에 documentclass는 ExternalInterfaceExample로 해둡니다.

그리고 as파일(ExternalInterfaceExample.as)에

if (ExternalInterface.available) { //default값이 true입니다.

try { //try,catch는 보안상 작성해줍니다.

ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);

// ▲ 자바스크립트에서 호출할 fucntion을 등록합니다. 즉, 자바스크립트에서 생성된플래시.sendToActionScript();

// 이렇게 하면 as에서 receivedFromJavaScript를 호출하겠다는 것입니다.
} catch (error:SecurityError) {

} catch (error:Error) {
}
} else {
}

function receivedFromJavaScript(){

//자바스크립트에서 호출했을때 하고싶은 코드를 작성하는 function이 됩니다.

}

라이브러리에도 나오듯이 생성자메소드안에 쓰기를 추천합니다.

여기까지쓰면 자바스크립트에서 플래시로 호출이 가능해졌습니다.

그럼 플래시에서 자바스크립트로의 호출은 다음과 같습니다.

if (ExternalInterface.available) { //기본적인 값을 체크하는 제어문

ExternalInterface.call("sendToJavaScript","GOGO");

//단 한줄로 호출이 가능합니다. 앞부분은 자바스크립트에서 호출할  function명,뒤부분 부터 모두 인자입니다. 0개 이상입니다.

}

대부분 이벤트 리스너function 에 사용 될 것입니다.

플래시 작업은 이제 모두 다했습니다.

<script language="JavaScript">
function thisMovie(movieName) { //이 메소드는 매우 유용합니다.Browser에 따라 object를 리턴해줍니다.
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function sendToActionScript(value) { //자바스크립트에서 플래시메소드 호출해주는 function

thisMovie("ExternalInterfaceExample").sendToActionScript(value); //우선 thisMovie()메소드를 이용해서 object를 알아낸뒤 플래시에 있는 아까등록했던 메소드를 호출합니다.
}
function sendToJavaScript(value) { //플래시에서 자바스크립트 메소드 호출시 반응할 fucntion입니다
}
</script>

<head>와 </head> 사이에 쓴 부분입니다.

아래쪽에선 여기까지 쓰면 이제 자바스크립트와 플래시간의 연동은 문제없습니다. 마지막으로 정말 중요한 부분은

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="ExternalInterfaceExample" width="500" height="375"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="ExternalInterfaceExample.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="always" />
<embed src="ExternalInterfaceExample.swf" quality="high" bgcolor="#869ca7"
width="500" height="375" name="ExternalInterfaceExample" align="middle"
play="true" loop="false" quality="high" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

위에 보이시는 allowScriptAccess를 반드시 always로 해주셔야합니다. 처음에 만들면 sameDomain 이란걸로 되어있을겁니다. 반드시 always로 바꿔주셔야합니다.! 아마 로컬에서 테스트할때는 always가 아닐 경우 보안 문제로 실행할 수 없습니다.

그리고 위에 보시면 embed태그안에도 allowScriptAccess속성이 있습니다. 뭐지 왜 2개지? 라는 생각이 듭니다.

이유는 ie에서는 object태그 안에것을 인식하고 그밖에선 아마 embed태그를 인식할 것입니다. 그래서 둘다 써주어야 합니다.

만약 퍼블리쉬해서 바로 쓴다면 아래 부분에서도 sameDomain부분을 always로 바꿔줍니다.

<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("This page requires AC_RunActiveContent.js.");
} else {
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
'width', '1024',
'height', '768',
'src', 'FunMain',
'quality', 'high',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'FunMain',
'bgcolor', '#ffffff',
'name', 'FunMain',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','always',
'movie', 'FunMain',
'salign', ''
); //end AC code
}
</script>

첨부파일은 메뉴얼 라이브러리를 이용한 방법입니다.

메뉴얼대로-jeongeui100.zip

 

'IT 놀이터 > Elite Member Tech & Talk' 카테고리의 다른 글

[3기 강북 김승현] Android Heap Memory 관리  (0) 2013.02.06
[3기 강남 이소영] 스토리텔링 (Story telling)  (0) 2013.02.05
[3기 대전 김재원] Linux Kernel Debugging - Dynamic Probes(2)  (0) 2013.02.05
[3기 신촌 윤기백] Hadoop의 이해 2편 - MapReduce의 소개및 이해  (0) 2013.02.05
[3기 신촌 윤기백] Hadoop의 이해 1편 - BigData와 HDFS  (1) 2013.02.05
'IT 놀이터/Elite Member Tech & Talk' Related Articles more