Jun 19, 2009
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!!
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.
The file must be organized in pages, the links that will be created work from page to page.
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.
Select the Rectangle Hotspot Tool (J) at the web tool bar.
Add the shapes to all areas where you wish to create the links.
Make sure to give the proper dimension to the hotspot shapes when needed.
After we create the shapes, we will set the properties for each of them.
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.
Now we will set the links to the pages where the shapes will be directed.
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.
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.
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).
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.
And that is the logic of this, we link the pages and create the relations between it.
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.
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)!