Download presentation
Presentation is loading. Please wait.
1
ActionScript 綜合應用 (一) ─自製滑鼠指標
第 23 章 ActionScript 綜合應用 (一) ─自製滑鼠指標
2
本章提要 23-1 動畫元件與流程說明 23-2 自製滑鼠指標的原理 23-3 自製小拖鞋滑鼠指標 23-4 製作進階版的小拖鞋滑鼠指標
23-5 延伸學習-跟隨指標的花龍
3
前言 本章將使用一個可愛的小拖鞋影片片段元件來做為自製滑鼠指標, 之所以使用小拖鞋, 是為了讓本範例能成為第 24 章打蟑螂遊戲中的重要元件。 現在請開啟範例檔 23.swf 看看本範例的效果:
4
前言
5
23-1 動畫元件與流程說明 元件介紹 動畫製作流程
6
元件介紹 本範例所需的元件如下:
7
元件介紹 自行繪製拖鞋影片片段元件時, 請注意要將元件的註冊點設在拖鞋的前端, 因為元件的註冊點就是其座標位置點, 如果希望拖鞋的前端成為滑鼠指標的座標點, 最好在繪製時就先調整好 (如果忘記怎麼設定, 你可以參考第 6 章的說明)。
8
動畫製作流程
9
23-2 自製滑鼠指標的原理 自製滑鼠指標的原理其實非常簡單, 就是先把真正的滑鼠指標 給隱形起來, 然後讓一個影片片段元件的實體一直維持在滑鼠指標的座標位置上, 這樣這個影片片段元件看起來就像是新製作的滑鼠指標囉!
10
自製滑鼠指標的原理
11
自製滑鼠指標的原理 要怎樣把真正的滑鼠指標隱形起來呢?又要怎麼讓影片片段實體一直維持在滑鼠指標的座標位置上呢?這就需要靠 ActionScript 來達成了。而依據自製滑鼠指標的完整流程, 我們歸納出下列幾個要點:
12
自製滑鼠指標的原理 用來取代滑鼠的, 最好是影片片段元件:因為影片片段元件可以有實體名稱, 故可以用 ActionScript 控制;而按鈕元件雖然也可以有實體名稱, 但是由於按鈕元件會接收滑鼠事件, 故當你將按鈕實體「黏」在滑鼠指標位置上時, 往往會造成舞台上其他按鈕、影片片段實體接收不到滑鼠事件的情況 (因為都被這個自製滑鼠給擋住並接收走了)。
13
自製滑鼠指標的原理 注意影片片段實體的圖層與深度問題:由於滑鼠指標是電腦操作的重要指示圖示, 因此它必須一直處在畫面中的最高層, 也就是說不能被其他物件蓋到。而在 Flash 動畫中, 你必須記得利用圖層的上下關係來讓自製的滑鼠指標 (影片片段實體) 處在最上層, 若是舞台中有物件是利用即時載入的方式處理時, 你必須適當地設定影片片段實體的深度以避開這個問題。
14
自製滑鼠指標的原理 隱藏真正滑鼠指標的時機:隱藏真正的滑鼠指標前, 我們必須確定使用者已經看到自製的滑鼠指標了, 不然找不到滑鼠指標是相當令人困擾的。因此利用影片片段元件的 onLoad 事件來確認自製滑鼠指標 (影片片段元件實體) 是否已載入是個很重要的技巧。
15
自製滑鼠指標的原理 利用滑鼠事件來指定座標位置給自製滑鼠:將滑鼠的座標位置指定給自製滑鼠並不是什麼難事, 但由於我們必須要讓自製滑鼠指標一直「黏」在滑鼠的座標位置上, 就必須不斷地指定座標位置給它。只有在使用者移動了滑鼠指標時, 才有需要修正滑鼠指標的位置不是嗎?所以利用 onMouseMove 事件來指定座標位置給自製滑鼠指標是最經濟有效的喔!
16
23-3 自製小拖鞋滑鼠指標 接下來就要開始製作小拖鞋滑鼠指標了, 請開啟練習檔 23-learn.fla, 利用我們提供的元件來練習。
17
設定文件屬性 本範例由於將做為第 24 章的一部份, 因此文件屬性依第 24 章的需要做設定, 我們使用預設的大小 550px × 400px、播放速度 12 fps、背景色為白色, 而影格只需要1 格。
18
設定文件屬性
19
圖層安排 本範例圖層安排如下, 拖鞋圖層中置入的是拖鞋元件, 地板圖層置入的是地板元件:
20
設定 ActionScript 為實體命名 設定元件動作
21
為實體命名 本例自製滑鼠指標的 ActionScript 全都設在拖鞋元件之實體上, 因此在本範例中, 只要使用相對路徑來指定程式的作用目標 (請參考 20-5 的說明), 則即使不為該實體命名, 也能順利製作出自製滑鼠。但為了替第 24章範例中的後續程式做暖身, 我們還是先將拖鞋元件之實體命名為 mouse_mc 。
22
為實體命名
23
設定元件動作 接下來請點選舞台中拖鞋元件之實體 (mouse_mc), 然後開啟動作面板, 並按下 Script 助理鈕, 我們要將以下程式加入 Script 窗格中。
24
設定元件動作
25
設定元件動作 由於我們要把 ActionScript 程式設在拖鞋影片片段的實體上, 所以所有程式都必須在 onClipEvent 事件函數中執行, 請雙按全域函數/影片片段控制/onClipEvent 指令:
26
設定元件動作
27
設定元件動作 雙按 ActionScript 2.0 類別/影片/Mouse/方法類別下的 hide 指令 (隱藏原來的滑鼠指標), 將此指令加入到 Script 窗格中:
28
設定元件動作
29
設定元件動作 接著再加入 ActionScript 2.0 類別/影片/MovieClip/方法類別下的 swapDepths 動作 (作用為切換實體的深度):
30
設定元件動作
31
設定元件動作 設定好滑鼠的深度後, 我們要指定滑鼠指標的位置, 請先將指標移到程式碼第 4 行的地方, 然後再雙按全域函數/影片片段控制/onClipEvent 指令, 將事件設為移動滑鼠 (mouseMove):
32
設定元件動作
33
設定元件動作 雙按 ActionScript 2.0 類別/影片/MovieClip/屬性類別下的 _xmouse 指令, 將此指令加入到 Script 窗格中:
34
設定元件動作
35
設定元件動作 指定好實體的 X 座標位置後, 再來要指定 Y 座標位置, 請雙按 ActionScript 2.0 類別/影片/MovieClip/屬性類別下的_ymouse 指令, 將此指令加入到 Script 窗格中:
36
設定元件動作
37
設定元件動作 最後加入全域函數/影片片段控制/UpdateAfterEvent 指令就完成了。
38
設定元件動作 最基本的自製滑鼠指標就這樣完成了!請按下 [Ctrl] + [Enter] 鍵來測試一下影片。另外我們還在練習檔中多準備了 1 個手的影片片段元件, 供你當做滑鼠指標來練習, 可在元件庫中找到。
39
設定元件動作
40
23-4 製作進階版的小拖鞋滑鼠 指標 為本章範例能夠在第 24 章中派上用場, 我們還要再做一些進階的修改。我們利用了 Flash 的一個小功能, 讓小拖鞋在按下滑鼠左鈕的時候會呈現往下揮動的樣子。請雙按範例檔 swf 試試看:
41
製作進階版的小拖鞋滑鼠指標 這個小功能就是在影片片段元件中, 以設置影格標籤的方式, 讓影片片段元件也能偵測滑鼠事件, 呈現出如同按鈕元件的一般、滑入、按下等狀態。
42
製作進階版的小拖鞋滑鼠指標 請開啟練習檔 23-learn1.fla, 讓我們利用這個功能, 一步步將小拖鞋滑鼠指標做個改良吧!
首先將拖鞋影片片段元件加以修改並加入適當的影格標籤。請在元件庫面板中雙按拖鞋元件, 進入編輯狀態:
43
製作進階版的小拖鞋滑鼠指標
44
以影格標籤模擬按鈕狀態 要以設置影格標籤的方式, 讓影片片段元件也能呈現出如同按鈕元件的 3 種狀態時, 影格標籤名稱要如下設定:
_up:表示是一般狀態。 _over:是滑入狀態。 _down:是按下狀態。
45
製作進階版的小拖鞋滑鼠指標 接著回到場景1 中, 新增 1 個 Actions圖層, 並點選該圖層第 1 格影格後, 開啟動作面板, 我們要增加一些動作:
46
製作進階版的小拖鞋滑鼠指標
47
23-5 延伸學習-跟隨指標的花龍 本章的延伸學習提供的也是與滑鼠有關的效果, 這個「跟隨指標的花龍」範例, 是讓滑鼠拖著一個名稱為 flower 的影片片段實體移動, 同時利用影格造成的時間差迴圈, 讓 flower 實體每隔 0.2 秒被複製執行一次, 但最多同時只有 30 個實體同時存在舞台中。 請雙按範例檔 23-a01.swf, 動動滑鼠看看本範例的效果吧!
48
延伸學習-跟隨指標的花龍
49
延伸學習-跟隨指標的花龍 請開啟練習檔 23-q01.fla, 我們來看看這個範例是如何製作的。
請開啟元件庫面板, 在這個練習檔中我們繪製了 5 個元件, 分別為原版葉、原版花、原版花旋轉、花、背景。
50
延伸學習-跟隨指標的花龍
51
延伸學習-跟隨指標的花龍 首先, 新增一個花圖層, 並將花影片片段元件拉曳到舞台中, 將其實體命名為flower。
52
延伸學習-跟隨指標的花龍
53
延伸學習-跟隨指標的花龍 新增一個 Actions 圖層, 並在影格 3 建立關鍵影格。
請選取 Actions 圖層的影格1, 然後按 [F9] 鍵開啟動作面板, 我們要在此影格中加入 ActionScript 語法:
54
延伸學習-跟隨指標的花龍
55
延伸學習-跟隨指標的花龍
56
Actions圖層中影格 1 的程式 說明
57
延伸學習-跟隨指標的花龍 接著我們要在 Actions 圖層的影格 3 中加入一段小程式。
進行到此就完成此範例的製作了, 請按下 [Ctrl] + [Enter] 鍵來觀看成果。
Similar presentations