액세스 가능성

목차

  1. 소개
  2. Flash 8 플래이어에 변경된 보안 사항
  3. Flash 8 이전 버전에서의 통신방법
  4. ExternalInterface class
  5. ExternalInterface.call()
  6. ExternalInterface.addCallback()

Flash 8에서 ExternalInterface 사용하기

Flash 8 이전 버전에서의 통신방법

플래시 8 이전 버전에서 Falsh – Javascript 간의 통신 방법은 getURL() , fscommand() 를 사용하였고,. Javascript- Flash 간의 통신방법은 SetVariable() 을 사용 했습니다.

getURL

플래시에서 Javascript 를 호출하는 가장 쉬운 방법은 getURL() 을 이용하는 것입니다. 플래시에서 Javaccript 의 callJavascript() 함수롤 호출하는 다음의actinoscript 를 작성합니다.

var msg:String = "'안녕하세요. ^^'";

var callJas:String = 'javascript:callJavascript('+msg+')';

getURL(callJas);

HTML 에서는 <head> 와<body> 사이에 다음과 같이 Javaccript 함수를 작성합니다.

플래시에서 Javscript의 함수 callJavascript 를 호출하고 매개변수로 msg 인 “안녕하세요.^^” 문자열을 보냅니다. 따라서 결과는 다음 그림 1과 같습니다. 

<script language="JavaScript">

function callJavascript(str){

alert(str)

}

</script>

플래시에서 JavaScript의 함수 callJavascript 를 호출하고 매개변수로 msg 인 “안녕하세요.^^” 문자열을 보냅니다. 따라서 결과는 다음 그림 1과 같습니다.

alert 창

그림 1. alert 창

getURL() 을 이용한 Javascript 호출은 문법상으로 아주 쉬운 반면 플래시 플래이어가 포함된 브라우저의 환경을 건드려서 gif 에니메이션이 멈추는 현상을 발생 시킵니다.

주의: 로컬에서 테스트 할 때 에는 플래시 플래이어 8의 환경에서는 allowScriptAccess="sameDomain" 을 allowScriptAccess="always" 로 변경 해야 합니다. 또한 전역 보안 설정 패널에서 swf 파일에 대한 접근을 허용하여야 정상적으로 보입니다.

fscommand

fscommand() 는 SWF 파일이 Flash Player나 웹 브라우저 같이 FlashPlayer를 호스팅하는 프로그램과 통신할 수 있도록 합니다. 플래시에서 Javaccript 의 callJavascript() 함수롤 호출하는 다음의actinoscript 를 작성합니다.

var msg:String = "'안녕하세요. ^^'";
var callJas:String = "callJavascript";
fscommand(callJas, msg);

플래시의 Publish Setting 설정(ctrl+shift+ F12) 에서 그림 2와 같이 HTML 탭을 선택하고 Template 에서 Flash with FSCommand 를 선택하고 Publish 합니다.

Publish Setting 설정

그림 2. Publish Setting 설정

Publish 한 HTML 페이지를 보면 다음과 Javascript 가 설정이 되어 있습니다.

<script language="JavaScript">
<!--
var isInternetExplorer = navigator.appName.indexOf("Microsoft") != -1;
// Handle all the FSCommand messages in a Flash movie.
function fscommand_DoFSCommand(command, args) {
	var fscommandObj = isInternetExplorer ? document.all.fscommand : document.fscommand;
	//
	// Place your code here.
	//
}
// Hook for Internet Explorer.
if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) {
	document.write('<script language=\"VBScript\"\>\n');
	document.write('On Error Resume Next\n');
	document.write('Sub fscommand_FSCommand(ByVal command, ByVal args)\n');
	document.write('	Call fscommand_DoFSCommand(command, args)\n');
	document.write('End Sub\n');
	document.write('</script\>\n');
}
//-->
</script>

위의 코드에서 플래시 유저가 다루어야 할 부분은 진한 코드 부분 중 Place your code here 부분입니다.

즉 함수 안에서 Command 와 args 를 받아서 처리하면 됩니다.

아래는 command 와 args 를 받아서 alert 창을 뛰우는 코드 입니다.

  function fscommand_DoFSCommand(command, args) {

  var fscommandObj = isInternetExplorer ? document.all.fscommand : document.fscommand;

  //

  if(command=="callJavascript") {

  alert(args)

  }

  //

  }

fscommand 는 VBScript를 이용하여 통신을 하기 때문에 다른 VBScript와 충돌이 날 확률이 있고, 매개변수를 1개만 전달 할 수 있기 때문에 2개 이상의 매개변수를 전달하기 위해서는 Javascript 함수에서 split 를 이용하여 처리 하여야 합니다.

다음의 코드는 2개 이상의 매개변수를 전달 하는 fscommand 의 사용 예 입니다.

플래시에서는 다음과 같은 코드를 작성합니다.

var msg:String = "'안녕하세요. ^^'#반갑습니다.*^^*";

var callJas:String = "callJavascript";

fscommand(callJas, msg);

여기서 # 은 구분자의 역할을 합니다.

Javascript 의 fscommand_DoFSCommand () 코드는 다음과 같습니다.

function fscommand2_DoFSCommand(command, args) {

  var fscommand2Obj = isInternetExplorer ? document.all.fscommand2 : document.fscommand2;

  //

  if(command=="callJavascript") {

  arg = args.split("#")

  alert(arg[0]+'\n'+arg[1])

  }

  //

  }

위 코드에서 보면 #의 구분자로 문자열을 분리해서 alert 창에 \n 을 이용하여 줄바꿈을 하고 첫번째 인자와 두번째 인자를 줄바꿈 하여 그림 3과 같이 alert 창으로 보여줍니다.

2개의 매개변수의 값을 확인 하는 alert 창

그림 3. 2개의 매개변수의 값을 확인 하는 alert 창

주의: 로컬에서 테스트 할 때 에는 플래시 플래이어 8의 환경에서는 allowScriptAccess="sameDomain" 을 allowScriptAccess="always" 로 변경 해야 합니다.

 

SetVariable

Javaccript 에서 Flash 와 통신하는 방법은 많은 메쏘드를 통해서 할 수 있지만 그 중에서 SetVariable() 이 가장 많이 쓰입니다. SetVariable()은 Javascript 에서 플래시에서의 정의한 변수의 값을 플래시로 넘겨주는 메쏘드 입니다. 플래시는 변수가 변경이 되면 이벤트를 발생시키는 watch() 메쏘드를 통해서 값이 변경 될 때마다 callback 함수를 호출하여 통신을 합니다.

다음의 코드를 Flash 에 작성합니다.

var testValue:String = "";

 // 변수가 변경되면 실행되어질 callback 함수 

 watchCallback = function (id, oldval, newval):String {

 //변경된 값은 newval 을 통해 받습니다.

 result_txt.text = newval;

 return newval;

 };

 _root.watch("testValue", watchCallback);

위의 코드는 testValue 라는 값이 변경이 될 때마다 watchCallback 함수를 호출하는 코드입니다. Callback 함수가 호출이 되면 _root 에 있는 result_txt 텍스트에 변경된 값을 보여 줍니다.

다음의 코드는 body 안에 들어가는 코드입니다.

<input type=button value="플래시로 변수 넘기기" onClick="callJavascript()">
<form name="inputValue">
  Value <input type="text" name="vars" size="10" >
</form>

HTML 의 인풋텍스트에 입력된 값을 inputValue의 vars 라는 속성으로 저장을 하고 “플래시로 변수 넘기기” 버튼을 클릭하면 callJavascript() 함수를 호출합니다.

다음의 코드는 Javascript 코드입니다.

<script language="JavaScript">

  function callJavascript(){

  var sendText = inputValue.vars.value

     window.document.setVariable.SetVariable("testValue", sendText);

  }

  </script>

하이라이트된 코드를 살펴보면
window.document.FlashID.SetVariable(변수, 값) 의 기본형식에서 callJavascript() 함수는 SetVariable 메쏘드를 통해 testValue 의 값을 sendText 로 보내기 위해 아래와 같은 코드로 작성이 되었습니다.

window.document.setVariable.SetVariable("testValue", sendText);
HTML 에서 Javascript 을 통해서 플래시로 값을 전달

그림 4. HTML 에서 Javascript 을 통해서 플래시로 값을 전달

3/6 페이지
이전 페이지
다음 페이지