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! 請張貼您的意見/建議！