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

Presentation on theme: "ActionScript 綜合應用 (一) ─ 自製滑鼠指標"— Presentation transcript:

1 ActionScript 綜合應用 (一) ─ 自製滑鼠指標
第 24 章 ActionScript 綜合應用 (一) ─ 自製滑鼠指標 著作權所有 © 旗標出版股份有限公司

2 本章提要 動畫元件與流程說明 自製滑鼠指標的原理 自製小拖鞋滑鼠指標 製作進階版的小拖鞋滑鼠指標 舉一反三時間 － 跟隨指標的花龍

3 重點說明 本章將使用一個可愛的小拖鞋影片片段元件來做為自製滑鼠指標, 之所以使用小拖鞋, 是為了讓本範例能成為第 25 章打蟑螂遊戲中的重要元件。 請雙按 ch24.swf 檔來看看本範例的 效果：

4 動畫元件與流程說明 元件介紹 動畫製作流程

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

6 元件介紹 若你是自行繪製拖鞋影片片段元件, 請注意要將元件的註冊點設在拖鞋的前端, 因為元件的註冊點就是其座標位置點, 希望拖鞋的前端成為滑鼠指標的座標點的話, 最好在繪製時就先調整好。

7 動畫製作流程

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

9 自製滑鼠指標的原理

10 自製滑鼠指標的原理 依據自製滑鼠指標的完整流程, 我們歸納出下列幾個要點： 用來取代滑鼠的, 最好是影片片段元件：
注意影片片段實體的圖層與深度問題： 使用 Mouse.hide ( ) 滑鼠方法隱藏真正的滑鼠指標： 隱藏真正滑鼠指標的時機： 利用滑鼠事件來指定座標位置給自製滑鼠：

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

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

13 使用 Mouse.hide ( ) 滑鼠方法 隱藏真正的滑鼠指標
Mouse.hide ( ) 是 Flash 5 之後才出現的 ActionScript 語法。因此, 要使用此語法, 請務必匯出成 5.0 版以後的 Flash 影片檔。

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

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

16 自製小拖鞋滑鼠指標 接下來我們就要開始製作小拖鞋滑鼠指標了, 請開啟 ch24-learn.fla 檔, 利用我們提供的元件來練習。
設定文件屬性 (Document Properties) 圖層 (Layer) 安排 設定 ActionScript 為實體命名 設定元件動作

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

18 設定文件屬性 (Document Properties)

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

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

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

22 為實體命名

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

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

25 設定元件動作

26 設定元件動作 雙按內建類別 / 影片 / Mouse / 方法類別下的 hide 指令, 將之加入 Script 窗格中：

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

28 設定元件動作

29 設定元件動作 指定自製滑鼠指標的深度, 本例設 1000, 也可設更大值, 端看舞台中其他物件的深度而定：

30 設定元件動作 設定好滑鼠的深度後, 我們要指定滑鼠指標的位置, 請雙按全域函數 / 影片片段控制 / onClipEvent 指令, 然後將事件設為 mouseMove：

31 設定元件動作

32 設定元件動作 然後在 Script 窗格中輸入：this._x＝_root._xmouse；及 this._y＝_root._ymouse；這二行指令 (你也可以在 (內建類別 / 影片 / MovieClip 屬性下找到 _xmouse 跟 _ymouse 指令)：

33 設定元件動作

34 設定元件動作 最後再將全域函數 / 影片片段控制 / UpdateAfterEvent 動作加入即完成：

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

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

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

38 製作進階版的小拖鞋滑鼠指標 這個小功能就是在影片片段元件中, 以設置影格標籤的方式, 讓影片片段元件也能偵測滑鼠事件, 呈現出如同按鈕元件的一般、滑入、按下等狀態。 現在請開啟練習檔 ch24-1learn.fla , 讓我們利用這個功能, 一步步將小拖鞋滑鼠指標加以改良吧！

39 製作進階版的小拖鞋滑鼠指標 首先將拖鞋影片片段元件加以修改並加入適當的影格標籤。
由於拖鞋影片片段元件就是滑鼠指標, 所以會一直處在滑入的狀態, 而沒有所謂的一般狀態。故我們不需要設定一般狀態。 請雙按拖鞋元件, 進入編輯狀態：

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

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

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

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

44 製作進階版的小拖鞋滑鼠指標 加入空的滑鼠事件動作, 是因為「以影格標籤模擬按鈕狀態」的功能, 必須要在該元件有使用滑鼠事件動作時才會有效果！

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

46 舉一反三時間 － 跟隨指標的花龍

47 舉一反三時間 － 跟隨指標的花龍 請開啟 ch24-2.fla 檔, 接著我們來看看這個範例是如何 製作的：

48 舉一反三時間 － 跟隨指標的花龍 原版葉、原版花、原版花旋轉都是為了製作花元件而繪製的元件：

49 舉一反三時間 － 跟隨指標的花龍 下圖顯示的是 Actions 圖層第 1 格影格中的影格動作：

50 舉一反三時間 － 跟隨指標的花龍 以下就為你說明 Actions 圖層第 1 格影格中程式的內容：