﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-刘文涛-随笔分类-Flash / JavaScript Integration kit </title><link>http://www.blogjava.net/liuwentao253/category/17193.html</link><description>I am a coder</description><language>zh-cn</language><lastBuildDate>Tue, 27 Feb 2007 18:55:11 GMT</lastBuildDate><pubDate>Tue, 27 Feb 2007 18:55:11 GMT</pubDate><ttl>60</ttl><item><title>Issues with The JavaScript and Flash Integration Kit</title><link>http://www.blogjava.net/liuwentao253/archive/2006/11/14/81087.html</link><dc:creator>刘文涛</dc:creator><author>刘文涛</author><pubDate>Tue, 14 Nov 2006 03:44:00 GMT</pubDate><guid>http://www.blogjava.net/liuwentao253/archive/2006/11/14/81087.html</guid><description><![CDATA[The JavaScript and Flash Integration Kit是MM的Mike Chambers和Christian Cantrell开发的一套用于Javascript和Flash通讯的<u>通用接口程序</u>。通过这套接口，两种语言的大部分数据类型能够被相互支持。之前JS与Flash通讯的方法是通过<font color="#0000ff">fsCommand()，</font>这一套程序用到了flash中的<font color="#0000ff">LocalConnection</font>对象，支持主流的浏览器平台。<br /><br />安装和使用方法在配套的文档中已经说得比较清楚了，我这里只是提一些要点。安装文件中<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #000000">JavaScriptFlashGateway.swf</span></div><br />就是这套接口能够正常运作的幕后功臣，其作用就是发送基于LocalConnection对象的指令来操作目标Flash。<br /><br />看看使用这套接口的基本代码，在html页头部加入：<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000"> src</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">/path/to/JavaScriptFlashGateway.js</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div><br />生成一个id值，建立提供接口服务的FlashProxy对象：<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #000000">var uid </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Date().getTime();<br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />var flashProxy </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> FlashProxy(uid, </span><strong><span style="COLOR: #000000">'</span><span style="COLOR: #000000">/path/to/JavaScriptFlashGateway.swf</span><span style="COLOR: #000000">'</span></strong><span style="COLOR: #000000">);</span></div><br /><br />在页面中用FlashTag对象代替传统的&lt;object&gt;或&lt;embed&gt;来插入Flash文件：<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #000000">&lt;</span><span style="COLOR: #000000">script type</span><span style="COLOR: #000000">=</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">text/javascript</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">&gt;</span><span style="COLOR: #000000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />    var tag </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> FlashTag(</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">/path/to/flashContent.swf</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">, </span><span style="COLOR: #000000">300</span><span style="COLOR: #000000">, </span><span style="COLOR: #000000">300</span><span style="COLOR: #000000">); </span><span style="COLOR: #008000">//</span><span style="COLOR: #008000"> last two arguments are height and width</span><span style="COLOR: #008000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span><span style="COLOR: #000000">    tag.setFlashvars(</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">lcId=</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">+</span><span style="COLOR: #000000">uid);<br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />    tag.write(document);<br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span><span style="COLOR: #000000">&lt;/</span><span style="COLOR: #000000">script</span><span style="COLOR: #000000">&gt;</span></div><br />uid用来配对LocalConnction对象：分别为FlashProxy提供id参数和作为主Flash文件传入的lcId参数。<br /><br />在JS中要调用Flash中的方法，使用flashProxy对象的call()方法：<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #000000">flashProxy.call(</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">myActionScriptFunction</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">, </span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">my string</span><span style="COLOR: #000000">'</span><span style="COLOR: #000000">, </span><span style="COLOR: #000000">123</span><span style="COLOR: #000000">, </span><span style="COLOR: #0000ff">true</span><span style="COLOR: #000000">, </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Date(), </span><span style="COLOR: #0000ff">null</span><span style="COLOR: #000000">);</span></div><br />该方法在页面上插入JavaScriptFlashGateway.swf文件，并且传入相应的参数。然后这个文件则通过LocalConnection对象发送指令到连接的Flash文件中。每次调用这个方法，JavaScriptFlashGateway.swf都会重新载入一次（通过改变div的innerHTML）。<br />主Flash文件还需要建立一个JavaScriptProxy对象来响应JS的调用（其实也就是初始化一个对应的LocalConnection对象）：<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #000000">var proxy:JavaScriptProxy </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> JavaScriptProxy(_root.lcId, </span><span style="COLOR: #0000ff">this</span><span style="COLOR: #000000">);</span></div><br />Flash中调用JS比较简单，其实本质上就是用：<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #000000">getURL(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">javascript:javaScriptMethodName()</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">);</span></div><br />当然还是用JavascriptProxy类提供的方法来得比较professional一点：<br /><br /><div style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /><span style="COLOR: #0000ff">import</span><span style="COLOR: #000000"> com.macromedia.javascript.JavaScriptProxy;<br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />var proxy:JavaScriptProxy </span><span style="COLOR: #000000">=</span><span style="COLOR: #000000"> </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> JavaScriptProxy();<br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" />proxy.call(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">javaScriptMethodName</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">, </span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">arg1</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">, </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Object());<br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span><span style="COLOR: #008000">//</span><span style="COLOR: #008000"> or</span><span style="COLOR: #008000"><br /><img src="http://www.blogjava.net/images/OutliningIndicators/None.gif" align="top" /></span><span style="COLOR: #000000">proxy.javaScriptMethodName(</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">arg1</span><span style="COLOR: #000000">"</span><span style="COLOR: #000000">, </span><span style="COLOR: #0000ff">new</span><span style="COLOR: #000000"> Object());</span></div><br />至于两种语言的对象相互转换则分别有<font color="#0000ff"><strong>FlashSerializer类</strong></font>和<font color="#0000ff"><strong>JavaScriptSerializer类</strong></font>来做序列化的工作。<br /><br />总而言之，这一套接口还是LocalConnection的应用，和之前的整合了浏览器功能的Flash导航有异曲同工之妙。这一类型的应用基本上都是通过重载一个Flash文件（用页面刷新或用innerHTML内部刷新）来发送指令更新主Flash文件。<br /><br />p.s.Flash / JavaScript Integration Kit Development Site <br /><img src ="http://www.blogjava.net/liuwentao253/aggbug/81087.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/liuwentao253/" target="_blank">刘文涛</a> 2006-11-14 11:44 <a href="http://www.blogjava.net/liuwentao253/archive/2006/11/14/81087.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JavaScript and Flash Integration Kit (Beta) </title><link>http://www.blogjava.net/liuwentao253/archive/2006/11/14/81082.html</link><dc:creator>刘文涛</dc:creator><author>刘文涛</author><pubDate>Tue, 14 Nov 2006 03:26:00 GMT</pubDate><guid>http://www.blogjava.net/liuwentao253/archive/2006/11/14/81082.html</guid><description><![CDATA[
		<p>
				<font color="#006400">刘文涛翻译 转载注明翻译者</font>
				<br />
				<br />JavaScript and Flash Integration Kit (Beta) </p>
		<p>关于这个项目 <br />JavaScript and Flash Integration Kit  通过允许js调用as方法,as调用js方法 让开发者在flash和html世界里得到最好的用户体验.在二者中可以传递的参数类型主要包括: </p>
		<p>objects <br />arrays <br />strings <br />numbers <br />dates <br />booleans <br />nulls <br />undefined </p>
		<p>另外JavaScript and Flash Integration Kit可以在大多数浏览器和平台正常工作,包括: </p>
		<p>Windows IE 6.0 <br />Windows Firefox 1.0 <br />Windows Opera 8.0 <br />Macintosh Opera 8.0 <br />Macintosh Firefox 1.0 <br />Safari 1.2.4 and 2.0 <br />Linux Firefox 1.1 </p>
		<p>你可以从下列地址得到最新下载版本 : </p>
		<p>
				<a href="http://www.macromedia.com/go/flashjavascript">http://www.macromedia.com/go/flashjavascript</a>
		</p>
		<p>这个项目由 Macromedia 公司的   Christian Cantrell 和 Mike Chambers  开发.</p>
		<p>安装 <br />安装JavaScript and Flash Integration Kit 还是很简单的,</p>
		<p>1 : 从安装目录\FlashJavascriptGateway\installation拷贝JavaScriptFlashGateway.js ,JavaScriptFlashGateway.swf 到你网站的根目录.<br />2 : 从\FlashJavascriptGateway\source\flash\actionscript拷贝<br /> com/macromedia/javascript/JavaScriptProxy.as<br /> com/macromedia/javascript/JavaScriptSerializer.as<br /> 到你flash的classpath.注意目录结构一并放进去.</p>
		<p>怎样使用</p>
		<p>1 : 在js中调用as方法 (下面操作都在js中编写）<br /> <br /> 1.1 : 在网页中加入&lt;script type="text/javascript" src="/path/to/JavaScriptFlashGateway.js"&gt;&lt;/script&gt;<br /> 1.2 : 在JavaScriptFlashGateway.js文件中有一个叫做FlashProxy 的东西,他用来作为as/js方法互调的代理方法.这个FlashProxy 和你要调入的flash内容必须共享一个唯一的ID,这样FlashProxy 知道是哪个flash内容(方法) 需要被调入,<br />         最简单创建唯一ID 的方法是使用timestamp , 在js代码中加入: <br />  var uid = new Date().getTime();<br /> 1.3 : 现在创建一个 FlashProxy  实例 ,<br />          var flashProxy = new FlashProxy(uid, 'JavaScriptFlashGateway.swf');<br />   第一个参数是刚才创建的uid,第二个参数是根目录下的JavaScriptFlashGateway.swf 文件<br /> 1.4 : 当你想在你的网页中导入flash内容时,你必须把上面 FlashProxy构造函数中传入的唯一ID 设置给flashvars变量,JavaScriptFlashGateway.js 文件中有一个很简单的创建Flash tags和添加必须的flashvars的方法 ,像这样: <br />     var tag = new FlashTag('/path/to/flashContent.swf', 300, 300); // last two arguments are height and width<br />    tag.setFlashvars('lcId='+uid);<br />    tag.write(document);<br />  1.5 : 那个唯一ID 通过lcId这个flash变量被传给了flash内容,现在你已经可以使用FlashProxy实例在js中调用as方法了,像这样 : <br />  flashProxy.call('myActionScriptFunction', 'my string', 123, true, new Date(), null);<br />  第一个参数表示你要调入的as方法的方法名，其余的参数 都是这个方法需要的参数，这些参数要求必须是flash支持的数据类型包括：<br />  objects, arrays, strings, dates, numbers, booleans, nulls, and undefined. </p>
		<p>  2 ：在as中调用js中的方法 (下面操作都在as中编写）<br />在as中调用js中的方法 你不用做任何特别的操作，同样在网页中导入JavaScriptFlashGateway.js ，要被调的js方法可以包含任意数量的参数。<br />2.1 ：再一次确认JavaScriptFlashGateway.js 被included到包含那个js方法（你要在as中调用的）所在的网页。<br />2.2 ：在as项目中 import com.macromedia.javascript.JavaScriptProxy;<br />2.3 : 然后你用下面方式创建一个JavaScriptProxy实例 ：<br />var proxy:JavaScriptProxy = new JavaScriptProxy();<br />2.4 ：接下来你有两种方法调用js中的方法 ：<br />方法a : 你可以使用call API 像这样 ：<br />proxy.call("javaScriptMethodName", "arg1", new Object());<br />第一个参数是js中的方法名，其余的参数将被认为是 这个方法需要的参数。<br />方法b : 你也可以直接在JavaScriptProxy类上调用js方法 像这样 ：<br />proxy.javaScriptMethodName("arg1", new Object());<br />注意 ：javaScriptMethodName 用js中实际的方法名代替。</p>
		<p>2.5 在as中接收js方法你要创建一个JavaScriptProxy 类的实例，同时你还要指定哪个方法要被代理。像这样：<br />var proxy:JavaScriptProxy = new JavaScriptProxy(_root.lcId, this);<br />这个构造器有两个参数 ：第一个参数 是从html页传入到flash的唯一ID，第二个参数表示那个js方法被代理的实例，<br />注意 ：参数只有在你需要调js中方法的时候才需要。</p>
		<p>
				<br />3 ：Known Issues<br />3.1 ：JS中对象Undefined 属性不能被序列化，除非你明确定义它为undefined 否则你不能把它传给as.<br />3.2 :   如果你使用debug player, 在js/as间互调方法，你会发现很慢。<br />3.3 : 你要传递的参数不能包含循环引用，在js和as中循环引用会引起死循环，换句话说 如果你一个对象有一个包含它自身引用的属性，序列化代码将引起死循环。</p>
		<p>
				<br />FAQ : </p>
		<p>Q : 为什么要创建这个 Flash / JavaScript Integration Kit ？<br />A ：这个Integration Kit允许开发者在一个application中最好的绑定html和flash.</p>
		<p>Q : 以前绑定javascript 和 flash不是 也能做到么？<br />A ：在过去 的确有javascript和flash通讯的 方法，他们不能很好的跨浏览器和平台，并且 这些技术只允许你在js和as中传递字符串，不支持复杂的数据类型 如 ：objects和arrays</p>
		<p>
				<br />Q : 需要什么版本的flash播放器？<br />A ：6.0以上版本 ，如果想支持低版本播放器 也是可以的，很简单 做如下调整：<br />       打开JavaScriptFlashGateway.fla 文件，然后打开Flash publish settings窗口（File &gt; Publish Settings &gt; Flash），取消Optimize for Player 6 r65钩选，然后编译 即可。</p>
		<p>Q ：integration kit  支持Flex么？<br />A ： 支持Flex 和 Flash MX 2004<br />          </p>
		<p>Q ：我可以在flash和javascript之间传递哪些数据类型 ？<br />A ：<br />Object <br />Array <br />String <br />Number <br />Boolean <br />Date <br />null <br />undefined </p>
		<p>Arrays和objects里面可以包含其它支持的数据类型，支持嵌套。</p>
		<p>Q ：关于我要传递的数据的大小有没有什么限制 ？<br />A ：当js调as方法的时候，大小有一些限制，但具体的大小与要传递的数据有关，如果你发送较大数据失败了，可以尝试发送小一点的，一般这个大小大约是 40K左右。</p>
		<p>我们还没发现as调js方法有大小方面的限制。</p>
		<p>Q ：当我们用js调as方法时，可以得到一个返回值么？, or vice versa?<br />A ：现在还不能，不过我们在以后的版本中正在想办法解决。 </p>
		<p>Q ：你们有使用 Integration Kit  的 例子么 ？<br />A ：有， MXNA Category ，你可以点击右键，选择view source 查看源代码。</p>
		<p>Q : JavaScript and Flash Integration Kit  会被更新么？<br />A：会，这个kit作为osflash.org的一个开源项目 ，is actively developed<br /></p>
<img src ="http://www.blogjava.net/liuwentao253/aggbug/81082.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/liuwentao253/" target="_blank">刘文涛</a> 2006-11-14 11:26 <a href="http://www.blogjava.net/liuwentao253/archive/2006/11/14/81082.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>