ActionScript 綜合應用 (一) ─自製滑鼠指標 第 23 章 ActionScript 綜合應用 (一) ─自製滑鼠指標

本章提要 23-1 動畫元件與流程說明 23-2 自製滑鼠指標的原理 23-3 自製小拖鞋滑鼠指標 23-4 製作進階版的小拖鞋滑鼠指標 23-5 延伸學習－跟隨指標的花龍

前言 本章將使用一個可愛的小拖鞋影片片段元件來做為自製滑鼠指標, 之所以使用小拖鞋, 是為了讓本範例能成為第 24 章打蟑螂遊戲中的重要元件。 現在請開啟範例檔 23.swf 看看本範例的效果：

前言

23-1 動畫元件與流程說明 元件介紹 動畫製作流程

元件介紹 本範例所需的元件如下：

元件介紹 自行繪製拖鞋影片片段元件時, 請注意要將元件的註冊點設在拖鞋的前端, 因為元件的註冊點就是其座標位置點, 如果希望拖鞋的前端成為滑鼠指標的座標點, 最好在繪製時就先調整好 (如果忘記怎麼設定, 你可以參考第 6 章的說明)。

動畫製作流程

23-2 自製滑鼠指標的原理 自製滑鼠指標的原理其實非常簡單, 就是先把真正的滑鼠指標 給隱形起來, 然後讓一個影片片段元件的實體一直維持在滑鼠指標的座標位置上, 這樣這個影片片段元件看起來就像是新製作的滑鼠指標囉！

自製滑鼠指標的原理

自製滑鼠指標的原理 要怎樣把真正的滑鼠指標隱形起來呢？又要怎麼讓影片片段實體一直維持在滑鼠指標的座標位置上呢？這就需要靠 ActionScript 來達成了。而依據自製滑鼠指標的完整流程, 我們歸納出下列幾個要點：

自製滑鼠指標的原理 用來取代滑鼠的, 最好是影片片段元件：因為影片片段元件可以有實體名稱, 故可以用 ActionScript 控制；而按鈕元件雖然也可以有實體名稱, 但是由於按鈕元件會接收滑鼠事件, 故當你將按鈕實體「黏」在滑鼠指標位置上時, 往往會造成舞台上其他按鈕、影片片段實體接收不到滑鼠事件的情況 (因為都被這個自製滑鼠給擋住並接收走了)。

自製滑鼠指標的原理 注意影片片段實體的圖層與深度問題：由於滑鼠指標是電腦操作的重要指示圖示, 因此它必須一直處在畫面中的最高層, 也就是說不能被其他物件蓋到。而在 Flash 動畫中, 你必須記得利用圖層的上下關係來讓自製的滑鼠指標 (影片片段實體) 處在最上層, 若是舞台中有物件是利用即時載入的方式處理時, 你必須適當地設定影片片段實體的深度以避開這個問題。

自製滑鼠指標的原理 隱藏真正滑鼠指標的時機：隱藏真正的滑鼠指標前, 我們必須確定使用者已經看到自製的滑鼠指標了, 不然找不到滑鼠指標是相當令人困擾的。因此利用影片片段元件的 onLoad 事件來確認自製滑鼠指標 (影片片段元件實體) 是否已載入是個很重要的技巧。

自製滑鼠指標的原理 利用滑鼠事件來指定座標位置給自製滑鼠：將滑鼠的座標位置指定給自製滑鼠並不是什麼難事, 但由於我們必須要讓自製滑鼠指標一直「黏」在滑鼠的座標位置上, 就必須不斷地指定座標位置給它。只有在使用者移動了滑鼠指標時, 才有需要修正滑鼠指標的位置不是嗎？所以利用 onMouseMove 事件來指定座標位置給自製滑鼠指標是最經濟有效的喔！

23-3 自製小拖鞋滑鼠指標 接下來就要開始製作小拖鞋滑鼠指標了, 請開啟練習檔 23-learn.fla, 利用我們提供的元件來練習。

設定文件屬性 本範例由於將做為第 24 章的一部份, 因此文件屬性依第 24 章的需要做設定, 我們使用預設的大小 550px × 400px、播放速度 12 fps、背景色為白色, 而影格只需要1 格。

設定文件屬性

圖層安排 本範例圖層安排如下, 拖鞋圖層中置入的是拖鞋元件, 地板圖層置入的是地板元件：

設定 ActionScript 為實體命名 設定元件動作

為實體命名 本例自製滑鼠指標的 ActionScript 全都設在拖鞋元件之實體上, 因此在本範例中, 只要使用相對路徑來指定程式的作用目標 (請參考 20-5 的說明), 則即使不為該實體命名, 也能順利製作出自製滑鼠。但為了替第 24章範例中的後續程式做暖身, 我們還是先將拖鞋元件之實體命名為 mouse_mc 。

為實體命名

設定元件動作 接下來請點選舞台中拖鞋元件之實體 (mouse_mc), 然後開啟動作面板, 並按下 Script 助理鈕, 我們要將以下程式加入 Script 窗格中。

設定元件動作

設定元件動作 由於我們要把 ActionScript 程式設在拖鞋影片片段的實體上, 所以所有程式都必須在 onClipEvent 事件函數中執行, 請雙按全域函數/影片片段控制/onClipEvent 指令：

設定元件動作

設定元件動作 雙按 ActionScript 2.0 類別/影片/Mouse/方法類別下的 hide 指令 (隱藏原來的滑鼠指標), 將此指令加入到 Script 窗格中：

設定元件動作

設定元件動作 接著再加入 ActionScript 2.0 類別/影片/MovieClip/方法類別下的 swapDepths 動作 (作用為切換實體的深度)：

設定元件動作

設定元件動作 設定好滑鼠的深度後, 我們要指定滑鼠指標的位置, 請先將指標移到程式碼第 4 行的地方, 然後再雙按全域函數/影片片段控制/onClipEvent 指令, 將事件設為移動滑鼠 (mouseMove)：

設定元件動作

設定元件動作 雙按 ActionScript 2.0 類別/影片/MovieClip/屬性類別下的 _xmouse 指令, 將此指令加入到 Script 窗格中：

設定元件動作

設定元件動作 指定好實體的 X 座標位置後, 再來要指定 Y 座標位置, 請雙按 ActionScript 2.0 類別/影片/MovieClip/屬性類別下的_ymouse 指令, 將此指令加入到 Script 窗格中：

設定元件動作

設定元件動作 最後加入全域函數/影片片段控制/UpdateAfterEvent 指令就完成了。

設定元件動作 最基本的自製滑鼠指標就這樣完成了！請按下 [Ctrl] + [Enter] 鍵來測試一下影片。另外我們還在練習檔中多準備了 1 個手的影片片段元件, 供你當做滑鼠指標來練習, 可在元件庫中找到。

設定元件動作

23-4 製作進階版的小拖鞋滑鼠 指標 為本章範例能夠在第 24 章中派上用場, 我們還要再做一些進階的修改。我們利用了 Flash 的一個小功能, 讓小拖鞋在按下滑鼠左鈕的時候會呈現往下揮動的樣子。請雙按範例檔 23-01.swf 試試看：

製作進階版的小拖鞋滑鼠指標 這個小功能就是在影片片段元件中, 以設置影格標籤的方式, 讓影片片段元件也能偵測滑鼠事件, 呈現出如同按鈕元件的一般、滑入、按下等狀態。

製作進階版的小拖鞋滑鼠指標 請開啟練習檔 23-learn1.fla, 讓我們利用這個功能, 一步步將小拖鞋滑鼠指標做個改良吧！ 首先將拖鞋影片片段元件加以修改並加入適當的影格標籤。請在元件庫面板中雙按拖鞋元件, 進入編輯狀態：

製作進階版的小拖鞋滑鼠指標

以影格標籤模擬按鈕狀態 要以設置影格標籤的方式, 讓影片片段元件也能呈現出如同按鈕元件的 3 種狀態時, 影格標籤名稱要如下設定： _up：表示是一般狀態。 _over：是滑入狀態。 _down：是按下狀態。

製作進階版的小拖鞋滑鼠指標 接著回到場景1 中, 新增 1 個 Actions圖層, 並點選該圖層第 1 格影格後, 開啟動作面板, 我們要增加一些動作：

製作進階版的小拖鞋滑鼠指標

23-5 延伸學習－跟隨指標的花龍 本章的延伸學習提供的也是與滑鼠有關的效果, 這個「跟隨指標的花龍」範例, 是讓滑鼠拖著一個名稱為 flower 的影片片段實體移動, 同時利用影格造成的時間差迴圈, 讓 flower 實體每隔 0.2 秒被複製執行一次, 但最多同時只有 30 個實體同時存在舞台中。 請雙按範例檔 23-a01.swf, 動動滑鼠看看本範例的效果吧！

延伸學習－跟隨指標的花龍

延伸學習－跟隨指標的花龍 請開啟練習檔 23-q01.fla, 我們來看看這個範例是如何製作的。 請開啟元件庫面板, 在這個練習檔中我們繪製了 5 個元件, 分別為原版葉、原版花、原版花旋轉、花、背景。

延伸學習－跟隨指標的花龍

延伸學習－跟隨指標的花龍 首先, 新增一個花圖層, 並將花影片片段元件拉曳到舞台中, 將其實體命名為flower。

延伸學習－跟隨指標的花龍

延伸學習－跟隨指標的花龍 新增一個 Actions 圖層, 並在影格 3 建立關鍵影格。 請選取 Actions 圖層的影格1, 然後按 [F9] 鍵開啟動作面板, 我們要在此影格中加入 ActionScript 語法：

延伸學習－跟隨指標的花龍

延伸學習－跟隨指標的花龍

Actions圖層中影格 1 的程式 說明

延伸學習－跟隨指標的花龍 接著我們要在 Actions 圖層的影格 3 中加入一段小程式。 進行到此就完成此範例的製作了, 請按下 [Ctrl] + [Enter] 鍵來觀看成果。