behaviors - simple rollover

Nesse tutorial você vai aprender a fazer efeitos como esse.
Eu vou usar o Fireworks 8, não sei se é a mesma coisa para as versões anteriores.

1. Abra o Fireworks e abra uma imagem ( tambem pode ser um layout ). Eu escolhi essa:


2. Esse passo varia dependendo do que você quer que mude quando você passa o mouse em cima da imagem:
a)Um texto - escreva o texto que você quer "animar". Lembre-se que se você quer que cada palavra fique de um jeito quando você passa o mouse em cima, você tem que por cada palavra em uma caixa de texto diferente. Para por o contorno no meu texto, eu fui em Filters(Filtros)->Shadow and Glow (Sombra e Brilho (?))->Glow (Brilho (?)), (se voce não achar o glow , procure no filters da barra de propriedades).
b)Uma imagem - você quer que uma imagem apareça? Então não faça nada agora. Você quer que uma imagem mude de cor quando você passar o mouse em cima? Então desenhe/cole a imagem.
para exemplificar melhor, eu vou fazer as 3 coisas =D/

3. Agora, Vá na janela dos Frames ( se ela não estiver ali ->, clique em Windows(janelas)->Frames(Frames) ) e clique em new frame (novo frame).

4. Ainda no frame 1 ( onde você fez tudo até agora ), vá na janela de layers e selecione todas as que você criou e as cole no frame 2.

5. No frame 2, edite o texto e/ou as imagens para como você quer que elas fiquem quando você passar o mouse por cima delas.

6. Pegue a Slice Tool ( ou aperte K ). Agora é como se você estivesse mapeando uma imagem. É só selecionar as imagens que vão mudar com ela, como mostra o exemplo. ( Faça um slice/ uma fatia para cada palavra/imagem que vai mudar. Não se preocupe com o resto que você não selecionar )

7. Vá em Windows - Behaviors (Janelas - Behaviors (?)). A janela dos Behaviors se abriá ali ->. Selecione um dos slices que você fez e clique em "Add Behavior"(adicionar Behavior) (é o sinal de +) e depois em Simple Rollover. Faça o mesmo procedimento com todos os slices. Para ver como ficou, clique em Preview lá em cima. O meu ficou assim (passe o mouse no PC, nas estrelas e nas palavras =D/)


8. Agora, como você salva isso? Abra mais uma janela, Windows -> Optimize (janelas - optimizar). Ao lado de onde você clicou em Previw, clique em 2-Up. Vão aparecer 2 quadrados com a sua imagem.
a)Se a sua imagem tiver poucas cores- Selecione GIF no menu drop-down
b)Se a sua imagem tiver muitas cores (fotos, layouts)- Em Layers, selecione os slices, e com eles selecionados, vá em GIF no menu dorp-down. Depois des-selecione os slices e selecione a imagem, e no menu drop-down clique em JPG.


9. Agora é só ir em File -> Export (Arquivo -> Exportar) e selecionar a pasta para a qual você quer mandar as imagens. O Fireworks automáticamente criará a página de HTML e o script para a troca das imagens ;)

Se esse tutorial te ajudar, não esqueça de linkar (:
Tutorial por Vevis - Winter-Dream.com . Não copie sem autorização Dúvidas?