FIREWORKS - Criando Botões e Menu
Autor: Edu ArcadhiA | Publicado: 2011-06-07T14:30:00-07:00

Nesta aula vamos aprender criar botões, gerando um menu completo.

VAMU LA!!! VALENDO!!!!Solicite um novo documento com as características abaixo:
Largura: 160 px
Altura: 400 px
Resolucao: 72 px/inch
Cor do CANVAS: White

Insira um retângulo para servir de plano de fundo da página e personalize com as cores e texturas que você desejar. Veja um exemplo abaixo:



Digite: MENU PRINCIPAL e aplique as características abaixo:

Arial Rounded MT Bold
Tamanho: 12
Negrito
Cor: BRANCO (desde que apareça em seu plano de fundo)

Insira um BEVELED RECTANGULE (RETANGULO CHANFRADO), encontrado no mesmo botão do RETANGULO, com as características abaixo:

W: 137
Y: 36
X: 12
Y: 27

Agora aplique um estilo sobre este objeto, no exemplo abaixo, foi utilizado o estilo TEXT EFFECT MEDIUM 016 (ou outro estilo que combine com seu trabalho). Veja como ficou:



Digite o texto : Novidades. Aplique as características abaixo:

Arial Rounded MT Bold
Tamanho: 15
Negrito
Cor: #680066 (desde que apareça em seu trabalho)

Veja o resultado:



Agora transformaremos estes objetos em um botão.
Selecione os 02 objetos (RETANGULO CHANFRADO e TEXTO) e em seguida vá até o Menu Modify, aponte para Symbol (SIMBOLO) e clique em CONVERT TO SYMBOL (CONVERTER EM SIMBOLO).
Na janela de diálogo que aparecerá escreva e marque as características abaixo:



Automaticamente aparecerá uma SLICE sobre o botão criado:



Agora vamos editar nosso botão:
Dê um duplo clique no botão, evitando clicar na are central do SLICE. Note que seremos direcionados para uma nova janela conforme abaixo:



Vamos identificar e anotar algumas características desta janela:
1º - A ABA tem o mesmo nome dado ao botão, isso indica que estamos trabalhando dentro dele;
2º - Apareceram novas guias (UP – OVER – DOWN – OVER WHILE DOWN – ACTIVE AREA);
3º - O nosso plano de fundo ficou oculto.

Agora vamos editar estas GUIAS. Primeiro a guia UP:

UP – representa a forma como o botão aparecerá no site ao carregar. (não precisamos editar esta fase, pois já definimos isso ao criarmos os objetos no CANVAS).

Clique na guia OVER:

OVER – representa como o botão ficará quando o internauta colocar o MOUSE sobre este. (geralmente utilizamos algo discreto como alterar uma cor ou adicionar negrito ao texto)
Quando clicamos em OVER, temos a seguinte janela:



Nela clicaremos no botão que fica na parte inferior da janela para podermos copiar os objetos que temos no estágio anterior (COPY UP GRAPHIC – COPIAR OS GRAFICOS DO ESTAGIO UP).

Agora que já temos os gráficos vamos alterar o texto, modificando sua cor para #6600CC. Basta.

Clique na guia DOWN:

DOWN – representa o momento em que o usuário clicar no botão. Como o clique é muito rápido não aconselho alterações nas características.
Clique apenas no botão COPY OVER GRAPHIC para termos os mesmos objetos do estágio anterior (OVER).

Clique na guia OVER WHILE DOWN:

OVER WHILE DOWN – representa a fase em que o internauta coloca o mouse em um botão que esta sendo utilizado no momento. Também não aconselho mudanças, pois tornariam “poluídos” nossos objetos.

Clique na guia ACTIVE AREA:

ACTIVE AREA – é a área útil do botão, ou seja, onde o internauta pode clicar para que o botão funcione. Devemos ser muito exatos nesta guia, para que a área de clique de um botão não sobressaia a outro.
Note na imagem abaixo, que a área de clique sugerida pelo FIREWORKS é bem maior que nosso botão, isso ocorre porque utilizamos estilos e estes geralmente tem sobras que influenciam na área automática.
Neste caso, mudaremos a área pré-definida pelo FIREWORKS, mas devemos avisá-lo, retirando o visto da opção SET ACTIVE AREA AUTOMATICALLY (DEFINIR A AREA ATICA AUTOMATICAMENTE), como segue na imagem abaixo:



Após desmarcar a opção de área automática, utilize as linhas em vermelho ao redor do botão para redimensionar a área de clique como no exemplo abaixo:



Para finalizarmos a edição deste botão, clique no botão DONE (CONCLUÍDO) que fina abaixo do CANVAS:



Note que a área do SLICE já estará modificada após a conclusão do botão:



Finalmente teste seu botão, pressionando F12 para visualizar em seu navegador e passe o mouse sobre o botão, clique, pressione F5 para atualizar e teste novamente.
Se você gostou prosseguiremos, se você não gostou, volte ao FIREWORKS e dê um clique duplo novamente sobre o botão e edite as fases mais uma vez, até agradar.

Crie os demais botões.

Nesta lição, desejo que você crie todos os botões de seu Menu, um a um, para fixarmos este importantíssimo exercício.

Invente outras formas, cores, textos e experimente também alterar todos os estágios dos botões.
__________________________________________________________________________________
DICAS&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
Você pode transformar objetos em botões pressionando apenas a tecla F8.
Se você entendeu bem e domina criar botões, na próxima aula explicarei com este mesmo exemplo, como duplicar e criar os demais com AGILIDADE.
_________________________________________________________________________________
FUIOS!