知道 Flash 輸出 HTML 標籤時，有支援背景透明嗎？你通常會把這項功能用在哪裡呢？看過我之前介紹過的 [ 跟著滑鼠跑 ] 的效果嗎？有沒有想過結合這兩者呢？

什麼意思？在 Flash 還沒那麼盛行之前，在網頁上要製作圖像隨著滑鼠飛來飛去，通常都是將這個圖像包在 Layer 中，然後藉由 JavaScript 來控制這個 Layer 跟著滑鼠跑。不過到了 Flash 的時代，你可不會只放個靜態圖像，或是只放個 GIF 動畫跟著飄吧，你可能會希望能用 Flash 來製作這個小玩具，讓它跟著網頁上的滑鼠移動。但是你並不需要為了這小小的特效，還要將整個網頁改成 Flash 版，這時候你就會將腦筋動到 [ 背景透明 ] 的效果了。

不過，粉不如人意的是，當你的 Flash 輸出成背景透明的 HTML 標籤時，除了你有畫圖像或動畫的部分以外，其他透明的地方都會當作是沒有選到 Flash。問題就來了，那當我們在這塊透明的場景上移動我們的滑鼠時，我們該如何得知 _xmouse 與 _ymouse 呢？因為這個時候可就無法取得這項滑鼠資訊囉，誰叫滑鼠現在是在透明的場景部份移動呢！

為了做到這項效果，就必須配合一點點的 JavaScript，讓 JavaScript 來取得滑鼠在 HTML 上移動的狀況，然後將 x, y 座標傳進 SWF 中，讓你的小玩具可以跑到指定的座標位置。來看看以下的製作方法吧：

首先，在場景上僅需準備你的小玩具，為求介紹方便，我僅建立一個圓球代表，並命名為 my_mc。然後請在這個 MC 的 onEnterFrame() 中，撰寫漸進式移動的程式碼，讓它可以慢慢的游移到一個指定的座標去。在以前教過的範例中，這個指定的座標 targetX, targetY 可能就直接等於 _xmouse, _ymouse，不過現在不行了，等下我們會改用 SWF 以外的 HTML 中的 JavaScript 來改變這兩個變數 _root.targetX 與 _root.targetY。

接著來看看，我將輸出的 HTML 做了哪些調整：

咖啡色的部份，是我隨意打的內容，用來模擬原 HTML 網頁的內容，其中還包含了連結，等下可以測試証明透明的 Flash 仍然可以點選到後面 HTML 中的連結。

紅色的部份，是說明我將 Flash 用一個 包起來，並且設定這個區塊的 [ 位置設定方式 ] 是採用絕對位置的方式，並設定了 top, left 都是由 0 開始，也就是左上角啦。

SWF 的名稱編號，我用藍色框起來，分為兩個，一個是給 IE 瀏覽器看的，一個是給 FireFox 瀏覽器看的，我命名為 "SWF"。

SWF 標籤的屬性設定中，其中多了一項 "wmode"，全名就是 window mode 啦，這裡設定為透明。

以上的部份，就完成一個 [ 透明 Flash 壓在 HTML 網頁上 ] 的基本效果了，接下來，是如何藉由 JavaScript 將 x, y 座標傳送進 Flash 中。請看到最下面的紫紅色部分，那是一段 JavaScript，意思是當滑鼠在網頁內不斷移動時(document.body.onmousemove)，會執行 flash_onMouseMove() 這個自訂函式。

而在 flash_onMouseMove() 自訂函式中所做的，就是設定 HTML 視窗中名叫 "SWF" 的元素，執行它自己所擁有的函式 SetVariable()，這個函式可以指定 Flash 中變數的值，以上圖來說，我就設定了 targetX 等於 event.x，以及 targetY 等於 event.y。這裡的 event.x 是 JavaScript 中的事件所產生的，代表的就是產生事件時的滑鼠 x 座標。同理 event.y 代表的是滑鼠的 y 座標。

測試後就可以發現，我們的 Flash 小玩具已經可以跟著 HTML 中的滑鼠座標作移動囉：

不過，好笑的是，當你移出 Flash 檔案範圍之外的話，那就破功囉：

所以可能你的 Flash 檔案寬高指定大一些即可。

以上，就是這次所介紹的內容。

在我這次要準備這個內容的時候，雖然主要要探討的是 [ Flash 的透明背景無法偵測到滑鼠事件 ]，不過我原本也想順便介紹 Flash 與 JavaScript 之間的整合，介紹最近發佈的 Flash JavaScript Integration Kit (http://www.osflash.org/doku.php?id=flashjs&DokuWiki=65556c62c2eb5bc58d6678fc89a755c4)，不過，在我試做的過程中，當我想要利用 JavaScript 將資料傳遞給 Flash 時，卻一直遇到問題，所以才放棄這項 DEMO，改以基本方式來介紹。

Flash JavaScript Integration Kit 在 [ JavaScript -> Flash ] 的部份，是經過了以下幾個步驟：
1. JavaScript 將要帶入的參數，編碼成一句字串，裡面內含了所有參數的 [ 資料型態 ] 與 [ 值 ] 的資訊。
2. JavaScript 在 HTML 畫面上，動態寫出 Flash 的標籤，檔案指向一個作為 gateware 的 SWF，我就叫他 gateware.swf 好了。在產生這段 Flash 的標籤時，便將第一步驟求得的編碼字串，當作參數帶進 gateware.swf 中。
3. 在 gateware.swf 中，會拆解取得的字串，得知 JavaScript 想要呼叫哪個 ActionScript 的 Function，以及相關的參數，參數的部份包含了型態與值，於是便將 [ 參數集 ] 重新組成一個物件陣列。
4. 透過 LocalConnection 將第三步驟得到的物件陣列，呼叫我們自己製作的 SWF 中一個特定的 Function，將這個物件陣列傳遞到我們的 SWF 中。這個特定函式會知道要執行哪個我們希望執行的 Function 以及參數為何，然後就執行囉。

我遇到的問題是，一些資料帶不進來，這方面好像還有些 bug 存在，所以嘗試了一陣子之後，暫時不繼續深入研究，其實光是一步一步的拆解 Flash JavaScript Integration Kit 的原始碼與 *.as 檔，以及 JavaScript 的 *.js 檔，就夠我學到不少小技巧了，沒想到他會利用 LocalConnection 來做中介，其實這也是 Flash JavaScript Integration Kit 最主要的訴求，他能夠在 JavaScript 與 Flash 之間，傳遞複雜的資料格式，諸如 Array 與 Object，這比起我上面自己寫陽春的呼叫方式來說，功能要強太多了。粉期待他後續修正的版本。