Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


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

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] 鍵來觀看成果。


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

Similar presentations


Ads by Google