JavaScript向Flash 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/shockwave/download/index.cgi?p1_prod_version=shockwaveflash" target="_blank">
<span style="text-decoration: underline;">upgrade your Flash Player</span></a></strong>
</div>

可在DIV标签内添加任意内容，如图片或反馈信息，这些内容将被SWF文件替换。

接下来是实现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>

注意第二行，我们调用了已嵌入HTML文件的JavaScript函数'getURLParam'，传递的参数名即为目标URL中捕获的参数名称。

创建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
} 

将文件与HTML文件一同上传至服务器。运行文件后，文本框中应显示'test:'字样。

注意：若SWF无法显示且仅见'升级Flash Player'提示，说明服务器缺少必要文件。请确保SwfObject文件(swfobject.js)已上传至http://myserver.com/js/swfobject.js，并检查HTML文件中SwfObject与SWF文件的路径是否正确。若仍有问题，请查看示例源文件及路径。

尝试在URL后添加test参数，如http://www.flashmagazine.com/articlefiles/jsvars/jsvars_test.html?test=something。若操作成功，将显示'test:something'，表明参数已成功传递至Flash文件。

进阶应用

进阶应用

还可设置SWF文件向HTML传递参数。例如在URL 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与Flash相互传递参数的方法。让我们利用所学知识构建实用功能。

创建记录状态的导航

最后，构建一个小型菜单系统，可高亮显示当前点击的按钮。可下载已完成文件或运行案例，代码如下：

首先停止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文件加载，或采用其他方式。具体实现留待读者探索。若使用本教程创建解决方案，请在评论中张贴网址，供其他学习者参考。