天天看點

javescript腳本和flash腳本互調

flash8與javascript內建

本文作者:egoldy

文章出處:未知

文章性質:翻譯

閱讀次數:20198

釋出時間:2005-11-19

Flash8與javascript內建

本文部分内容來自emllab,在後部分,加入了本人的一個整合範例,中文譯文轉載請注明本站出處.

        在過去的一年裡,對于開發人員來說使用flash與javascript通訊總會碰到一些麻煩的事情,從flash調用javascript函數已經沒有什麼問題了,因為我們可以使用getURL方法來直接調用,但是要想使用javascript傳回flash在許多浏覽器上幾乎是不可能的。但是現在可以了。

Flash8的出現,這件事就變的比較容易了。J

The ExternalInterface API

        之前我們使用flash調用javascript函數,一般使用這樣的方法:

代碼:
getURL(“javascript:alert(‘hello webstudio.com.cn’);”);

但是使用這種方法從flash調用javascript函數仍存在許多困難。特别是在處理多個javascript函數調用問題上。ExternalInterface API可以與javascript實作無縫調用,并且它的能力達到可以在flash時間線使用。

在我們正式進入它的使用方法之前,我們需要確定在flash時間上可用,就要導入它的類向這樣:

代碼:
import flash.external.*;

現在它已經允許我們做的第一件事就是可以調用javascript函數了。

Call 調用方法

call方法對于ExternalInterface對象來說是一個靜态方法,也就是說我們不需要使用ExternalInterface對象的執行個體來調用方法,我們可以直接通過對象類來調用,向這樣:

代碼:
ExternalInterface.call(functionName:String,Parameters);

這個方法有兩個參數:

·    functionName – 你想要調用的javascript函數名要以字元串的形式

·    Parameters – 需要傳遞給javascript函數的參數,用逗号分開,是可選的。

這些是基本的内容,現在讓我們來看一個例子:

1.    建立一個flash文檔命名為external1.fla.

2.    建立兩個層上面的層命為AS,下面的層命名為”内容”

3.    在内容層裡面,建立一個文本域,将它設定為輸入文本域,打開顯示邊框以友善你能看到,并給它取個名字為alert_txt,将它放在場景的左邊。

4.    仍然在内容這一層上,拖動一個按鈕元件于場景中并把它放在動态文本的右邊,設定它的label為”Alert”并給它起個名字為alert_butn.

5.    選擇上方的as層在第一幀上輸入代碼,

6.    //調用alert

7.    

代碼:

import flash.external.*;

alert_butn.clickHandler = function() {

   ExternalInterface.call("alert", alert_txt.text);

}

前面部分的代碼是導入ExternalInterface類包。然後為按鈕元件設定事件,當點選時調用javascript函數,并将文本中輸入的文本通過externalInterface傳遞給javascript函數。

現在釋出你的影片,将它和html放在伺服器上,當你在伺服器上測試時不論你在文本中輸入什麼資訊,它都将顯示在alert對話框中,但是如果你在本地測試,你可能就會發現當你點選按鈕時,什麼也沒發生,這是由flashplayer的安全特性造成的。

示範檔案

上面這個範例是一個方法的例子,使用getURL方法也可以做到,然而externalinterface不隻是能做到這些,除了發送資訊給javascript,它還可以通過addCallback方法接收從javascript傳回的資訊。

addCallback 方法

AddCallback方法允許javascript調用flash時間上函數,基本的文法結構如下:

代碼:
ExternalInterface.addCallback(functionID:String,instance:Object,functionName:Function);

與call方法類似,它也是一個靜态方法,它有三個參數

·    functionID - 從 JavaScript 調用 ActionScript 函數時可使用的名稱。此名稱不必與 ActionScript 方法的實際名稱比對。

·    instance - this 在該方法中被解析成的對象。此對象不一定是在其上可找到該方法的對象,您可以指定任何對象(或 null)。

·    functionName - 要從 JavaScript 調用的 ActionScript 方法。

現在讓我們開始一個例子,在這個例子中我們将使用flash調用javascript的指令來請示使用者輸入色值,當色值輸入後點選ok,對象傳回到flash并更改它的色彩,如下方法:

1.    建立一個flash文檔命名為external2.fla.

2.    與第一個例子相同,建立兩層上層命名為as.下層命名為“内容”。

3.    在内容層拖動一個按鈕元件至場景中,放在左上方,将label設為”變色”,執行個體名為change_butn.

4.    確定目前在”内容層”,繪制一個色值為0x000000的盒子,大小為100*100,當然這個沒有限制。

5.    将這個方塊轉換為movieclip.執行個體名稱命名為rec_mc.

6.    在第一幀上輸入代碼如下:

代碼:

import flash.external.*;

//改變方塊的色彩

function onChange(clr:Number) {

var temp_color:Color = new Color(rec_mc);

   temp_color.setRGB(clr);

}

//允許javascript調用onChang函數

ExternalInterface.addCallback("onChange", this, onChange);

//打開命今視窗

change_butn.clickHandler = function() {

   ExternalInterface.call("callPrompt", "你想用什麼的色彩? (ex: 0xff0000)");

}

在代碼的前邊我們要先導入externalinterface類包,然後我們建立一個能改變場景中方塊色彩的函數,完成後,我們調用addCallback方法以使javascript可以調用flash的onChang函數。最後,我們針對按鈕建立事件來調用javascript指令。

你需要釋出swf和html,然後用編輯軟體打開編輯器,如果你隻是從flash調用javascirpt,那麼你什麼也不用做。但是如果你需要使用javascirpt調用flash函數,還有一些小的工作需要做。

在tilte标簽的下方加入下面的javascript代碼:如下:

代碼:

<script language=JavaScript>

var me; //代表swf的id

//擷取正确的引用

function getID(swfID) {

   if (navigator.appName.indexOf("Microsoft") > -1) {

      me = window[swfID];

   } else {

      me = document[swfID];

   }

}

//下面這段調用onChang函數并傳回到flash.

function makeCall(str){

   me.onChange(str);

}

//下面這個函數是被flash調用的。

function callPrompt(str){

   makeCall(prompt(str));

}

</script>

開始,我們建立變量me來存放swf的引用。如果沒有它,我們不能調用flash函數。然後我們使用函數getID通過條件針對不同的浏覽器來設定引用,之後,我們建立makeCall函數,用來調用flash函數,最後我們建立由flash來調用的函數callPromt().它将調用makeCall函數來發送資訊傳回到flash.

在html的body标簽的屬性中加入onload,并設定它等于getID函數,如下:

代碼:
<body bgcolor="#ffffff" οnlοad="getID('external2');">

注意,當我們設函數給onload事件,我們傳遞給它swf的id.它可以在swf的嵌入位置找到,現在,當頁初始化完成後,函數getID将被調用,變量me就會被設定,以使javascript可以調用flash函數。

将檔案上傳到伺服器上,并進行測試,當你點選按鈕并在提示中輸入色彩值,flash中的方塊色就會改變。如下。

示範檔案

在彈出視窗時如果你沒有輸入色彩值,而是點選了取消,會傳回null空回flash.flash中的方塊仍會保持原色。

最終源檔案下載下傳(source)

本人對上面的内容進行了一下整合,制作了一個終合範例,內建有顯示swf資訊,擷取網址,調用對話框.

繼續閱讀