We’ve talked about why Fireworks is a great tool for prototyping. Now let’s talk about some of the features it gives us to work with. Since Fireworks was designed to create web graphics, it has some very helpful tools.
PAGES
Let’s say we’re creating an interactive prototype for a website. The first step is to set up a document with multiple pages. Each of the names of these pages should be web-safe (They should contain no capitals, spaces, or special characters). The home page should be named “index”. You can use a master page for all the elements that will be consistent throughout all views.
STATES
States give the client even more interactive feedback by allowing you to make hover states for navigation elements. Simply add a new state in the states panel (you can even do this on the master page) and place the hover state of only the changing elements in the new state.
SLICES & HOTSPOTS
Slices are used to define interactive regions and regions that link to other pages. Hotspots define linked areas. To turn a slice into a hotspot, you click and drag the target from the middle of the slice back to the same slice. After you have done this, Fireworks will ask you which state you want to use for the image swap. The “Preview” button at the top-left of the PNG document will allow you to test any hover states you have created. If any of these hover states will be on all pages, you can make them in the master page to save time.
LINKING PAGES
You can also use hotspots to create linked areas. These links can be either internal or external. For external links, you need to type the entire address (i.e. http://www.itzetta.com) into the Link field on the properties panel. For an internal link, you can type in the page name like pagename.htm or select the correct page from the dropdown menu. This is where things will break down if your page names are not web friendly.
HTML SLICES
There are three types of slices: foreground image, background image, and HTML, with foreground image being the default. HTML slices allow you to place any HTML code into the area where the HTML slice is. This includes Google Maps, videos, animations, and more. Just remember to use an iframe to insert these elements and make sure the height and width of the element matches that of the HTML slice.
EXPORTING
After you’re done creating all the pages, states, slices, hotspots, and links you need, it’s time to export. Before doing so, you can go to File à Preview in Browser à Preview all Pages in Browser. This will allow you to see all the pages with any interactions and internal links working.
Once you’ve tested out everything in the browser preview, you can go to File à Export… In the dialog box that pops up, you should choose “HTML & Images”, “Export Slices”, “All Pages”, “Include Areas Without Slices”, and “Images in Subfolder.”
When it’s all done saving, your interactive prototype is ready to show to the client! If you get any feedback, it’s easy to make changes to the Fireworks document and save a new prototype to show the client.
Just remember, Fireworks uses simple HTML files and images to build interactive prototypes. These files should not be used for the final product, since they contain subpar code. However, they are great for a quick prototype.