JavaScript 與 Macromedia Flash 之間的通訊範例

以下是 Macromedia Flash 與使用 JavaScript 的 HTML 文件之間的通訊範例, 您可以照步驟重建各個範例。
前提:

需具備 JavaScript 的使用知識才能充分運用這些技巧。JavaScript 不在本 TechNote 的範圍之內, 不過, 您可以透過許多資源, 學習 JavaScript 的知識。如需詳細資訊, 請參閱本文件底部的其他資訊。資深的程式碼撰寫者, 請務必閱讀文件使用 Flash 撰寫程式 *, 取得控制 Macromedia Flash Player 的 JavaScript 方法概觀。

本 TechNote 中所討論的 Flash/JavaScript 通訊有三種基本類型:

* JavaScript 對 Flash 的通訊 - 使用 Flash Player 的 JavaScript 方法
* Flash 對 JavaScript 的通訊 - 使用 Flash 的 fscommand
* Flash 對 Flash 的通訊 - 使用本機連線物件或結合以上兩種技巧

並非所有瀏覽器都有瀏覽器程式語言的功能。為了與 Flash Player 通訊, 瀏覽器必須內建 Flash Player 所能「接聽」的連結。下列為瀏覽器需求:

*
Netscape Navigator 3.0 - 4.7x, 以及 Netscape 6.2 或更新版本

(Windows 95/98/NT/2000/XP 或 MacOS；採用 LiveConnect 與 Java)
*
Internet Explorer 3.0 及更新版本

(僅限 Windows 95/98/NT/2000/XP；採用 ActiveX)

注意: Macintosh 上的 Internet Explorer 與 Netscape 6.0 之前的版本不支援此方法。如需詳細資訊, 請參閱本文件底部的其他資訊。
JavaScript 對 Flash 的通訊

本範例示範如何使用 Flash 方法, 從 HTML 輸入文字欄位將變數傳送到同份 HTML 文件中的內嵌式 Flash 檔案。HTML 輸入欄位中所輸入的日期, 會使用 Flash 的 SetVariable 方法, 填入 Flash 檔中的文字欄位。

檢視範例: 範例 1 *
下載原始檔:

javascript_to_flash.zip (17K)

遵循步驟:

在 Flash 中
1. 在 Flash 中建立新檔案, 以 javascript_to_flash.fla 命名並儲存。
2. 使用「文字工具」, 在「舞台」上插入一個文字欄位。
3.

選取文字欄位, 在「屬性」面板中, 從下拉式選單中選擇「動態文字」, 然後在變數欄位中輸入 myVar。

注意: 最佳編碼方式就是使用需要有 myVar.text 的「實體」欄位。由於此方法既簡單又能與 Flash 4 和 5 逆向相容, 所以我們選擇使用此變數欄位。

4. 儲存檔案。
5. 使用「發佈」功能, 選擇「僅限 Flash」HTML 樣版, 從 Flash 同時發佈 HTML 頁面以及 Flash SWF, 這些動作會在與儲存原始 FLA 檔案相同的資料夾中建立。
在 Dreamweaver 中

以下的指示是針對 Dreamweaver, 不過, 您可以使用任何的 HTML 編輯器, 利用相同的技巧, 手動編輯程式碼。
1. 開啟 Flash 在上述步驟 5 中發佈的 HTML 檔案。
2.

插入 Flash 媒體及 OBJECT/EMBED 程式碼
1. 選擇「插入 > 媒體 > Flash」, 然後選擇上面建立的 SWF"javascript_to_flash.swf"。
2. 選取 Flash 影片預留位置。
3. 使用「檢視 > 程式碼」, 開啟 Dreamweaver 的程式碼檢視。需要著重的 OBJECT 及 EMBED 標籤會反白顯示。
4.

如果程式碼尚未出現在 OBJECT 標籤中, 請輸入值 id="myFlash"。另外還要確定 name="myFlash" 此值沒有出現在程式碼的第一個部份中, 也就是標籤的主要 OBJECT 部份。




3.
建立 HTML 中的表單欄位
1. 使用「檢視 > 設計」, 返回「設計檢視」。
2. 選擇「插入 > 表單物件 > 文字欄位」(出現新增表單標籤提示時, 按一下「是」)。
3.

將文字欄位的 HTML 標籤修改如下:

完成文字欄位的內容變更後, 會自動呼叫 onChange 處理常式。變更生效時, 會呼叫 doPassVar() 函數 (請看下個步驟)。
4.
建立用以傳遞值的 Javascript 函數

複製並貼上 HTML 原始碼中介於 與 標籤之間的下列 JavaScript:



當文字欄位出現變更時, 會呼叫此 JavaScript 函數, 它使用 Flash JavaScript 方法 SetVariable, 將 Flash 影片中的 myVar 變數設成在 HTML 文字表單欄位中輸入的值。
5. 選擇「檔案 > 儲存」。
6. 使用 F12 在瀏覽器中測試或預覽檔案。

回到頁首

Flash 對 JavaScript 的通訊

除了從 HTML 頁面將資料傳送到 Flash 影片外, 您也可以反向操作。本範例示範如何使用 Flash 的 fscommand * 動作, 將字串從 Flash 傳送到 JavaScript 處理常式。為了示範目的, 本範例會顯示 JavaScript 警示方塊, 上面有從 Flash 傳送到瀏覽器的值。

檢視範例: 範例 2 *
下載原始檔:

flash_to_javascript.zip (17K)

遵循步驟:

在 Flash 中
1. 在 Flash 建立新檔案, 以 flash_to_javascript.fla 命名並儲存。
2. 使用「文字工具」, 將文字欄位置於「舞台」上。
3. 選取文字欄位, 在「屬性」面板中, 從下拉式選單中選擇「輸入文字」。選取邊框圖示, 就能看到欄位 (請參閱上圖的步驟指引)。
4. 在變數欄位中輸入 inputVar。
5. 將按鈕拖曳到「舞台」上。您可以選擇「視窗 > 內建元件庫 > 按鈕」, 尋找範本按鈕。
6. 選取「按鈕」並開啟「動作」面板 (「視窗 > 動作」)。
7.

將下列 fscommand 動作加到按鈕:

on(release) {
fscommand ("send_var", inputVar);
}

8. 儲存檔案。
9. 使用「發佈」功能, 選擇「僅限 Flash」HTML 樣版, 從 Flash 同時發佈 HTML 頁面以及 Flash SWF, 這些動作會在與儲存原始 FLA 檔案相同的資料夾中建立。
在 Dreamweaver 中

以下的指示是針對 Dreamweaver, 不過, 您可以使用任何的 HTML 編輯器, 利用相同的技巧, 手動編輯程式碼。
1. 開啟上述步驟 9 中 Flash「發佈」命令建立的 HTML 檔案。
2.
插入 Flash 媒體及 OBJECT/EMBED 程式碼
1. 選擇「插入 > 媒體 > Flash」, 然後選擇上面建立的 SWF"javascript_to_flash.swf"。
2. 選取 Flash 影片預留位置。
3. 使用「檢視 > 程式碼」, 開啟 Dreamweaver 的程式碼檢視。需要著重的 OBJECT 及 EMBED 標籤會反白顯示。
4.

如果程式碼尚未出現在 OBJECT 標籤中, 請輸入值 id="myFlash"。另外還要確定 name="myFlash" 此值沒有出現在程式碼的第一個部份中, 也就是標籤的主要 OBJECT 部份。



3.
建立用以擷取與顯示值的 Javascript 函數
1.

開啟 HTML 文件的開頭標籤時, 插入下列程式碼:





執行警示的特定函數以紅色加強顯示。如需有關 Javascript 的詳細資訊, 請參閱其他資訊。
2. 選擇「檔案 > 儲存」。
3. 使用 F12 在瀏覽器中測試或預覽檔案。

回到頁首

Flash 對 Flash 的通訊

相同 HTML 文件中的兩個或多個 Macromedia Flash 影片, 可以透過結合以上討論的兩種技巧而互相傳送訊息。您可以使用 fscommand 將訊息從 Flash 影片傳送到網頁瀏覽器, 再使用 Flash 的JavaScript 方法將訊息從瀏覽器傳送到 Flash 影片。如需此項詳細資訊, 請參閱 Flash 影片之間通訊的範例 (TN 15692) *。

從使用 Macromedia Flash MX 開始, 您可以將本機連線物件用於 Flash 對 Flash 的通訊。這可以使同份 HTML 文件或兩個瀏覽器視窗中的兩個 Flash 影片, 透過 JavaScript 或 fscommand 動作互相傳送訊息。如需詳細資訊, 請參閱在 Macromedia Flash MX 中使用本機連線物件 *。
回到頁首

其他資訊

如需從函數傳送的 JavaScript 命令的技術文件 (含範例), 請參閱使用 Flash 撰寫程式 *。如需有關 JavaScript 的詳細資訊, 請造訪 Webmonkey.com。

如需 Macintosh 上的 Internet Explorer 詳細資訊, 請參閱 Macintosh 平台上的 Flash 與 Internet Explorer 問題 (TechNote 13638) *。

如需 Netscape 與 Mozilla 支援資訊, 請參閱 Netscape 6, 6.01 和 Mozilla (Technote 14625) *。

如需瀏覽器所支援的不同功能完整列表, 請參閱各種瀏覽器所支援的 Flash 功能詳盡清單 (Technote 14159) *。

如需可控制 Macromedia Flash Player 的 JavaScript 方法概觀, 請參閱使用 Flash 撰寫程式 (文件) *。

摘自：http://www.adobe.com/tw/support/flash/ts/documents/javascript_comm.htm#ftjc