This is my first tutorial and I really want to explain to you how to generate interactive prototypes directly from Fireworks in a PDF format. This kind of prototype can be very useful for layouts approval with clients or just to make the communication between the design development team easier.

As the first version of the tutorial was in Portuguese, so you will find some portuguese/english translations here. In case you have any questions let us know!!

Step 1

The whole process is pretty simple, we just need to focus on the preparation of the file that will be exported. For that I will use a wireframe sample for an institutional website. The PNG file that I'm using is available here.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

The file must be organized in pages, the links that will be created work from page to page.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Step 2

Let's start to create the Hotspots, which are the marks for the "clicking" areas of each page. We will begin with Home, that will also be initial page from the PDF.

Step 3

Select the Rectangle Hotspot Tool (J) at the web tool bar.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Step 4

Add the shapes to all areas where you wish to create the links.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Make sure to give the proper dimension to the hotspot shapes when needed.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Step 5

After we create the shapes, we will set the properties for each of them.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

An important detail: verify every shape to make sure they are all Rectangles, not Polygons, or the links won't work. Usually when we re-dimension the shapes they go back to the polygon state, that's why we need to verify it.

Step 6

Now we will set the links to the pages where the shapes will be directed.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

In the above image we have the shape news (noticias) selected, so we will select the page news.htm that will be the place that the link will direct.

In the next field, under the link option, we can add an alternative text for the image, but that is not necessary.

And following these steps we create the links for all the shape from the initial page.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Step 7

Now we will go to the next page. At the Products (produtos) page we will copy and paste the same shapes from the menu. They work the same way.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Now we will create a shape for the maximized picture of the product. So we direct the link to the page Produtos_ampliação.htm (maximized product).

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

At the Produtos_ampliação page we have the window that is the maximized picture and the Close button, where we will apply a new shape to return to the previous page, Products.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

And that is the logic of this, we link the pages and create the relations between it.

Step 8

Now we will export the file. To do that go to the File> Export. Now you just need to save it to the destination folder as bellow.

Image selected for Reader Tutorial: Fireworks - Interactive Prototypes in PDF

Now you just need to test all the links from the PDF and use them as you want. You can check out the PDF I created here.

I hope you liked the tutorial!!

About the author

My name is Marcon Zanin and I`m a 26 years old interface designer from Chapecó/SC, Brazil. If you want know more about my work visit my portfolio (www.hidrocolor.net) or you can also Follow me on twitter (twitter.com/marconz)!

About the author of this post

Would like to write a guest post for us?

If you would be interested in writing some guest articles or even become a regular contributor, send us an email to abduzeedo[at]abduzeedo.com requesting a contributor account.