小笨喵

移動滑鼠並按左鍵可看到貓眼轉動和貓伸爪要抓魚的動作

前言:

利用Action的Math物件中的三角函數做眼球轉動的效果,並用
Tell Target 指令,設定使用隱藏按鈕來控制MovieClip 中抓魚動作。



步驟1
眼睛與貓臉製作

1.先將背景設成淡藍色,並將場景Scene 1 的圖層"Layer 1"更名為""。

2.繪製一白色圓形做眼球,用Insert > Convert to Symbol 轉為 MovieClip Symboll(影片片段元件),命名為"眼球",並進入其編輯模式。然後在眼球中畫一個瞳孔在元件中心點的正右方,如下圖示。

※如果有空的話,可以將瞳孔轉成一具眨眼效果的MovieClip元件


圖1

2.用 Insert > New Symbol 新增一 MovieClip Symboll(影片片段元件),命名為"會轉的眼球",並進入其編輯模式。將先前所做的"眼球"元件從Library中拉到場景中,並將其中心點對齊本元件的中心點,將其命名為"eyeBall",如下圖示。


圖2

3.在"會轉的眼球"元件的編輯模式中,新增一圖層"Layer 2",將其Frame 1及Frame 2 設成 KeyFrame ,並在 Frame 1 及 Frame 2 設Actions,如下:

Frame 1 的 ActionScript:

Dx = _root._xmouse - this._x
//設變數Dx的值為主場景中滑鼠游標的X座標減掉目前此MovieClip的X座標
Dy = _root._ymouse - this._y
//設變數Dy的值為主場景中滑鼠游標的Y座標減掉目前此MovieClip的Y座標

Angle = Math.atan2(Dy,Dx)
//設變數Angle的值為Dy除以Dx所得值的反正切函數值(所得值為弳度)

SetProperty ("eyeBall",_rotation,Angle/Math.PI*180)
//設眼球"eyeBall"角色的旋轉(rotation)度數為上述運算所得的弳度值轉為角度之後值

Frame 2 的 ActionScript:

gotoAndPlay (1);

4. 回到場景Scene 1中,將圖層"Layer 1"更名為"",並在場景中繪一貓臉,如下圖所示。


圖3

5.從Library中,拉兩個"會轉的眼球"元件到場景中貓臉上的適當的位置,如下圖所示。


圖4

 

步驟2
魚與貓掌製作

1.回到場景Scene 1中,新增一MovieClip Symbol(影片片段)元件,命名為"魚與貓掌",並進入其編輯模式。將其圖層"Layer 1"更名為"",另外再新增一個圖層,命名為"水滴",然後做一段簡單的魚身擺動的圖片切換式動畫,如下圖所示:


圖5

2.回到場景Scene 1中,新增一Button Symbol(按鈕片段)元件,命名為"按鈕",並進入其編輯模式。先用File > Import 匯入貓叫聲 cat.wav 檔,再將圖層 Layer1 的 Frame "Down"及"Hit" 插入KeyFrame(關鍵影格),在Frame "Down"設定其聲音為剛匯入的 cat.wav,最後到Frame "Hit"中繪一個比魚略大的方形色塊,做為本按鈕的感應區域,如下圖所示:


圖6

3.回到場景Scene 1中,新增兩個Graphic Symbol(圖形片段)元件,分別命名為"爪1"及"爪2",並在其中各畫不同樣式的貓爪,然後再新增一MovieClip Symbol(影片片段)元件,命名為"抓抓",並進入其編輯模式,在Frame 1設Action Script : Stop(); ,然後在Frame 2 之後做一段貓爪抓動的動畫,如下圖所示:


圖7

4.進入"魚與貓掌"元件的編輯模式中,新增兩個圖層分別命名為"貓爪"及"感應按鈕",並將兩圖層置於圖層""下方;在"貓爪"圖層中放入元件"抓抓",置於魚的下方適當位置,並命名其InstanceName 為"Claw",然後在"感應按鈕"圖層中放入元件"按鈕 ",置於魚的後方,如下圖所示,並設按鈕的Action Script 如下:

on
(release) {
 with (_root.fish.claw) {
   play ();
} }
//當滑鼠左鍵按下後放開時,告訴"fish"角色中的"claw"影片片段做"播放"的動作


圖8

 

步驟3
設定拖曳MovieClip元件

1.回到場景Scene 1中,新增一圖層,命名為"",將元件"魚與貓掌"放到該圖層中,並命名其InstanceName 為"fish",如下圖所示:


圖9

2.在圖層""的Frame 1中設Frame Action 如下:

Mouse.hide();
//隱藏滑鼠游標
startDrag
("_root.fish", true);
//開始拖曳主影片下的"fish"Movie Clip,並將"fish"的中心點對齊游標


圖10

 

3.執行 Control > Test Movie 預覽其效果,完成後檔並輸出。


本單元重要觀念補充

一、貓眼盯著魚看
1. 眼睛跟著游標轉動,是依據游標與眼睛之間的X座標和Y座標距離差,經由反三角函數的運算來求得眼睛與所需要旋轉的角度。
{參考左圖,O 點為眼睛位置,A 點為游標 (魚),眼睛原本向右看,則q是眼睛所要旋轉的角度。}

2.如左上及左中圖所示,當游標在A點位置時,
tanq
= Dy/Dx,所以其反正切值 atan(Dy/Dx) = q
由此便可求得眼睛所要旋轉的角度,而 Flash5 ActionScript 的Math.atan 函數正好可以求得此值。

3.但當角度 q 值介於p/23p/2之間時,其夾角應該是 q+p ,但用反正切函數(Math.atan)所求得的值卻是 q ,而不是 q+p ;此時就要利用 Flash5 所提供的另一個反正切函數Math.atan2來求得 Math.atan 所不能求得的角度。

二、自製游標
利用Flash 5 ActionScript的 Mouse.hide 指令隱藏來原本的滑鼠游標,並拖曳自製的游標,即可完成自製游標。

三、貓手抓魚動作
在滑鼠所拖曳的MovieClip內,放入一個隱形的感應式按鈕和按鈕所控制的影片片段,再利用with 指令來控制其(抓魚動作)播放。

:with 指令的功能和 tell Target是類似的,但Flash官方資料中建議使用with來替代tell Target ,因為with可用的範圍比 tell Target 廣,tellTarget在Flash5中只是為了提供向下相容的功能而已。

原始檔下載



回課程目錄