Rapid prototyping in Fireworks CS5 – Interactive prototypes with annotations
Recently I discovered an amazingly useful extension for Fireworks by Mariano Ferrario called the Annotations plugin.
What’s great about this tool is that it allows you to add notes and annotations inline to your wireframe, as you’re developing it. I’ve found it handy to use it to add notes, questions, etc, as the concept moves along, and these can easily and quickly evolve into functional specification notes as the solution becomes more defined. The plugin handles annotations on a separate layer, so you can easily switch them off to export out a clean wireframe.
By far the most useful part about this tool is its export options. Out of the box the plugin lets you export your notes as text, CSV, XML, image, HTML and PDF.
The most useful format is the HTML, image or PDF export, which displays your annotations either to the right of, or bottom of your annotated diagram. The HTML output provides a slideshow of templates, and ability to jump between templates.
How to get interactive prototypes with side annotations
Just a note that this is a workaround solution, so there’s some effort involved, but I’ve tried to minimise the number of steps required.
See a working example here (runs in Firefox or Safari)
What you’ll need:
- Adobe Fireworks CS5
- Annotations plugin
- The ability to run Applescript (i.e, be on a Mac… sorry PC users )
- Firefox or Safari (I haven’t yet written the code for IE or Chrome, as I don’t personally need it, but I may add this in later…)
- Plain text editor (or other script editor)
Files you’ll need:
- I’ve also included a Fireworks file, example.png, and an example of the output you can expect.
1. Setting up the required files
Create a new folder for your interactive prototype, and place the files listed below in the folder.
- index.html - The interactive prototype with annotations uses frames. The main frame displays the interactive prototype, and the side frame displays the annotations for the page. This file sets up the frames, with some additional code to allow the annotations frame to collapse.
- transform.html - This is the html file that is loaded in the annotations frame. It provides some code to run the XSL transformation on the annotations XML. It’s needed to tell the frame what set of annotations to load, based on the current page being displayed.
- style.xsl - This is the code that transforms your XML annotations to be displayed.
- style.css – A CSS style file for the display of the annotations. Feel free to fiddle with this file to get a style that suits you.
2. Point index.html to the correct file
Open up index.html in a text editor, or any script editor.
Where you see the following lines, you’ll need to change “Home.htm” to the filename of your landing page.
<frame src="Home.htm" name="main" />
Once you’ve done the initial steps, the next set of steps are what you use each time you want to export a new version of the prototype, or if your annotations have changed.
1. Export your interactive prototype using Fireworks HTML export
1. Export your Fireworks file as HTML using the inbuilt export feature (File > Export). If you don’t have one, you can use example.png for a test run.
Make sure you select the following options as shown below:
- Export: HTML and images
- HTML: Export HTML file
- Slices: Export Slices
- Pages: All Pages
- Check “Include areas without slices” and “Put images in subfolder”
Your folder should now be filled with your interactive prototype files.
2. Run the Applescript against your interactive prototype HTML files
You’ll need to do this whenever your html files change.
3. Export your annotations as XML
You’ll need to do this when you want to export out a new version of your annotations.
In the Annotations panel, export your annotations as an XML file, and point to the folder in which your interactive prototype sits.
Rename the XML file that has been output to “source.xml”.
View your interactive prototype
Open index.html in Safari or Firefox, and voila! As you click around your interactive prototype, the annotations should change according to the page being displayed.
Here’s one I prepared earlier… (runs in Firefox or Safari)
Happy interactive prototyping!