Quinta-feira, 30 de outubro de 2003 às 03h59

Camuflando JavaScript

Salve Comunidade.

Nesta matéria mostraremos um efeito muito interessante que pode ser feito também pelo Fireworks, economizando algumas linhas de JavaScript, mesmo sem dominar a linguagem.

O resultado final será este:

Vamos ao trabalho. Abra um novo documento (CTRL+N) com 110 x 200px e aplique uma cor para o fundo do documento. Utilizando a ferramenta texto, complete o seu menu com os links que desejar. No nosso tutorial usei HOME, FESTA, NEWS, TUTOS, FORUM e MAIL.

Após esta fase, desenhe um retângulo, de tamanho maior do que o texto tanto na vertical quanto na horizontal, de forma que o retângulo fique maior do que o texto. Este será o nosso efeito de rollover.

Na aba Layers localizada na parte superior direita do seu Fireworks:

Passe o retângulo para trás do texto (movendo o retângulo para baixo do texto) e aplique ao retângulo a mesma cor do fundo do seu documento. Desta forma, você não vai vizualizá-lo devido à igualdade das cores. Agora você irá selecionar o texto e o retângulo à sua frente, e depois aperte F8. Aparecerá uma janela como esta:

Nesta janela você vai transformar o texto e o retângulo para um botão e dará um nome conforme descrito.

Ao clicar em Ok, o Fireworks retornará para a tela principal e no seu texto irá aparecer um retângulo verde :

Dê um duplo clique em cima da parte verde para definir-mos o efeito de rollover do nosso botão. Vai aparecer uma nova janela tendo na parte superior as seguintes abas:

Vamos definir o "Up" (que por default deixaremos como está) e na aba "Over" iremos definir o efeito do nosso botão quando passamos o mouse sobre ele. Ao clicar em "Over", aparecerá uma nova janela tendo um botão muito importante:

Clique nele que o Fireworks copiará o botão que está na aba "Up" para esta nova janela. Nesta etapa vamos definir a cor do nosso retângulo. Para isso clique no retângulo:

E na parte inferior escolha a cor do retângulo como a seguir:

Repita o mesmo procedimento para todos os textos do seu menu. Desta forma você terá o efeito visualizado no início da coluna.

Espero ter retirado algumas dúvidas, até semana que vem.

Nenhum comentário até agora

Cancelar resposta

Qual a sua opinião?

Faça login abaixo ou cadastre-se rapidamente.


2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.