Botão Roll Over
Criar um botão é simples, mas requer atenção a vários passos que devem ser seguidos.
Inicie o Fireworks e crie um novo documento com dimensões de 35 x 35 px:
"
Usando a ferramenta "Elipse" e segurando a tecla "Shift" pressionada, desenhe um círculo no palco:
"
Mude
o preenchimento para radial e ajuste a posição da cor, clicando e
arrastando o ponto de ajuste (pontinho redondo), do centro para o lado
superior esquerdo do círculo, como mostra a figura:
"
Com o círculo selecionado, pressione "Ctrl + C" para copiá-lo, depois pressione "Ctrl + V". Um novo círculo idêntico estará sobre o primeiro.
Faça
o seguinte, diminua o tamanho deste segundo círculo e posicione ele
exatamente no meio do círculo maior. Para diminuir o tamanho
proporcionalmente use o inspetor de propriedades (Painel Properties).
"
Depois vamos inverter a posição do segundo círculo. com ele selecionado, clique na ferramenta "Flip Vertical" e logo em seguida na ferramenta "Flip Horizontal". Ambas estão juntas, provavelmente abaixo do painel "Properties".
"
Nosso trabalho estará assim:
"
Para facilitar o trabalho, aumente o zoom para 200%, clicando no valor logo abaixo do palco.
"
Use
os pontos de ajuste para aumentar o tamanho do radial que preenche o
botão. Clique no pontinho quadrado e arraste um pouco para a esquerda.
"
Selecione o círculo maior, e vá ao painel "Properties", clicando no sinal de "+" para adicionar um leve efeito de sombra:
"
Configure a sombra (Shadow) assim:
"
Ótimo, agora basta inserir um texto e o nosso botão já tem uma aparência definida.
"
Bom agora falta darmos ao nosso botãozinho um efeito rollover.
Pressione a tecla "Shift" e clique sobre todos os objetos que estão no palco para selecioná-los (os dois círculos e o texto). Depois pressione "Ctrl + G" para agrupá-los.
Feito isso, pressione a tecla "F8" no seu teclado para transformar o grupo em um símbolo. Na janela que surgir, selecione "Button" e dê um nome a ele. Veja:
"
Um
slice será criado no palco por sobre o botão. Dê um duplo clique sobre
o slice e uma nova janela aparecerá para que possamos configurar a
aparência do nosso botão quando passarmos o mouse sobre ele e quando o
clicarmos. Isso nós faremos navegando pelas abas "Up", "Over", "Down" e "Down While Over".
"
Selecione novamente nesta janela os dois círculos e o texto, e agrupe (Ctrl + G). Passe para a aba "Over" e clique no botão "Copy Up Grafic". As imagens da posição Over serão copiadas para a posição Up. Selecione a imagem e pressione "Ctrl + Shift + G" para desagrupar. Mude a cor do texto. Agrupe novamente.
Passe para as abas seguintes ("Down" e "Over While Down") e repita a operação, clicando no botão "Copy Over Grafic" e " Copy Down Grafic".
Feito isso clique em "Done".
Nosso botão está pronto, mas ainda falta o link. Isso pode ser feito no inspetor de propriedades, com o slice selecionado:
"
Setado o link vamos exportá-lo. Clique no botão "Quick Export" que é um pequeno ícone do Fireworks localizado no canto superior direito do palco. No menu que surgir, vá até Dreamweaver e clique em "Export Html".
"
Escolha a pasta para onde você quer salvar o trabalho no seu computador e preste atenção nos seguintes detalhes:
Na primeira caixa de texto você vai inserir o nome do arquivo html que será gerado;
No primeiro drop down, certifique-se de que esteja selecionado "Salvar como o tipo: Html and Images";
As configurações dos drop downs seguintes são: "Export HTML File" e "Export Slices";
Se você desejar você pode colocar as imagens dos botões em um subdiretório selecionando a caixa "Put Images in Subfolder". Veja a imagem:
"
Pronto!
seu botão está criado e todo o código javascript necessário para que
haja o efeito rollover nas imagens está embutido no arquivo html.
Até a próxima! Dúvidas consulte o Designer's Fórum.
Ivan Willian Primo
webmaster@portaldigidesign.com.br
MSN: iwprimo@gmail.com
www.portaldigidesign.com.br
