快捷導(dǎo)航

javascript向flash swf文件傳遞參數(shù)值注意細(xì)節(jié)

更新時(shí)間：2012年12月11日 11:18:48 作者：

如何使用javascript向SWF文件傳遞參數(shù)?在網(wǎng)上找了一個(gè)完整的教程，很有啟發(fā)性和實(shí)用性，如下是完整實(shí)現(xiàn)的步驟,需要的朋友可以參考下

問題：如何使用javascript向SWF文件傳遞參數(shù)？
在網(wǎng)上找了一個(gè)完整的教程，很有啟發(fā)性和實(shí)用性，如下是完整實(shí)現(xiàn)的步驟：
配置SwfObject：
Swfobject2是目前檢測(cè)用戶是否安裝Flash的最佳方法。它被認(rèn)為是‘行業(yè)標(biāo)準(zhǔn)'，并且Adobe所有產(chǎn)品的新版本（Flex4，F(xiàn)lash CS5）都會(huì)使用SwfObject來檢測(cè)Flash Player。
先要下載，解壓ZIP文件，復(fù)制swfobject.js文件到你的web服務(wù)器上，根目錄下創(chuàng)建名為'js'根文件夾是個(gè)不錯(cuò)的想法。（因此文件位置應(yīng)該是http://myserver.com/js/swfobject.js)。我們會(huì)在以后創(chuàng)建的HTML文件中參考這個(gè)文件的。如果你想使用ExpressInstall功能（為用戶提供簡(jiǎn)單的升級(jí)方法），你必須將expressInstall.swf復(fù)制到相同的文件夾下。
配置HTML文件：
HTML文件包括兩個(gè)Javascript。一個(gè)用來抓取來自網(wǎng)址的參數(shù)。這是由Matt White創(chuàng)建的，它雖然簡(jiǎn)單但十分有效。代碼如下：

復(fù)制代碼代碼如下:

 
<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標(biāo)簽中。你同樣需要將導(dǎo)入SWFObject腳本導(dǎo)入進(jìn)來，代碼如下：
<script type="text/javascript" src="/js/swfobject.js"></script>另一個(gè)Javascript是使用SwfObject插入SWF文件。你可以將其放置在HTML文件的任何地方。首先我們要做的是創(chuàng)建一個(gè)DIV標(biāo)簽，在沒有安裝合適的Flash Player時(shí)提示用戶。

復(fù)制代碼代碼如下:

 
<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  target="_blank"> 
<span style="text-decoration: underline;">upgrade your Flash Player</span></a></strong> 
</div> 

在DIV標(biāo)簽內(nèi)你可以輸入任何想輸入的內(nèi)容。添加圖片或者反饋信息隨你喜歡，因?yàn)檫@些內(nèi)容都會(huì)被SWF文件所替換。
接下來是實(shí)現(xiàn)替換功能的Javascript：

復(fù)制代碼代碼如下:

 
<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> 

注意第二行，我們調(diào)用了Javascript函數(shù)'getURLParam'，這個(gè)函數(shù)已經(jīng)被插入到HTML文件中。我們所傳遞的名字正是希望從網(wǎng)址中捕獲的參數(shù)名。
創(chuàng)建Flash文件
接下來該創(chuàng)建Flash文件了。將一個(gè)文本框添加到舞臺(tái)上。在屬性面板中設(shè)置為'動(dòng)態(tài)文本'，實(shí)例名為'mytextField'。通過點(diǎn)擊'顯示文本周圍邊框'實(shí)現(xiàn)在選中文本框時(shí)顯示邊框。
捕獲傳遞進(jìn)來的參數(shù)需要使用如下的try/catch語句:

復(fù)制代碼代碼如下:

 
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文件一并上傳到服務(wù)器上。當(dāng)運(yùn)行文件時(shí)，你會(huì)看到文本框中的'test:'字樣。
注意：如果SWF無法顯示，你只看到了'升級(jí)Flash Player'字樣，說明服務(wù)器上缺少某些東西。確保你已經(jīng)將SwfObject文件(swfobject.js)上傳到了http://myserver.com/js/swfobject.js。同時(shí)確保HTML文件中的SwfObject文件和SWF文件路徑正確。如果仍然有問題，查看一下例子的源文件及路徑。
接下來，試著像這樣添加test參數(shù)http://www.flashmagazine.com/articlefiles/jsvars/jsvars_test.html?test=something.如果一切正常，你將會(huì)看到'test:something'，表明你已經(jīng)成功的將參數(shù)傳遞到Flash文件中。
更進(jìn)一步
你同樣可以設(shè)置來自SWF文件的參數(shù)。在這個(gè)例子中http://www.flashmagazine.com/articlefiles/jsvars/jsvars.html?test=something&id=someID我們同樣實(shí)現(xiàn)了發(fā)送參數(shù)。
FLA文件包含兩個(gè)分別命名為'variablesReceived'和'variablesToSend'的文本框,以及一個(gè)用來發(fā)送新參數(shù)的按鈕。這個(gè)例子的HTMl文件被設(shè)置接收'test'和'id'兩個(gè)參數(shù)。首先我們?yōu)榈谝粋€(gè)文本框添加一些說明性文字：
variablesReceived.text ="Variables passed in:" + " ";接下來該接收變量了：

復(fù)制代碼代碼如下:

 
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()); 
} 

這將會(huì)在第一個(gè)文本框中列舉出所有的flashvars。我們?cè)谶@個(gè)文件中使用到的另一個(gè)主要函數(shù)就是發(fā)送變量函數(shù):

復(fù)制代碼代碼如下:

 
// 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'); 
} 

這里我們使用了一個(gè)小小技巧，通過使用'ExternalInterface.call'捕獲SWF文件插入的HTML文本的網(wǎng)址。Flash文件只知道指向自身的網(wǎng)址，這個(gè)技巧突破了這個(gè)限制。ExternalInterface在SwfObject默認(rèn)情況下是被打開的，但你可以手動(dòng)關(guān)閉它。

我們不需要當(dāng)前網(wǎng)址中的參數(shù)（也就是'…?test=something&id=5′）。因此我們只保留了問號(hào)之前的部分并將其存儲(chǔ)在'trimmedUrl'變量中以備將來之用。我們捕獲'variablesToSend'文本框中的參數(shù)，并將其傳遞到URLRequest中。通過將request傳遞給'navigateToURL'，瀏覽器會(huì)重新加載HTML頁面并在'variablesReceived'文本框中顯示最近提交的值對(duì)。

注意：你不能在Flash中測(cè)試它。需要將文件上傳到服務(wù)器上，因?yàn)镕lashVars和ExternalInterface都需要SWF被插入到瀏覽器中。

最后我們必須使用addEventListener為發(fā)送按鈕設(shè)置調(diào)用'sendVariables'方法。
sendButton.addEventListener(MouseEvent.CLICK,sendVariables);現(xiàn)在你已經(jīng)知道如何使用Javascript相互傳遞參數(shù)了。讓我們用我們的所學(xué)做一些有用的事情。

創(chuàng)建記錄狀態(tài)的導(dǎo)航
結(jié)束之前，讓我們構(gòu)建一個(gè)小型菜單系統(tǒng)，這個(gè)系統(tǒng)可以高亮顯示當(dāng)前的點(diǎn)擊按鈕，你可以下載已完成文件或者運(yùn)行案例，讓我們看一下代碼：
首先停止SWF的時(shí)間軸播放，為鼠標(biāo)點(diǎn)擊設(shè)置事件監(jiān)聽器。
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);當(dāng)仍然一個(gè)按鈕被點(diǎn)擊，他們都會(huì)執(zhí)行'gotoURL'函數(shù)。接下來，我們捕獲來自網(wǎng)址的參數(shù)：

復(fù)制代碼代碼如下:

 
// 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 
} 

正如你所看到的，這和之前的做法十分相似。但這次我們傳遞的參數(shù)名字為'item'。這個(gè)參數(shù)是我們點(diǎn)擊的按鈕的名字。
接下來是gotoURL函數(shù)。

復(fù)制代碼代碼如下:

 
// 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'); 
} 

我們通過聯(lián)合'item='字符以及點(diǎn)擊的按鈕名字創(chuàng)建自己的參數(shù)。然后將網(wǎng)址以及參數(shù)傳遞到navigateToURL方法中重新加載帶有新參數(shù)的HTML頁面。

事件是如何工作的：當(dāng)一些東西被點(diǎn)擊時(shí)我們使用addEventListener()方法監(jiān)聽點(diǎn)擊事件，事件包含被點(diǎn)擊的對(duì)象的引用。'currentTarget'屬性會(huì)引用被點(diǎn)擊的對(duì)象(e.currentTarget),這樣一來我們就可以使用e.currentTarget.name獲得其名字。

要成為一個(gè)完整的菜單系統(tǒng)，你還需要使加載新的網(wǎng)址，而不是像例子中使用相同的網(wǎng)址。你現(xiàn)在應(yīng)該知道最基本的知識(shí)。它同時(shí)可以以多種方式運(yùn)行?？梢詫⒕W(wǎng)址當(dāng)做變量存儲(chǔ)在SWF中，從一個(gè)XML文件加載，或者更多其它的方式。因此我把這些交給你。如果你使用本教程創(chuàng)建了解決方案，請(qǐng)?jiān)谠u(píng)論中張貼網(wǎng)址，以便其他學(xué)習(xí)者可以看到它.

您可能感興趣的文章: