`
天梯梦
  • 浏览: 13641762 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

flex与JavaScript的数据交互

JavaScriptFlexFlashAdobeHTML
阅读更多

上一篇发了 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)，各个参数具体功能如下：

  1. swfUrl（String，必须的）指定SWF的URL。
  2. id（String，必须的）指定将会被Flash内容替换的HTML元素（包含你的替换内容）的id。
  3. width（String，必须的）指定SWF的宽。
  4. height（String，必须的）指定SWF的高。
  5. version（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。
  6. expressInstallSwfurl（String，可选的）指定express install SWF的URL并激活Adobe express install。
  7. flashvars（String，可选的）用name:value对指定你的flashvars。
  8. params（String，可选的）用name:value对指定你的嵌套object元素的params。
  9. 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()等等，这个用到的时候可以上网查一下。

 

分享到：
| css多行多列的新闻模式
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics