制作具有Win XP 風格的菜單


2002-03-05        作者：張科技
 
制作具有Win XP 風格的菜單
——妙用Director 8.5的lingo腳本



　　用過Windows XP 的人都知道，它的菜單突然改頭換面了，那平面帶陰影的樣子，用“酷”這一個流行字眼來形容是再好不過了。眾所周知，大型多媒體制作軟件Director 8.5是開發各種多媒體的有利工具。想不想在自己的多媒體作品里也加入類似于Windows XP風格的菜單，讓你的作品更酷？

　　首先，我們設想一下要實現的效果：一個Windows家族的演示軟件，為了讓用戶更快捷地選擇要觀看的Windows 版本，我們制作一個快捷菜單。基本操作就是當用戶在舞臺范圍內點擊鼠標右鍵時，淡入淡出地彈出一個快捷菜單，讓用戶按下鼠標左鍵選定要觀看的內容，選定后讓計算機執行相應的演示。

　　其次，說明一下在制作本例時，所要用到的一些功能：本例主要是對Director 8.5中的軟件的靈魂——lingo腳本的編寫和一些效果的應用。ink效果主要用于陰影、菜單選擇棒的一些圖片特效；透明度主要實現菜單的淡入淡出效果；角色通道主要實現菜單的顯示和隱藏；其中lingo主要用于控制菜單的顯示、顯示位置的動態調整和相應用戶的操作。 
好！了解了以上一些概況后，現在我們開始用Director 8.5 制作類似于Windows XP 風格的菜單！

1．按快捷鍵 打開舞臺屬性，新建一個512*342 的電影文件。

2．收集電影演員成員資料

（1） 按 打開畫板，制作一個菜單（圖片大小：192*196），起名為“menu”。

（2）制作一個菜單圖片（我是從Win XP里截下來），再稍許做了點改變的（如圖1）。然后將圖片復制到剪貼板。






圖1



（3）按上述方法依次單畫板窗口左上角的  按鈕，再新建三張圖片，制作菜單的陰影（圖片大小：196*200）。起名為“shadow”；菜單項選擇棒（圖片大小：188*19，如圖2），起名為“selectbar”；背景（圖片大小：隨你），起名為“background”。

說明：

以上圖片需要用Photoshop等圖形制作處理進行處理。

（1）對于陰影圖片要通過羽化效果實現。

（2）對于菜單項選擇棒圖片，這里的邊框線為皮蛋青（#008080），框內是由下往上的皮蛋青漸變色（#9CCECE → #000000）。





圖2



好！所需的演員成員已經全部到齊，哈哈，下面開始“編劇”！

3．編輯電影劇本






圖3



（1）按 打開演員庫，將剛才制作的圖形演員拖到舞臺（Stage）上進行演出。將他們排列組織好（如圖 3）。

【注】按菜單條的個數重復地拖入菜單項選擇棒。

（2）按 打開分鏡表（Score），對分鏡表里的角色進行整理和編輯。打開分鏡表的效果通道開關（見圖4）。





圖4



（3）設置通道1和3的角色（即背景和菜單）的ink 效果為Copy，透明度為100（如圖 5）。





圖5



（4）設置通道2角色（即菜單陰影）的ink 效果為 Darkest，透明度為50。操作類似于上一步。

（5）設置通道4~12角色（即菜單項選擇棒）的ink 效果為Transparent，透明度為0。

經過劇本編輯，舞臺上的菜單角色組如圖6所示。





圖6



　　好! 到現在為止已經完成整個工程的60% 啦！怎么樣，看上去不是很爽啊？下面就要給它加入“靈魂”啦！讓它能動起來！

4．撰寫lingo腳本

（1）程序構思：當用戶在舞臺范圍內點擊鼠標右鍵時，在鼠標右鍵點擊的位置，淡入淡出地彈出（顯示）一個快捷菜單，讓用戶選擇他要觀看的內容，按下鼠標左鍵后選定內容，然后讓計算機執行相應的演示。

（2）程序實現

　　a.編寫菜單控制腳本（響應范圍是全局的），按 打開腳本編輯窗口，起名為“Menu Control Script”，按腳本編輯窗口右上角的  （屬性）按鈕，設置其腳本類型（type）為“movie”。

然后在腳本編輯窗口里寫入以下腳本：

--程序初始化

on startMovie

-- 開始時菜單應為不可見,直到用戶點擊鼠標右鍵時才顯示,所以先隱藏菜單

HideMenu

--初始化菜單和菜單陰影的基點(使其能顯示在正確的位置)

set the regpoint of member "menu" to point(0,0)

set the regpoint of member "shadow" to point(0,0)

alert“在舞臺范圍內按鼠標右鍵觀看效果！”

end startMovie

--顯示菜單事件

on ShowMenu

--打開通道2至12,顯示菜單和菜單選擇棒(由于選擇棒的透明度(blend)為0所以暫時看不到)

repeat with i=2 to 12

set the visible of sprite i to 1

end repeat

--設置菜單和陰影的位置為鼠標點擊的位置(使菜單能動態跟隨鼠標)

set the loc of sprite 2 to the mouseloc

set the loc of sprite 3 to the mouseloc

--菜單選擇棒動態跟隨菜單（以菜單的位置為基準坐標，相對地改變選擇棒位置）

repeat with i=1 to 9

--96 是菜單選擇棒相對于菜單水平坐標的偏移值

sprite (i+3).loch = sprite(3).loch + 96

--32 是菜單選擇棒相對于菜單垂直坐標的偏移值

--19 是菜單棒的高度

sprite (i+3).locv = sprite(3).locv + 32 + (i-1)*19

end repeat

--菜單的淡入淡出效果(透明度從10漸變到100)

repeat with i=10 to 100

set the blend of sprite 3 to i

i=i+10

updateStage

end repeat

end

--隱藏菜單事件(只是將通道2至12關閉，使其不可見)

on HideMenu

repeat with i=2 to 12

set the visible of sprite i to 0

end repeat

end
b.編寫菜單項選擇棒行為腳本（響應范圍只限于賦予本行為的角色），按窗口上角的  按鈕，新建一個腳本，起名為“Show Bar Script”，設置其腳本類型（type）為“behavior”。然后在腳本編輯窗口里寫入以下腳本：

--當鼠標移入當前菜單選擇棒時,即用戶選中某菜單項了

--讓鼠標指針變成小手形狀,且把菜單選擇棒的透明度改成100(完全可見)

on mouseEnter

sprite (the currentSpriteNum).blend = 100

cursor 280

end mouseEnter

--當鼠標移出當前菜單選擇棒時,即用戶不選某菜單項了

--把鼠標指針還原成原來指針形狀,且把菜單選擇棒的透明度改成0(不可見)

on mouseLeave

sprite (the currentSpriteNum).blend = 0

cursor -1

end mouseLeave

--當用戶在某一菜單選擇棒上按下鼠標時,執行相應的操作

on mouseDown

-- 通過 the currentSpriteNum(鼠標點擊的菜單選擇棒的角色編號) 屬性,

-- 可以讓計算機知道用戶選擇的菜單項，進而使計算機做出相應的操作。

case (the currentSpriteNum) of

4:alert"跳轉到 Windows XP 畫面!"

5:alert"跳轉到 Windows 2000 畫面!"

6:alert"跳轉到 Windows NT workstation 4.0 畫面!"

7:alert"跳轉到 Windows NT Sever 4.0 畫面!"

8:alert"跳轉到 Windows ME 畫面!"

9:alert"跳轉到 Windows 98 畫面!"

10:alert"跳轉到 Windows 95 畫面!"

11:alert"跳轉到 Windows CE 3.0 畫面!"

12:alert"跳轉到 Windows NT Embedded 畫面!"

end case

end mouseDown


c.編寫畫面行為腳本（相應范圍是當前幀），按窗口上角的  按鈕，新建一個腳本，起名為“Frame Script”，設置其腳本類型（type）為“behavior”。然后在腳本編輯窗口里寫入以下腳本：

on exitFrame me

go the frame

end

--當鼠標右鍵按下時顯示菜單

on rightmousedown

ShowMenu

end

--當鼠標按下時顯示菜單

on mouseup

HideMenu

end

OK! 腳本寫完了！我們來做最后一步吧——“靈魂附體”！呵呵！






圖 7

5．給角色植入“靈魂”

（1） 打開分鏡表，單擊第1幀畫面的畫面腳本（如圖7），將“腳本列表”中的“Frame Script”腳本拖至其中。

（2）打開分鏡表（已打開就可跳過此步），選擇通道4~12角色（即菜單項選擇棒）（如圖8），將“腳本列表”中的“Show bar Script”腳本拖至其中。






圖 8



　　OK了！總算大功告成！是不是有些成就感啊，呵呵！快按 試一下吧！

　　以上是我模仿Windows XP 的菜單做的一個演示，但是用上面的這種方法，你可以發揮你自己的想象力以及用適當的lingo腳本，制作一些其它風格的菜單和效果，比如不規則的菜單啊、讓菜單項前面的小圖標動起來啊什么的。

　　最后，希望通過本例的制作，能使各位加深對Director 8.5的了解和應用。