1탄 소개[http://blog.naver.com/hiddenid/40045809455] 에 이어 2탄에서는 사용법과 활용예제를 보겠습니다.

 

단 Flex예제는 이미 많은 자료들과 문서들이 있으므로 [http://www.adobe.com/kr/devnet/flex/articles/framework_beta_fabridge_print.html]

 

Flex부분에 대한 부분은 생략하도록 하고 FlashCS 혹은 Actionscript Project(AS3)에서 사용하는 법을 알아보겠습니다.

이하에서...... 존칭에 대한 부분은 생략하도록 하겠습니다.

 

일단 테스트 페이지 열고 시작하자 []

이것저것 눌러보면서 뭐하는넘인지 대강 파악하자..

 

개인적으로 이거 만드는데 공부하고.테스트하고, 활용도 체크하는 시간만.....2틀 걸렸다. 옆에 개발 PM 본인이 노는줄 알고

방방 뛰고 눈치준다........ 제길슨 씨를 찾아 본다.. 

(내가 중급 개발자니까....... 지금 보고 있는 문서자료 비용만 돈 50만원 넘는다는거........ .. 이 문서 보고 도움이 되신

분은 저를 만난다면 술 한잔 사주길 바란다~~ 제발.......ㅡㅡa)

 

이 예제로 기존 플래시 개발자들이 바라던 몇가지 쉽게 해결봤다.. 바로 텍스트필드에 입력한 값들을 바로 처리해서 플래시

내부로 전달함과 동시에 비지니스 로직 처리가 가능해 졌다. 일단 html의 텍스트 필드를 사용하므로 flash에서 폰트 임베디드나

속도 문제 걱정없다..  또한 javascript에서 flash내부의 속성값들을 조절할 수 있다. 이 규칙에 대해서는 아래 설명한다.

 

 

1. 첨부파일중 ./src/bridge/FABridge.as 를 소스폴더.... 즉 class경로에 복사해 넣는다.

2. 이제 FABbridge를 실제로 사용할 예제 클래스를  작정한다.[첨부파일의 ./src/Fab_Test_001.as]

 

 

간단하게 as3으로 다음과 같이 예제코드를 작정한다.

http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>
http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote_body_01.png); PADDING-BOTTOM: 10px; COLOR: #444444; LINE-HEIGHT: 1.2; PADDING-TOP: 11px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote_body_01.png',sizingMethod='scale'); _background: none"> package {  import bridge.FABridge;  import flash.display.Sprite;  import flash.external.ExternalInterface;  import flash.text.TextField;  import flash.text.TextFieldType;  import mx.core.FlexSprite;  [SWF(width="400", height="300", frameRate="30" )]  public class Fab_Test_001 extends Sprite  {   [Bindable]   public var _bridgelnst:FABridge; //1   public var _test_textfield:TextField;   public var _send_message_textfield:TextField;   public var _body:FlexSprite;          public function Fab_Test_001()   {    _set_FABridge(); //2    init();   }      private function _set_FABridge():FABridge //3   {    var temp:FABridge = new FABridge();    _bridgelnst = temp;    temp.initialized(this, "bridgelnst");    return temp;   }      public function init():void{    _test_textfield = new TextField();    _test_textfield.text = "여기다 글자 입력하면 addListener로 등록한 이벤트 실행";    _test_textfield.width = _test_textfield.textWidth*1.1;    _test_textfield.height= _test_textfield.textHeight + 4;    _test_textfield.wordWrap = false;        _test_textfield.type = TextFieldType.INPUT;    _test_textfield.border = true;        _send_message_textfield = new TextField();    _send_message_textfield.text = "여기는 Html에서 전달받은 텍스트 찍힌다";    _send_message_textfield.width = _test_textfield.textWidth*1.1;    _send_message_textfield.height = 50;    _send_message_textfield.wordWrap = true;       _send_message_textfield.type = TextFieldType.DYNAMIC;        _test_textfield.x = (400 - _test_textfield.textWidth)/2;    _test_textfield.y = (300 - _test_textfield.textHeight)/2;    _send_message_textfield.x = (400 - _test_textfield.textWidth)/2;    _send_message_textfield.y = (200 - _test_textfield.textHeight)/2;        _body = new FlexSprite();    _body.addChild(_send_message_textfield);    _body.addChild(_test_textfield);    addChild(_body);       }         public function write_ok(p_para:String, p_function_success:String, p_function_fail:String):void{    ExternalInterface.call("alert", "Flash internal method Run Success:::::" +  p_para);   }  } }	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1>
http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>

 빨간 라인들이 중요한 라인들인데

//1 - FAB를 임포트해서 사용할수 있도록 준비와 인 FABridge의 인스턴스를 선언한다

//2 - 생성자 함수에서 FABridge초기화와 관련된 메소드를 실행한다.

//3 - FABridge의 인스턴스를 생성하고 초기화 한다.

 

여기서 간단하게 내부 인스턴스를 간단하게 설명하면 _test_textfield는 인풋텍스트 박스로 여기다 글을 입력하면

Html단에 텍스트 필드에 표시되게 하는 이벤트발신자역활을 하며,   _send_message는 Html단에서 전달되는 메세지가 실시간으로

표기되는 역활을 한다. 특이할만한 사항은 _test_textfield에 대한 이벤트발신을 처리할 addEventListener을 등록하지 않았다는것을

유심히 보기 바란다.

 

write_ok메소드는 단순히 Javascript->flash로 전달......그러니까 기존의 ExternalInterface.addCallback로 작동하는 로직을

확인하는데 쓰이는 임시 메소드 이다..

 

ExternalInterface.addCallback의 기능을 하는 클래스 본체로써는 화면배치 코드를 제외하고 코드가 상당히(?) 깔끔하다..

 

 

자. 이렇게 작성되었으면 FlashCS건 Flex건 FlashDevelop이건 컴파일 한다.. 이렇게 하면 SWF의 준비는 끝났다.

자 이제 연동할 Html페이지를 준비할 단계다.

 

다음은 예제제코드 이며 이것은 여기서 확인 가능하다. [http://hiddenid.isfreeweb.com/FAB_test/]

일단 위의 페이지를 새창에서 열어 놓자.. 그리고 코드에 중요한 부분은 // 번호  주석처리하여 밑에 설명한다.

http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>
http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote_body_01.png); PADDING-BOTTOM: 10px; COLOR: #444444; LINE-HEIGHT: 1.2; PADDING-TOP: 11px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote_body_01.png',sizingMethod='scale'); _background: none"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEST</title> </script>     <style type="text/css">       #square {         background-color: #FF0000;         border:1px solid #FFAA00;         position:absolute;         width:30;         height:30;         top:100px;         left:100px;       }       #border {         border:1px solid #555555;         position:absolute;         width:332;         height:232;         top:99px;         left:420px;       }     </style> </head> <body> <script src="./bridge/FABridge.js"  language="javascript"></script> //1 <script src="./bridge/JSTweener.js"  language="javascript"></script> <script   language="javascript">  var flexApp;  var mytimer;  var postion = {};  var Callback = function(event){   var local_subjet2 = document.getElementsByName("listener_subject")[0];   var swfObj_source = event.getTarget();   local_subjet2.value = swfObj_source.getText();  }    var initCallback = function() {   flexApp = FABridge.testfabridge.root();   flexApp.get_test_textfield().addEventListener( "change", Callback );//2   return;  }    var check_value = function(){   mytimer=window.setInterval('sendmsg()',50);  }    var clear_msg = function(){   window.clearInterval(mytimer);  }    var sendmsg = function(){   var local_send_message = document.getElementsByName("temp_subject")[0].value;   flexApp.get_send_message_textfield().setText(local_send_message);  }    var write_send = function(){   var local_result;   alert("200712260001::::" + flexApp.get_test_textfield().getWidth());   if(local_subjet.length  > 0){    local_result = flexApp.write_ok(local_subjet, "write_save_success", "write_save_fail");   }else{    alert("Flash로 넘길 값이 없다");   }  }       var getTime = function() {         return document.getElementById('time').value;       };       var getTranstion = function() {         return document.getElementById('transition').value;       };            var move1 = function() {       square.style.left = 421;                 JSTweener.addTween(square.style, { //3             time: getTime(),             transition: getTranstion(),             //onComplete: move1,             left: 720, onUpdate:reportPosition         });              }  var reportPosition = function(){   var local_str = square.style.left   var regexp=/px/g; // 정규식 패턴 대신 리터럴로   local_str = local_str.replace(regexp,"");   flexApp.get_send_message_textfield().setText(local_str);   flexApp.get_send_message_textfield().setX(local_str - 421);  }      FABridge.addInitializationCallback( "testfabridge", initCallback ); //4 /*********************************************************** 테스트용 Call Method 시작 **********************************************************/  var write_save_success = function(p_str){   alert("Success:::" + p_str);  }     var write_save_fail = function(){   alert("fail");  }   /*********************************************************** 테스트용 Call Method **********************************************************/  </script>  <form name="form1">   Html -> Flash <input type = "text" name="temp_subject"  width="300" onfocus="javascript:check_value();" onblur="javascript:clear_msg();"><br>   Flash -> Html <input type = "text" name="listener_subject" readonly="true" width="300"><br>     <div style="position:absolute; left:421; top:10"> <label for="time">Time:</label> <input id="time" size="4" type="text" value="1"></input>     <a href="http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html">transition</a>:     <select id="transition">       <option value="easeOutElastic">easeOutElastic</options>       <option value="easeOutInElastic">easeOutInElastic</options>          <option value="easeInElastic">easeInElastic</options>       <option value="easeInOutElastic">easeInOutElastic</options>       <option value="linear">linear</options>       <option value="easeInQuad">easeInQuad</options>       <option value="easeOutQuad">easeOutQuad</options>       <option value="easeInOutQuad">easeInOutQuad</options>       <option value="easeInCubic">easeInCubic</options>       <option value="easeOutCubic">easeOutCubic</options>       <option value="easeInOutCubic">easeInOutCubic</options>       <option value="easeOutInCubic">easeOutInCubic</options>       <option value="easeInQuart">easeInQuart</options>       <option value="easeOutQuart">easeOutQuart</options>       <option value="easeInOutQuart">easeInOutQuart</options>       <option value="easeOutInQuart">easeOutInQuart</options>       <option value="easeInQuint">easeInQuint</options>       <option value="easeOutQuint">easeOutQuint</options>       <option value="easeInOutQuint">easeInOutQuint</options>       <option value="easeOutInQuint">easeOutInQuint</options>       <option value="easeInSine">easeInSine</options>       <option value="easeOutSine">easeOutSine</options>       <option value="easeInOutSine">easeInOutSine</options>       <option value="easeOutInSine">easeOutInSine</options>       <option value="easeInExpo">easeInExpo</options>       <option value="easeOutExpo">easeOutExpo</options>       <option value="easeInOutExpo">easeInOutExpo</options>       <option value="easeOutInExpo">easeOutInExpo</options>       <option value="easeInCirc">easeInCirc</options>       <option value="easeOutCirc">easeOutCirc</options>       <option value="easeInOutCirc">easeInOutCirc</options>       <option value="easeOutInCirc">easeOutInCirc</options>       <option value="easeInBack">easeInBack</options>       <option value="easeOutBack">easeOutBack</options>       <option value="easeInOutBack">easeInOutBack</options>       <option value="easeOutInBack">easeOutInBack</options>       <option value="easeInBounce">easeInBounce</options>       <option value="easeOutBounce">easeOutBounce</options>       <option value="easeInOutBounce">easeInOutBounce</options>       <option value="easeOutInBounce">easeOutInBounce</options>     </select>     </div>     <div id="square"> </div>     <div id="border"> </div>     <script language="JavaScript">       var square = document.getElementById('square');       square.style.top = 100;       square.style.left= 421;     </script>       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"    id="Test_fabridge" width="400" height="300"    codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">    <param name="movie" value="Fab_Test_001.swf?bridgeName=testfabridge" /> //5    <param name="quality" value="high" />    <param name="bgcolor" value="#869ca7" />    <param name="allowScriptAccess" value="always" />    <embed src="Fab_Test_001.swf?bridgeName=testfabridge" quality="high" bgcolor="#869ca7"     width="400" height="300" name="Test_fabridge" align="middle"     play="true"     loop="false"     quality="high"     allowScriptAccess="always"     type="application/x-shockwave-flash"     pluginspage="http://www.adobe.com/go/getflashplayer">    </embed>  </object>  <br><input type="button" value = "Flash로 값 한번 넘겨보세" onclick="javascript:write_send();">  <input type="button" value = "자바스크립트로 Flash Tween시켜보세" onclick="move1();">  </form>    </body> </html>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1>
http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" height=1>	http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png); _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blogimgs.naver.com/nblog/mylog/post/bg_quote03.png',sizingMethod='scale'); _background: none" width=1 height=1>

길다...................만 별거 아니다.. 여러가지 잡다한거 테스트 하느라고 좀 길어 졌을 뿐이다.

//1 - FABridge.js 자바스크립에서 FABridge를 사용할 수 있도록 하는 메인 메소드 그룹이다.

 

//2 - 2번 라인 바로 윗줄은 바로 html단에서 접근가능한 레퍼러이며 이는  //5번의 bridgeName=testfabridge

의 네임으로 구한다. 예를 들자면 FABridge.["//5에서 선언한 bridgeName"].root();  로 접근된다.

또한 //2라인은 flash 내부의 _test_testfiled에 자바스크립트에서 addEventListener을 선언해서 flash의 이벤트를

자바스크립트에서 수신할 수 있도록 한 것이다. 여기서는 var Callback = function(event) 이 이벤트를 받아서 처리하고

있는 모습을 보여준다. (플래시 내부에서와 같디. event의 간단한 속성을 대부분 가지고 있다.)

//3 - 자바스크립트에서 트윈함수를 실행시켜 플래시내부의 객체(여기서는 플래시 내부의 _send_message_testfield)를

자바스크립트에서 트윈하는 예제를 보여준다.

 

//4 - Html에서 FABridge가 성공적으로 초기화 된후 실행할 메소드를 지정해주고 있다.

 

//5 - FABridge가 인식할 아이디를 기입한다. //2번을 참고하길 바라며, Html페이지에서 여러가지 Flash를 제어하려한다면

모두 bridgeName가 달라야 한다.

 

 

 

______________________________________________________________________________________________

 

이제 명명규칙을 보자.... 플래시 내부의 값을 가져올때는 get<"프로퍼티명">(), 값을 갱신할때는 set<"프로퍼티명">()

(예: 위에서 get_send_message_textfield().setText(local_send_message  );

이렇게 가져온다.. 자세한 명명규칙은 첨부파일내 /doc/fabridge_cheatsheets.pdf 를 참고하길 바란다........

 

그런데 참고로 한번에 잘 안된다.. 왜냐? 중요한것 하나를 기술 안했기 때문인데.. 이것은 혼잣 습득하길 바란다..

중요한 규칙이기 때문에 잊어먹고 나서 난중에 삽질을 방지하자는 차원도 있거니와,............   혼자서 뭔가 깨닫는 재미를

모두 빼앗는 것 같아서랄까? ㅡㅡ   암튼  ........ 아주 중~~요한거 하나 말안했다는거.......   이건 댓글로도 달지 말자..

힌트를 주자면......  

 

 소문안나면 대문이 안열리다..   

 

이게 힌트다...