ActionScript 와 JavaScript

Flash 와 HTML 은 할 수 있는 영역의 일이 완전히 틀리다고 할 수 있을 정도로 그 활용성이 차이가 납니다. 그렇게 틀리기에 서로 섞어서 사용하면서 많은 시너지 효과를 만들어내게 됩니다. 그리고, 웹개발 시에 Flash 에 익숙하지 않은 웹개발자들과의 협업에 있어서도 자주 사용되고, Flash 가 가진 컴파일해야 한다는 단점을 극복하기 위해서도 자주 사용됩니다.

보 통은 ExternalInterface 를 사용하지만, 조금 복잡성이 있는 작업의 경우엔 어느덧 beta 딱지를 떼고 정식으로 Flex framework 에 포함된 FABridge (Flex - Ajax Bridge) 를 사용해보는 것도 괜찮습니다.

FABridge 의 기능?

사 실 저도 많이 사용해보진 않은지라 뭐라 말하기가 애매한데, 구지 FABridge 에 대한 것을 설명하자면 이게 ExternalInterface .call() 보다는 ExternalInterface.addCallBack() 에 대한 고급화라고 볼 수 있을것 같습니다. 그러니깐 ActionScript 가 JavaScript 에 간섭할 수 있는 기능보다는 JavaScript 가 ActionScript 에 간섭할 수 있는 기능에 더 특화되어 있습니다.

Document 도 없고, 예제도 없는지라 딱 확정지어서 말하기는 어렵지만 일단 제가 파악하고 있는 바로는 그렇습니다.

ActionScript 측 작업하기

아… 일단 Flex 와 FABridge 연동은 구글 뒤져보면 우르르 나오므로 패스하고, 개인적으로 MXML 을 사용하지 않기 때문에 ActionScript 위주로 설명하겠습니다.

FABridge 의 as 파일과 js 파일은 위와 같이 Flex SDK 안에 포함되어있습니다. (왜 이렇게 숨겨둔걸까…;;;) 

일 단 보시다시피 FABridge 는 Flex framework 에 포함되어져 있기 때문에 FABridge 순수한 Flash 프로젝트나 playerGlobal.swc 만을 사용하는 순수 ActionScript 프로젝트에서는 as 파일만 임포트해서는 사용할 수 없습니다.

그래서 이렇게 Flex 상에서 간단한 라이브러리 프로젝트를 구성해서 swc 를 찍어냈습니다.

그렇게 찍어낸 swc 파일을 사용하면 Flash 프로젝트나 순수 ActionScript 프로젝트에서도 별다른 번거로움 없이 이렇게 FABridge 를 사용할 수 있습니다. 

미리 말했듯이 FABridge 는 JavaScript 에서 ActionScript 로 간섭하는 편입니다. 그러므로 ActionScript 상에서는 그닥 해줄만한게 없는 편입니다.

주 석에도 달아놓았지만 테스트용으로 만드는 txt 와 btn 을 public 이란 것을 확인하고, FABridge 객체의 초기화 부분을 잘 살펴보도록 합니다. 첫번째는 FABridge 의 target 이 될 Object 를 두고, 두번째는 연결할 FABridge 의 ID 를 적습니다.

JavaScript 측 작업하기

먼저 JavaScript 측 작업을 하는데 있어서 FABridge.js 파일의 swfobject 에 맞춰진 수정본은 "머드초보" 님의 자료를 참고했음을 밝힙니다. (http://mudchobo.tomeii.com/tt/305) swfobject 를 사용하는 분들은 URL 에 있는 압축파일을 다운받아서 그 안에 있는 FABridge.js 파일을 사용하도록 하세요.

기본적으로 주어지는 FABridge.js 파일은 swfobject 와 같이 사용할 시에 에러가 튀나오게 됩니다.

그러면 간단하게 코딩을 해보도록 하죠.

주석을 달아놓았습니다.

우 선 23번 라인의 var bridgeID 가 43번 라인에서 flashVars 의 bridgeName 으로 들어가게 되고, 51번째 라인에서 swf 에 전달되게 되죠. 이렇게 전달된 bridgeName 파라메터는 ActionScript 에서 사용되게 됩니다.

그리고, 24번째 라인은 55번째 라인에 보이는 <div> 의 id 값입니다. (swfobject 에 관계된 내용이니 넘어가겠습니다.)

주 목해야 하는 부분은 32번째 라인입니다. 여기서 var swf 는 FABridge.fabridge(=bridgeName).root() 를 대입받게 되고, 이후 swf 는 ActionScript 에서의 FABridgeTest 로 취급되게 됩니다.

그렇게 되기에 37번째 라인에서 getBtn() 을 통해서 ActionScript 상의 btn 을 가져오게 되죠.

이 ActionScript 상의 btn 을 

이렇게 getBtn() 으로 가져오게 됩니다.

테스트 해보기

아… 당연한 이야기지만, JavaScript 와 연동부분이기 때문에 그냥 HTML 을 더블클릭해서는 보안때문에 실행이 안됩니다. 웹서버 상에 올려서 테스트를 해야 합니다. 

테스트를 해보면 이런 화면이 나오게 됩니다.

Flash 상의 버튼을 누르면 

이 부분의 코드가 실행되면서 

정상적으로 alert 이 뜹니다.

뭐 HTML 측의 button 을 눌러도

이 부분이 실행되고 

다시 ActionScript 쪽의 이 메서드가 호출되면서 

이렇게 Flash 상의 txt 에 안내문이 찍히게 되죠.

그리고, 약간의 응용력을 발휘하면 이렇게도 되겠죠.

정상적으로 찍히는 것을 확인할 수 있습니다.

ActionScript 에서 javaScript function 호출하기

아니 이렇게 JavaScript 에서 ActionScript 로 간섭하는건 되는데 어째서 ActionScript 에서 JavaScript 에 접근하는건 없는거지? 라는 생각을 한참 했습니다. 이상하더라구요…

근데 생각하다 보니깐 그건 그냥…

ExternalInterface.call() 해도 되겠더만요…;;;

FABridge

보 통 웹개발자들이 ActionScript 를 모르고, 왠만한 경우 웹개발자가 만든 JavaScript function 을 액션개발자가 호출하는 형태의 업무가 되므로 이 FABridge 에 대한 활용도는 현재의 개발자 생태계에서는 쓸일이 거의 없는 편일겁니다.

뭐 구지 쓴다고 해봤자 매번 링크 수정될때마다 캐귀찮게 플래시 수정해달라는 요청을 떼버리기 위해서 UI 용도로 만들어진 swf 에 직접 EventListener 를 걸수 있도록 환경셋팅 해주는 정도겠지요. 그 외에는 딱히 뭐따 써야할지 생각이 안나는 물건이네요. 아무래도 JavaScript 가 ActionScript 내부에 간섭할만한 일이 많지 않기 때문이지요.

흠… 아닐라나 일단 JavaScript 상에서 ActionScript 상의 메서드 호출이 가능하기 때문에 보통 ActionScript 에서

var info:String = ExternalInterface.call("jsFunction") as String;

과 같은 형태로 되는 작업을 JavaScript 상에서

swf.setInfo(str)

과 같이 사용할 수도 있게 되어서, JavaScript 연동시에 고질적으로 발생하던 타이밍 문제 (JavaScript 상에서 ActionScript 의 구동 시점을 결정하지 못하는 것) 을 해결하는데 사용되어질수도 있겠네요.

뭐… 일단 사용하기가 무척 불편하던 ExternalInterface.addCallBack 보다는 매우 편리하게 사용되어질 수 있으므로 연구를 해보면 여러모로 활용처가 생기지 않을까 싶습니다.

FABridge 에 대해서 좀 더 자세히 알길 원한다면

http://www.adobe.com/kr/devnet/flex/articles/framework_beta_fabridge.html