Tag Archive for 'externalinterface'

26AprExternalInterface - ActionScript/JavaScriptのオブジェクトの受け渡し

ExternalInterfaceでActionScriptとJavaScript間で相互にObjectを渡す。

Browser

  • parameter

    value

ソースコードは以下の通り。

  1. <div id="interface">
  2.     <p>Browser</p>
  3.     <input type="button" name="" value="sendObject()" onclick="sendObject();" id="send" />
  4.     <input type="button" name="" value="clearTextField()" onclick="clearTextField();" id="send" />
  5.     <p id="debugText"></p>
  6.     <ul>
  7.         <li><p class="param">parameter</p><p class="value">value</p><div class="clear"></div></li>
  8.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  9.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  10.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  11.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  12.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  13.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  14.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  15.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  16.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  17.         <li><input type="text" name="param" value="" class="param" /><input type="text" name="value" value="" class="value" /></li>
  18.     </ul>
  19. </div>
  1. // send Object
  2. function sendObject() {
  3.     debugText("send Object to swf(ActionScript)");
  4.     getEmbedElementByName('externalSWF').loadObject(getObject());
  5. }
  6.  
  7. function getObject(name) {
  8.     var obj = new Object();
  9.     var arrParam = document.getElementsByName('param');
  10.     var arrValue = document.getElementsByName('value');
  11.     var param, value;
  12.    
  13.     for (var i = 0; i <arrParam.length; i++) {
  14.         param = arrParam[i].value;
  15.         value = arrValue[i].value;
  16.        
  17.         obj[param] = value;
  18.     }
  19.    
  20.     return obj;
  21. }
  22.  
  23. // load Object
  24. function loadObject(obj) {
  25.     clearTextField();
  26.    
  27.     debugText("load Object from swf(ActionScript)");
  28.     var arrParam = document.getElementsByName('param');
  29.     var arrValue = document.getElementsByName('value');
  30.     var i = 0;
  31.    
  32.     for (var param in obj) {
  33.         arrParam[i].value = param;
  34.         arrValue[i].value = obj[param];
  35.         i++;
  36.     }
  37. }
  38.  
  39. // clear Input Text
  40. function clearTextField() {
  41.     debugText("clear text field");
  42.     var arrParam = document.getElementsByName('param');
  43.     var arrValue = document.getElementsByName('value');
  44.    
  45.     for (var i = 0; i <arrParam.length; i++) {
  46.         arrParam[i].value = '';
  47.         arrValue[i].value = '';
  48.     }
  49. }
  50.  
  51. // debugText
  52. function debugText(str) {
  53.     var element = document.getElementById('debugText');
  54.     removeChildren(element);
  55.     element.appendChild(document.createTextNode(str));
  56. }
  57.  
  58. // common
  59. function getEmbedElementByName(name) {
  60.     return (/*@cc_on!@*/false)? window[name]: document[name];
  61. }
  62.  
  63. function removeChildren(element) {
  64.     while (element.hasChildNodes()) element.removeChild(element.firstChild);
  65. }
  1. import flash.external.ExternalInterface;
  2.  
  3.  
  4. init();
  5.  
  6.  
  7. function init() {
  8.     setupEI();
  9.     setupButton();
  10.     setupTabIndex();
  11. }
  12.  
  13. // ExternalInterface
  14. function setupEI() {
  15.     var isAvailable = ExternalInterface.available;
  16.     if (isAvailable) {
  17.         debug("ExternalInterface is available");
  18.         addCallbackEI("loadObject", null, loadObject);
  19.     } else {
  20.         debug("ExternalInterface is not available");
  21.     }
  22. }
  23.  
  24. function addCallbackEI(strMethodName_js, objInstance_as, fncMethod_as) {
  25.     ExternalInterface.addCallback(strMethodName_js, objInstance_as, fncMethod_as);
  26. }
  27.  
  28. function callJS(strMethodName_js, objParameter_as) {
  29.     ExternalInterface.call(strMethodName_js, objParameter_as);
  30. }
  31.  
  32. // Button
  33. function setupButton() {
  34.     mcSendObject.onRelease = function() {
  35.         sendObject();
  36.     };
  37.     mcSendObject.onReleaseOutside = mcSendObject.onRollOut;
  38.    
  39.     mcClearTextField.onRelease = function() {
  40.         clearTextField();
  41.     };
  42.     mcClearTextField.onReleaseOutside = mcClearTextField.onRollOut;
  43. }
  44.  
  45. // Tab Index
  46. function setupTabIndex() {
  47.     mcSendObject.tabIndex = 1;
  48.     mcClearTextField.tabIndex = 2;
  49.     txtDebug.tabEnabled = false;
  50.    
  51.     var txtParam, txtValue;
  52.     for (var i = 0; i <10; i++) {
  53.         txtParam = this["txtParam_" + i];
  54.         txtValue = this["txtValue_" + i];
  55.        
  56.         txtParam.tabIndex = 3 + i * 2;
  57.         txtValue.tabIndex = 4 + i * 2;
  58.     }
  59. }
  60.  
  61. // send Ojbect
  62. function sendObject() {
  63.     debug("send Object to browser(JavaScript)");
  64.     callJS("loadObject", getObject());
  65. }
  66.  
  67. function getObject() {
  68.     var obj = new Object();
  69.     var param, value;
  70.    
  71.     for (var i:Number = 0; i <10; i++) {
  72.         param = this["txtParam_" + i].text;
  73.         value = this["txtValue_" + i].text;
  74.        
  75.         obj[param] = value;
  76.     }
  77.    
  78.     return obj;
  79. }
  80.  
  81. // load Object
  82. function loadObject(obj) {
  83.     clearTextField();
  84.    
  85.     debug("load Object from browser(JavaScript)");
  86.     setObject(obj);
  87. }
  88.  
  89. function setObject(obj) {
  90.     var i = 0;
  91.     var txtParam, txtValue;
  92.    
  93.     for (var param in obj) {
  94.         txtParam = this["txtParam_" + i];
  95.         txtValue = this["txtValue_" + i];
  96.        
  97.         txtParam.text = param;
  98.         txtValue.text = obj[param];
  99.         i++;
  100.     }
  101. }
  102.  
  103. // clear TextField
  104. function clearTextField() {
  105.     debug("clear text field");
  106.    
  107.     var txtParam, txtValue;
  108.     for (var i = 0; i <10; i++) {
  109.         txtParam = this["txtParam_" + i];
  110.         txtValue = this["txtValue_" + i];
  111.        
  112.         txtParam.text = "";
  113.         txtValue.text = "";
  114.     }
  115. }
  116.  
  117. // debug
  118. function debug(str) {
  119.     txtDebug.text = str;
  120. }
JavaScript
//sendObject : ObjectをSWFに渡す。
//loadObject : ObjectがSWFから渡される。
ActionScript
//ExternalInterface : Browserから呼び出し可能なActionScriptのメソッドを登録する。
//sendObject : ObjectをBrowserに渡す。
//loadObject : ObjectがBrowserから渡される。

これ以外のメソッドはActionScript/JavaScript共にオブジェクト生成用のテキストフィールドのセットアップに使ってるだけで、ExternalInterfaceには関係ない。

in Web. 0 Comments , ,
Return to page top