iMasters | Por uma internet mais criativa e dinâmica

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.