首頁 > 開發者 > JavaScript
標籤：actionscript3.0 javascript flash 互動 前端
Flash是可以輕鬆與網頁互動資料的，不然為何Flash會有這麼大的生命力呢？只是這樣編程比較麻煩而已，又要調試Flash，然後又要放到伺服器上調試。不過這樣的方式能夠收到很好的效果，Flash強大的繪圖功能、圖形功能，能夠與網頁的參數傳遞聯絡起來，配合後端的伺服器語言，能夠收到很大效果。
下面舉個例子用ActionScript3.0來說明這個問題，如：
IE6效果：
Firefox效果：
一旦瀏覽器裝上Flash外掛程式，Flash就能夠輕鬆與網頁互連訊息。無論在任何瀏覽器，現在基本上使用者都會裝上Flash組件的，可以這樣說，幾乎就沒有不裝Flash組件的瀏覽器。
一、Flash部分
1、首先，建立一個ActionScript3.0的Flash，建立之後就儲存為webPage.fla，這次的Flash無須這麼大的尺寸，否則網頁中會有很多的留白，設定大小為500x100px就可以了。播放器的版本按照預設就可以，因為使用者的瀏覽器Flash組件會自動更新的。這個不用管。
2、通過視窗->組件，或者Ctrl+F7開啟組件面板，利用內建的按鈕、標籤文本、輸入框組件布置介面。
3、拖出如下的介面，設定各個組件的屬性如下，設定其text值，也就是要顯示的文字，為部分要控制的組件設定執行個體名稱，也就是Id，比如按鈕設定成Button1，輸入框設定成EditField1，一會兒要給網頁JavaScript控制的標籤文本的text值清空，其執行個體名稱為Label1。
4、之後點擊第一幀，開啟動作面板，或者點擊F9，寫入如下的代碼：
import flash.external.ExternalInterface;flash.system.Security.allowDomain("*");flash.system.Security.allowInsecureDomain("*");//設定允許所有網站都允許Flash與網頁之間互動Button1.addEventListener("click",function(){//點擊Button1這個按鈕ExternalInterface.call("show",EditField1.text);//則調用JavaScript中的function show(message){}函數，其中message這個參數值，由EditField1輸入的東西填充});function JavaScriptShow1(message1){//定義一個函數，一旦這個函數觸發則把傳來的值，填充Label1這個標籤文本Label1.text=message1;}ExternalInterface.addCallback("JavaScriptShow1",JavaScriptShow1);//註冊JavaScriptShow1這個函數，其對外名稱為JavaScriptShow1，一般都應該相同的//網頁調用Flash對象的JavaScriptShow1的方法，則相當於調用ActionScript中的JavaScriptShow1(message1){}函數
5、此時Flash的部分完畢，選擇檔案->發布，開啟Flash儲存的檔案夾。其實上面的內容比《【ActionScript】ActionScript3.0的Helloworld》（點擊開啟連結）沒複雜多少，只是多了兩句註冊ActionScript與JavaScript的互動的語句而已。
二、網頁的部分
1、之後，要把這個Flash布置到網頁上。Flash發布之後，會在網頁中產生兩個東西一個html與一個swf，核心檔案是.swf檔案，html檔案不能照搬的，只能借鑒其中的代碼，否則不能相容野狐禪、Google等瀏覽器。
這個由Flash產生webPage.html頁面，可以借鑒的代碼如下：
2、由於Flash禁用了Flash調用本地檔案的功能。你只能把這個webPage.swf拷貝到你的伺服器上調試。之後在伺服器上建立一個.html的頁面，這裡以swf.html與webPage.swf同目錄做例子，如果不同例子請自己設定好絕對路徑，假設是swf.html，swf.html的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="zh-CN" xml:lang="zh-CN"><head><title>webPage</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>Flash與網頁互動<input type="text" id="text1" /><button onclick="toFlash()">發資訊給Flash！</button><!--這段代碼的部分可以在發布出來的html中截取--><div><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="100" id="webPage" align="middle"><!--這裡的id是為了flash給IE系列瀏覽器控制--><!--對IE有效代碼--><param name="movie" value="webPage.swf" /><!--為IE瀏覽器指明flash的路徑--><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="play" value="true" /><param name="loop" value="true" /><param name="wmode" value="window" /><param name="scale" value="showall" /><param name="menu" value="true" /><param name="devicefont" value="false" /><param name="salign" value="" /><param name="allowScriptAccess" value="always" /><!--這裡一定要設定成always，開啟Javascript與Actionscript的互動許可權--><!--對野狐禪、Google等有效代碼--><embed src="webPage.swf" width="500" height="100" id="webPage"></embed><!--這裡的id是為了flash給野狐禪、Google等瀏覽器控制，src的值為野狐禪、Google等瀏覽器指明flash的路徑--></object></div></body></html>之後的JavaScript布局，是ActionScript與JavaScript互動的核心，代碼如下：
<script type="text/javascript">//給ActionScript所調用的JavaScript函數，message這個參數被ActionScript傳遞過來的值所填充 function show(message){ alert(message); } //擷取Flash對象的函數，不同的對象有不同的方法。為了相容，只能這樣寫。 function getFlash(movieName){ if (window.document[movieName]) { window.document[movieName]; } if (navigator.appName.indexOf("Microsoft Internet") == -1) { if (document.embeds && document.embeds[movieName]) return document.embeds[movieName]; } else { return document.getElementById(movieName); } } //擷取Flash對象 var flash1 = getFlash('webPage'); //JavaScript調用ActionScript中註冊為JavaScriptShow1的函數 function toFlash(){ var text1 = document.getElementById("text1").value; flash1.JavaScriptShow1(text1); }</script>
三、總結
綜上所述，webPage.swf與swf.html的互動如：
【ActionScript】Flash與網頁的互動，ActionScript與JavaScript的互動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
