topo
topo
topo
Domingo, 25 de Junho de 2017.
portaldigidesign
menu principal
No Site Na Web
slogan
 
:: Home
:: Fórum
:: Newsletter
:: Na Mídia
:: Recomende-nos
:: Nossos banners
:: Rss Feeds
:: Contato
 
menu design
:: Flash
:: Dreamweaver
:: Fireworks
:: Swishmax
:: Photoshop
:: Corel Draw
:: Ícones
:: Tabela de cores
:: Layouts prontos
 
menu programação
 
:: PHP
:: Asp/.Net
:: Javascript
:: CGI
:: Cold Fusion
 
menu serviços
 
:: Geradores online
:: Indique o site
:: Usuários online
:: Contador
 
menu sites destaque
 
:: Indique seu site
:: Sites destaque
 
menu artigos
 
:: Web Marketing
:: Web acessibilidade
 
 
 

· Artigos » Fireworks

 

Botão Rollover  English Version

Por: Ivan W. Primo
Publicado em: 11.11.2005
Visualizações: 34793


rec6 Linkto delicious google yahoo live Twiter


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



Versão para impressão  Twitter



 

  Comentários:

Nome: Digite seu nome.Digite seu nome.
Email: Campo Obrigatório. Formato Inválido.
Comentário:   Campo Obrigatório.Digite ao menos 8 caracteres.Até 100 caracteres.
   

   rss

 
hospedagem Host Brasil
Dreamweaver
Fireworks
Flash
SwishMax
Corel Draw
Photoshop
Photoshop
PHP
Asp/.Net
Web Marketing
publicidade
   

 

rodape rss Siga-me no Twitter