createjs技术博客

在flash诞生的时候，js与flash的交互就是前端工程师和flash工程师最头痛的事，经常不是调不到js方法，就是调不到flash方法。最主要的原因是flash工程师不懂js，前端工程师不懂as，而js和flash需要顺利通信，需要这两者共同理解。那今天我就来讲一下这“姿势”。

首先先讲嵌入方式，嵌入方式主要有 embed object swfobject等，这里我推荐还是使用swfobject，无它，因为方便兼容性好，优缺点和demo可以看：http://www.cnblogs.com/Carpe-Diem/articles/2310831.html

接着我们讲一下swfobject的api：

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes, callbackFn)有5个必须的参数和5个可选的参数。

swfUrl (字符串, 必须) 指定您的SWF的URL

id (String, required) 指定包含替换元素的html元素的ID,能用你的flash的内容来替换

width (String, required) 指定SWF的宽度

height (String, required) 指定SWF的高度

version (String, required)指定SWF 发布所需的flash播放器的版本 (格式 is: "major.minor.release" or "major")

expressInstallSwfurl (String, optional)指定快速安装的路径，激活快速安装. 请注意，快速安装只会触发一次（他第一次被调用），他只被支持在win平台和mac平台的 Flash Player 6.0.65以上的版本，他会要求一个最小的尺寸是  310x137px。

flashvars (Object, optional) 指定需要传递给flash的变量（用键值对）

params (Object, optional) 指定嵌入对象的参数（用键值对）

attributes (Object, optional) 指定对象的属性（用键值对）

callbackFn (JavaScript function, optional)能定义一个回调函数，不管调用flash创建成功或者失败都可以调用该函数

然后就是讲最重要的部分，几种可以顺利交互的方法：

1.url交互

js只需要动态加载flash，然后在flash后面加上参数即可(如果使用这种方法嵌入flash，可以不用swfobject，因为不存在兼容问题)

js代码

swfobject.embedSWF("swf/jsurltoflash.swf?txt=哈哈哈", "container", "550", "400", "11.0.0");

swfobject就是简单暴力，一句话就解决了，然后是flash的as代码。

as代码

if(stage)
{
	init()
}
else
{
	this.addEventListener(Event.ADDED_TO_STAGE,init);
}
function init(event = null)
{
	var txt =  stage.loaderInfo.parameters.txt;
	if(txt)
	{
		test.text =  txt;
	}
	
}

测试地址：http://www.ajexoop.com/demo/js-flash/jsURLToFlash.html

这种方式的优点就是方便简单，缺点也很明显，只能js单传参数给flash，不支持flash传js，而且不能调用方法。

2.flash调用js方法

js代码

function getText()
{
    return "哈哈";
}
var flashvars = {};
var params = {};
params.quality = "high";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.wmode = "transparent"
var attributes = {"id":"yuanli"};
swfobject.embedSWF("swf/flashtojs.swf", "container", "550", "400", "11.0.0","", flashvars, params, attributes);

as代码

import flash.external.ExternalInterface;

var txt = ExternalInterface.call("getText");
test.text = txt;

测试地址：http://www.ajexoop.com/demo/js-flash/flashToJs.html

这次flash代码非常简单，只需要调用，js也非常简单，只要在flash加载之前写上方法就可以了，不过有个重点就是swf的参数必须写上这么一条params.allowscriptaccess = "always";

3.js调用flash方法

上面2种方法都很简单，但是很多情况下都是需要js调flash的方法，而且往往js调flash是最难调的，经常调不到，我这边就写一下js调flash的代码和须知。

js代码

var flashvars = {};
var params = {};
params.quality = "high";
params.allowscriptaccess = "always";
params.allowfullscreen = "true";
params.wmode = "transparent"
var attributes = {"id":"yuanli"};
var callBack = function ()
{
    setTimeout(function (){
        var swf = document.getElementById('yuanli');
        swf.setText("哈哈哈哈")
    },2000)
}
swfobject.embedSWF("swf/jstoflash.swf", "container", "550", "400", "11.0.0","", flashvars, params, attributes,callBack);

这里不仅须要params.allowscriptaccess = "always"; 还须要再swf加载完毕的回调方法上delay一段时间再调用，为什么呢？因为flash的机制，注册给js的方法不是立即运行的，是过会才会运行的，这就造成了很多前端人员发现，flash的方法怎么调不到。当然我这里使用的是延时，最好的办法还是写个计时器不停的去调用它，直到调用到为止。

as代码

import flash.external.ExternalInterface;

flash.system.Security.allowDomain('*');
ExternalInterface.addCallback("setText",setText);
function setText(str)
{
	test.text = str;
}

大家发现这里的flash也需要设置权限了，除了常规的addCallback外，还需要写flash.system.Security.allowDomain('*')。

测试地址：http://www.ajexoop.com/demo/js-flash/jsToFlash.html

最后我再讲一下，js与flash的交互要点。

1.flash需要写flash.system.Security.allowDomain('*')(可以不是*，改成自己的域名)

2.js再swfobject的参数上必须写params.allowscriptaccess = "always";

3.js调用flash的时候须延时，或者写定时器。

想当年，本人做flash开发工程师的时候经常吐槽是前端的问题，前端总是吐槽是我的问题，现在我两者都会了，就只有我吐槽别人了O(∩_∩)O哈哈~。

demo下载地址：http://www.ajexoop.com/demo/js-flash/js-flash.zip