flex与JavaScript的数据交互
上一篇发了 flex3 接受外部参数 ，但是后来想想，应该更进一步的了解 flex与JavaScript的数据交互。
第一种：
test4.swf 代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" horizontalAlign="left">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
private function myClick(evt:MouseEvent):void {
var item:Object = new Object();
item.name = "Gideon";
item.address = "New York";
var results:Object = ExternalInterface.call("myfunc",item);
//results为myfunc函数返回的对象
display.text = 'Song: ' + results.song + '\nSinger: ' + results.singer + '\nYear: ' + results.year;
}
]]>
</mx:Script>
<mx:Button label="Click me" click="myClick(event);"/>
<mx:TextArea id="display" height="70"/>
</mx:Application>
html:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>flex</title>
<head>
<script type="text/javascript">
function myfunc(item) {
document.getElementById('ihere').innerHTML = 'My name is ' + item.name + ', and I live in ' + item.address + '.';
//创建对象
var results = new Object();
results.song= 'Come Together !';
results.singer = 'MJ';
results.year = '1995';
return results;
}
</script>
</head>
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="300" height="150">
<param name="allowScriptAccess" value="always">
<param name="movie" value="test4.swf">
<param name="allowFullScreen" value="true"></param>
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<PARAM name="wmode" value="transparent">
<embed src="test4.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="300" height="150" allowScriptAccess="always" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<br> Output:
<div id="ihere"></div>
</body>
</html>
第二种：
test4.swf 代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" horizontalAlign="center" initialize="initApp()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
/**
* initApp
* @return void
**/
private function initApp():void {
//注册列表
ExternalInterface.addCallback('backFun',callBack);
//HTML 与 FLEX交互
//params.flashvars = "xmlPath=hello&name=dante";
var item:Object = Application.application.parameters;
display.text = 'playname:' + item.playname + '\nvideoname:' + item.videoname + '\nwear:' + item.wear;
}
/**
* saveData
* @params item:Object java script 传过来的参数
* @return void
**/
private function callBack(item:Object):void {
nameTxt.text = item.name;
}
]]>
</mx:Script>
<mx:VBox>
<mx:HBox> <mx:Label text="Callback"/> <mx:TextInput id="nameTxt"/> </mx:HBox>
<mx:HBox> <mx:Label text="Geturl"/> <mx:TextArea id="display" height="70"/> </mx:HBox>
</mx:VBox>
</mx:Application>
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {
playname: "test4.swf",
videoname: "my player",
wear: "clothes"
};
var params = {
wmode: "transparent",
bgcolor: "#ffffff",
allowFullScreen: "true",
allowScriptAccess: "always",
quality: "high"
};
var attributes = {};
attributes.id = "flashContent";
swfobject.embedSWF("test4.swf", "flashContent", "300", "150", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
function callFlex(item) {
//通过ID获得swf，也可以使用document.getElementById();
//var swf = document.getElementById("flashContent");
var swf = swfobject.getObjectById("flashContent");
var item = {};
item.name = document.getElementById("nameTxt").value;
//调用Flex函数，传参item:Object
swf.backFun(item);
}
</script>
</head>
<body>
<div id="flashContent">
<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>
</div>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="nameTxt"/></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:callFlex();">Call Flex</a>
</td>
</tr>
</table>
</body>
</html>
关于SWFObject，请参看 flex3 接受外部参数
SWFObject使用补充：
swfobject.embedSWF()
swfobject.getObjectById("swfID")
swfobject.removeSWF("swfID")
一.swfobject.embedSWF：
内嵌swf文件，这个函数的参数比较多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes)，各个参数具体功能如下：
- swfUrl（String，必须的）指定SWF的URL。
- id（String，必须的）指定将会被Flash内容替换的HTML元素（包含你的替换内容）的id。
- width（String，必须的）指定SWF的宽。
- height（String，必须的）指定SWF的高。
- version（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。
- expressInstallSwfurl（String，可选的）指定express install SWF的URL并激活Adobe express install。
- flashvars（String，可选的）用name:value对指定你的flashvars。
- params（String，可选的）用name:value对指定你的嵌套object元素的params。
- attributes（String，可选的）用name:value对指定object的属性。
注意 ：在不破坏参数顺序的情况下，你可以忽略可选参数。如果你不想使用一个可选参数，但是会使用后面的一个可选参数，你可以简单的传入false作为参数的 值。对flashvars、params和 attributes这些JavaScript对象来说，你也可以相应的传入一个空对象{}。
二.swfobject.getObjectById("swfId")
通过swfid获得swf对象，通过该对象可调用flex函数。
三.swfobject.removeSWF("swfId") 通过swfId删除swf。
注意 ：删除swf这里需要提醒下，因为embedSWF是替换标签，而不是填充。比如上面的例子<div id="myPanel">Flex content</div>，如果执行了swfobject.removeSWF后，想重新添加SWF必须要重新创建<div id="myPanel">或者更改embedSWF的第二个参数更改替换新的标签ID。因为在这里SWF替换了调了<div>
另附： Javascript 和 ActionScript3 的交互
需要这个包
import flash .external.ExternalInterface;
这是一个静态类，主要用两个方法：
ExternalInterface.addCallback(给Javascript的接口,AS函数位置,AS函数名) ExternalInterface.call(Javascript函数名,传值)
AS给做一个接口，然后Flash就可以访问AS的接口，从而可以调用 AS的函数
ExternalInterface.addCallback("browse",this,upBrowse);
其中borwse是javascript 可以调用flash 的接口，upBrowse是AS的函数
ExternalInterface.call("upAllComplete",upCount);
这个是AS调用Javascript的接口
其中upAllComplete是Javascript的函数，upCount是需要传递的参数
废话少说，例子上。
这个是AS调JS
AS代码：
ExternalInterface.call("upAllComplete",upCount);
JS代码：
function upAllComplete(upData){
//upData是AS中的upCount传过来的值，可以是对象，数组，字符串 ，数字
alert(upData);
}
这个是JS调用AS的（有点麻烦）
JS代码：
var movieName = "testcommand";
//testcommand是HTML中Object的id和name，name和id要一样，这个是考虑到浏览器兼容性
function thisMovie() {
if (navigator.appName.indexOf ("Microsoft") !=-1) {
return window[movieName];
} else {
return document[movieName];
}
}
thisMovie().browse(toSwfData);
//browse是swf函数upBrowse的映射名称
AS代码：
function upBrowse(jsData){
trace(jsData);
}
ExternalInterface.addCallback("browse",this,upBrowse);
//映射upBrowse这个函数为接口browse
这个AS版本可以支持到Flash player 7（貌似），不过flash本身在浏览器就 提供一些接口，诸如：gotoAndPlay(),play(),stop()等等，这个用到的时候可以上网查一下。