操作系统  办公  实用知识  设计  开发  WEB开发  移动开发  数据库  软件工程  网管  安全  管理  信息化  答疑  渠道 

LiveMotion制作下拉菜单

2004-5-17 作者:黎贤文、gate 网友评论 0 条 点击进入论坛

  本例中结合LiveMotion的“Rollovers”对象和动画的行为事件来制作简单的下拉菜单,该菜单初始时只显示一个长条按钮,当用鼠标左键单击该长条按钮时,会出来一系列的菜单选项,鼠标移到相应的菜单选项时,该选项的底色发生变化,效果如图1所示。

图1

1. 在File菜单中点击New命令,打开Composition Settings对话框,设置如图2所示。

 

图2

2. 按OK(确定)按钮,此时得到一个宽度为400,高度为400的新文档。

3. 在工具箱中选择圆角矩形工具  ,拖出如图3所示的一个长条。

 

图3

4. 保持对长条的选择。执行“Window | Styles”命令,以显示Styles(样式)调色板。在Styles(样式)调色板中,选择图4所示的样式,双击鼠标左键以应用该样式。

 

图4

5. 在工具箱中选择多边形工具  ,设置前景色为绿色,然后执行“Window | Properties”命令,以显示Properties(属性)调色板。在Properties(属性)调色板中,设置“Sides”的值为3,用多边形工具在图中画出如图5所示的三角型。

 

图5

6. 将三角型顺时针方向旋转90度角,并将其放置在长条按钮上,结果如图6所示。

 

图6

7. 在工具箱中选择矩形工具  ,画出如图7所示的矩形。

 

图7

8.在工具箱中选择圆角矩形工具  ,并设前景色为灰色,在刚才绘制的矩形上方画一个圆角矩形,如图8所示。

 

图8

9.保持选择上一步所绘制的圆角矩形,然后执行“Window | Rollovers”命令,以打开Rollovers(轮替)调色板。在Rollovers(轮替)调色板中,按下方的新建图标,建立状态:Over,如图9所示。

 

图9

10.保持在“Over”状态,然后执行“Window | Color”命令,并设置颜色为RGB(255,199,0)。这时,可以从图10中看到圆角矩形在Over状态下的变化。

 

图10


 

[下一页]


 

11.按住Shift+Alt组合键,并用鼠标拖动圆角矩形,以复制出四个副本,用来充当菜单选项的按钮,如图11所示。

 

图11

12.接下来为这些按钮加上文字。在工具箱中选择文字工具  ,在第一个按钮中间单击鼠标左键,这时会打开Type Tool对话框,文字的各项设置如图12所示。

 

图12

13.重复上一步的操作,依次为五个按钮加上文字:News、Game、Finance、Bbs、Chat,结图13所示。

图13

14.选择绿色矩形、按钮、文字,然后按Ctrl+G组合键将它们群组起来。如图14所示。

 

图14

15.按Ctrl+T组合键打开Timeline(时间线)窗口。为了便于日后修改,可以将对象的名称由英文改成中文,方法是:在Timeline(时间线)窗口中选中要修改的对象名称,然后按回车键,这时会打开Name(名称)对话框,在输入框中输入有意义的中文即可。本例中,将几个对象改成如图15所示的中文名称。

 

图15

16.拖动时间轴下面的滑块到02s处,设置动画的总长度为2秒。

 

图16

17.将名称为“菜单下拉选项”的对象的起始时间拖到第二帧,如图17所示。目的就是使其在播放动画第一帧时不出现在画面。

 

图17

18.拖动当前时间滑块到00s处,也就是动画开始的第一帧处,接下来将会为这一帧添加标识和行为。单击行为按钮  建立行为,在打开的Edit Behaviors(编辑行为)对话框中,设置“Label”为“开始”,然后在行为列表中选择“Stop”行为,目标选择“Composition”,如图18所示。

 

图18

19.单击“OK”按钮后,此时Timeline(时间线)窗口的显示如图19所示。这样,当画播放在第一帧的时候,执行了“Stop”行为,就不再往下播放。

 

图19

20.回到按钮中,选择第一步所建立的矩形长条,然后执行“Window | Rollovers”命令,使Rollovers(轮替)调色板显示。选择Down状态,如图20所示。

 

图20

21.单击Rollovers(轮替)调色板下方的行为按钮,在打开的Edit Behaviors(编辑行为)对话框中,在行为列表中选择“Go to Label”行为,目标选择“Composition”。接下来再添加“Play”行为,目标选择“Composition”。如图21所示。至此,本例已完成,可以执行“File | Preview In | Internet Explorer”命令,在浏览器中预览动画效果。

图21

已有 0 位对此文章感兴趣的网友发布了看法    
我来评两句 登录邮箱: 密码:
  匿名发表
今日推荐
技术文库(共有 46732 篇文章)
操作系统
办公软件
实用知识
网络管理
软件开发
WEB开发
软件工程
数据库
设计在线
信息安全
行业信息化
管理信息化
重点推荐
电子杂志订阅
点击电子杂志名称查看样刊
输入E-mail地址即可订阅
E-mail