AS3和js相互通信要点分析

目标：在html页面里可以使用事件来影响到swf文件的内容，swf文件也可以影响html里js代码的内容

一。新建flash文件,用Flash CC试用版新建一个TextArea.fla的源文件,不添加任何组件，直接关联一个主类TextArea01,Flash会自动生成一个TextArea01.as的AS3源码文件。AS3代码如下:

 package  {

     import flash.display.MovieClip;
     import flash.display.StageScaleMode;
     import flash.text.TextField;
     import flash.events.MouseEvent;
     import flash.desktop.*;
     import flash.display.*;
     import flash.external.ExternalInterface;
     import fl.controls.Button;

     public class TextArea01 extends MovieClip {

         private var param:Object;
         private var tf01:TextField;
         private var btnCopyText:Button;

         public function TextArea01() {
             //this.stage.scaleMode = StageScaleMode.NO_SCALE;
             //外部html参数
             param = LoaderInfo(this.root.loaderInfo).parameters;
             //初始化按钮
             btnCopyText = new Button();
             btnCopyText.label = "复制文字";
             btnCopyText.width = 100;
             btnCopyText.height = 22;
             btnCopyText.x= 0;
             btnCopyText.y = 0;
             this.addChild(btnCopyText);
             //"复制文字"按钮事件
             this.btnCopyText.addEventListener(MouseEvent.CLICK,btnCopyClickListener);
             //
             tf01 = new TextField();
             tf01.border = true;
             tf01.y = this.btnCopyText.height;
             tf01.width = this.stage.stageWidth-1;
             tf01.height = this.stage.stageHeight-this.btnCopyText.height;
              this.addChild(tf01);

             var txt:String = param["txt"]; //flashvars的txt参数
             if ( txt!=null && txt.length>0 ) {
                 tf01.text = txt;
             }else{
                 tf01.text = "请输入参数txt";
             }

             //添加给javascript使用的函数,注册名为"onAddTextContentByJs", 实际调用内部"Tf01AddContent"函数
             ExternalInterface.addCallback("onAddTextContentByJs",Tf01AddContent);
         }
         /**
          * 修改文字内容
          */
         public function Tf01AddContent(s:String):void{
             this.tf01.text = s;
         }
         /**
          * "复制文字"按钮事件
          */
         public function btnCopyClickListener(e:MouseEvent):void{
             var text:String = this.tf01.text;
             if ( text.length>0){
                 Clipboard.generalClipboard.clear();
                 var res:Boolean = Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, text);
                 if ( res && ExternalInterface.available){
                     //调外部javascript的swfCopySuccess函数，传送第一个参数为"复制成功"
                     ExternalInterface.call("swfCopySuccess","复制成功");
                 }
             }
         }

     }

 }

回到Flash主场景页面，按Ctrl+Enter就可以生成一个swf文件，文件名:TextArea.swf

二.用swfobject.js组件导入TextArea.swf到html页面(swfobject有swfobject_generator自动生成html功能，可自行下载最新版的swfobject.js，里面包有), html+js代码如下

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
     <head>
         <title></title>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <script type="text/javascript" src="../assets/js/common.js"></script>
         <script type="text/javascript" src="../assets/js/swfobject/swfobject.js"></script>
         <script type="text/javascript">
           var swfid = "myFlashContent";
             swfobject.registerObject(swfid, "11.0.0", "expressInstall.swf");
         </script>

     </head>
 <body>
     <div>
     <button onClick="callAs3();">修改文字</button>
     </div>
         <div>
             <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" name="myFlashContent" id="myFlashContent">
                 <param name="movie" value="../assets/swf/TextArea.swf">
                 <param name="wmode" value="transparent">
                 <param name="flashvars" value="txt=flashvar的txt文字">
                 <!--[if !IE]>-->
                 <object type="application/x-shockwave-flash" data="../assets/swf/TextArea.swf" width="800" height="600">
                     <param name="wmode" value="transparent">
                     <param name="flashvars" value="txt=flashvar的txt文字">
                 <!--<![endif]-->
                     <a href="http://www.adobe.com/go/getflashplayer">
                         <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
                     </a>
                 <!--[if !IE]>-->
                 </object>
                 <!--<![endif]-->
             </object>
     </div>

 <script language="javascript">

         var e = document.getElementById(swfid);
         alert(U.browser());
         if ( U.browser()!='ie') {
          e = document.getElementById(swfid).getElementsByTagName('object')[0];
          console.log(e);
         }

         function swfCopySuccess(msg){
           alert(msg);
         }
         function callAs3(){
           e.onAddTextContentByJs("JS添加的文字");
         }
         </script>
 </body>
 </html>

另有common.js的代码如下:

 // JavaScript Document
 var Utils = U = {};
 //计数器
 U.acc = 1;

 U.isempty = function(v){
   if ( v == null ) return true;
   if ( typeof(v) == 'string' ) {
       if ( v.length<=0 ) return true;
   } else if (typeof(v) == 'object'){
       return $.isEmptyObject(v);
   } else if ( typeof(v) == 'undifined' ){
       return true;
   }

   return false;
 };

 //判断浏览器
 U.browser = function(){
     if ( navigator.appName.indexOf('Microsoft')>-1){
         return 'ie';
     }else{
         if ( navigator.userAgent.indexOf('Chrome')>-1 ) {
             return 'chrome';
         }else if(navigator.userAgent.indexOf('Firefox')>-1 ){
             return 'firefox';
         }else {
             return 'unknow';
         }
     }
 };

三，运行结果令人满意,整体兼容ie/firefox/chrome内核,如下图.

 

四。要点分分析。

1.as3调用js的函数,关键点在TextArea01.as文件的67行"ExternalInterface.call("swfCopySuccess","复制成功");",表示调用js函数swfCopySuccess(html文件的46行)且传送参数"复制成功". 这里需要说明的是，call函数可以用很多个参数，具体可以用多少个不知道，但基本上可能使用到js的函数里。比如：如果js里的swfCopySuccess要用到两个参数，"function swfCopySuccess(msg,name1){...", 那么，在AS3里可以使用 "ExternalInterface.call("swfCopySuccess","复制成功","名字1");"。

2.js调用as3函数，需要注册一个名字到回调信息里(将 ActionScript 方法注册为可从容器调用，这里的容器个人认为是浏览器运行js的空间环境)。关键点在TextArea01.as文件的49行,表示函数Tf01AddContent注册给js调用，调用别名为onAddTextContentByJs。 这是as3里的工作。别外html里的工作也很重要。调用swf的回调函数，首先要在js里读取到正确的swf对象。然而获取swf对象的方法因浏览器的不同而有所不同。主要原因可以查看html源码的23--27行，很明显,当浏览器不是ie时通过document.getElementById是获取不到swf的object对象的，因为在非ie浏览器时，swf的object对象是包含在有id的上一层object对象里的。解决方法也已经给出，请看html源代码的41--44行。

3.common.js有个$.isEmptyObject, 这个是jquery 的函数，如果有用到，需引入.