javascript向flash swf文件传递参数值注意细节
人气:0
问题：如何使用javascript向SWF文件传递参数？
在网上找了一个完整的教程，很有启发性和实用性，如下是完整实现的步骤：
配置SwfObject：
Swfobject2是目前检测用户是否安装Flash的最佳方法。它被认为是‘行业标准'，并且Adobe所有产品的新版本（Flex4，Flash CS5）都会使用SwfObject来检测Flash Player。
先要下载，解压ZIP文件，复制swfobject.js文件到你的web服务器上，根目录下创建名为'js'根文件夹是个不错的想法。（因此文件位置应该是http://myserver.com/js/swfobject.js)。我们会在以后创建的HTML文件中参考这个文件的。如果你想使用ExpressInstall功能（为用户提供简单的升级方法），你必须将expressInstall.swf复制到相同的文件夹下。
配置HTML文件：
HTML文件包括两个Javascript。一个用来抓取来自网址的参数。这是由Matt White创建的，它虽然简单但十分有效。代码如下：
<script type="text/javascript">
/* Get URL Parameter in Javascript. Code from: http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z */
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?"));
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if ( aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return unescape(strReturn);
}
</script>
将如上代码放置到你的HTML文件的HEAD标签中。你同样需要将导入SWFObject脚本导入进来，代码如下：
<script type="text/javascript" src="/js/swfobject.js"></script>另一个Javascript是使用SwfObject插入SWF文件。你可以将其放置在HTML文件的任何地方。首先我们要做的是创建一个DIV标签，在没有安装合适的Flash Player时提示用户。
<div id="flashcontent">
<strong>This content requires Flash Player 9 (or a more recent version).
<noscript>Make sure JavaScript is turned on. </noscript>
You need to <a href="http://www.adobe.com/shockwavehttps://img.qb5200.com/download-x/download/index.cgi?p1_prod_version=shockwaveflash" target="_blank">
<span style="text-decoration: underline;">upgrade your Flash Player</span></a></strong>
</div>
在DIV标签内你可以输入任何想输入的内容。添加图片或者反馈信息随你喜欢，因为这些内容都会被SWF文件所替换。
接下来是实现替换功能的Javascript：
<script type="text/javascript">
var flashvars = { test:getURLParam("test") };
var params = {};
var attributes = {};
swfobject.embedSWF("/articlefiles/jsvars/jsvars.swf", "flashcontent", "550", "400", "9.0.0","", flashvars, params, attributes);
</script>
注意第二行，我们调用了Javascript函数'getURLParam'，这个函数已经被插入到HTML文件中。我们所传递的名字正是希望从网址中捕获的参数名。
创建Flash文件
接下来该创建Flash文件了。将一个文本框添加到舞台上。在属性面板中设置为'动态文本'，实例名为'mytextField'。通过点击'显示文本周围边框'实现在选中文本框时显示边框。
捕获传递进来的参数需要使用如下的try/catch语句:
try {
var key:String; // This will contain the name of the parameter
var val:String; // This will contain the value of the parameter
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (key in flashvars) {
val = String(flashvars[key]);
mytextField.text = key+": "+val;
}
} catch (error:Error) {
// what to do if an error occurs
}
文件：jsvars_test.fla
将文件和HTML文件一并上传到服务器上。当运行文件时，你会看到文本框中的'test:'字样。
注意：如果SWF无法显示，你只看到了'升级Flash Player'字样，说明服务器上缺少某些东西。确保你已经将SwfObject文件(swfobject.js)上传到了http://myserver.com/js/swfobject.js。同时确保HTML文件中的SwfObject文件和SWF文件路径正确。如果仍然有问题，查看一下例子的源文件及路径。
接下来，试着像这样添加test参数http://www.flashmagazine.com/articlefiles/jsvars/jsvars_test.html?test=something.如果一切正常，你将会看到'test:something'，表明你已经成功的将参数传递到Flash文件中。
更进一步
你同样可以设置来自SWF文件的参数。在这个例子中http://www.flashmagazine.com/articlefiles/jsvars/jsvars.html?test=something&id=someID我们同样实现了发送参数。
FLA文件包含两个分别命名为'variablesReceived'和'variablesToSend'的文本框,以及一个用来发送新参数的按钮。这个例子的HTMl文件被设置接收'test'和'id'两个参数。首先我们为第一个文本框添加一些说明性文字：
variablesReceived.text ="Variables passed in:" + " ";接下来该接收变量了：
try {
var key:String;
var val:String;
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (key in flashvars) {
val = String(flashvars[key]);
variablesReceived.appendText("\t" + key + ": " + val + " ");
}
} catch (error:Error) {
variablesReceived.appendText(error.toString());
}
这将会在第一个文本框中列举出所有的flashvars。我们在这个文件中使用到的另一个主要函数就是发送变量函数:
// Sending parameters
function sendVariables(e:MouseEvent):void {
// First we grab the URL of the HTML document and split it into an array
var htmlUrl:String = ExternalInterface.call("window.location.href.toString");
// split the string at the questionmark
var splitUrl:Array = htmlUrl.split("?");
// use only the first part (ditch existing parameters)
var trimmedUrl:String = splitUrl[0];
// get the parameters we want to append to the URL
var parameters:String = variablesToSend.text;
// combine url and parameters with a new questionmark
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters);
// reload the page
navigateToURL(requester, '_self');
}
这里我们使用了一个小小技巧，通过使用'ExternalInterface.call'捕获SWF文件插入的HTML文本的网址。Flash文件只知道指向自身的网址，这个技巧突破了这个限制。ExternalInterface在SwfObject默认情况下是被打开的，但你可以手动关闭它。
我们不需要当前网址中的参数（也就是'…?test=something&id=5′）。因此我们只保留了问号之前的部分并将其存储在'trimmedUrl'变量中以备将来之用。我们捕获'variablesToSend'文本框中的参数，并将其传递到URLRequest中。通过将request传递给'navigateToURL'，浏览器会重新加载HTML页面并在'variablesReceived'文本框中显示最近提交的值对。
注意：你不能在Flash中测试它。需要将文件上传到服务器上，因为FlashVars和ExternalInterface都需要SWF被插入到浏览器中。
最后我们必须使用addEventListener为发送按钮设置调用'sendVariables'方法。
sendButton.addEventListener(MouseEvent.CLICK,sendVariables);现在你已经知道如何使用Javascript相互传递参数了。让我们用我们的所学做一些有用的事情。
创建记录状态的导航
结束之前，让我们构建一个小型菜单系统，这个系统可以高亮显示当前的点击按钮，你可以下载已完成文件或者运行案例，让我们看一下代码：
首先停止SWF的时间轴播放，为鼠标点击设置事件监听器。
stop();
// setup our 5 buttons
item1.addEventListener(MouseEvent.CLICK, gotoURL);
item2.addEventListener(MouseEvent.CLICK, gotoURL);
item3.addEventListener(MouseEvent.CLICK, gotoURL);
item4.addEventListener(MouseEvent.CLICK, gotoURL);
item5.addEventListener(MouseEvent.CLICK, gotoURL);当仍然一个按钮被点击，他们都会执行'gotoURL'函数。接下来，我们捕获来自网址的参数：
// grab variables
try {
var key:String;
var val:String;
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (key in flashvars) {
val = String(flashvars[key]);
if(key == "item"){ // If the parameter is called 'item'...
if(val.substr(0,4) == "item"){ // ... and the name of the button starts with the characters 'item'...
// ... we can extract the number-part of the item-name and go to the correct frame
var frameToGoTo:Number = Number( val.substr(4,1) );
gotoAndStop( frameToGoTo+1 );
}
}
}
} catch (error:Error) {
// what to do if an error occurs
}
正如你所看到的，这和之前的做法十分相似。但这次我们传递的参数名字为'item'。这个参数是我们点击的按钮的名字。
接下来是gotoURL函数。
// Get the new page
function gotoURL(e:MouseEvent):void {
// First we grab the URL of the HTML document and split it into an array
var htmlUrl:String = ExternalInterface.call("window.location.href.toString");
// split the string at the questionmark
var splitUrl:Array = htmlUrl.split("?");
// use only the first part (ditch existing parameters)
var trimmedUrl:String = splitUrl[0];
// get the name of the button clicked and set it as a parameter
var parameters:String = "item="+e.currentTarget.name;
// combine url and parameters with a new questionmark
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters);
// reload the page
navigateToURL(requester, '_self');
}
我们通过联合'item='字符以及点击的按钮名字创建自己的参数。然后将网址以及参数传递到navigateToURL方法中重新加载带有新参数的HTML页面。
事件是如何工作的：当一些东西被点击时我们使用addEventListener()方法监听点击事件，事件包含被点击的对象的引用。'currentTarget'属性会引用被点击的对象(e.currentTarget),这样一来我们就可以使用e.currentTarget.name获得其名字。
要成为一个完整的菜单系统，你还需要使加载新的网址，而不是像例子中使用相同的网址。你现在应该知道最基本的知识。它同时可以以多种方式运行。可以将网址当做变量存储在SWF中，从一个XML文件加载，或者更多其它的方式。因此我把这些交给你。如果你使用本教程创建了解决方案，请在评论中张贴网址，以便其他学习者可以看到它.
在网上找了一个完整的教程，很有启发性和实用性，如下是完整实现的步骤：
配置SwfObject：
Swfobject2是目前检测用户是否安装Flash的最佳方法。它被认为是‘行业标准'，并且Adobe所有产品的新版本（Flex4，Flash CS5）都会使用SwfObject来检测Flash Player。
先要下载，解压ZIP文件，复制swfobject.js文件到你的web服务器上，根目录下创建名为'js'根文件夹是个不错的想法。（因此文件位置应该是http://myserver.com/js/swfobject.js)。我们会在以后创建的HTML文件中参考这个文件的。如果你想使用ExpressInstall功能（为用户提供简单的升级方法），你必须将expressInstall.swf复制到相同的文件夹下。
配置HTML文件：
HTML文件包括两个Javascript。一个用来抓取来自网址的参数。这是由Matt White创建的，它虽然简单但十分有效。代码如下：
复制代码 代码如下:
<script type="text/javascript">
/* Get URL Parameter in Javascript. Code from: http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z */
function getURLParam(strParamName){
var strReturn = "";
var strHref = window.location.href;
if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?"));
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if ( aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
break;
}
}
}
return unescape(strReturn);
}
</script>
将如上代码放置到你的HTML文件的HEAD标签中。你同样需要将导入SWFObject脚本导入进来，代码如下：
<script type="text/javascript" src="/js/swfobject.js"></script>另一个Javascript是使用SwfObject插入SWF文件。你可以将其放置在HTML文件的任何地方。首先我们要做的是创建一个DIV标签，在没有安装合适的Flash Player时提示用户。
复制代码 代码如下:
<div id="flashcontent">
<strong>This content requires Flash Player 9 (or a more recent version).
<noscript>Make sure JavaScript is turned on. </noscript>
You need to <a href="http://www.adobe.com/shockwavehttps://img.qb5200.com/download-x/download/index.cgi?p1_prod_version=shockwaveflash" target="_blank">
<span style="text-decoration: underline;">upgrade your Flash Player</span></a></strong>
</div>
在DIV标签内你可以输入任何想输入的内容。添加图片或者反馈信息随你喜欢，因为这些内容都会被SWF文件所替换。
接下来是实现替换功能的Javascript：
复制代码 代码如下:
<script type="text/javascript">
var flashvars = { test:getURLParam("test") };
var params = {};
var attributes = {};
swfobject.embedSWF("/articlefiles/jsvars/jsvars.swf", "flashcontent", "550", "400", "9.0.0","", flashvars, params, attributes);
</script>
注意第二行，我们调用了Javascript函数'getURLParam'，这个函数已经被插入到HTML文件中。我们所传递的名字正是希望从网址中捕获的参数名。
创建Flash文件
接下来该创建Flash文件了。将一个文本框添加到舞台上。在属性面板中设置为'动态文本'，实例名为'mytextField'。通过点击'显示文本周围边框'实现在选中文本框时显示边框。
捕获传递进来的参数需要使用如下的try/catch语句:
复制代码 代码如下:
try {
var key:String; // This will contain the name of the parameter
var val:String; // This will contain the value of the parameter
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (key in flashvars) {
val = String(flashvars[key]);
mytextField.text = key+": "+val;
}
} catch (error:Error) {
// what to do if an error occurs
}
文件：jsvars_test.fla
将文件和HTML文件一并上传到服务器上。当运行文件时，你会看到文本框中的'test:'字样。
注意：如果SWF无法显示，你只看到了'升级Flash Player'字样，说明服务器上缺少某些东西。确保你已经将SwfObject文件(swfobject.js)上传到了http://myserver.com/js/swfobject.js。同时确保HTML文件中的SwfObject文件和SWF文件路径正确。如果仍然有问题，查看一下例子的源文件及路径。
接下来，试着像这样添加test参数http://www.flashmagazine.com/articlefiles/jsvars/jsvars_test.html?test=something.如果一切正常，你将会看到'test:something'，表明你已经成功的将参数传递到Flash文件中。
更进一步
你同样可以设置来自SWF文件的参数。在这个例子中http://www.flashmagazine.com/articlefiles/jsvars/jsvars.html?test=something&id=someID我们同样实现了发送参数。
FLA文件包含两个分别命名为'variablesReceived'和'variablesToSend'的文本框,以及一个用来发送新参数的按钮。这个例子的HTMl文件被设置接收'test'和'id'两个参数。首先我们为第一个文本框添加一些说明性文字：
variablesReceived.text ="Variables passed in:" + " ";接下来该接收变量了：
复制代码 代码如下:
try {
var key:String;
var val:String;
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (key in flashvars) {
val = String(flashvars[key]);
variablesReceived.appendText("\t" + key + ": " + val + " ");
}
} catch (error:Error) {
variablesReceived.appendText(error.toString());
}
这将会在第一个文本框中列举出所有的flashvars。我们在这个文件中使用到的另一个主要函数就是发送变量函数:
复制代码 代码如下:
// Sending parameters
function sendVariables(e:MouseEvent):void {
// First we grab the URL of the HTML document and split it into an array
var htmlUrl:String = ExternalInterface.call("window.location.href.toString");
// split the string at the questionmark
var splitUrl:Array = htmlUrl.split("?");
// use only the first part (ditch existing parameters)
var trimmedUrl:String = splitUrl[0];
// get the parameters we want to append to the URL
var parameters:String = variablesToSend.text;
// combine url and parameters with a new questionmark
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters);
// reload the page
navigateToURL(requester, '_self');
}
这里我们使用了一个小小技巧，通过使用'ExternalInterface.call'捕获SWF文件插入的HTML文本的网址。Flash文件只知道指向自身的网址，这个技巧突破了这个限制。ExternalInterface在SwfObject默认情况下是被打开的，但你可以手动关闭它。
我们不需要当前网址中的参数（也就是'…?test=something&id=5′）。因此我们只保留了问号之前的部分并将其存储在'trimmedUrl'变量中以备将来之用。我们捕获'variablesToSend'文本框中的参数，并将其传递到URLRequest中。通过将request传递给'navigateToURL'，浏览器会重新加载HTML页面并在'variablesReceived'文本框中显示最近提交的值对。
注意：你不能在Flash中测试它。需要将文件上传到服务器上，因为FlashVars和ExternalInterface都需要SWF被插入到浏览器中。
最后我们必须使用addEventListener为发送按钮设置调用'sendVariables'方法。
sendButton.addEventListener(MouseEvent.CLICK,sendVariables);现在你已经知道如何使用Javascript相互传递参数了。让我们用我们的所学做一些有用的事情。
创建记录状态的导航
结束之前，让我们构建一个小型菜单系统，这个系统可以高亮显示当前的点击按钮，你可以下载已完成文件或者运行案例，让我们看一下代码：
首先停止SWF的时间轴播放，为鼠标点击设置事件监听器。
stop();
// setup our 5 buttons
item1.addEventListener(MouseEvent.CLICK, gotoURL);
item2.addEventListener(MouseEvent.CLICK, gotoURL);
item3.addEventListener(MouseEvent.CLICK, gotoURL);
item4.addEventListener(MouseEvent.CLICK, gotoURL);
item5.addEventListener(MouseEvent.CLICK, gotoURL);当仍然一个按钮被点击，他们都会执行'gotoURL'函数。接下来，我们捕获来自网址的参数：
复制代码 代码如下:
// grab variables
try {
var key:String;
var val:String;
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (key in flashvars) {
val = String(flashvars[key]);
if(key == "item"){ // If the parameter is called 'item'...
if(val.substr(0,4) == "item"){ // ... and the name of the button starts with the characters 'item'...
// ... we can extract the number-part of the item-name and go to the correct frame
var frameToGoTo:Number = Number( val.substr(4,1) );
gotoAndStop( frameToGoTo+1 );
}
}
}
} catch (error:Error) {
// what to do if an error occurs
}
正如你所看到的，这和之前的做法十分相似。但这次我们传递的参数名字为'item'。这个参数是我们点击的按钮的名字。
接下来是gotoURL函数。
复制代码 代码如下:
// Get the new page
function gotoURL(e:MouseEvent):void {
// First we grab the URL of the HTML document and split it into an array
var htmlUrl:String = ExternalInterface.call("window.location.href.toString");
// split the string at the questionmark
var splitUrl:Array = htmlUrl.split("?");
// use only the first part (ditch existing parameters)
var trimmedUrl:String = splitUrl[0];
// get the name of the button clicked and set it as a parameter
var parameters:String = "item="+e.currentTarget.name;
// combine url and parameters with a new questionmark
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters);
// reload the page
navigateToURL(requester, '_self');
}
我们通过联合'item='字符以及点击的按钮名字创建自己的参数。然后将网址以及参数传递到navigateToURL方法中重新加载带有新参数的HTML页面。
事件是如何工作的：当一些东西被点击时我们使用addEventListener()方法监听点击事件，事件包含被点击的对象的引用。'currentTarget'属性会引用被点击的对象(e.currentTarget),这样一来我们就可以使用e.currentTarget.name获得其名字。
要成为一个完整的菜单系统，你还需要使加载新的网址，而不是像例子中使用相同的网址。你现在应该知道最基本的知识。它同时可以以多种方式运行。可以将网址当做变量存储在SWF中，从一个XML文件加载，或者更多其它的方式。因此我把这些交给你。如果你使用本教程创建了解决方案，请在评论中张贴网址，以便其他学习者可以看到它.
加载全部内容