TUTORIAL MARCH 14 , 2001
Revisiting Popup Menus in Fireworks 4
The good news, the bad news and the partial workaround
One of the great new features in Macromedia Fireworks 4 is the ability to create interactive menus practically on the fly. When I reviewed Fireworks last week, I touted this feature as one of the best reasons to upgrade from version 3 to version 4. I might have jumped the gun there. It seems there are some problems with the interactive menu feature in Fireworks 4. So let's take a look.
We';ll start off by learning how to create the actual menus in Fireworks. Then we'll look at how to use Dreamweaver to bring them into an HTML page and fix up the positioning of the popup elements.
Now all you have to do is select a slice by clicking on it with the arrow tool and then choose Insert > Pop-up Menu.
You will get a dialog box asking you to fill in a few blanks so that Fireworks can know what to do with your menu. Notice that in my example below, several of the menu items are indented. This indentation turns these items into submenus of the item above them. You can indent again to make sub-submenus, apparently without limit.
If you created your menus out of order, you can just drag them around in this dialog box to position them correctly. If any become indented against your will, just click on the outdent button to return them to a normal state. When you're done filling in the information, click "Next."
All that's left to do is pick your style. You can choose from text or images, with a few different options for each.
Lather, rinse and repeat for each hotspot you created on your original image.; When you're done, you can preview your work directly from Fireworks in your browser to make sure that everything's right.
Of course, as we already knowand contrary to what you see previewed in your browsereverything is not all right. This will become clear when you try to place your new menu into an HTML document.
menus into an HTML document
Now launch Dreamweaver and open up a document or create a new one. Place your insertion point where your menu will actually reside on the final page. Then choose Insert > Interactive Images > Fireworks HTML.
Because you highlighted that table in the regular view, your code view will already have your code highlighted. Find the part of the code that says, <a href="#" onMouseOut="FW_startTimeout();" onMouseOver="window.FW_showMenu(window.fw_menu_0,100,10);" >. (Yours will vary from this.) See that little part at the end that reads, menu_0,100,10? The "100" and "10" are the horizontal and vertical positions of the menu relative to the top left corner of your document (100 pixels over and 10 down). All you have to do is change these to match the position of your actual menu. In many cases, this will be simple because you're probably going to have your menu near the top of your page, and the position won't change much from browser to browser. So just enter appropriate values to match the position of your navigation bar. Repeat this process for each of the menus listed in your codes view (menu_1, menu_2, etc.).
If you have your menu buried somewhere in the middle or near the bottom of the page, this will be more of a problem because the position is likely to be dramatically different depending on the viewer's browser, screen resolution, window size, etc.
At any rate, this problem forces me to revise my recommendation about upgrading to Fireworks 4 until it's resolved. Hold off until there's a fix for this. There's no reason to go headlong into buying software that's not ready for professional use.
Post a message in the Creative Mac World Wide User Group.
Dave Nagel is the producer of Creative Mac and Digital Media Designer; host of the Creative Mac, Adobe InDesign, Adobe LiveMotion and Synthetik Studio Artist WWUGs; and executive producer of Creative Mac, Digital Media Designer, Digital Pro Sound, Digital Webcast, Plug-in Central, Presentation Master, ProAudio.net and Video Systems sites. All are part of the Digital Media Net family of online industry hubs.