navigational design
Goals: This session will demonstrate how to design interactive navigational elements using Fireworks. We will show three kinds of navigation elements: popup menus, rollover menus and swap image menus. In the hands-on session, we will cover the process of creating, programming and editing buttons.
- Introduction to Interactivity
- Creating Popup Menus
- Creating Rollover Menus
- Complex Swap Image Menus
- Exercise
introduction to interactivity
As a web site is designed, buttons may be added to enhance the interactivity to site pages. The buttons can be simple rectangles with the name of the link or 3D buttons that react to the mouse by changing color, glowing, or taking on the look of a mechanical button that has been pressed down.
In Fireworks, a variety of buttons can be created, complete with all the JavaScript and HTML that make them work. The button editor makes it easy to create simple and complex button elements.
A rollover button is an image that changes appearance when a user moves the pointer over or clicks it. There are four states:
- Up - Frame 1
- Over - Frame 2
- Down - Frame 3
- OverWhileDown - Frame 4
creating pop-up menus
Pop-up menus are displayed in response to a pointer triggering it. Pop-up menu items can have URL links attached to them for navigation. For example, pop-up menus can be used to organize several navigation options that are related to a button in a nav bar. Sub-menus can be created in pop-up menus for as many levels as needed.
Each pop-up menu item appears as an HTML or image cell, and has an up state and an over state. To preview a pop-up menu, press F12 inside Fireworks. The preview mode in Fireworks does not display pop-up menus.
creating rollover menus
Rollover menus take advantage of Fireworks button symbols to create a navigation scheme. Button symbols are created in the button editor. Any object can be made into a button. A button can be made from scratch, or converted from an existing object.
A button is a special type of symbol. Instances of a button can be dragged from the Symbol library into a document. Using instances of a button allows for the text and/or graphical appearance of a button symbol to be changed once, with changes cascading to all instances of the symbol.
- The text, URL, and target for one button instance can be made without affecting other instances of the same button, and without breaking the symbol-instance relationship.
- A button instance is encapsulated. Dragging the button instance in the document moves all the components and states associated with it, so there is no more need for messy multi-frame editing.
- A button is easy to edit. Double-click the instance on the canvas, and make changes it in the button editor or the Property Inspector.
- Like other symbols, buttons have a registration point. The registration point is a center point that helps align text and the different button states while in the button editor.
creating swap image menus
Swap image menus can be used to provide additional information regarding the menu choice. In Fireworks, a swap image behavior can be assigned to any slice (slicing is a technique of defining areas of a graphic in Fireworks which will be exported to different files; it will be covered in greater detail in the lesson on Creating Graphical Content). Any slice object can have a swap image behavior. Content to be displayed in each swap is held in a separate frame within Fireworks. In the example, there are 11 frames. Fireworks programs each button to show the appropriate frame on rollover.
- Frame 1 - Up State
- Frame 2 - Over State
- Frame 3 - Mission Info
- Frame 4 - Staff Info
- Frame 5 - Tutors Info
- Frame 6 - Hours Info
- Frame 7 - Registration Info
- Frame 8 - Resource Info
- Frame 9 - FAQ Info
- Frame 10 - Sitemap
- Frame 11- Webmaster
