軟大羅盤

請將滑鼠移到四個方位的按鈕即可產生變化和作不同的連結


前言:

先設定滑鼠拖曳一空的 Movie Clip,使該 Movie Clip 的座標即為滑鼠座標,再由取得該 Movie Clip 的X座標位置來控制圓盤形按鈕的旋轉速率。


步驟1
製作按鈕

1.在場景中用圓形繪圖工具繪一邊框為黑色,填色為無色的圓形。

2.用直線繪圖工具將方按鈕的另三個邊畫出來之後,將按鈕的四個邊選取起來,如下圖所示:


圖 1

3.用功能選單中的 Insert > Convert to Symbol 將選取部分轉成按鈕,命名為 Bt_up

4.在做好的按鈕上用滑鼠右鍵叫出快速選單,選擇「編輯」(Edit) 進入按鈕編輯畫面。然後在Layer 1的 Frame Up 中輸入按鈕的文字,如下圖所示:


圖 2

5.在 Frame OverDownHit 各插入Keyframe。

6.在 Frame Over 中,選取按鈕邊框及文字,用 Modify > Transform > Scale and Rotate 將按鈕縮為原來的 75%


圖 3

7.在 Frame Down 中,選取文字部份,將文字顏色換成不同顏色。


圖 4

8.在 Frame Hit 中,刪除文字部份,將邊框所圍區域填入顏色。(做按鈕的感應範圍)。


圖 5

9.回場景(Scene 1)中,用直線繪圖工具將方按鈕的另三個邊畫出來之後,將按鈕的四個邊選取起來,如下圖所示:


圖 6

10.用步驟1之 2 到 步驟1之8 的方式做出側的按鈕(命名分別為 Bt_leftBt_downBt_right)


圖 7

步驟2
製作滑鼠拖曳用Movie Clip

1.新增一空白Movie Clip,命名為Blank(不須放置任何物件,讓它是一個空白內容的Movie Clip即可)。

2.回到場景,將剛做好的空白Movie Clip從Library拉到場景中,並將其 Instance Name設成 blank ,如下圖所示:


圖 8

3.將 Layer 1 的 Frame 1 設定 Frame Action 如下:


圖 9

步驟3
製作旋轉按鈕Movie Clip

1.回到場景中,將 步驟1 做的按鈕及邊框全部選取(不要選到 blank Movie Clip),用Insert > Convert to Symbol 將選取部分轉成 Movie Clip,命名為 Wheel


圖 10

2.點選該 Movie Clip ,將Instance Name設成 wheel 並進入此 Movie Clip 的編輯畫面。

3.在wheel Movie Clip 的編輯畫面中,將 Layer 1 更名為 Corner ,並新增一個Layer命名為 Rotate。

4.回到 Layer Corner 中,將四個按鈕全部選取,(不要選取到邊框)。用 Edit > Cut 將其剪下,在 Layer Rotate 中,用 Edit > Paste in Place 將剪下的四個按鈕貼回原位。

5.為方便接下來的工作可先將 Layer Rotate 隱藏起來,再回到 Layer Corner 中,將留下來的四個直角邊線用直線工具封閉成三角形,並填入顏色,如下圖所示:


圖 11

6.將 Layer Corner 的時間延到 Frame 8,然後將 Layer Corner 鎖起來,並解除 Layer Rotate 的隱藏狀態。

7.到 Layer Rotate 的 Frame 1,在圓盤中心處加入欲作旋轉動畫的文字,如下圖所示:


圖 12

步驟4
按鈕及Movie Clip的Actions設定

1.在 Layer Rotate 的 Frame 1中,選取圓形上方的按鈕,作按鈕的 Actions 設定,如下圖所示:


圖 13

3.將其他三個按鈕的Actions做一樣的設定。

4.將 Layer Rotate 的 Frame 1 ,作 Frame Action 設定,如下

Set Variable: "/:MousePos" = (GetProperty ("/blank",_x ) - 150) / 10 * -1
Set Property ("/wheel", Rotation) = /:MousePos + GetProperty ("/wheel",_rotation )

5.點選 Layer Rotate 的 Frame 1,用 Copy Frames 指令,將 Frame 1 內容複製,再用 Paste Frames 指令貼到 Frame 2 至 Frame 8 上。

6.在 Frame 2 的畫面中,將 步驟3 之 7 所作的旋轉文字選取,用 Modify > Transform > Scale and Rotate 指令,設定文字旋轉 45度。

7.用同樣方法將在 Frame 3 到 Frame 8 每個影格的文字,分別各旋轉 90、135、180、225、270、315度。

8.點選 Layer Corner 的 Frame 1 ,設定 Frame Action 如下:

Set Property ("/wheel", X Scale) = "125"
Set Property ("/wheel", Y Scale) = "125"

※日後要修正圓盤按鈕大小只要更改這段Action的數據即可。

9.回到場景(Scene1)中,測試、輸出,即大功告成。

原始檔下載


回課程目錄