테스트 사이트 - 개발 중인 베타 버전입니다
SIR

립트와 Flash(Flex)벽을 허물다 - [2탄]사용법 & 예제

쌍지팡이
프로필 보기이 회원 글보기
 · 17년 전 · 2931 · 1

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)에서 사용하는 법을 알아보겠습니다.

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

 

일단 테스트 페이지 열고 시작하자 [http://hiddenid.isfreeweb.com/FAB_test/]

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

 

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

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

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

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

 

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

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

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

 

 

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

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

 

 

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

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);
  }
 }
}

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

//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/]

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

<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>

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

//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 를 참고하길 바란다........

 

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

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

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

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

 

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

 

이게 힌트다...

[이 게시물은 관리자님에 의해 2011-10-31 16:50:06 Flash에서 이동 됨]

첨부파일

fab_test_001-hiddenid.zip (85.1 KB, 29회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

너굴군
프로필 보기이 회원 글보기
 17년 전
저도 본격적으로 자극받아 플랙스 공부를 해야 겠네요 ㅋㅋ

게시글 목록

번호 제목
12995
기타 [안전한 웹 코드 작성하기] #1. JavaScript Validation (자바스크립트 인증) 1
12994
기타 .htaccess를 이용한 특정 디렉토리 접근 관리하기
12993
JavaScript [SQL]Delete문
29390
HTML [SQL]Update문 1
29389
HTML [SQL]Insert 문
12992
JavaScript [SQL]등록/수정/삭제 전에 알아둘 사항
12991
기타 [SQL]Table 변경하기
29388
HTML [SQL]Table 만들기
29387
HTML [SQL]SQL의 기초 (3)
29386
HTML [SQL]SQL의 기초 (2)
29384
HTML [SQL]SQL의 기초 (I) 1
29383
HTML [SQL]DATABASE의 구조
29382
HTML [SQL]Database 시스템 이란?
25079
마케팅 마케팅 전략 ppt자료 3
12989
MySQL php 에서 자바스크립트로 배열 보내기 1
12988
기타 이벤트 객체
25070
견적서 간단한 홈페이지제작 견적서및 관리 견적서 8
12987
기타 간단한 날짜입력용 자바스크립트 달력입니다.
29381
HTML prototype.js 를 이용한 트리형식의 카테고리메뉴
12986
JavaScript 에디터로 작성한 게시물에서 특정태그없애기
12985
PHP 롤링배너객체 Rolling
12984
JavaScript 간단하게 만들어본 메일전송 클래스
12979
JavaScript 24시간 이내에 수정된 php 파일만 찾기 4
12978
Flash 무툴즈를 이용한 플래시 비슷한 탑메뉴~~~
12977
기타 간단한 버튼 경고창 이동 표시.
12973
PHP 썸네일 생성시 Sharpen 적용하기 - PHP 5.1 이상 3
12972
기타 심플한 레벨 아이콘^^ [매가패스님 것 개조(?)]
12971
기타 간단한 클릭 팝업 뛰우기.
29380
HTML 클릭해서 이미지 팝업 뛰우기.
12969
기타 필드 쪼갬. 한필드에 여러개 사용 1
12968
Flash 플래시에 가려진 레이어 올려봅시다.
12967
기타 이미지 버튼 클릭할때 생기는 테두리 ..
29379
HTML 부끄럽네요. 로그인아웃 표시
12965
기타 PHP 전역변수 1
12963
기타 PHP 배열변수 1
29378
HTML PHP 변수사용법
12962
기타 PHP 기본구조
12960
Linux 리눅스 자바설치 1
29377
HTML TAR명령. TAR압축묶기 압축풀기
12958
기타 리눅스 사용자 계정 생성 1
12955
MySQL ncftp 를 이용한 백업 스크립트 2
12954
기타 ftp 업로드 자동
12951
JavaScript 리눅스 시스템 시간 확인 및 시간 맞추기 2
12950
Linux 리눅스 한글 설정
12949
MySQL 리눅스 한글설정관련_locale
12946
MySQL 웹호스팅 사용자를 위한 계정관리 스크립트 2
12945
MySQL 사용자 계정 + mysql 계정 추가 스크립트
12941
MySQL 리눅스 mysql auto backup방법 3
12939
기타 리눅스 시간맞추기 1
12938
기타 리눅스 기본명령어들
12936
Flash javascript mini xhtml parser 1
12931
기타 ASP강좌[1회차]강좌순서 4
29376
HTML 윈도우2003서버 관리
12928
기타 액티브 디렉토리 서비스 2
29375
HTML 전에 사이트제작할때 사용했던 소스입니다.
12927
JavaScript 간단한 텍스트 스크롤
12926
기타 브라우저 호환되는 여러가지 좌표값 구하기
12923
MySQL mysql 5.0.x 공백문자인식 2
12921
기타 문자열에 들어간 전화번호, 메일주소 가리기 1
12918
PHP 다음 rolling 스크립트 입니다. 많이들 쓰세요.. 2
12917
기타 자바스크립트 float 계산 오류 수정 방법
12914
기타 자기창 닫고 부모창 새로고침하기 2
12909
정규표현식 정규표현식 튜토리얼 4
12906
기타 PHP에서 javascript의 alert 상자 출력시 줄바꿈 기호 문제 2
12903
기타 [펌] 불여우(모질라 파이어폭스)에서 마우스 휠로 스크롤 팍팍하기 2
12902
JavaScript 확장자 bak 파일 지우기
298
ncftp와 proftpd 간단한 사용법문의합니다
12901
JavaScript 프로젝트의 구축 방법에 관한 내용입니다.
12891
Flash <질문>쇼핑몰 메인에 사용되는 슬라이딩 이미지 9
12888
Flash [질문] 플래시 메뉴를 통한 링크... 2
12886
기타 사진을 그림처럼 보이게 하는 aniso 필터 효과 아십니까? 1
295
asp 문의 드려요..상세 페이지 아이프레임 컨트롤 2
12885
Flash flv 플레이어 자막연동 보드 완성 하였음
12883
JavaScript flv 동영상 자막 싱크만드는 중입니다. txt 연동 1
12881
Flash 풀 플래시 소스 1
292
힘들다 php 넘 어려워 도와주세요 2
12880
기타 윈도우 이벤트 함수[IE, 파이어폭스]
290
에러 메세지- 도와주세요 1
287
XMLHttpRequest에 관해 질문드립니다. 2
12879
정규표현식 DHTML Image Thumbnail Chooser
285
if문 질문입니다. 1
12875
기타 랭킹(순위)아이콘 입니다. (어디다 올려야 할지 몰라서) 3
12872
MySQL [마이그레이션] 고수님들의 도움이 절대적으로 필요합니다.!!! 2
280
디비연동 셀렉트 박스 선택시 다른 input 박스에 관련값 뿌려주기.. 4
12857
기타 예전 작업할때 만들었던 펜일러스트 아이콘들.. 14
276
날자비교 최근게시물로 뽑기.. 3
275
[요청] 단순한 이미지 갤러리 PHP 소스 추천 좀 해주세요.
25063
계약서 홈페이지 관리계약서 6
271
썸네일 생성 함수인데요.. 페이지 불러올때마다 새로 만들어지는것 같은데;; 3
29369
HTML 제가 그린 일러스트입니다. 5
268
코드의 설명이 이렇게 되는건지 맞는지요? 2
267
디비에서 불러온 값을 플래시 막대그래프로 표현하기.
12852
JavaScript 원격이미지 조건에 따른 썸네일 생성 4
12851
JavaScript 윈도우 APM 에서 리눅스의 심볼릭 링크 사용하기
265
호스팅서버를 받았는데..자꾸 에러가 나네요. 1
263
팝업창 문의. 1
12844
Flash 도와주세요~ 6
260
도와주세요.......제발....ㅠㅜ 2
12841
JavaScript 사진 뽀샤시 ~~ 2
12834
기타 이쁜 패턴 박스 만들기 6
이전 다음
전체 목록