ADOBE/ ActionScript

플래시 as3.0 swf와 swf 간의 통신 as3.0 에서 loader를 사용해swf를 로드한 후 loader.content 안에 있는 함수실행 등등

AlrepondTech 2020. 9. 21. 01:51
반응형

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

 

 

출처: http://blog.naver.com/PostView.nhn?blogId=popkim71&logNo=30025863763

참고 : http://www.actionscript.org/forums/archive/index.php3/t-113397.html

 

1. Mathod_IN.swf

fla의 Document class 란에 다음 class를 명시해 준다

package
{
 [SWF( backgroundColor='0x000000', frameRate='30', width='1024', height='582')]
 public class Mathod_IN extends Sprite
 {

    public function Mathod_IN():void{

      

    }

    public function mathod_1(rcs:String):void{

      trace("rcs="+rcs); // "ddddd"가 출력된다.

   }

}

 

2. MainStage.swf

public function loadImg():void{
      this.url = "Mathod_IN.swf" ;

     loader.name = url;
     loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
     request = new URLRequest(url);  
     loader.load(request);

  }
  private function onComplete(event:Event):void{
     loadedMC = loader.content as MovieClip ; //loadedMC는 Mathod_IN.swf자체가 됨
    loader.content["mathod_1"]("ddddd");//Mathod_IN.swf안에 있는 함수를 실행

  }

[출처] as3.0 에서 loader를 사용해swf를 로드한 후 loader.content 안에 있는 mathod실행 하려면|작성자 popkim71

 

 

=================================

=================================

=================================

 

 

 

출처: http://blog.naver.com/PostView.nhn?blogId=mytearz&logNo=100114564250&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView

 

무슨소리인고 하니

요 바로 밑에 포스팅한 것과 반대되는 개념입니다.

 

main.swf에서 sub.swf를 로드했을 때

sub.swf에서 main.swf의 함수를 호출하는 방법이지요.

 

아마도 약간의 편법인듯한데요.

좀더 쉬운 방법을 알고 계신 분 계시면 제보 부탁드립니다.

 

2.0에서는 _root.펑션, _parent.펑션

하면 끝났는데 3.0에서는 안되드라구요 ㅠㅠ

 

그래서 배운 방법이  main을 무비클립으로 지정해주는 겁니다.

sub.swf를 로드할 때
loader.content["setParent"](this); 이런 식으로 sub.swf의 함수를 정의합니다.

sub.swf에는


var parentMC:MovieClip;
function setParent(pm:MovieClip) {
 parentMC = pm;
}

 

이런 부분이 있겠죠.

무슨 의미인고 하니!

parentMC라는 무비클립을 만들고

setParent로 넘어온 무비클립을 parentMC에 넣겠다는 거죠

 

위에서 main.swf에서

loader.content["setParent"](this);

이렇게 해서 pm을 main.swf로 지정했습니다.

 

그렇기 때문에 sub.swf에서 parentMC라고 하면 상위 swf인 main.swf가 되는거죠

이렇게 해놓은 다음에 main.swf의 함수를 호출하기 위해서는

parentMC.펑션(파라미터) 이렇게 해주면 끝납니다.

 

아쉽게도 parentMC.하위 무비클립 이런 방식은 안되는 거 같구요

함수로 전부 만들어주어야 합니다.

 

지금 프로젝트 특성상 main.swf에서 sub.swf를 로드하고 sub.swf에서 target.swf를 로드하는데요

이걸 어케 연결하나 고민했는데 한시름 덜었네요 ㅠㅠ

 

-------------------------------------------------------------------------------------------

 

라고 옛날에 이렇게 적었습니다만...

함수 사용하지 않도고 방법이 있네요

테슷해본 결과

메인 1프레임 액션에서 실행해보니

this.root.parent.parent

this.loaderInfo.loader.root

가 main.swf의 root가 되시겠습니다................

[출처] [AS3.0] 쌩초보의 3.0 정복기 #2. 로더로 로드된 swf의 메인 swf함수 호출하기 |작성자 내눈물

 

 

 

=================================

=================================

=================================

 

 

 

 

출처: http://blog.naver.com/PostView.nhn?blogId=mytearz&logNo=100114434768

 

AS2.0에서 AS3.0으로 갈아타는 중입니다. 2.0보다 3.0이 쓰레기라는 입장은 변함이 없지만 ㅠㅠ

매력적이기는 합니다 +_+ 쉽게 쉽게 되던게 3.0에서 안되서 고생하는게 많네요

그래도 3.0이 대세니 따라야겠지요 ㅋㅋ열심히해보아야겠어요 ㅠㅠ

여튼 그 첫번째로 로더로 로드한 swf파일의 함수를 호출하는 내용입니다 +_+ 생각보다 쉬워요

 

 

main.swf에서 sub.swf를 로드해서 sub의 setInit()함수를 호출하기 위한 방법입니다.

 

sub.swf에는 setInit() 함수만 있으면 되구요

main.swf에는 밑의 내용들이 들어가 있어야합니다.

 

import flash.display.Loader;
import flash.display.Sprite;
import flash.events.*;
import flash.net.URLRequest;

 

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComp);
var request1:URLRequest = new URLRequest("sub.swf");
loader.load(request1);
addChild(loader);

function onComp(e:Event):void{

       loader.content["setInit"]();

}

 

이런식으로 짜면 됩니다.

위에 소스는 sub.swf를 로드하고 로드가 완료되면 setInit을 실행하는 소스입니다.

 loader.content["setInit"]();

를 다른 이벤트에 삽입을 하면 (예를 들어 버튼 클릭)

버튼을 클릭했을 때 setInit이 실행되게 됩니다.

 

이상 +_+

[출처] [AS3.0] 쌩초보의 3.0 정복기 #1. 로더로 로드한 swf의 함수 호출하기|작성자 내눈물

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://blog.naver.com/PostView.nhn?blogId=cjc07&logNo=53966305

Flex Flash간의 파라미터 주고 받기

 

가끔 작업을 하다 보면 Flash로 만든 컨텐츠와 Flex로 만든 컨텐츠가 서로 이벤트를 공유해야 한다던가 파라미터 값을 주고 받아야 할 경우가 있다. Flex 개발은 대부분 개발자들이 다루고Flash는 디자이너나 플래셔들이 다루다 보니 작업의 영역이 나눠지기 마련이다이렇게 작업 영역이 나눠지므로 각자가 만든 결과물이 서로 매개 변수를 주고 받을 수 있다면 별다른 어려움 없이 협업을 할 수 있지만이런 방법을 모른다면 꽤나 고생스럽게 작업을 해야만 했을 것이다.

때마침 AdobeFlex 공식사이트의 디자이너만을 위한 스페셜 이벤트에서 “Flex와 Flash 간에 파라미터 주고받기”에 대한 신청 주제가 올라와서 필요한 기술을 소개하고자 한다. SWF간의 매개 변수를 공유하는 통신 방법이나 팁은 이미 많이 알려져 있고 편이고 새로운 부분도 아니다알고 보면 그리 어려운 부분도 없으니 부담 없이 읽어 내려갔으면 한다.

 

 
[참고]
이 문서에서 Flex Flash간의 파라미터 전달 방식을 기준으로 다룰 것이므로 Flash로 만든SWF Flex로 만든 SWF가 예제가 될 것이다솔직히 Flex Flash나 다 똑 같은 SWF이다.개발 방법만 다를 뿐이니 Flex Flash로 구분은 지었지만 SWF라는 틀에서 이해할 수 있었으면 한다.

 

 

파라미터를 공유한다는 관점

 파라미터를 공유한다는 관점에서 보면 아래의 <그림 1-1> <그림 1-2>처럼 SWF에서 다른SWF 파일을 로드하는 경우와 서로 다른 영역에서 파라미터를 공유해야 하는 경우로 나눌 수 있다.

 

 

<그림 1-1> SWF가 또 다른 SWF Loader를 이용해서 불러들인 경우를 나타낸 것이다이럴 경우 Flex Container의 역할을 하고 Flash로 제작된 SWF 파일을 로드할 경우파라미터를 공유하는 방법은 URL로 파라미터를 넘기는 방법과 SWF의 컨텐츠간 도메인을 맞춰 주어서 공유하는 방식이 존재할 수 있다전자의 경우는 범용적으로 사용할 수 있으며후자의 경우는 조금 까다로운 이해와 작업들이 필요한 편이다이런 식으로 그림을 그려 놓고 생각을 하니 꽤 많은 경우의 수가 존재할 듯하다.

우선 <그림 1-1>의 경우는 컨텐츠 제작버전에 따라 달라질 있으며 경우의 수는 대략 2가지 정도로 어렵게 공유하는 방법과 쉽게 공유하는 방법 두 가지가 존재한다어떤 방식을 택하던 그건 여러분의 판단에 맡기겠다.

 

가장 쉽게 파라미터를 공유하는 방법

 



파라미터를 가장 쉽게 공유하는 방법은 URL을 활용하는 방법이다쉽게 A.swf에서 B.swf를 불러 올 때 파라미터를 경로에 기술하면 된다 B.swf?a=1&b=2&c=3 이런 식으로 파라미터를 붙여서 불러오면 AS2.0 컨텐츠의 경우는 _root.a, _root.b로 사용할 수 있고 AS3.0 컨텐츠의 경우는 this.root.loaderInfo.parameters.a, this.root.loaderInfo.parameters.b 같은 형식으로 사용할 수 있다아래의 예제를 보면 더욱 쉽게 이해할 수 있을 것이다.

 

예제 소스 example0-1 프로젝트의 main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
           creationComplete="init()">
          
           <mx:Script>
                     <![CDATA[
                                import mx.controls.SWFLoader;
                                private function init():void{                                       
                                          this.parameters["a"] = 1;
                                          this.parameters["b"] = 2;
                                         
                                         
 
                                          var params:URLVariables = newURLVariables();
                                          for(var param:String in this.parameters)
                                                     params[param] =this.parameters[param];
 
                                                                                    
                                           var loader:SWFLoader = newSWFLoader();                                                                             
                                          loader.load("./example_01_flash.swf?"+params.toString());
                                          addChild(loader);
                                }
                     ]]>
           </mx:Script>
</mx:Application>
 

 

example_01_flash.swf 1번 프레임의 소스

-          아래의 소스는 Flash에서 debudTxt 라는 textfiled를 만들었고 들어오는 파라미터를textField에 써주고 있다.

 
 
try{
           for(var param:String in this.loaderInfo.parameters)
                     debugTxt.appendText(param + " : " + this.loaderInfo.parameters[param] + "n");
 
}catch(e:Error){}
 
 


실행결과 Flex의 소스 실행 결과

 

 

Flex 컨텐츠가 로드한 Flash 컨텐츠의 Textfield에 표시되고 있다반대의 경우도 위의 방식과 동일하게 하면 된다.

다만 Flex의 경우 파라미터를 this.parameters 혹은 Application.application.parameter로 접근하고 Flash의 경우는 this.root.loaderInfo.pameters로 파라미터에 접근하는 것만 알면 된다.

 

어렵게 공유하는 방법

A.    AS2.0으로 제작된 컨텐츠가 AS2.0으로 제작된 컨텐츠를 로드할 경우

B.    AS3.0으로 제작된 컨텐츠가 AS3.0으로 제작된 컨텐츠를 로드할 경우

 



2-A 경우는 이 문서의 주제에서 논외 관점일 수 있지만 Flex 1.5버전도 존재하니 간단하게 짚고 넘어 가겠다. AS2.0의 경우가 예인데 AS2.0 이하 컨텐츠의 경우는 level 단위로 접근해서 매개 변수의 사용이 바로 가능하다예를 들어 A.swf라는 컨텐츠에 파라미터가 test=1이라는 값이 들어 왔고 A.swf가 최상위 레벨에 존재한다고 할 때, B.swf A.swf에서 로드된 경우B.swf A.swf의 매개변수 test에 접근하려면 _level0.test라고 레벨로 바로 접근해서 사용하면 된다.


2-B의 경우는 기 기술문서로 등재되어 있는 Flex 모듈 프로그래밍의 기초 - Application domain 이해 2에 해답이 있다. ApplicationDomain을 활용해서 서로 간의 접근 가능한 영역을 맞춰주고 매개변수를 공유하는 방식이다조금 많은 이해를 필요로 할 수 있지만 프로그래밍을 할 때 많은 도움을 줄 것이다.

 

이렇게 해서 Flex 혹은 Flash 컨텐츠가 다른 SWF 컨텐츠를 내부로 불러들일 때 파라미터를 공유하는 방법을 알아보았다이젠 내부가 아닌 외부의 SWF와 파라미터를 공유하는 방법에 대해 알아보자외부의 SWF와 파라미터를 공유하는 방법은 서로간의 매개 변수를 주고 받을 수 있는 통로를 만드는 방법에 대한 이야기가 될 것이다이런 방법에 대해 자세히 알아보자.

 

 외부의 SWF와 파라미터 공유 방법

외부의 SWF 파일간에 통신하는 방법은 일반적으로 두 가지 정도의 방법을 활용하는 편이다물론 반드시 외부의 경우에만 사용하는 것이 아닌 먼저 이야기 했던 내부에 SWF를 불러올 때도 사용할 수 있다다만 내부에 SWF를 로드해서 이렇게까지 사용하는 경우는 드물기 때문에 외부에 주안점을 두고 설명을 할 것이다외부의 SWF간에 매개 변수를 공유할 수 있는 두 가지 방법은ExternalInterface를 활용하는 법과 LocalConnection을 사용하는 방법이다이 두 가지 방법의 활용하는 방법과 장단점을 자세히 알아보자.

 

1.       ExternalInterface를 활용하는 방법

이 방법은 Javascript를 중간에 두고 SWF 파일끼리 통신하는 방법이다. AdobeFABridge를 들어 본적이 있는가? Adobe FABridge가 이와 같은 방법을 편리하게 사용할 수 있도록 도와주는 일종의 라이브러리이다이 방법은 FABride의 원리를 본다고 생각하면 된다일단 이해를 돕기 위해 Flex로 만든 SWF가 자바스크립트의 함수를 호출 하면 Flash로 만든 SWF Flex의 파라미터 값이 전달되어 Flash의 무비클립이 제어되는 것을 구현해 보겠다.

 

1.1 Flash를 컨트롤 할 Flex 구현

FLEX Source code(Flashcontroller.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
           layout="absolute" width="300" height="100"
           creationComplete="init()">
           <mx:Script>
                     <![CDATA[
                                private function init():void{
                                          Security.allowDomain("*");
                                }
                                private function callJs(dir:String):void{
                                          if(ExternalInterface.available){
                                                     //웹 페이지의 sendFlash라는 함수를 호출 인자값으로는 dir을 전달.
                                                     ExternalInterface.call("sendFlash",dir);
                                                     trace(dir);
                                          }
                                }
                     ]]>
           </mx:Script>
           <mx:Button x="117" y="8" label="위로" width="70" fontFamily="돋움" fontSize="12" click="callJs('up')"/>
           <mx:Button x="10" y="37" label="왼쪽" width="70" fontFamily="돋움" fontSize="12" click="callJs('left')"/>
           <mx:Button x="224" y="37" label="오른쪽" width="70" fontFamily="돋움" fontSize="12" click="callJs('right')"/>
           <mx:Button x="117" y="69" label="아래로" width="70" fontFamily="돋움" fontSize="12" click="callJs('down')"/>
</mx:Application>
 

 

   [소스실행결과]

 

 

간단한 예제 코드이다. Flex의 버튼을 누르면 자바스크립트 메쏘드를 호출하는 형식이다소스를 간단히 설명하자면 버튼을 클릭하면 callJS라는 스크립트의 메쏘드를 호출하게 되며그 메쏘드를ExternalInterface를 이용하여 sendFlash라는 자바스크립트 메쏘드를 파라미터 값과 함께 호출하게 된다. Init에 쓰인 Security.allowDomain("*");에 대해서는 뒤에 등장하는 addCallBack을 사용하는 부분에서 다루기로 하겠다.

 

1.2    Flex의 파라미터를 전달 받아 플래시로 전달하는 자바스크립트 구현

<script language="javascript">
           // flash
의 도움말에 있는 스크립트 참조
           // 
설명 : 브라우저가 swf object를 찾을 때 익스클로러의 경우 window를 기준으로 객체를 찾고 그 외는 
           // document
로 객체를 찾는다.
           
function thisMovie(movieName) { 
                     var isIE = navigator.appName.indexOf("Microsoft") != -1; 
                     return (isIE) ? window[movieName] : document[movieName]; 
           }

           //flashContent
라는 Id를 가진 Flash 컨텐츠의 move라는 메쏘드를 실행함.
           function sendFlash(dir){
                     //Flash
의 메쏘드를 실행
                     try{
                                
thisMovie("flashContent").move(dir);
                     }catch(e){}
                     //Flex에서 정확히 호출되는지 확인을 위해서 찍어봄 확인 후 주석 처리할 것
                     alert(dir);
           }
</script>

 

위의 소스를 Flex 빌더에서 생성된 HTML에 붙여 넣고 테스트 해보자.


[Flashcontroller.html]


실행[아래로 버튼을 클릭한 후 Flex에서 보낸 파라미터 값이 경고창 메시지를 내보냄]

 

 

 

 

반응형

 

728x90

 

 




일단 경고창이 출력 되었다면 alert(dir) 라인은 //alert(dir) 주석으로 처리하고 다음으로 넘어간다.

1.3 Flex에서 보내준 파라미터를 Flash로 보내주면 된다그냥 보내는 것보다 뭔가 액션을 하도록 해서 Flash 컨텐츠가 Flex 컨텐츠에 의해 조정되는 것처럼 만들자. flashContents.fla400px * 400px 정도로 사이즈를 주고 원을 그린 다음 원하는 색상을 넣고 ball이라는 무비클립을 하나 만들어 준다그리고 ball instance name ball이라고 해준다.


 

이제 Flash Document Class를 만들어 보자.


Document Class의 내용

package{
           import flash.external.ExternalInterface;
           import flash.display.MovieClip;
           import flash.system.Security;
          
           public class flashContentsDoc extends MovieClip{
                    
                     public function flashContentsDoc():void{
                                Security.allowDomain("*");
                                //자바스크립트에서 호출될 메쏘드를 등록
                               ExternalInterface.addCallback("move",moveHandler);                    
                     }
                    
                     //자바스크립트에서 move라는 메드를 호출하면 실행하게 될 메쏘드정의
                     public function moveHandler(dir:String):void{
                                switch(dir){
                                          case "up" :
                                                     ball.y--;
                                          break;
                                          case "down" :
                                                     ball.y++;
                                          break;
                                          case "left":
                                                     ball.x--;
                                          break;
                                          default :
                                                     ball.x++;
                                          break;
                                }
                     }
 
           }
           }

 

Document Class 소스의 중요한 부분만 짚고 넘어 가겠다.
첫 줄의 Security.allowDomain("*"); 부분이 없는 Flash 컨텐츠는 외부와 어떠한 접근도 하지 않겠다는 이야기이다여기서 allowDomain이란 것을 보면 알 수 있듯이 Flash의 도메인을 설정해 주는 것인데 쉽게 이야기 하자면 Security allowDomain HTML 페이지에 embedFlash 컨텐츠의 접근을 어떤 도메인에서 접근 것을 허락해 주겠느냐는 의미라 보면 된다. 특정 도메인을 기술해도 되고 위에서 사용한 “*이것은 어떤 도메인에서든지 이 Flash 컨텐츠의 접근이 허용한 부분에 한해서는 접근을 허용해 주겠다는 의미이다.
ExternalInterface.addCallback은 자바스크립트에서 호출될 Flash의 메쏘드를 등록하는 것이다첫 번째 인자 값으로는 String 형식의 자바스크립트에서 호출될 이름을 기술하는 것인데Flash에서 실제 실행되는 메쏘드명과 일치하지 않아도 된다
마지막으로 실제로 호출될 moveHandler는 자바스크립트가 전달해준 파라미터를 기준으로 무비클립의 위치를 조금씩 이동시킨다.

그럼 이제 Flex와 자바스크립트 그리고 Flash 컨텐츠를 한데 모아서 제대로 구현되는지 확인해보자필자의 경우 SWF 컨텐츠를 HTML 페이지에 embed를 할 때 Flash Flex에서publish할 때 제공해 주는 AC_OETag.js를 사용하지 않고 swfobject라는 자바스크립트 라이브러리를 즐겨 사용하는 편이다. SWF embed할 때 정확하게 해주면 어떤 방법을 사용하던지 관계는 없다하지만 addCallBack을 사용하여 자바스크립트와 통신할 메쏘드를 등록한SWF HTML 페이지 상에서 다른 페이지로 이동을 한다던가 페이지를 갱신한다던가 할 때에 할당된 메쏘드를 해제해 주지 않으면 IE에서는 브라우저가 죽어버리는 버그가 존재한다. Swfobject는 이런 부분들을 말끔하게 해결해 준다본 예제를 실행하기 위해서는http://blog.deconcept.com/swfobject/ swfobject.js를 다운로드 해야 한다.
swfobject.js
의 자세한 내용은 사이트를 참조하길 바란다이제 전체를 담은 HTML을 보자.

             <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> ExternalInterface Example </TITLE>
 </HEAD>
 <script type="text/javascript" src="swfobject.js"></script>
 <BODY>
   <div id="flashArea">[Flash가 들어올 자리]</div>
    <div id="FlexArea">[Flex가 들어올 자리]</div>
 
 
  <script language="javascript">
             var FlexSo = new SWFObject("flashcontroller.swf", "flashcontroller", "300", "100", "9","#fff");            
             FlexSo.addParam("allowScriptAccess", "always");
             FlexSo.write("FlexArea");
 
             var FlashSo = new SWFObject("flashContents.swf", "flashContent", "400", "400", "9","#000");
             FlashSo.addParam("allowScriptAccess", "always");
             FlashSo.write("flashArea");
 
             // flash의 도움말에 있는 스크립트 참조
             // 설명 : 브라우저가 swf object를 찾을 때 익스클로러의 경우 window를 기준으로 객체를 찾고 그 외는
             // document로 객체를 찾는다.
             function thisMovie(movieName) {
                           var isIE = navigator.appName.indexOf("Microsoft") != -1;
                           return (isIE) ? window[movieName] : document[movieName];
             }
 
             //flashContent라는 Id를 가진 Flash 컨텐츠의 move라는 메쏘드를 실행함.
             function sendFlash(dir){
                           thisMovie("flashContent").move(dir);
             }           
 
</script>
 
 </BODY>
             </HTML>

 

위의 예제를 잘 동작하도록 하기 위해서는 웹에 올려서 테스트를 해야 한다. allowDomain의 설정이 작동하려면 url 자체에 도메인이 존재해야 하는데 그렇지 않으면 Flash 플레이어에서 보안 에러 처리를 할 것이기 때문이다웹이나 로컬 서버에서 예제를 실행한 다음 Flex의 버튼을 이리저리 눌러보면 Flash의 무비클립이 이동되는 걸 볼 수 있다이것으로ExternalInterface를 이용해서 Flex Flash가 서로 파라미터를 주고 받는 것이 구현되었다.이 방법으로 구현을 했을 때 단점이라면 자바스크립트가 실행되지 않을 경우에는 동작을 하지 않는 점과 게이트를 만들어 줘야 하는 점도 단점이 될 수 있다이젠 자바스크립트의 도움 없이도 파라미터를 주고 받을 수 있는 진짜 SWF 파일끼리 파라미터를 주고 받는 방법을 알아 보자



위의 예제에서 상황을 반대로 하고 싶다면 Flex addCallBack을 등록해주고 Flash에서 자바스크립트를 호출하고 자바스크립트는 Flex의 메쏘드를 실행하는 방법으로 하면 된다.

 

2.       LocalConnection을 사용하는 방법
LocalConnection
은 서로 다른 SWF간의 통신을 가능하게 해주는 Flash의 객체이다소켓을 이용하면 네트워크 안에서 서버와 클라이언트간의 통신이 가능하다그런 맥락과 비슷하게LocalConnection은 네크워크 기반이 아닌 로컬을 기반으로 로컬상에서 채널을 만들어서 그 채널을 기준 삼아 서로 통신을 한다따라서 채널을 등록하는 객체와 채널에 정보를 보내 주는 객체가 존재해야 구성이 완료된다무전기를 하나만 가지고 있다면 의미가 없지만 두 개가 있다면 말하는 사람과 듣는 사람이 존재하게 되어 통신이 가능해지는 것처럼 말이다여기서 더 이상의 이론에 대한 설명은 범위를 넘어설 수 있으니 자세한 내용은 Flash Flex의 도움말을 참조하기 바란다.

2.1 Flash
를 컨트롤 할 Flex 구현
위에서 만들어본 Flex를 조금만 손을 보면 쉽게 구현이 가능하다이 예제에서는 위의 Flex의 역할처럼 Flash의 컨텐츠를 컨트롤 하는 역할을 할 것이다빨간줄로 표시한 부분이 기존 소스에서 바뀐 부분이다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
           layout="absolute" width="300" height="100"
           creationComplete="init()">
           <mx:Script>
                     <![CDATA[
                                //추가된 부분
                                
private var lc:LocalConnection;

                               
                                private function init():void{
                                          Security.allowDomain("*");
                                          // 
추가된 부분

                                          lc = new LocalConnection();  
                                         lc.addEventListener(StatusEvent.STATUS,onStatus);                    
                                }
                               
                                private function onStatus(evt:StatusEvent):void{
                                          switch (evt.level) {
                                                   case "status":
                    trace("로컬 SWF SEND 성공");
                                                    break;
                        case "error":
                              trace("실패");
                                                    break;
                                             }
                                }
                               
                               
                                private function callJs(dir:String):void{
                                          if(ExternalInterface.available){
                                                     //웹 페이지의 sendFlash라는 함수를 호출 인자값으로는 dir을 전달.
                                                    //ExternalInterface.call("sendFlash",dir);
                                                     try{


                                                     //추가된 부분   
                                                     
lc.send("flashContent","moveHandler",dir);

                                                     }catch(e:Error){}                                                 
                                                     trace(dir);
                                          }
                                }
                     ]]>
           </mx:Script>
           <mx:Button x="117" y="8" label="위로" width="70" fontFamily="돋움" fontSize="12" click="callJs('up')"/>
           <mx:Button x="10" y="37" label="왼쪽" width="70" fontFamily="돋움" fontSize="12" click="callJs('left')"/>
           <mx:Button x="224" y="37" label="오른쪽" width="70" fontFamily="돋움" fontSize="12" click="callJs('right')"/>
           <mx:Button x="117" y="69" label="아래로" width="70" fontFamily="돋움" fontSize="12" click="callJs('down')"/>
</mx:Application>
 

 

2.2    위의 소스에서 바뀐 부분만 보게 되면 lc라는 전역 변수를 선언해서LocalConnection으로 선언해 주고 버튼에 이벤트가 발생할 때마다LocalConnection send 메쏘드를 사용하는 걸 볼 수 있다여기서 send 메쏘드는 지정된 채널의 메쏘드를 호출하는 역할을 한다. flashContent라는 채널을 사용하는 SWF 객체의 moveHandler이름을 가진 메쏘드를 호출하는 것이다. statusEvent를 사용한 것은 제대로 호출이 되었는지 알 수 있도록 trace를 활용한 것이다이번 예제에서는 HTML 부분은 SWF간의 통신에서 필요 없다따라서 바로Flash로 넘어 가서 진행하도록 하겠다. ExternalInterface에 서 예제로 사용한Flash도 약간의 코드만 추가해 주면 Flex와 바로 통신하는 설정이 완료된다일단LocalConnection 예제는 단단한 설계를 하는 것보다 구현에 중점을 두었으니 다소 허술하게 보일지라도 서로간의 데이터를 주고 받고 하는 부분만 참고해 주었으면 한다.

Document Class의 내용 [flashContentsDoc.as]

Package{
           import flash.external.ExternalInterface;
           import flash.display.MovieClip;
           import flash.system.Security;
           //
추가된 부분

           import flash.net.LocalConnection;
          
           public class flashContentsDoc extends MovieClip{
                    
                    
                     private var lc:LocalConnection;
                     public function flashContentsDoc():void{
                                Security.allowDomain("*");
                                
                                //
추가된 부분

                                lc = new LocalConnection();
                                lc.client = this;
                                lc.connect("flashContent");
                               
                               
                                //자바스크립트에서 호출될 메쏘드를 등록
                                //ExternalInterface.addCallback("move",moveHandler);
                               //ExternalInterface.addCallback("testFunc",moveHandler);
                     }
                    
                     //자바스크립트에서 move라는 메쏘드를 호출하면 실행하게 될 메쏘드정의
                     public function moveHandler(dir:String):void{
                                switch(dir){
                                          case "up" :
                                                     ball.y--;
                                          break;
                                          case "down" :
                                                     ball.y++;
                                          break;
                                          case "left":
                                                     ball.x--;
                                          break;
                                          default :
                                                     ball.x++;
                                          break;
                                }
                     }
 
           }
}

 

Flash Document Class에서 바뀐 부분을 살펴보자.

여기서도 마찬가지로 LocalConnection을 전역변수로 등록해 놓았다여기서 소스를 보면 Flex의 소스와 뭔가 좀 다른 것을 알 수 있을 것이다. LocalConnection을 사용 할 때 분명 다른 부분이 있다.

어느 곳인지 찾았는가바뀐 부분이 너무 많아 눈치 채지 못한 분도 있을 것이다그것은Flash의 소스에서는 LocalConnection 객체의 connect client를 사용한다는 점이다.우선 client send 받을 대상의 주체는 누구인지를 기술하는 것이다moveHandler를 가지고 있는 객체가 누구이냐는 것이다. client를 기술하는LocalConnection 객체가 무전기에서 듣는 역할을 하는 경청자 역할을 하게 된다여기서 client class 자기 자신이므로 client this로 선언되었다. connect는 자신의 채널을 여는 것이다무전기에서 채널을 맞추듯 connect는 무전기에서 사용할 채널을 등록하는 것으로 보면 된다따라서 LocalConnection으로 서로 통신을 할 때는 주고 받을 때 등록된 채널을 명시하는 것을 볼 수 있다.

이제 모든 소스의 수정이 완료되었다과연 자바스크립트의 도움이 없이도 파라미터 전달이 가능한지 알아보자아래의 그림처럼 Flex에서 작성된 mxml을 실행하고 Flash에서 작성된 컨텐츠도 플레이어로 바로 띄워서 로컬상에서 서로 통신을 하는지 확인해 보자아래의 그림을 참고해서 보면 된다.

 

 

예제대로 실행해 보면 HTML안에 있는 Flex로 만든 컨텐츠와 Flash에서 플레이어로 직접 띄운 SWF간에 통신이 일어 나면서 Flash 객체가 컨트롤 되는 것을 볼 수 있다.

여기까지 확인이 되었다면 Flash 컨텐츠를 HTML 안으로 embed하고 기존의 게이트 역할을 해주던 자바스크립트도 삭제한 채 HTML안에서도 이상 없이 통신이 일어나는지 확인만 해보면 끝이다.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> ExternalInterface Example </TITLE>
 </HEAD>
 <script type="text/javascript" src="swfobject.js"></script>
 <BODY>
   <div id="flashArea">[Flash가 들어올 자리]</div>
    <div id="FlexArea">[Flex가 들어올 자리]</div>
 
 
  <script language="javascript">
             var FlexSo = new SWFObject("flashcontroller_lc.swf", "flashcontroller", "300", "100", "9","#fff");   
             FlexSo.addParam("allowScriptAccess", "always");
             FlexSo.write("FlexArea");
 
             var FlashSo = new SWFObject("flashContents_lc.swf", "flashContent", "400", "400", "9","#000");
             FlashSo.addParam("allowScriptAccess", "always");
                  FlashSo.write("flashArea");
 
                 
</script>
 
 </BODY>
</HTML>


위의 자바스크립트를 제거한 HTML 예제를 실행해 보면 파라미터를 주고 받는 방법으로 소개한 첫 번째와 같은 기능을 하는 것을 볼 수 있다하지만 이 HTML 소스에는 SWF의 게이트 역할을 할 자바스크립트 메쏘드는 보이지 않는다는 것이 핵심이다.

이제 자바스크립트의 도움이 없이도 Flex 컨텐츠의 파라미터를 Flash 컨텐츠로 전송한 것이다이렇듯 LocalConnection 객체는 클라이언트로 설정된 SWF에서 공개된 메쏘드를 사용할 수 있도록 해주는 역할을 한다하지만 LocalConnection도 단점이 존재한다.위의 HTML에서 또 다시 컨트롤키 + N을 눌러서 새로운 창을 띄워보면 새로 열린 창에서는 작동이 안 되는 걸 확인할 수 있는데 디버깅을 해보면 아래와 같은 에러가 난다.

 



위의 에러에서 보면 이미 연결되어 있다고 나온다그렇다새 창의 Flash로 만들어진 경청자 역할을 하는 SWF가 채널을 등록하려고 하는 순간 이미 그 채널은 열려 있는 상태가 되는 것이다이것이 무전기와는 조금 다른 개념인데 무전기는 다수의 사람이 경청이 가능하지만 LocalConnection은 한 채널당 듣는 객체는 하나밖에 존재하지 못한다는 단점이 있다이게 단점이 될 수도 있고 장점이 될 수도 있지만 현재의 상황에서는 단점에 해당 될 듯하다하지만 피해갈 수 있는 방법들도 존재하니 너무 낙담할 필요

[출처] Flex와 Flash간의 파라미터 주고 받기|작성자 코트악동

 

 

=================================

=================================

=================================

 

 

 

관련자료 링크

http://ufx.kr/blog/281

 

 

=================================

=================================

=================================

 

 

 

반응형