flex与JavaScript的数据交互

天梯梦

浏览: 13730961 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AS3.0/2.0 / Flex / Flash

JavaScript Flex Flash Adobe HTML

上一篇发了 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()等等，这个用到的时候可以上网查一下。

分享到：

认识Javascript数组 | css多行多列的新闻模式

2010-01-26 04:44
浏览 4366
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论