[原创]自己制作动感的flash导航条

chrisfang

  最近做网页美化的时候自己做了一个flash的导航条，由于看到目前网上的一些有关此类的教程太过复杂而且问题交待不是很清楚，因此在这里再跟大家分享一下一个基本的flash导航条的制作方法：

  所谓“导航条”就是指一般置于网页上方、可以链接到不同网页位置的按钮菜单。所谓“动感效果”，是指可以响应鼠标在各个按钮图标上移动和点击时产生不同的画面显示效果，此外还可以添加音频等多媒体效果。

  下手开始制作之前，首先需要筹划一下，导航条在原始状态、鼠标移动到按钮上方时、以及点击时究竟需要显示怎样的效果。从简单的来说，我可以设置两种显示状态，一种就是上面图中所示的原始状态，另一种就是文字呈反白显示，按钮图标更突出显示（从原有的水晶覆盖层下显示改为到覆盖层上方显示）。这就需要准备两套不同显示状态下的图片（如果你愿意，当然也可以只用一套图片，而用flash中编辑图片效果的方式来改变另一种状态下的显示效果）。因为原有的静态导航条是我用Photoshop做的，因此准备两套图片不需要新找素材制作，现成就可以拿来使用。

  打开flash mx，文件—导入—导入到库，把需要使用的图片都导入到当前的库中，其中一张底图如下：

 

   其他图片则是各个按钮的原始图标图片。按<F11>可以显示库中的内容，如下图：

 

  接下来，从库中将那张长条形的底图拖入到场景中，并且设置背景文档的大小与底图大小相同：

 

  下面制作各个按钮，插入—新建元件，“行为”选择“按钮”，名字可命名为“首页”，单击确定按钮进入按钮的编辑界面，在上方选中第一帧“弹起”帧（即导航条的原始显示状态），然后将之前导入到库中的代表“首页”的按钮图标拖入到编辑区中，然后添加静态文字，设置字体样式，字体颜色为黑色，将文字和图片的相对位置设置整齐，如下图所示：

 

 

  然后在上方选中“弹起”帧，右键选择“复制帧”，再选中第二帧“指针经过”帧（即响应鼠标动作的显示状态），右键选择“粘贴帧”，然后在“指针经过”帧的编辑区内将文字颜色改为浅蓝色， 如下图所示：

 

 

  再将这个“指针经过”帧复制一下，粘贴到“按下”和“点击”两个帧中。当然，如果你愿意，也可以在“按下”和“单击”两个帧中再制作不同的显示效果，这里我们只采用一种显示变化效果。

  在上方点击“场景1”切换到场景中，从库中将刚才做的“首页”按钮元件拖入到之前添加的底图之上，如下图所示：

 

此时需要做的，是选中这个首页按钮，移动它的位置（可按方向键进行移动），使得那个图标能够和底图上的图标位置相重叠，为了显示“凸显”的效果，按钮和底图的图标位置并不需要完全吻合，而是可以稍加一些偏移量，但需要注意的是，各个按钮的偏移方向和偏移大小应该保持基本一致。下图是显示移动位置后的画面：

 

接下来，在库的面板中选中“首页”按钮元件，在右键菜单中选择“编辑”，回到按钮的编辑界面，选中第一帧“弹起”帧，选中其中首页的图标图片，删除。为什么要删除？因为这个帧需要显示的是原始状态，即底图上的图标效果，而不需要再显示鼠标指向后的图标。前面之所以保留这个图片就是为了在上一个步骤中方便按钮与底图进行位置定位。

 参照以上方法，可以依次完成其他十个按钮元件的制作，并在场景一中放置到合适的位置。在库中选中按钮元件可在右键菜单中选择“重制”进行元件的复制操作（不知道什么人的翻译，“重制”这个词用的真是别扭。）按钮全部制作完成并且放置好后，如下图所示：

 

下面的步骤，是为各个按钮添加网页链接。在场景一的编辑区中选中“首页”按钮，注意选中按钮后，下方的“属性”面板中会显示当前选中的为“按钮”元件，“动作”面板中也会显示“动作—按钮”，表示当前可以在按钮中添加动作代码，这里务必保证是在选中按钮元件的情况下添加代码，否则可能把代码错误地添加到帧代码中，而起不到应有的作用。点击“动作”面板打开代码编辑区，可在此处添加按钮的代码。不熟悉代码的朋友不需要着急，有简单的方法可以添加按钮的网页链接：

   在编辑区的右侧打开“行为”面板，单击加号的图标添加行为“web”—“转到web页”，如下图所示：

 

 

在打开的对话框中输入网页链接地址，例如“club.excelhome.net”，下方打开方式选择“_blank”。如下图：

 

单击确定后就会在代码区域中自动生成链接代码，而“动作”面板中也出现了一条新的事件及其动作，但注意现在的还不是我们所要的代码。继续在“行为”面板中选中“事件”下面的下拉菜单，在菜单里选择“按下时”，这样就可以完成我们所需的按键代码。

 

照此方法操作，依次为其他所有的按钮都添加好链接代码，这个flash导航条就可以完成了。

 如果需要增加效果，可以再为按钮在鼠标经过时添加音效，将音效文件导入到库中，然后编辑按钮元件，选中第二帧“鼠标经过”帧，在下方“属性”面板中的“声音”右侧下拉菜单中选中之前所导入的音效文件即可，如下图所示：

最后完成的导航条如下（在上面移动鼠标时注意打开音箱哦）：

 http://blog.excelhome.net/UploadFiles/2008-5/42716.67454964.swf

如果理解这个制作过程，大家还可以制作变化效果更多更炫的导航条，甚至包括子菜单、滑动菜单等等效果。都来试试吧。

[此贴子已经被作者于2008-5-10 12:45:53编辑过]

snood

非常漂亮啊

wisdom100

flash是我的最爱,AS3天地会~~~我爱我追求~~

海浪飞天

很漂亮的啦~~~羡慕中

sdgyc

非常漂亮啊羡慕!!!!!!!!!!!