ANIMANDO COM O FIREWORKS – PARTE 2

 

Olá a todos! Conseguiram acompanhar a primeira parte deste tutorial, sem problemas? Caso tenha ficado com alguma dúvida, envie e-mail para webdesigner.pro@pop.com.br que terei todo prazer em esclarecê-la.

 

Neste tutorial daremos seqüência aos passos para se criar o efeito holofote pelo Fireworks.

 

Nesta última etapa irei passar os passos necessários para criar a animação em si. Verá que é perfeitamente possível criar efeitos de animação através do Fireworks.

 

Vamos deixar de muito papo e praticar.

 

1) Abra o arquivo com, extensão .PNG, que criamos na primeira parte deste tutorial.

 

  

 

 

2) Dando continuidade, clique sobre o círculo e acesse o menu Editar, Recortar ou o atalho do teclado Ctrl+X.

 

 

 

3) Após ter recortado o texto, selecione o texto (Fábio Almeida) e acesse o menu Modificar, Mascarar, Colar como máscara.

 

 

4) Como resultado, teremos apenas uma parte do texto sendo visualizada.

 

 

5) Os próximos passos serão as etapas responsáveis pela animação. Acesse o painel Camadas, através do menu Janela, Camadas ou simplesmente o atalho do teclado F2.

 

 

 

6) Observe na figura acima que há uma espécie de corrente ligando os dois objetos. Precisamos desagrupá-los. Para isso, dê apenas um clique neste elo para desagrupá-los. Desta forma, podemos trabalhar com os objetos de forma independente. Veja como deve ficar seu painel após desagrupar os objetos:

 

 

7) Selecione a camada que representa o círculo.

 

 

8) Movimente, utilizando a setinha para esquerda, seu círculo para fora do palco. Veja:

 

 

9) Nos próximos passos iremos definir a movimentação dos frames. Acesse o painel Molduras, através do menu Janela, Molduras, ou pelo atalho do teclado Shift+F2.

 

 

 

10) A princípio vamos alterar o tempo de exibição para a primeira moldura (Moldura 1). Dê um duplo clique no número 7, localizado a direita da moldura. Abrirá a caixa de diálogo no qual iremos informar o novo valor. Digite 17.

 

 

11) Alterado a velocidade de exibição da primeira moldura, vamos duplicá-la. Clique no botão, localizado ao lado do nome do painel (Molduras) e selecione a opção Duplicar moldura....

 

 

12) Surgirá a caixa de diálogo Duplicar moldura. Apenas clique no botão OK.

 

 

13) Selecione o círculo da moldura criada e, com a tecla Shift pressionada, movimente (utilizando a setinha para direita de seu teclado) um pouco para direita. Veja:

 

 

14) Vamos novamente duplicar esta moldura. Para duplicar você já conhece os procedimentos. Caso tenha dúvida, volte aos passos 11 e 12.

 

 

15) Selecione o círculo e movimente-o um pouco mais para a direita no palco.

 

 

16) Os próximos passos consistem na repetição dos passos de duplicar a moldura e movimentar o círculo até que chegue a posição mostrada na figura abaixo:

 

 

17) Veja quantas molduras criei para obter o resultado acima:

 

 

18) Com isso finalizamos nossa animação. Para visualizá-la, pressione a tecla F12 de seu teclado. Ao final, exporte-a para gerar o arquivo GIF animado.

 

Clique aqui para visualizar o exemplo criado neste tutorial.

 

Pessoal, trago uma boa notícia a todos os que acompanham a série de tutoriais da série Fireworks aqui no site do Júlio Battisti. Já está a venda o curso de Fireworks Básico – Passo a Passo, com minha autoria. É uma maneira fácil e didática de se aprender esta maravilhosa ferramenta de design. São inúmeros exemplos práticos que irão te levar a um mundo totalmente real em se tratando de design em geral. Clique aqui para saber mais sobre este curso.

 

Chegamos ao final de mais um tutorial da série Fireworks. Caso tenha dúvida(s), entre em contato comigo através do e-mail webdesigner.pro@pop.com.br

 

Para desenvolvimento de Sites, Layout, Apresentações, Flyes, Banners, Identidade Visual, Diagramação, Vetorização e Serviços Gráficos em geral,  acesse: http://www.fabio.trampos.net/ e solicite seu orçamento. Profissionalismo sempre!

 

Até a próxima!

 

Um cordial abraço a todos,

Fábio Almeida