ANIMANDO COM O FIREWORKS PARTE 2

Ol a todos! Conseguiram acompanhar a primeira parte deste tutorial, sem problemas? Caso tenha ficado com alguma dvida, envie e-mail para webdesigner.pro@pop.com.br que terei todo prazer em esclarec-la. Neste tutorial daremos seqncia aos passos para se criar o efeito holofote pelo Fireworks. Nesta ltima etapa irei passar os passos necessrios para criar a animao em si. Ver que perfeitamente possvel criar efeitos de animao atravs do Fireworks. Vamos deixar de muito papo e praticar. 1) Abra o arquivo com, extenso .PNG, que criamos na primeira parte deste tutorial.

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

3) Aps ter recortado o texto, selecione o texto (Fbio Almeida) e acesse o menu Modificar, Mascarar, Colar como mscara.

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

5) Os prximos passos sero as etapas responsveis pela animao. Acesse o painel Camadas, atravs do menu Janela, Camadas ou simplesmente o atalho do teclado F2.

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

7) Selecione a camada que representa o crculo.

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

9) Nos prximos passos iremos definir a movimentao dos frames. Acesse o painel Molduras, atravs do menu Janela, Molduras, ou pelo atalho do teclado Shift+F2.

10) A princpio vamos alterar o tempo de exibio para a primeira moldura (Moldura 1). D um duplo clique no nmero 7, localizado a direita da moldura. Abrir a caixa de dilogo no qual iremos informar o novo valor. Digite 17.

11) Alterado a velocidade de exibio da primeira moldura, vamos duplic-la. Clique no boto, localizado ao lado do nome do painel (Molduras) e selecione a opo Duplicar moldura....

12) Surgir a caixa de dilogo Duplicar moldura. Apenas clique no boto OK.

13) Selecione o crculo 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 dvida, volte aos passos 11 e 12.

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

16) Os prximos passos consistem na repetio dos passos de duplicar a moldura e movimentar o crculo at que chegue a posio mostrada na figura abaixo:

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

18) Com isso finalizamos nossa animao. 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 notcia a todos os que acompanham a srie de tutoriais da srie Fireworks aqui no site do Jlio Battisti. J est a venda o curso de Fireworks Bsico Passo a Passo, com minha autoria. uma maneira fcil e didtica de se aprender esta maravilhosa ferramenta de design. So inmeros exemplos prticos que iro 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 srie Fireworks. Caso tenha dvida(s), entre em contato comigo atravs do e-mail webdesigner.pro@pop.com.br Para desenvolvimento de Sites, Layout, Apresentaes, Flyes, Banners, Identidade Visual, Diagramao, Vetorizao e Servios Grficos em geral, acesse: http://www.fabio.trampos.net/ e solicite seu oramento. Profissionalismo sempre!

At a prxima! Um cordial abrao a todos, Fbio Almeida