Criando um efeito Rollover no Fireworks

Olá amigos do MXstudio sou um novo colaborador do site e vou estar fazendo um passo a passo de como criar um efeito rollover no seu site, um efeito bacana e fácil de fazer no Fireworks.
O efeito rollover faz com que quando o visitante estiver no seu site ou de seu cliente e colocar o mouse em cima de um menu ou um link por exemplo faz com que esse mude de cor. Um efeito bem interativo e primordial em um bom site.
Passo a passo:
1° abra um documento no Fireworks no tamanho que quiser o efeito( como ex. vou usar um retângulo para menu pequeno)

2° crie um botão e dentro dele escreva um texto por ex. Home

3° depois de feito o botão localize no seu Fireworks o painel FRAMES (state) (atalho shift+F2)

4° agora que localizado o frame vamos duplicar ele ,para fazer essa duplicação vamos clicar sobre o frame 1 o que foi feito o botão e com o botão direito do mouse um click e escolha a opção duplicate state(duplicar frame) depois uma nova janela vai se abrir marque apenas um (1) na caixa de dialogo é o que sera necessário pra fazer o efeito.

5° ok agora tem 2 frames (state) o primeiro frame o botão esta com as cores de fundo ,texto como você escolheu nesse segundo frame faça modificações no botão por ex. mude a cor do botão a cor da fonte do texto.

6° então agora temos 2 frames com o mesmo botão e texto apenas com cores diferentes ,selecione o primeiro frame e procure a ferramenta slice tool (atalho k)vamos fatiar o botão.

7° Com a ferramenta selecionada faça um retângulo do tamanho exato do botão,note que após isso o botão vai ficar com uma espécie de relógio no centro e no topo do retângulo algo do tipo slice:jpeg

8° agora vamos clicar sobre esse icone no centro do retângulo feito com a slice e escolher na caixa que vai se abrir a opção “Add simple Rollover behavior ” que fará o efeito.

9° aparentemente nada aconteceu ,mais para visualizar o efeito salve e pressione a tecla F12 que vai abrir o botão no seu navegador.

10° no navegador passe o mouse sobre o botão e vai perceber que ele mudara de cor , qyuando o mouse ficar sobre esse botão vai apresentar uma outra cor a cor que você escolheu para o frame 2 se você também mudou de cor a fonte essa mudança também ira acontecer.

Bom taí em 10 passos como fazer um simples botão com o efeito rollover ,espero que tenham gostado e em breve com novos post .muito obrigado

Escrito por Bruno Henris on fevereiro 2, 2011. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

5 respostas a Criando um efeito Rollover no Fireworks

  1. Qualquer duvida sobre o passo a passo pode comentar ,terei o maior prazer em ajudar .
    http://www.twitter.com/brunohenris

  2. Bruno sou usuário iniciante da swite CS3, gostei muito do exemplo do efeito do botão, estou elaborando um site e será de grande utilidade.

  3. Fiz o passo a passo, achei interessanteo efeito descrito, porém exportei para o dreamweaver, e na area de links onde fica essa imagem (no dreamweaver) aparece “javascript:;” e não tenho como inserir o caminho do link que quero nesse botão.

    Tem algum macete, para isso?

  4. Andre, basta você apagar “javascript” e inserir o caminho do link normal.
    vou explicar melhor, apague Javascript e em propriedades na área Link, coloque o caminho que deseja,se for um link de uma pagina externa, não esqueça de colocar o http:// antes do endereço da pagina. mais duvidas envie para meu e-mail artedesign@brunohenris.com ficarei feliz em ajudar.

  5. Amigo, gostei muito da dica, pensava que apenas era possível no flash fazer isso, porém vi que não! Agora dúvida é: Como faço para enviar um banner com dois quadros para meu site? No adm tenho a opção de apenas enviar o arquivo GIF, porém ao exportar do FW apareceram 02 GIF’s e uma arquivo HTML.

    Grato se puder me ajudar

    Marcelo

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>