Flash – Animando uma Borboleta

Conceitos a utilizar: Importação de imagem bitmap para o Flash; converter imagem em Símbolo; Converter imagem bitmap em imagem vetorial; Utilização de Réguas e Linhas guia; Agrupamento; Redimensionamento; Animação Quadro-a-Quadro; Animação por Interpolação; Animação com Motion Guide;

1. Inicie o Flash com novo documento em branco;
   
2. Importe a imagem Borboleta (File > Import > Import to Stage... – Ctrl + R) que se encontra na pasta do exercício para o palco como mostra a figura abaixo: 

3. Com a imagem borboleta no palco, converta-a em Símbolo (Modify > Convert to Symbol... – F8) com o Name (Nome) BorboletaMovie e Type (Tipo) Movie Clip;
   
4. Com o símbolo BorboletaMovie selecionado, clique em Edit > Edit in Place, para editá-lo;
   
5. Estando no modo de edição, clique no menu Modify > Bitmap > Trace Bitmap...;
   
6. Na janela Trace Bitmap, configure as opções como na figura abaixo:

Obs: Se quiser um resultado melhor na vetorização, diminua os valores dos campos Color threshold e Minimum area. Vale lembrar que, quanto maior for o nível de detalhe, maior será também o tamanho do arquivo final.

7. Selecione a asa direita da borboleta como mostra na imagem abaixo:

8. Pressione Ctrl + G para agrupar a área selecionada;
   
9. Selecione a asa direita da borboleta como mostra a imagem abaixo:

10. Pressione Ctrl + G para agrupar a área selecionada;
    
11. Selecione toda a borboleta e utilizando a tecla Shift, clique na asa esquerda e depois na direita para remover a seleção das mesmas ficando somente com o centro da borboleta selecionado como mostra a imagem abaixo:

12. Pressione Ctrl + G para agrupar a área selecionada;
    
13. Habilite as réguas através do menu View > Rules – Ctrl + Alt + Shift + R;
    
14. Com as réguas sendo exibidas, clique sobre a parte numérica das mesmas e arraste linhas guia para cima da imagem como mostra a figura abaixo:

15. Insira um Keyframe (Quadro-chave) no quadro dois da linha do tempo;
    
16. Clique numa área vazia do palco para desfazer a seleção de toda a imagem e em seguida clique na asa esquerda da borboleta, como mostra a figura abaixo:

17. Com a asa esquerda selecionada, clique na ferramenta Free Transform na barra de ferramentas ou pressione “Q” no teclado para alterar a forma da asa como mostra a imagem abaixo: 

 

18. Selecione agora a asa direita e a redimensione como mostra a figura abaixo:

19. Repita a seqüência de passos desde o 15 até 18 até que alinha do tempo e as duas asas fiquem como na figura abaixo:

20. Clique com o botão direito no terceiro quadro da linha do tempo e clique em seguida na opção Copy Frames;
    
21. Clique no quadro cinco da linha do tempo com o botão direito do mouse e clique em seguida na opção Paste Frames;
    
22. Clique com o botão direito no segundo quadro da linha do tempo e clique em seguida na opção Copy Frames;
    
23. Clique no quadro seis da linha do tempo com o botão direito do mouse e clique em seguida na opção Paste Frames;
    
24. Sua linha do tempo deverá ficar como a da imagem abaixo:

25. Volte para a Scene 1 (Cena 1) menu Edit > Edit Document – Ctrl + E;
    
26. Selecione a ferramenta Free Transform na barra de ferramenta ou pressione “Q” no teclado;
    
27. Altere o tamanho da imagem e posicione-a na parte inferior esquerda do palco como na imagem abaixo:
    

28. Clique com o botão direito do mouse no quadro 30 da linha do tempo e insira um Keyframe (Quadro-chave);
    
29. Clique com o botão direito do mouse no quadro um da linha do tempo e clique na opção Create Motion Tween;
    
30. Clique no quadro 30 da linha do tempo para selecioná-lo e arraste a borboleta para a parte direita superior do palco, como mostra a figura abaixo:

31. Clique com o botão direito do mouse em cima da Layer 1 na linha do tempo e clique em seguida na opção Add Motion Guide;
    
32. Clique no primeiro quadro da linha do tempo da camada Guide Layer 1 para selecioná-lo;
    
33. Selecione a ferramenta Pencil na barra de ferramentas ou pressione “Y” no teclado;
    
34. Em Options na barra de ferramentas, selecione a opção Smooth;
    
35. Clique sobre a borboleta e desenhe um caminho como na figura abaixo:

36. Teste a animação pressionando Ctrl + Enter;
    
37. Se a borboleta não seguir o caminho, tente posicionar o ponto central dela exatamente no início da linha (quadro1 da linha do tempo) e no final da linha também (quadro 30 da linha do tempo), como mostra a imagem abaixo:

38. A animação está pronta!!!

Flash – Criando Símbolo de Botão

 

1. Inicie o Flash e crie um novo documento em branco;
   
2. Altere as propriedades do paco como indicado abaixo:
   1. Tamanho: 220 x 220 pixels;
      
   2. Cor: #CC3300;
3. Selecione a ferramenta Elipse (Oval);
   
4. Altere a cor do contorno para preto;
   
5. Altere a cor do preenchimento para gradiente com branco no centro e preto na borda;
   
6. Desenhe um círculo perfeito no palco (Shift);
   
7. Selecione o círculo (contorno e preenchimento);
   
8. No painel de Propriedades (Properties) altere a Altura e a Largura (“H” e “W”) para 200, o círculo deverá ficar como na figura abaixo:

9. Selecione a ferramenta Transformação de Gradiente (Gradient Transform (F)) na barra de ferramentas;
   
10. Clique no preenchimento gradiente do círculo para selecioná-lo e arraste-o para cima como mostra a figura abaixo:

11. Selecione o círculo e agrupe-o (Ctrl + G);
    
12. Selecione a ferramenta Elipse (Oval);
    
13. Altere a cor do contorno para #666666;
    
14. Altere a cor do preenchimento para gradiente com vermelho no centro e preto na borda;
    
15. Altere a Espessura (Stroke Height) da linha para 3;
    
16. Desenhe um círculo perfeito (pode ser fora do palco);
    
17. Selecione o círculo (contorno e preenchimento);
    
18. No painel de Propriedades (Properties) altere a Altura e a Largura (“H” e “W”) para 160, e a Espessura da Linha (Stroke Height) da linha para 3. O círculo deverá ficar como na figura abaixo:

19. Selecione a ferramenta Transformação de Gradiente (Gradient Transform (F)) na barra de ferramentas;
    
20. Clique no preenchimento gradiente do círculo menor para selecioná-lo e arraste-o para cima como mostra a figura abaixo:

21. Selecione o círculo e agrupe-o;
    
22. Posicione o círculo menor sobre o maior, selecione os dois e centralize-os no mesmo centro como mostra a figura abaixo:

Dica: você pode utilizar o painel de Alinhamento (Align) para isso;

23. Com os dois círculos selecionados, agrupe-os;
    
24. Selecione a ferramenta Texto (Text) na barra de ferramentas;
    
25. Altere a cor do preenchimento/fonte para #FF0000;
    
26. Fonte: Arial Black;
    
27. Tamanho: 40;
    
28. Digite a palavra Sobe;
    
29. Com o texto selecionado, agrupe-o;
    
30. Posicione o texto sobre os círculos, selecione os três objetos e centralize-os no mesmo centro;
    
31. Selecione e agrupe todos os objetos;
    
32. Com os objetos selecionados, converta-os em símbolo (Modify > Convert to Symbol... F8);
    
33. Faça as alterações indicadas abaixo na caixa de diálogo Convert to Symbol:
    1. Name: Bt_Sobe;
       
    2. Type: Button; Ok.
34. Dê um duplo-clique em cima do símbolo Bt_Sobe para entrar no modo de edição do mesmo como mostra a figura abaixo:

35. Estando no modo de edição do símbolo, insira um Quadro-Chave (Keyframe) no evento Over da linha do tempo;
    
36. Estando no evento Over, selecione o texto “Sobe” e delete-o; Obs: Se o texto não estiver selecionável, dê um duplo-clique sobre ele.
    
37. Tendo deletado o texto, desenhe um triângulo com preenchimento na cor: #FF0000 como mostra a figura abaixo:

38. Posicione o triângulo dentro do círculo com preenchimento gradiente vermelho como mostra a figura abaixo:

39. Insira um quadro-chave no quadro Down da linha do tempo;
    
40. Com o quadro Down selecionado, diminua ligeiramente o tamanho do triângulo e desloque do círculo menor (vermelho) para baixo, conforme mostra a figura abaixo:

41. Feito isso, volte para a Cena 1 (Scene 1) e teste o filme (Ctrl + enter);
    
42. Crie agora um segundo botão com o preenchimento gradiente verde, no lugar do vermelho e com o texto Desce no lugar do Sobe e com o triângulo com o preenchimento verde e a ponta voltada para baixo.

Flash – Criando um Banner

Altere o tamanho do palco para 660 x 80 pixels e a cor para “#D9C906”;

Selecione a ferramenta texto e digite a palavra “Verbum” com a fonte Vivaldi, tamanho 50 e cor #660000;

Habilite as réguas: View > Rulers;

Utilizando os recursos das linhas-guia, e do painel Align, posicione o texto como na figura abaixo:

Converta o texto em símbolo (Symbol): Modify > Convert to Symbol..., na caixa de diálogo Convert to Symbol, no campo Name, digite Texto1 e no campo Type selecione Movie clip. Clique em Ok;

Dê um duplo-clique na camada Layer1 e a renomeie para Texto1;

Dê um duplo-clique sobre o símbolo Texto1 para entrar no modo de edição;

No modo de edição, clique no quadro 30 da linha do tempo e insira um Quadro-Chave (Keyframe);

Clique no primeiro quadro da linha do tempo e crie uma Interpolação de Movimento (Create Motion Tween);

Com o primeiro quadro da linha do tempo selecionado, clique sobre o símbolo Texto1 no Palco;

No painel Properties, selecione a opção Brightness do campo Color e em Brightness Amount, coloque o valor -100;

Clique agora no quadro 30 da linha do tempo e clique sobre o símbolo Texto1;

No painel Properties, selecione a opção Brightness do campo Color e em Brightness Amount, coloque o valor 100;

Clique no quadro 60 da linha do tempo e insira um Quadro-Chave (Keyframe);

Clique no quadro 30 da linha do tempo e crie uma Interpolação de Movimento (Create Motion Tween);

Clique agora no quadro 60 da linha do tempo e clique sobre o símbolo Texto1;

No painel Properties, selecione a opção Brightness do campo Color e em Brightness Amount, coloque o valor -100;

Teste a animação pressionando Enter;

Volte para Cena 1 (Scene 1);

Com a Layer (Camada) Texto1 selecionada, insira um Keyframe (Quadro-chave) no quadro 60 da linha do tempo;

Crie uma nova camada: Insert > Timeline > Layer;

Selecione a ferramenta Rectangle Tool na barra de ferramentas e desenhe um retângulo no palco com cor “#660000” como mostra a figura abaixo:

Converta o retângulo em símbolo (Symbol): Modify > Convert to Symbol..., na caixa de diálogo Convert to Symbol, no campo Name, digite Fundo1 e no campo Type selecione Movie clip. Clique em Ok;

Dê um duplo-clique na camada Layer2 e a renomeie para Fundo1;

Dê um duplo-clique sobre o símbolo Fundo1 para o mesmo entrar no modo de edição;

No modo de edição, clique sobre o símbolo para selecioná-lo e na barra de ferramentas, selecione a ferramenta Free Transform (Transformação Livre);

Redimensione e posicione o símbolo Fundo1 como mostra a figura abaixo:

Com o símbolo Fundo1 ainda selecionado, altere sua cor de preenchimento para #D9C906;

Insira um quadro-chave (Keyframe) no quadro 30 da linha do tempo;

Clique com o botão direito sobre o quadro 1 e crie uma Interpolação de Movimento (Create Motion Tween);

Com o quadro 1 selecionado, vá ao Painel Properties (Painel de Propriedades) e no campo Tween, selecione Shape (Forma);

Clique no quadro 30 da linha do tempo e utilizando a ferramenta Free Transform (Transformação Livre), redimensione e posicione o símbolo Fundo1 como mostra a figura abaixo:

Em seguida, no quadro 30 da linha do tempo e com o símbolo Fundo1 selecionado, altere sua cor para “#660000”;

Insira agora mais um quadro-chave (Keyframe) no quadro 60 da linha do tempo e em seguida mais um quadro-chave no quadro 90 da linha do tempo;

Clique no quadro 60 da linha do tempo e crie uma Interpolação de Movimento (Create Motion Tween);

Com o quadro 60 da linha do tempo selecionado, vá ao Painel Properties (Painel de Propriedades) e no campo Tween, selecione Shape (Forma);

Clique no quadro 30 da linha do tempo e utilizando a ferramenta Free Transform (Transformação Livre), redimensione e posicione o símbolo Fundo1 como mostra a figura abaixo:

Altere a cor do símbolo Fundo1 para “#660000”;

Teste a animação pressionando Enter;

Volte para a Cena 1 (Scene 1);

Com a Layer (Camada) Fundo1 selecionada, crie mais uma camada e renomeie a mesma para Texto2. Essa camada deverá ficar acima da camada Fundo1;

Selecione a ferramenta Text (Texto) na barra de ferramentas, altere a fonte para Arial no tamanho e digite o texto: Por que o homem precisa se comunicar. Posicione o texto no banner como mostra a figura abaixo:

Altere a cor do texto para “#D9C906”;

Converta o Texto em símbolo (Symbol): Modify > Convert to Symbol..., na caixa de diálogo Convert to Symbol, no campo Name, digite Texto2 e no campo Type selecione Movie clip. Clique em Ok;

Flash - Criando Banner com Várias Animações Continuadas

Este tutorial visa complementar o módulo de Flash, do curso de Webdesign. O mesmo tem por objetivo exemplificar de forma prática alguns conceitos e funções do Flash abordados na apostila.

O aluno deverá ter alguns conhecimentos básicos de como formatar e criar imagens com programas como Photoshop ou CorelDRAW (ambos estudados no curso de Webdesign), ou outro programa de edição e criação de imagens.


O primeiro passo para a criação de um banner é definir seu tamanho, se vai ter alguma imagem bitmap, etc. No exemplo a seguir, o banner terá 600 x 120 pixels, terá uma imagem bitmap do lado esquerdo e fundo preto, como mostra a figura abaixo:
 

A imagem acima foi criada no Photoshop.

Definida a estrutura básica do banner, é hora de começar a trabalhar a animação no Flash.

Abra o Flash.

Utilizando o Painel Properties, altere o tamanho do Palco para as medidas do banner, ou seja, 600 x 120 pixels e altere a cor para preto.

Através do Menu File, opção Import... > Import to stage, importe a imagem BannerEspaco para a área de trabalho do Flash e posicione-a exatamente sobre o Palco. Obs: você pode fazer isso de maneira rápida e precisa através do painel Align: menu Window > Align.

Nosso próximo passo consiste em demarcar a área que colocaremos as mensagens de texto para fazer a animação.

Clique sobre o menu View, opção Rules. Aparecerão duas réguas na área de trabalho do Flash, uma vertical à esquerda e outra horizontal na parte superior.

Clique agora sobre a régua vertical à esquerda e mantendo o botão do mouse pressionado, arraste para a direita, até que a linha verde fique na frente da galáxia, como mostra a imagem abaixo:


Vamos agora começar a dar nomes aos bois.

Na linha do tempo, posicione o cursor do mouse sobre a palavra “Layer 1”, e dê um duplo-clique sobre a mesma.
 
A palavra “Layer 1” entrará no modo de edição. Altere o nome para “Banner”.

Em seguida clique na imagem para selecioná-la e clique no menu Modify, opção Convert to Symbol....
Na caixa de diálogo Convert to Symbol, no campo Name, apague o nome que estiver na mesma e digite Banner.

Em Type, deixe marcada a opção Movie Clip e clique no botão OK.

Em seguida criaremos mais uma camada.

Clique no menu Insert > Timeline, opção Layer.

Altere o nome o nome da camada para Texto1.

Clique no Quadro 1 da linha do tempo da camada Texto1 para selecionar o mesmo.

Na caixa de Ferramentas, no campo Color, clique na opção Fill color e selecione a cor #FFFFCC (amarelo claro).


Em seguida também na caixa de Ferramentas, clique na ferramenta Text e digite a frase 1° Encontro de Astrônomos Amadores de Friburgo.

Posicione e redimensione o texto como na figura abaixo:

 
OBs: você pode ajustar rapidamente o texto no centro do palco no alinhamento vertical através do painel Align.

Com o texto selecionado, clique no menu Modify, opção Convert to Symbol....

Dê o nome de Texto1, deixe a opção Movie Clip marcada e clique no botão OK.

Vamos animar o nosso texto.

Clique no quadro n° 30 da linha do tempo da camada Texto1 para selecioná-lo.

Clique com o botão direito do mouse em cima do quadro e depois na opção Insert Keyframe no menu que aparecerá.

Clique agora no quadro n° 1 da linha do tempo da camada Texto1 para selecioná-lo.

Clique com o botão direito do mouse em cima do quadro e depois na opção Create Motion Tween no menu que aparecerá.

Com o primeiro quadro selecionado, clique agora sobre o símbolo Texto1 no palco.

Aparecerá a opção Color, no painel Properties.

Selecione a opção Brightness e na caixa Brightness Amount, selecione -100%.
 
Teste o resultado pressionando Crtl + Enter.

O símbolo Texto1 aparece gradualmente.

Clique no quadro n° 45 da linha do tempo da camada Texto1 e insira um Quadro-chave.

Clique com o botão direito do mouse no quadro n° 30 da linha do tempo da camada Texto1 e depois na opção Create Motion Tween.

Clique novamente no quadro n° 45 da linha do tempo da camada Texto1.

Clique no símbolo Texto1 no palco.

Selecione a opção Brightness, do campo Color no painel de Propriedades e selecione -100% no campo Brightness Amount.

Teste o resultado pressionando Crtl + Enter.

Agora o símbolo Texto1 aparece gradualmente e depois desaparece também gradualmente, só que um pouco mais rápido, pois a quantidade de quadros é menor.

Vamos continuar com a animação do nosso Banner.

Clique no menu Insert > Timeline, opção Layer para inserir uma nova camada.
Nomeie a nova camada como Texto 2.

Clique no Quadro 45 da linha do tempo da camada Texto 2 para selecionar o mesmo.
Insira um Keyframe.

Em seguida, clique na ferramenta Texto 2 e digite a frase Dias 25, 26 e 27 de maio de 2007.

Posicione e redimensione o texto como na figura abaixo:

Clique no quadro n° 45 da linha do tempo da camada Texto 2.

Clique no menu Modify, opção Convert to Symbol....

Deixe a opção Movie Clip marcada, nomeie o símbolo como Texto 2 e clique no botão OK.

Clique no quadro n° 75 da linha do tempo da camada Texto 2 e insira um Keyframe.

Clique no quadro n° 45 da linha do tempo novamente com o botão direito do mouse e clique na opção Create Motion Tween.

Clique no símbolo Texto 2 no palco, e no painel Properties, selecione a opção Brightness.

Selecione -100% no campo Brightness Amount.

Teste o resultado pressionando Crtl + Enter.

Obs: Se o texto da camada Texto 2 ficar aparecendo durante todo o tempo, remova o quadro chave no quadro n° 1 da camada Texto 2.

Clique no quadro n° 90 da linha do tempo da camada Texto 2 e insira um Keyframe.

Clique no quadro n° 75 da linha do tempo novamente com o botão direito do mouse e clique na opção Create Motion Tween.

Com o quadro n° 90 da linha do tempo da camada Texto 2 selecionado, clique no símbolo Texto 2 no palco.

No painel Properties, selecione a opção Brightness.

Selecione -100% no campo Brightness Amount.

Selecione a camada Texto 1 na linha do tempo.

Clique no menu Insert > Timeline, opção Layer.

Renomei-e a nova camada para Texto1.2
 
Selecione a seqüência de quadros começando do 1 até o 45 da camada Texto1.

Clique no menu Edit > Timeline, opção Copy Frames.

Clique no quadro nº 90 da camada Texto1.2.

Clique no menu Edit > Timeline, opção Past Frames.

Teste o resultado pressionando Crtl + Enter.

Terminando a animação do Banner.

Você deve ter notado que a imagem da galáxia só aparece um breve instante e depois desaparece. Vamos corrigir isso agora.

Insira um Keyfrme no quadro de n° 134 da camada Banner.

Com o quadro n° 134 ainda selecionado, clique no painel Actions.

Clique na opção Timeline Control para expandi-la.

Dê um duplo-clique na opção gotoAndPlay. Essa opção habilita a repetição do filme a partir de um determinado quadro.

Digite 45 entre os parênteses do comando. 45 é o quadro no qual queremos que a animação comece a se repetir.

Teste o resultado pressionando Crtl + Enter.

Repare que o filme já inicia com a galáxia aparecendo. Podemos melhorar um pouco mais.

Clique no quadro n° 30 da linha do tempo da camada Banner e insira um Keyframe.

Clique no quadro n° 1 da linha do tempo da camada Banner com o botão direito do mouse e clique na opção Create Motion Tween.

Com o quadro n° 1 da linha do tempo da camada Banner selecionado, clique no símbolo Banner no palco.
No painel Properties, selecione a opção Brightness.

Selecione -100% no campo Brightness Amount.

Teste o resultado pressionando Crtl + Enter.

Ficou melhor não concorda?

Agora que terminamos nosso Banner, temos que cria o arquivo executável (.swf) para poder utilizar na página de Internet.

Clique no menu File, opção Export > Export Movie.

Abrirá a caixa de diálogo Export Movie. Digite um Nome (BannerEspaco) para o Banner e indique o local onde você deseja salvar o arquivo executável e clique em seguida no botão Salvar.

Aparecerá em seguida a caixa de diálogo Exportar Flash Player onde podemos definir opções como Ordem de Carregamento, qualidade do JPEG, opções para proteção, compactação, depuração, versão do player, etc.

No campo Ordem de carregamento, selecione Top Down.

Em JPEG Quality, digite 100.

E em Versão, selecione uma versão para o Flash.

Clique em OK.

É isso aí, terminamos a animação do nosso Banner. Você pode utilizar os conceitos apresentados neste tutorial animando os objetos de outras maneiras apresentadas também na apostila, tal como a interpolação de Forma, etc.