做动态下拉菜单
　
作者：杨建红　殷红霞
　

　　在网页上用菜单来实现网站或项目的导航不失为一种节约页面空间的好方法。目前大多数网页制作菜单都是用插入表单的方法来实现的，这种表单样式在Windows及应用程序中很常见，看多了就会觉得比较死板。Flash作为一个著名的动画及网页制作软件，它除了能够制作各种各样的动画外，还能制作动态的下拉菜单。用Flash制作的动态下拉菜单，除具有表单制作的下拉菜单所包含的功能和优点之外，不需要写入像表单一样的代码，而且它的变化万千更让人耳目一新。它完全根据开发者的意图（颜色、伸展方向等）进行设计。下面以制作一个“网络与电脑”导航栏为例来介绍这种菜单的制作方法。
　
　
　　制作弹起与按下两种状态的立体按钮底图
　
　　
　
　　制作底图的软件很多，这里选择中文Photoshop 5.0。启动Photoshop，选“文件/新建”，在弹出的对话框中设置并确定如图1。点新建层工具，如图2。点工具栏上的前景色，如图3，在出现的调色板上选“淡蓝色”并确定。点击工具栏上的直线渐变工具，“＋”形鼠标指针从左到右一拖，即可看到渐变色填充至矩形区域，如图4。再选“图层/效果/斜面”和“浮雕”，在出现对话框时设置并确定如图5。选“文件/存储副本”为Up.jpg，如图6。再新建同样大小、同样颜色的图片Down.jpg，只是Down.jpg在用直线渐变工具填色时从右至左拖，在图5中设置角度为－60，与Up.jpg的正好相反。
　
　
　　制作按钮
　
　　
　
　　假如，这里要导航的网站共有“中国电脑教育报”、“软件世界”……六个网站，见图7。那么，我们首先做7个按钮，分别是主选项“电脑与网络”、“中国电脑教育报”等六个网站名称和一个隐藏按钮。
　
　　以[电脑与网络]按钮为例，说明制作过程：
　
　　启动Flash 4，选“Insert/New symbol”，在对话框的“Behavior”中选“Button”并确定，如图8。
　
　　分别点击时间线Over、Down并按F7，插入空白关键帧，见图9。
　
　　鼠标点击“Up帧”，选菜单“File/Import”，在出现的对话框中选取文件Up.jpg并打开，按Ctrl＋K，出现Align对话框，设置如图10并确定，这样底图就居中按放了。
　
　　再选文字工具A，在舞台上拖出文本框，输入“电脑与网络”，调节文本框大小，使之与文字间不留空，选箭头工具，先后按Ctrl＋X(剪去文字)，Ctrl＋V(粘贴)，这样文字正好在底图中央上方，同时选中底图和文字(按住Shift键，分别点击即可)，按Ctrl＋C，点击图9时间线Over帧。
　
　　按Ctrl＋V，把Up帧的内容复制到Over帧，双击Over帧的文字，选中后设置它为蓝色，鼠标再选图9时间线Down帧，选菜单“File/Import”，选中Down.jpg并装入。
　
　　按Ctrl＋K出现图10并确定，使其居中安放，在其上复制Up帧的文字，至此，按钮制作完毕。
　
　　“隐藏”按钮制作时，在Up、Over、Down、Hit，均插入空白关键帧，选中“Hit帧”，用矩形工具在中央位置画一适当大小的矩形即可，如图11。
　
　
　　下拉菜单电影制作
　
　
　
　　选“File/Save”，写入Downmnu并确定，再选File/Publish settings出现对话框中设置如图21并点击[Publish]后确定，网页即生成。双击文件名Downmenu.htm就可看到效果。如果看不到效果，请安装Flash web player。
　
　　
　
　
　　整体效果的制作
　
　　点击[Edit scence]按钮，回到场景舞台，如图17所示。连击两次[Add layer]按钮，增加Layer2、Layer3两层，选择Layer3第一帧，从按钮库中把[电脑与网络]按钮拖至舞台适当位置。并双击当前帧，在出现对话框中设置如图16并选“Stop”后确定，其目的是让它停在这一帧上，选Layer2的第2帧，按F7，插入空白关键帧，选中[Edit Multiple frames]按钮，让所有帧的内容均显示在屏幕上，以便对象对齐。从库中把“下拉菜单电影动画”符号拖到[电脑与网络]按钮的正下方并紧靠，如图18所示，图中的动画符号可能不明显，因为这时下拉菜单还尚未拉出。选中第1层(Layer1)第1帧，鼠标指针不移开，这时指针右下方会出现一个小方框，按住Ctrl键不放，小方框内就出现“＋”号，这时往第2帧一拖，即把第1帧复制到该层的第2帧。选中第1帧，双击舞台中的[电脑与网络]按钮，在出现对话框中设置如图16并选“Goto”，在右边Frame单选钮中选“Next frame(下一帧)”，如图19。其目的是单击后让下拉菜单出现，选中Layer3的第2帧并双击舞台中的[电脑与网络]按钮，在出现对话框中设置如图16并选“Goto”，在右边Frame单选钮中选“Previous frame(前一帧)”，参见图19。其目的是再次单击回去到第1帧并菜单消失。选中Layer3第2帧，按F7，把库中的隐藏按钮拖至舞台中，在隐藏按钮上右击，出现的菜单中选“Scale”。使[隐藏]按钮出现选择柄，然后把它拉大，使它的外边沿比菜单的外边沿大为止，如图20所示。双击隐藏按钮，在出现对话框中设置如图16并选“Goto”，在右边“Frame”单选钮中选Previous frame并确定(参见图19)。其目的是当在菜单外边沿点击时，菜单消失。
　
　
　　保存并生成网页
　
　
　
　　选Insert/New symbol，出现对话框图8中写入符号名为“下拉菜单电影动画”，在Behavior中选Movie clip并确定。为了更好地对齐，请选中View/Grid（网格）、Rulers(标尺)。选择矩形工具(Rectangle)，设置Line colour为黑色、Fill colour为半透明灰色，在中央位置画一长约为130像素点（参照标尺）、高为0的矩形（看起来像水平线）。点击时间线的第13帧，按F7，插入空白帧，再选择矩形工具，在舞台中央画一矩形，要求矩形的宽度与第一帧的矩形的宽度一样，高度约为180像素点，并且，矩形的上边正好覆盖水平线。双击时间线上的第1帧，出现Frame properties 对话框设置如图12，并确定。按Enter键，就有一种幕布下落的效果。连续点击时间线上的“＋”（Add layer）按钮6次，增加6层，名称分别为Layer2、Layer3、……Layer7，先后选中第2层第3帧按F7，插入空白帧，第3层第5帧按F7插入空白帧……，最后时间线如图13所示。按Ctrl＋L出现Library按钮库，选中第2层第3帧(空白关键帧)，把库中的“中国电脑教育报”按钮拖至淡灰色矩形区的正中央，如图14所示。再选中第3层的第5帧，将库中“网络世界”按钮拖到“中国电脑教育报”按钮的正下方，依此类推，把其余四个按钮拖到下方，最后图14就变成图15。双击第7层，最后一帧，出现Frame properlies对话框如图16，选Stop，并确定。这个设置的作用是让下拉菜单拉出来之后，就停在这一帧上。接着双击第一个按钮[中国电脑教育报]，在出现的对话框（图16）中选Get URL，在URL文本框中输入Http://www.cce.com.cn并确定。(注意：这里的Htpp://不能漏掉，否则浏览时可能出错。)其余五个按钮的超级链接用相同的方法完成。
　
　
　　总结说明
　
　　Flash生成的网页可以直接使用，也可以在生成网页之前先设置Stage的大小至合适为止，然后用网页编辑器(如Dreamweaver)把生成Downmenu.swf插入到自己需要位置。