js与flash交互的正确姿势

  • 内容
  • 评论
  • 相关

在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

评论

2条评论
  1. Gravatar 头像

    匿名 回复

    下载下来后,发现只有文件名后带参数的获取了数据

发表评论

电子邮件地址不会被公开。