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.

Whilst these options are great, I couldn’t help but think that I really wanted the HTML export to display an interactive prototype (clickthrough), rather than just template stills as a slideshow.  So, I made a workaround using a little bit of Javascript, and XSLT, and here’s the results.

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.

The solution is a frames based solution.  It uses the standard HTML export from Fireworks coupled with the XML export of the Annotations plugin. And some javascript and XSLT to link it all together.

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:

Download all files as zip

  • index.html
  • transform.html
  • style.xsl
  • style.css
  • framesScript
  • I’ve also included a Fireworks file, example.png, and an example of the output you can expect.

Initial setup

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.
  • framesScript – you don’t really need to store this file in the folder, but I find it handy to have in the folder for easy access. This is the Applescript that automates some insertion of Javascript into your interactive prototype html files. It’s needed to tell the annotations frame to refresh when a new page is loaded.

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.
<frameset cols="*,300px">
<frame src="Home.htm" name="main" />

Prototype exporting

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.
Run framesScript. This is a simple Applescript file that automates the insertion of some Javascript that’s required on each html file output by Fireworks.  It will ask you to select files of type html, so select all the html files output by Fireworks.

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! :)