目标:在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 的函数,如果有用到,需引入.

AS3和js相互通信要点分析的更多相关文章

  1. as3 与js相互通信

    1.as和js通讯实例 如果as3调用 JAVA script 中的函数直接在as中添加 if (ExternalInterface.available) {       ExternalInterf ...

  2. AS与JS相互通信(Flex中调用js函数)

    转载自http://www.blogjava.net/Alpha/archive/2009/06/27/284373.html Flex中As调用Js的方法是:     1.导入包 (import f ...

  3. android + javascript 相互通信实例分析

    1.  AndroidManifest.xml中必须使用许可 "android.permission.INTERNET", 否则会出Web page not available错误 ...

  4. android和javascript之间相互通信实例分析

    1.  AndroidManifest.xml中必须使用许可 "android.permission.INTERNET", 否则会出Web page not available错误 ...

  5. 新人补钙系列教程之:AS 与 JS 相互通信

    比较常用的,AS 调用 JS private function callJS():void{ ExternalInterface.addCallback("callbackQQPay&quo ...

  6. NanUI文档 - 如何实现C#与Javascript的相互通信

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript的相互通信 如何处理NanUI中的下载过 ...

  7. iOS与JS相互传值与交互

    JavaScriptCore是webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境.iOS7后苹果在iPhone平台推出,极大的方便了我们对js的操作.我们可以脱离webview直接运行 ...

  8. 学习笔记:Linux下共享内存的方式实现进程间的相互通信

    一.常用函数 函数系列头文件 #include <sys/types.h> #include <sys/ipc.h> #include <sys/shm.h> ft ...

  9. wmware 怎么 跟主机相互通信

    VMnet1和VMware8其实就是软件模拟出来的两块网卡提供DHCP服务,两块网卡对应VMware的两种不同的模式VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转 ...

随机推荐

  1. android 断点下载---XUtils

    配置权限 <uses-permission android:name="android.permission.INTERNET"/> <uses-permissi ...

  2. GPIO口及中断API函数【转】

    本文转载自:http://blog.sina.com.cn/s/blog_a6559d9201015vx9.htmlG #include <linux/gpio.h> // 标准 GPIO ...

  3. java 线程返回值

    1.传统方式需要新建一个接口类,然后在接口类中将结果在方法中作为参数进行处理 package de.bvb.test3; public class Test3 { public static void ...

  4. AOP报错:Caused by: java.lang.IllegalArgumentException: error at ::0 can't find referenced pointcut

    Spring3.x升级4.x时遇到的,JDK版本1.7 aspectj版本问题,1.6.x升级到1.7.x,解决!

  5. jsp中button与submit的用法

    button:可以对返回的数据进行格式化,反应到页面上,可以用form表单序列化提交也可以不用form表单提交 <form id="addForm"> <inpu ...

  6. wf(七)(手把手包会)

    这个demo中我们将用If/Else逻辑加到工作流用来展示不同的message通过自定义的条件. 如果name的字符数是奇数,第一个单词就输出“Greeting”否则输出“Hello”. 1. 在Sa ...

  7. Countries in War -POJ3114Tarjan缩点+SPFA

    Countries in War Time Limit: 1000MS Memory Limit: 65536K Description In the year 2050, after differe ...

  8. 注释声明:TODO HACK XXX FIXME REVIEW

    注释有时候也可以用来给一段代码声明额外的信息.这些声明的格式以单个单词打头并紧跟一个冒号.可以使用的声明如下. TODO: 说明代码还未完成.应当包含下一步要做的事情. HACK: 表明代码实现走了一 ...

  9. div+css 设计下拉

    css样式 <style type="text/css"> <!-- /* www.divcss5.com CSS下拉菜单实例 */ * { margin:; p ...

  10. mysql实战之 批量update

    mysql实战之批量update 现阶段我们的业务量很小,要对admin_user表中的relationship字段进行更新,指定id是409.已知409是公司内的一服务中心,需要把该服务中心放到区代 ...