How to create animated menus with Adobe Fireworks

Posted on September 7, 2008 at 5:38 am

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.

The best way to get Fireworks is via its website: www.adobe.com/products/fireworks. 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.

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:

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. You can use this to edit the properties of the text selected.

To add a clickable zone (i.e. 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:

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:

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:

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.

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.

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, how to create animated GIFS online, and how to create an animated avatar.

Ben Carigtan writes about computers, technology and how to get the best out of them.

» Filed Under Computer Tips

Comments

One Response to “How to create animated menus with Adobe Fireworks”

How to make photo slideshows in 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 [...]
September 8th, 2008 at 5:19 am