本文发表在 rolia.net 枫下论坛54 制作具有Win XP 风格的菜单.
制作具有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)。然后将图片复制到剪贴板
(3)按上述方法依次单画板窗口左上角的 按钮,再新建三张图片,制作菜单的阴影(图片大小:196*200)。起名为“shadow”;菜单项选择棒(图片大小:188*19,如图2),起名为“selectbar”;背景(图片大小:随你),起名为“background”。
说明:
以上图片需要用Photoshop等图形制作处理进行处理。
(1)对于阴影图片要通过羽化效果实现。
(2)对于菜单项选择棒图片,这里的边框线为皮蛋青(#008080),框内是由下往上的皮蛋青渐变色(#9CCECE → #000000)。
好!所需的演员成员已经全部到齐,哈哈,下面开始“编剧”!
3.编辑电影剧本
(1)按 打开演员库,将刚才制作的图形演员拖到舞台(Stage)上进行演出。将他们排列组织好(如图 3)。
【注】按菜单条的个数重复地拖入菜单项选择棒。
(2)按 打开分镜表(Score),对分镜表里的角色进行整理和编辑。打开分镜表的效果通道开关(见图4)。
(3)设置通道1和3的角色(即背景和菜单)的ink 效果为Copy,透明度为100(如图 5)。
(4)设置通道2角色(即菜单阴影)的ink 效果为 Darkest,透明度为50。操作类似于上一步。
(5)设置通道4~12角色(即菜单项选择棒)的ink 效果为Transparent,透明度为0。
好! 到现在为止已经完成整个工程的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! 脚本写完了!我们来做最后一步吧——“灵魂附体”!呵呵!
5.给角色植入“灵魂”
(1) 打开分镜表,单击第1帧画面的画面脚本(如图7),将“脚本列表”中的“Frame Script”脚本拖至其中。
(2)打开分镜表(已打开就可跳过此步),选择通道4~12角色(即菜单项选择棒)(如图8),将“脚本列表”中的“Show bar Script”脚本拖至其中。
OK了!总算大功告成!是不是有些成就感啊,呵呵!快按 试一下吧!
以上是我模仿Windows XP 的菜单做的一个演示,但是用上面的这种方法,你可以发挥你自己的想象力以及用适当的lingo脚本,制作一些其它风格的菜单和效果,比如不规则的菜单啊、让菜单项前面的小图标动起来啊什么的。
最后,希望通过本例的制作,能使各位加深对Director 8.5的了解和应用。
更多精彩文章及讨论,请光临枫下论坛 rolia.net
制作具有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)。然后将图片复制到剪贴板
(3)按上述方法依次单画板窗口左上角的 按钮,再新建三张图片,制作菜单的阴影(图片大小:196*200)。起名为“shadow”;菜单项选择棒(图片大小:188*19,如图2),起名为“selectbar”;背景(图片大小:随你),起名为“background”。
说明:
以上图片需要用Photoshop等图形制作处理进行处理。
(1)对于阴影图片要通过羽化效果实现。
(2)对于菜单项选择棒图片,这里的边框线为皮蛋青(#008080),框内是由下往上的皮蛋青渐变色(#9CCECE → #000000)。
好!所需的演员成员已经全部到齐,哈哈,下面开始“编剧”!
3.编辑电影剧本
(1)按 打开演员库,将刚才制作的图形演员拖到舞台(Stage)上进行演出。将他们排列组织好(如图 3)。
【注】按菜单条的个数重复地拖入菜单项选择棒。
(2)按 打开分镜表(Score),对分镜表里的角色进行整理和编辑。打开分镜表的效果通道开关(见图4)。
(3)设置通道1和3的角色(即背景和菜单)的ink 效果为Copy,透明度为100(如图 5)。
(4)设置通道2角色(即菜单阴影)的ink 效果为 Darkest,透明度为50。操作类似于上一步。
(5)设置通道4~12角色(即菜单项选择棒)的ink 效果为Transparent,透明度为0。
好! 到现在为止已经完成整个工程的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! 脚本写完了!我们来做最后一步吧——“灵魂附体”!呵呵!
5.给角色植入“灵魂”
(1) 打开分镜表,单击第1帧画面的画面脚本(如图7),将“脚本列表”中的“Frame Script”脚本拖至其中。
(2)打开分镜表(已打开就可跳过此步),选择通道4~12角色(即菜单项选择棒)(如图8),将“脚本列表”中的“Show bar Script”脚本拖至其中。
OK了!总算大功告成!是不是有些成就感啊,呵呵!快按 试一下吧!
以上是我模仿Windows XP 的菜单做的一个演示,但是用上面的这种方法,你可以发挥你自己的想象力以及用适当的lingo脚本,制作一些其它风格的菜单和效果,比如不规则的菜单啊、让菜单项前面的小图标动起来啊什么的。
最后,希望通过本例的制作,能使各位加深对Director 8.5的了解和应用。
更多精彩文章及讨论,请光临枫下论坛 rolia.net