FIREWORKS - Criando um Menu Completo.

Nesta aula vamos criar um Menu Completo, utilizando botões, como aprendido na aula anterior.

VAMU LA!!! VALENDO!!!!

Solicite um documento com as características abaixo:
Largura: 130 px
Altura: 400 px
Resolução: 72 px/inch
Cor do CANVAS: White

Personalize o plano de fundo a sua escolha, como no exemplo abaixo:

Agora crie um botão com o texto TECNOLOGIA e defina as fases de transformação a seu gosto (UP – OVER – DOWN – OVER WHILE DOWN e ACTIVE AREA).

Veja:

No meu exemplo, utilizei um retângulo com chanfros e estilos, alem do texto em Arial Rounded – Centralizado. Decidi apenas acrescentar ao texto, no estágio OVER, um efeito de GLOW (NEVOA) na cor do texto para destacá-lo.

Agora que criamos o primeiro botão, vamos aprender a MULTIPLICAR o mesmo, alterando apenas os textos.

Abra sua biblioteca (MENU WINDOWS – LIBRARY), assim veremos nosso botão disponível nela. Veja abaixo:

Na sua biblioteca, localize e clique no MENU para podermos duplicar o botão já criado. Em seguida clique em DUPLICATE (DUPLICAR). Veja o MENU da biblioteca:

Em seguida, na janela de diálogo que apareceu, definia o nome do novo botão (neste caso – RECURSOS), marque a opção BUTTON e em seguida clique em OK. Note que na biblioteca aparecerá este segundo botão. Veja:

Duplique mais 07 botões para podermos ter todos os botões de nosso MENU. São eles:

HOME

SOFTWARES

HARDWARES

CONTATO

EMPRESA

PRODUTOS

PARCEIROS

Após terminarmos as duplicações, teremos uma biblioteca como a seguir:

Note que não importa a ordem como criarmos os botões, automaticamente a biblioteca organizará em ORDEM ALFABETICA CRESCENTE.

Vamos agora alterar os textos dos botões para terminarmos a edição destes.

Farei pela ordem da biblioteca. Selecione na biblioteca o botão CONTATO e em seguida dê um clique duplo no exemplo deste, acima da lista. Note que seremos direcionados para as fases do botão:

Confira sempre o nome do símbolo em que você está trabalhando. Note que o texto contido no botão é igual ao primeiro botão que criamos.

Agora vamos utilizar a ferramenta TEXT TOOL (FERRAMENTA TEXTO) para alterarmos os textos. Clique no texto atual do botão e faça a alteração digitando o novo texto.

Ao terminar de digitar clique uma vez na ferramenta de seleção e note a mensagem que aparecerá:

Esta janela está te perguntando se você deseja que o FIREWORKS escreva o novo texto automaticamente em todas as fases restantes do botão. Note ainda, que existe um visto para você marcar confirmando este resposta em todas as vezes que você alterar um bota de hoje em diante. Se você marcar, não terá mais volta a não ser corrigindo a instalação do programa pelo Painel de Controle de seu computador.

Clique em YES para confirmar ao FIREWORKS que você deseja que ele escreva o novo texto em todas as fases deste botão (OVER – DOWN – OVER WHILE DOWN) para que você não tenha o trabalho de digitar 04 vezes cada texto.

Após a alteração automática do FIREWORKS, vamos clicar no botão DONE (CONCLUIDO) para retornarmos a lona de trabalho principal.

Repita estes processos para todos os outros botões da biblioteca, lembrando que os botões TECNOLOGIA e CONTATO já estão prontos.

Agora basta arrastar os botões da biblioteca para sua tela, organizando como abaixo:

Não se preocupe com a distribuição e alinhamento, faremos via recursos.

Agora que temos todos os botões dispostos na tela, vamos alinhar e distribuir para que o visual fique coerente. Selecione todos os botões com cuidado para não selecionar nosso plano de fundo.

Vá ao MENU WINDOW e escolha o item ALIGN (ALINHAMENTO) e nesta janela, clique nos botões em destaque abaixo:

Note que os botões na tela ficaram todos alinhados a mesma ESQUERDA e com distancias iguais:

Para finalizar, pressione F12 para visualizar em seu navegador e confira todos os botões.

__________________________________________________________________________________
DICAS>>>>>>>>
Antes de criar os botões verifique muito bem suas medidas para ter a certeza que cabem em sua lona de trabalho.

Comece sempre pelo botão que contem o maior texto, assim você garante que todos os textos dos demais botões caberão nas estruturas que você definiu.

_________________________________________________________________________________

FUIOS!