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>>>>>>>>
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!
