topo
topo
topo
Terça, 22 de Agosto 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

 

Efeito Holofote  English Version

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


rec6 Linkto delicious google yahoo live Twiter

Efeito Holofote

Neste tutorial vamos aprender a criar um gif animado com efeito holofote.

Crie um novo documento em tamanho 300x60px no fireworks. Deixe a cor do palco transparente, para isso clique na paleta e clique no botão indicado abaixo.

"

Depois vá ao painel "Optmize" e mude as configurações para gif animado:

"

Agora insira um texto qualquer no palco. Em seguida, desenhe um círculo no palco mantendo a tecla shift pressionada para obter um círculo perfeito.

Selecione o círculo e vá ao menu "Filters » Blur » Glaussian Blur" e aplique o desfoque com esta configuração:

"

O resultado até agora deve ser parecido com este:

"

Clique sobre o círculo para selecioná-lo e pressione CTRL+X para recortar.

Agora clique sobre o texto para selecioná-lo e depois vá ao menu "Modify » Mask » Paste as Mask".

Só uma parte do texto deve estar aparecendo não é? Pois agora devemos então aplicar a animação.

Primeiro vamos desagrupar a máscara. Observe o painel "Layers" e note que há uma espécie de elo entre os objetos da máscara. Basta clicar uma vez sobre este elo e os objetos da máscara poderão ser movimentados separadamente.

"

Depois de clicar sobre o elo ele irá desaparecer. Ainda no painel "Layers" selecione o círculo clicando na imagem que o representa:

"

Agora pressionando a seta direcional à esquerda no seu teclado, movimente o círculo pra fora do texto:

"

Bom, agora vamos ao painel "Frames" para criar a animação. Primeiro mude o tempo de exibição do frame 1 dando um duplo clique sobre o número 7 que aparece por padrão, e alterando o valor na caixa de diálogo para 15:

"

Agora duplique este frame clicando no botão ao lado do nome do painel. No menu que surgir, clique em "Duplicate Frames" depois em "OK":

"

Com o círculo da máscara selecionado, segure o shift no seu teclado e pressione a seta direcional à direita no seu teclado duas vezes para trazer o círculo um pouco para cima do texto:

"

Duplique este frame e, mantendo a tecla Shift pressionada, pressione mais duas vezes a seta direcional à direita, para movimentar um pouco mais o círculo.

Vá repetindo estes passos (Duplicar o frame e movimentar o círculo) várias vezes até que o círculo chegue ao lado oposto da imagem, sendo que no último frame ele deve estar para fora do texto, no lado direito:

"

Você deverá ter vários frames agora. Pressione F12 no seu teclado para testar no navegador. Agora é só exportar seu trabalho.

O resultado deverá ser parecido com este:

"

Se você desejar e usar um pouco de criatividade pode criar coisas bem legais. Veja neste exemplo abaixo eu usei uma imagem e a cor do palco preta:

"

Irado né?! Se quizer baixar o arquivo ".png" da imagem acima, basta clicar sobre ela.

Abraços e 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:

· SAMUEL  Postado em: 28.05.2007
OI ,FICOU LEGAL E BEM DETALHADO, MAS FALTOU ALGO !DEPOIS DE RECORTAR O CIRCULO OQ FAZER COM ELE.

· Fernando Medeiros  Postado em: 21.12.2005


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