AS3和js相互通信要点分析
目标：在html页面里可以使用事件来影响到swf文件的内容，swf文件也可以影响html里js代码的内容
一。新建flash文件,用Flash CC试用版新建一个TextArea.fla的源文件,不添加任何组件，直接关联一个主类TextArea01,Flash会自动生成一个TextArea01.as的AS3源码文件。AS3代码如下:
1 package { 2 3 import flash.display.MovieClip; 4 import flash.display.StageScaleMode; 5 import flash.text.TextField; 6 import flash.events.MouseEvent; 7 import flash.desktop.*; 8 import flash.display.*; 9 import flash.external.ExternalInterface; 10 import fl.controls.Button; 11 12 public class TextArea01 extends MovieClip { 13 14 private var param:Object; 15 private var tf01:TextField; 16 private var btnCopyText:Button; 17 18 public function TextArea01() { 19 //this.stage.scaleMode = StageScaleMode.NO_SCALE; 20 //外部html参数 21 param = LoaderInfo(this.root.loaderInfo).parameters; 22 //初始化按钮 23 btnCopyText = new Button(); 24 btnCopyText.label = "复制文字"; 25 btnCopyText.width = 100; 26 btnCopyText.height = 22; 27 btnCopyText.x= 0; 28 btnCopyText.y = 0; 29 this.addChild(btnCopyText); 30 //"复制文字"按钮事件 31 this.btnCopyText.addEventListener(MouseEvent.CLICK,btnCopyClickListener); 32 // 33 tf01 = new TextField(); 34 tf01.border = true; 35 tf01.y = this.btnCopyText.height; 36 tf01.width = this.stage.stageWidth-1; 37 tf01.height = this.stage.stageHeight-this.btnCopyText.height; 38 39 this.addChild(tf01); 40 41 var txt:String = param["txt"]; //flashvars的txt参数 42 if ( txt!=null && txt.length>0 ) { 43 tf01.text = txt; 44 }else{ 45 tf01.text = "请输入参数txt"; 46 } 47 48 //添加给javascript使用的函数,注册名为"onAddTextContentByJs", 实际调用内部"Tf01AddContent"函数 49 ExternalInterface.addCallback("onAddTextContentByJs",Tf01AddContent); 50 } 51 /** 52 * 修改文字内容 53 */ 54 public function Tf01AddContent(s:String):void{ 55 this.tf01.text = s; 56 } 57 /** 58 * "复制文字"按钮事件 59 */ 60 public function btnCopyClickListener(e:MouseEvent):void{ 61 var text:String = this.tf01.text; 62 if ( text.length>0){ 63 Clipboard.generalClipboard.clear(); 64 var res:Boolean = Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT, text); 65 if ( res && ExternalInterface.available){ 66 //调外部javascript的swfCopySuccess函数，传送第一个参数为"复制成功" 67 ExternalInterface.call("swfCopySuccess","复制成功"); 68 } 69 } 70 } 71 72 } 73 74 }
回到Flash主场景页面，按Ctrl+Enter就可以生成一个swf文件，文件名:TextArea.swf
二.用swfobject.js组件导入TextArea.swf到html页面(swfobject有swfobject_generator自动生成html功能，可自行下载最新版的swfobject.js，里面包有), html+js代码如下
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script type="text/javascript" src="../assets/js/common.js"></script> 7 <script type="text/javascript" src="../assets/js/swfobject/swfobject.js"></script> 8 <script type="text/javascript"> 9 var swfid = "myFlashContent"; 10 swfobject.registerObject(swfid, "11.0.0", "expressInstall.swf"); 11 </script> 12 13 </head> 14 <body> 15 <div> 16 <button onClick="callAs3();">修改文字</button> 17 </div> 18 <div> 19 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" name="myFlashContent" id="myFlashContent"> 20 <param name="movie" value="../assets/swf/TextArea.swf"> 21 <param name="wmode" value="transparent"> 22 <param name="flashvars" value="txt=flashvar的txt文字"> 23 <!--[if !IE]>--> 24 <object type="application/x-shockwave-flash" data="../assets/swf/TextArea.swf" width="800" height="600"> 25 <param name="wmode" value="transparent"> 26 <param name="flashvars" value="txt=flashvar的txt文字"> 27 <!--<![endif]--> 28 <a href="http://www.adobe.com/go/getflashplayer"> 29 <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"> 30 </a> 31 <!--[if !IE]>--> 32 </object> 33 <!--<![endif]--> 34 </object> 35 </div> 36 37 <script language="javascript"> 38 39 var e = document.getElementById(swfid); 40 alert(U.browser()); 41 if ( U.browser()!='ie') { 42 e = document.getElementById(swfid).getElementsByTagName('object')[0]; 43 console.log(e); 44 } 45 46 function swfCopySuccess(msg){ 47 alert(msg); 48 } 49 function callAs3(){ 50 e.onAddTextContentByJs("JS添加的文字"); 51 } 52 </script> 53 </body> 54 </html>
另有common.js的代码如下:
1 // JavaScript Document 2 var Utils = U = {}; 3 //计数器 4 U.acc = 1; 5 6 U.isempty = function(v){ 7 if ( v == null ) return true; 8 if ( typeof(v) == 'string' ) { 9 if ( v.length<=0 ) return true; 10 } else if (typeof(v) == 'object'){ 11 return $.isEmptyObject(v); 12 } else if ( typeof(v) == 'undifined' ){ 13 return true; 14 } 15 16 return false; 17 }; 18 19 //判断浏览器 20 U.browser = function(){ 21 if ( navigator.appName.indexOf('Microsoft')>-1){ 22 return 'ie'; 23 }else{ 24 if ( navigator.userAgent.indexOf('Chrome')>-1 ) { 25 return 'chrome'; 26 }else if(navigator.userAgent.indexOf('Firefox')>-1 ){ 27 return 'firefox'; 28 }else { 29 return 'unknow'; 30 } 31 } 32 };
三，运行结果令人满意,整体兼容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 的函数，如果有用到，需引入.
