Este é meu primeiro tutorial e nele quero explicar como você pode gerar protótipos interativos diretamente do Fireworks em formato de PDF. Esse tipo de protótipo pode ser bastante útil para aprovação de layouts com clientes ou para facilitar a comunicação e entendimento entre a equipe de desenvolvimento e design.

Passo 1

O processo todo é bem simples, apenas precisamos focar na preparação do arquivo para a exportação. Para isso vou utilizar um exemplo dewireframe para um website institucional. O arquivo PNG. que estou utilizando pode ser encontrado aqui.

O arquivo precisa estar organizado em páginas, os links que serão criados funcionam de página para página.

Passo 2

Vamos começar a criar os Shapes(Hotspots), que são as marcas das áreas de cliques presentes em cada página.Vamos iniciar pela Home, que será também a página inicial do PDF.

Passo 3

Selecione a ferramenta (Rectangle Hotspot tool) na barra de ferramentas Web.

Passo 4

Crie os Shapes em todas as áreas que deseja criar os links:

Dimensione os Shapes de hotspots quando necessário:

Passo 5

Depois de criarmos os Shapes, vamos configurar as propriedades de cada um deles.

Um detalhe importante: Verifique em cada um dos Shapes se ele é um Rectangle(retângulo) ou um Polygon(polígono).
Precisamos que todos estejam configurados como Retângulos, caso contrário, o link não funcionará.
Geralmente quando redimensionamos os shapes eles retornam para o estado de polígono.Por isso é preciso ficar atento.

Passo 6

Agora vamos configurar os links para as páginas que os shapes serão direcionados.

Nesse caso abaixo, temos o shape notícias selecionado, então vamos selecionar a página Notícia.htm que será para onde o link direcionará.

No próximo campo, abaixo da opção de links, podemos descrever um texto alternativo para a imagem, mas não é necessário.

E assim seguimos criando os links em todos os Shapes dá página Inicial.

Passo 7

Passamos para a próxima página. Na página Produtos vamos copiar e colar os mesmos shapes do menu e de marca. Esses funcionam igual.

Depois vamos criar um shape para a ampliação da imagem do produto.Direcionamos o link para a página Produtos_ampliação.htm.

Na página Produtos_ampliação temos a janela de ampliação da imagem e o botão Fechar, onde vamos aplicar novo shape para voltar para a página anterior Produtos.

E essa é lógica, vamos linkando as páginas e criando as relações.

Passo 8

Agora vamos para a exportação: No menu File(Arquivo) temos a opção Exportar. Selecionamos as opções como no exemplo abaixo, selecionamos a pasta de destino.

Agora é só testar todos os links do PDF e utilizar à vontade. Você pode conferir o PDF que criei clicando aqui.

Espero que tenham gostado!

Sobre o autor

Meu nome é Marcon Zanin, tenho 26 anos e sou um designer de interface de Chapecó/SC. Se quiser saber mais sobre o meu trabalho visite meu portfolio (www.hidrocolor.net) ou me acompanhe via twitter (twitter.com/marconz)!