How to create animated menus with Adobe Fireworks如何创建动画菜单，用Adobe烟花

Posted on September 7, 2008 at 5:38 am张贴于2008年9月7日在上午05时38分

Fireworks is best known for its capability to create rapid DHTML prototypes.  By letting you create vectors and bitmaps on the fly, it frees up the designer of the task of switching from a DHTML editor to a bitmap or vector editor.  Adobe Fireworks let you create image maps called hotspots on the specified area of the image file you are editing.  This in turn can be used as a menu with a corresponding target URL or action.烟花爆竹是最出名的能力，创造快速的DHTML的原型。让您创建的载体和点阵图对果蝇，它释放的设计师的任务切换从一个DHTML编辑器，以一个位图或矢量编辑器。 Adobe公司的烟花让你创造影像地图的所谓热点，对指定地区的图像文件，您正在编辑。反过来，这可被用来作为菜单与相应的目标URL或行动。

The best way to get Fireworks is via its website:最佳获得途径烟花是通过其网址： www.adobe.com/products/fireworks www.adobe.com /产品/烟花爆竹 . 。 Adobe frequently has promos for customers who buy their software in package.  If you are a Photoshop or Flash user then you might get a discount if you buy them together. Adobe公司经常茂德为客户谁买他们的软件在程序包。如果你是一个Photoshop或闪光的用户，然后您可能会获得折扣如果你购买了他们在一起。

Once you get the software installed, click menu File > New一旦您获得安装的软件，单击菜单文件“ >新

形象

You can set the size of the image and the resolution you want to create.  After clicking OK you will get a blank document of that size you chose:您可以设置大小的形象和决议您想要建立后，单击确定，你将获得一个空白文件，该尺寸您选择：

形象

This will serve as your canvas.  To put a text on it click the A icon under the Vector frame:这将作为您的画布上。提出的文本，它按一下1图标下的载体框架：

形象

After that you can start typing in text to the canvas:之后，您就可以开始输入在文本到画布上：

形象

In the example above, I typed “Menu” using the Arial font of size 21.  The Properties tab below automatically changes to Text properties upon entering text mode.在上面的例子中，我输入“菜单”使用外加的字体大小21 。属性选项卡下面的自动更改文字属性后，进入文本模式。 You can use this to edit the properties of the text selected.您可以使用此编辑的属性的文本选定。

To add a clickable zone (ie hotspot)  on the area of the text, click the rectangular hotspot tool under the Web frame then drag a rectangle on the area around the “Menu” text:要添加点击区（即热点）对地区的文本，单击矩形热点工具下， Web框架，然后拖动一个矩形对周围地区的“菜单”文本：

形象

It will create a bluish rectangle with a clock icon on the hotspot:它将创造一个蓝矩形与一个时钟图标，就热点：

形象

If you click the clock icon you will be asked to choose from several options.如果您按一下时钟图标，您会被要求选择从几个选项。 Choose Add Pop-up Menu…选择添加弹出式菜单中…

形象

The Pop-up menu editor should appear.  type here the text and the link of the menu items you want to appear under the “Menu” text:弹出式菜单编辑器应该会出现。此处输入的文本和链接的菜单项您想要显示，根据“菜单”文本：

形象

I typed the search engines and after pressing Next you will see the Appearance tab: i输入的搜索引擎和紧迫后，明年你会看到外观选项卡：

形象

Here you can set the colors and the font of the submenu.  The “Up State” is the appearance when you are not hovering  your mouse pointer over that item.  The “Over State” on the other hand is the active state when the mouse pointer hovers over it.  The lower part of the Appearance tab also shows the preview of the submenu so you can see real time the appearance of your chosen font and color schemes.在这里您可以设置颜色和字体的子。 “了国家”的出现，当你不悬停将鼠标指针该项目。 “国有” ，另一方面是活跃的状态时，鼠标指针徘徊在超过它。低下的一部分，外观选项卡也显示预览子，所以你可以看到实时的出现，您所选择的字体和颜色的计划。

After the Appearance tab comes the Advanced tab:之后，外观选项卡来了先进的标签：

形象

Here you can set the cell padding, width, height, spacing and also you can edit the borders of the menu.  Experiment with different parameters to these advanced settings to get the look that you want.在这里您可以设置单元格填充，宽度，高度，间距和您也可以编辑的边界菜单。试验不同的参数，以这些先进的设置，以获得看看您想要的。

the last tab is the Position tab wherein you can set where the pop up menu will appear relative to the hotspot.  On the example below I chose the second option wherein the menu is at the bottom of the hotspot:最后一个标签是标签，其中的立场，您可以设定当弹出菜单中会出现相对的热点。对下面的例子中我选择了第二种选择其中的菜单是在底部的热点：

形象

After clicking Done , the canvas will appear along with the ghost outline of the pop-up menu:点击后做了 ，画布会出现随鬼纲要弹出式菜单：

形象

To preview the output, click File > Preview In Browser :预览输出，单击文件“ >在浏览器中预览 ：

形象

You should see your browser appear with the generated HTML displaying on it:您应该可以看到您的浏览器出现与生成的HTML上显示：

形象

When you hover over “Menu” the Google and Yahoo pop-up menu will appear.  After you are satisfied with your work, you can export the project into a complete HTML and images files.  Just click File > Export to do this.  Also, you can save the project to a PNG format so you can edit it later.当您悬停超过“菜单” Google和雅虎的弹出式菜单中会出现后，您满意您的工作，您也可以导出该项目纳入一个完整的HTML和图像档案。只需点击文件“ >出口做到这一点。此外，您可以保存该项目到一个PNG格式，使您可以编辑它。

This is only the basic capability of Adobe Fireworks, you can do a lot more with its powerful vector and bitmap editor and its capability to create web pages and layers very quickly.这仅是基本能力的Adobe烟花爆竹，您可以做的工作很多，更以其强大的矢量和位图编辑器及其能力，制作网页和层非常快。

If you liked this tutorial on creating animated menus, you also might be interested in other related articles like how to如果您喜欢这个补习，创造的动画菜单，您也可能有兴趣在其他相关条款一样，如何 create animated Flash menus创建动画的Flash菜单 , how to ，如何 create animated GIFS online创建动画GIF在线 , and how to ，以及如何 create an animated avatar创建一个动画阿梵达 . 。

Ben Carigtan writes about computers, technology and how to get the best out of them.本carigtan写电脑，技术，以及如何获得最佳的出他们。

Enjoyed this post?享有这个职位呢？ Subscribe to Online Tech Tips via订阅在线科技提示通过 RSS Feed RSS馈送 or via或通过 Email电子邮件 and receive free daily productivity tips.并获得免费的每日生产力的秘诀。

» Filed Under »提交下 Computer Tips电脑提示

添加到美味 Save this page 保存此页 mixx它 Stir it up on Mixx 轰动起来就mixx
reddit Add to Reddit 添加到reddit stumbleupon Stumble this page 蹒跚此页

Related Posts 相关文章

One Response to “How to create animated menus with Adobe Fireworks” 1回应“如何创建动画菜单，用Adobe烟花”

      Pingbacks pingbacks
    1. How to make photo slideshows in Fireworks CS3 如何使照片幻灯片在Fireworks cs3 Says: 说：

      [...] you are an avid Fireworks user, also check out my other post on how to create animated menus in Fireworks. [ … … ]您是一位热心的烟花用户，还检查出我的其他邮政就如何创建动画菜单，在烟花爆竹。 If you don’t have Fireworks, you can also create DVD photos slideshows in Vista using the [...]如果您还没有烟花爆竹，您还可以创建DVD的照片，幻灯片，在Vista中使用[ … … ]

      September 8th, 2008 at 5:19 am 2008年9月8日在上午05时19分
    Please post your comments/suggestions! 请张贴您的意见/建议！