Ficha de Exercícios Flash

Exercício 1

1. Crie os seguintes elementos no palco:

2. Agrupe os elementos (Seleccione-os e no menu Modify -> Group)

3. Copie o grupo e coloque a cópia à direita do grupo (fora do palco).

4. Agrupa os dois grupos e cria o símbolo gráfico imagem1

5. Na frame 15 insere uma keyframe

6. Com a frame 15 seleccionada, arraste a instância do objecto, que está no palco, para a esquerda, ficando agora esta fora do palco.

7. Selecciona uma das frames entre a 1 e a 15 e no menu insert -> Timeline, clique na opção Create Motion Tween.

8. Teste o filme.

Exercício 2Partindo de um ponto, e usando animação com shape tween, construa uma animação que termine numa caixa.

Exercício 3Crie no Flash um documento com o nome transformações, contendo uma animação que apresente uma pessoa a transformar-se noutras..

Poderá encontrar as imagens em: C:\Programas\Microsoft Office\MEDIA\CAGCAT10

Exercício 4As LetrasConstrua uma animação que consista num conjunto de letras espalhadas aleatoriamente pelo ecrã que vão formando uma frase (o seu nome).

Nota: Pode usar o comando [Modify->Break Apart] para dividir uma caixa de texto em vários objectos, um por cada letra; A animação deve ter 5 segundos de duração, a 10 frames por segundo e 480x300 pixeis de dimensão.

Exercício 5 A CaixaPartindo de um ponto, e usando animação com motion tween e shape tween, construa uma animação que termine numa caixa, i.e., inicialmente temos só um ponto, depois uma linha, depois um rectângulo, etc, até chegarmos a uma caixa.A animação deve ter 5 segundos de duração, a 10 frames por segundo e 480x300 pixeis de dimensão.

Efeito Motion TweeningExercício 01 - Motion com Objecto  1. Desenhe uma bola;2. Clique na ferramenta Selection Tool;3. Prima a tecla F8 para transformar a bola em símbolo;4. Na Caixa de Diálogo introduza: Name: bola; behavior: graphic; Observe que quando se cria

um símbolo, aparece um sinal (+) dentro do objecto;5. Seleccione a linha do tempo na frame 50;6. Insira um keyframe na frame 50 (F6 ou botão direito do rato> Insert> Keyframe);7. Quando se insere um keyframe, estamos a repetir o objeto da frame anterior. Para que haja

animação devemos mudar a posição do objecto;8. Seleccione na linha do tempo a frame 1. Com botão direito do rato > Create Motion

Tweening, para inserir o efeito tweening motion; observe que na linha do tempo entre a frame 1 e a 49 foi exibido uma linha de cor preta, significando que nesta etapa da animação há um Tweening Motion;

9. Grave a sua animação, exer01.fla;10. Há duas maneiras de exportar a animação, para visualização:

   * Crtl + Enter > exer01.fla transforma-se em exer01.swf ou   * File > Export Movie > exer01.fla transforma-se em exer01.swf

11. 11. Para voltar à   área de trabalho> Crtl + F4;

Exercício 02 - Motion com Texto

1. Seleccione a ferramenta Text (Texto);    Escolha a fonte Arial Black, tamanho 28 e cor azul

2. Digite a palavra: FLASH3. Clique na ferramenta de Selecção;

     Clique sobre o texto4. Prima a tecla F8 para transformar o texto em símbolo5. Na Caixa de Diálogo introduza: Name: texto; behavior: graphic;6. Seleccione na linha de tempo a frame 507. Insira uma keyframe nesta frame (F6 ou botão direito do rato> Insert> Keyframe8. Quando se insere uma keyframe, estamos a repetir o objeto do frame anterior; mas para

que haja animação devemos mudar a posição do objecto para outra posição9. Selecione na linha de tempo a frame 1;

    Selecione o texto> Modify > Transform > Scale and Rotate ;    Scale : 10 e Rotate : 0

10. Selecione na linha de tempo a frame 1 ;    botão direito do rato > Create Motion Tweening , para inserir o efeito tweening motion ; observe que na linha de tempo entre a linha 1 e 49 foi exibida uma linha de cor preta, significando que nesta etapa da animação há um Tweening Motion

11. Guarde a sua animação, exer02.fla.12. Visualize a sua animação.

Exercício  03 - Motion com Texto e Objeto

1. Seleccione a ferramenta Oval;    Escolha o contorno a preto e preenchimento em azul claro2. Desenhe uma bola no lado esquerdo, na parte superior do palco;3. Clique na ferramenta de Selecção;4.  Prima F8 para transformar a bola em símbolo5. Na Caixa de Diálogo introduza: Name: bola1; behavior: graphic ;6. Clique sobre a bola1 com o botão direito do rato> Properties7. Colors Effects > Alpha > Alpha: 408. Seleccione na linha do tempo a frame 50 e insira uma keyframe9. Crtl + K para centrar a bola:    Vertical> Align     Horizontal > Align >    Match Size > Match Width ;10. Modify > Transform > Scale and Rotate :      Scale : 900 ; Rotate : 011. Clique duas vezes sobre o layer 1 e renomeie para bola1

12. Clique no ícone Add Layer (folha branca) criando o layer 213. Clique duas vezes sobre o layer 2 e renomeie para texto114. Seleccione na linha de tempo a frame 115. Seleccione a ferramenta Text (Texto);     fonte: verdana; tamanho 48; cor: vinho     Digite: Teste16. Crtl + K para centralizar o texto:     Vertical> Align >     Horizontal > Align > 17. Seleccione a ferramenta de Selecção     Clique sobre o texto18. Prima F8 para transformar o texto em símbolo19. Na Caixa de Diálogo introduza: Name: texto1; behavior: graphic;20. Insira uma keyframe na frame 5021. Seleccione a frame 122. Seleccione o texto> Modify> Transform> Flip Vertical23. Clique sobre a frame 1> botão direito do rato> Create Tweening25. Grave o ficheiro como exer03.fla24. Crtl + Enter e teste a sua animação25. Crtl + F4 para voltar a área de trabalho

Exercício 04 - Motion com Clockwise

1. Clique duas vezes no ícone 12.0 fps      Background mude o fundo da animação para preto2. Desenhe uma bolinha com a cor azul3. Seleccione a ferramenta Selecção e clique sobre a borda da bolinha; elimine a borda4. Clique sobre a bolinha> Crtl + D para duplicar5. Através das setas do seu teclado mova a bolinha para fora do palco6. Pinte a segunda bolinha de verde7. Seleccione a bolinha verde> Crtl + D para duplicar8. Através das setas do seu teclado mova a bolinha para fora do palco9. Pinte a terceira bolinha de vermelho10. Seleccione a bolinha vermelha> Crtl + D para duplicar11. Através das setas do seu teclado mova a bolinha para fora do palco12. Pinte a quarta bolinha de roxo13. Duplique e arraste para fora do palco14. Pinte a quinta bolinha de laranja15. Duplique e arraste para fora do palco16. Pinte a sexta bolinha de amarelo17. Duplique e arraste para fora do palco18. Seleccione todas as bolinhas> F8 para transformar em símbolo19. Name : bolinhas ; behavior : graphic20. Seleccione na linha do tempo a frame 40 e insera uma keyframe21. Seleccione na linha do tempo a frame 1> Create Motion Tweening22. Com o botão direito do rato sobre a frame 1 na linha do tempo> PropertiesTweening > Motion > Rotate : Clockwise e digite 999 times ( vezes ) ;No item Easing (aceleração) :In > a animação fica rápida e no final devagarOut > a animação fica devagar e no final rápidaGeralmente deixar em default, isto é, no meio entre In e Out23. Guarde o ficheiro como exer04.fla24. Crtl + Enter e teste a sua animação25. Crtl + F4 para voltar a área de trabalho

Exercício 05 - Efeito Fade com Texto

1. Clique duas vezes no ícone 12.0 fps      Background mude o fundo da animação para preto2. Seleccione a ferramenta Text ( Texto ) ;    fonte : arial black ; tamanho 48 ; cor : branco ;

    digite : FLASH3. Seleccione a ferramenta de selecção    Clique sobre o texto4. Prima F8 para transformar o texto em símbolo5. Na Caixa de Diálogo : Name : texto2 ; behavior : graphic ;    6. insira uma keyframe na frame 507. Seleccione na linha do tempo a frame 1> Create Motion Tweening8. Clique sobre o texto com o botão direito do rato > PropertiesColors Effects > Alpha > Alpha : 09. Guarde o ficheiro como exer05.fla10. Crtl + Enter e teste a sua animação11. Crtl + F4 para voltar a área de trabalho

Ficha de Exercícios 2 FlashEfeito Add Motion Guide

O efeito Add Motion Guide é a maneira de criar o caminho por onde passará um objecto na sua animação.Para que ocorra o Add Motion Guide, teremos de criar primeiramente um Motion Tweening.

Exercício 01 -  Add Motion Guide1. Desenhe uma bola2. Seleccione o objecto e transforme-o em símbolo (F8) ;3. Na Caixa de Diálogo introduza: Name: bola ; behavior: graphic ;    Observe que quando se cria um símbolo> aparece um sinal (+) dentro do objecto4. Insira uma keyframe na frame 50

Quando se insere uma keyframe, estamos a repetir o objecto da frame anterior.Para que haja animação devemos mudar a posição do objecto.

5. Seleccione a frame 1 e com o botão direito do rato> Create Motion Tween.Observe que na linha do tempo entre a linha 1 até 49 foi exibido uma linha em cor preta, significando que nesta etapa da animação há um Tweening Motion

6. Clique na folha Add Motion Guide 7. Com a ferramenta Pencil (Lápis) e escolha o modo Smooth (traçado suave) desenhe a

trajectória.8. Guarde a sua animação, motionguide01.fla9. Há duas maneiras de exportar a animação ou seja para rodar a animação:     * Crtl + Enter ou      * File> Export Movie10. Para voltar à área de trabalho> Crtl + F4

Exercício 02 - Dança das Letras1. Digite em Arial Black ; tamanho 48, azul, a

palavra: A M O R (com espaço entre as letras)

2. Mantenha o texto seleccionado e quebre o texto (Break Apart), para transformar o texto em imagem

3. Seleccione somente a letra A> F8> symbol : A; behavior: graphic

4. Seleccione somente a letra M e usando a ferramenta balde pinte-a de vermelho

5. Mantenha o M seleccionado> F8> symbol: M; behavior: graphic

6. Seleccione somente a letra O e usando a ferramenta balde pinte-a de verde

7. Mantenha o O seleccionado> F8> symbol : O; behavior : graphic

8. Seleccione somente a letra R e usando a ferramenta balde pinte-a de laranja

9. Mantenha o R seleccionado> F8> symbol : R; behavior : graphic

10. Seleccione na linha do tempo a frame 1> botão direito do rato> Copy Frame (Copiar Frame )

11. Clique no ícone Add Layer (Adicionar Layer) três vezes, uma layer para cada letra

12. Seleccione a linha do tempo = 1 de cada layer recém-criado separadamente> botão direito do rato> Paste Frame (Colar Frame )

13. Clique duas vezes sobre o primeiro layer e renomeie para A

14. Clique duas vezes sobre o segundo layer e renomeie para M

15. Clique duas vezes sobre o terceiro layer e renomeie para O

16. Clique duas vezes sobre o quarto layer e renomeie para R

17. Seleccione a linha do tempo = 50 dos quatro layers> F6 para inserir keyframe

18. Clique no ícone olho para esconder o layer M, O, R

19. Seleccione a linha do tempo = 1 do layer A20. Seleccione na área de trabalho as letras M,

O, R> delete21. Seleccione a linha do tempo = 50 do layer A22. Seleccione na área de trabalho as letras M,

O, R> delete23. Mantendo a linha do tempo 1 coloque a letra

A na parte superior à direita da tela 24. Clique na linha do tempo = 1> botão direito

do rato> Create Motion Tween25. Adicione a Linha de Guia (Add Motion Guide)26. Seleccione a ferramenta Pencil (Lápis) e

desenhe o caminho por onde passará a bola , iniciando dentro do sinal ( + ) de um A e terminando no eixo ( + ) do outro A

27. Esconda também o Layer Guide A28. Repita o mesmo procedimento para as

outras letras, escondendo sempre os layers com os quais não esteja a trabalhar;

29. Terminando todas as letras clique no olho para visualizar todos os layers

30. Guarde a sua animação, neste caso, motionguide2.fla

31. Crtl + Enter para visualizar.

Botão AnimFicha de Exercícios 3 FlashSímbolos

Os símbolos podem ser do tipo:   graphic ( gráfico ) button ( botão )

movie clip ( pequena animação )

Libraries - Bibliotecas do Flash

File> Import quando se importa uma imagem, o Flash faz uma cópia automaticamente para a sua biblioteca

Outras ferramentas para SímbolosNew Symbol > criar novo símboloNew Folder > criar nova pastaProperties > propriedades do símboloDelete > eliminar símbolo

Subir ou descer para o próximo símboloAumentar a área de visualização sobre os símbolosDiminuir a área de visualização sobre os símbolosIr para o primeiro símbolo

Options (Opções do Símbolo)New Symbol Criar novo símboloNew Folder Criar nova pasta , ou seja , serve para organizar os símbolos por categoriasRename Renomear símboloMove to New Folder Mover para nova pastaDuplicate Duplicar símboloDelete Eliminar símboloEdit Editar símboloProperties Propriedades do símboloSelect Unused items Seleccionar símbolos que não estão sendo usadosUpdate Actualizar símbolosPlay Executar símbolo ( movie clip, botão e som )Expand Folder Expandir pastaCollapse Folder Fechar pastaExpand All Folders Expandir todas as pastas

Collapse All FoldersFechar todas as pastas

Propriedades de um Símbolo

Definition (Definição)

Behavior (Comportamento)

Graphic, Button, Movie Clip

Play Mode Option(maneira para rodar a

animação)

Graphic - determina quantas vezes irá “rodar” o símbolo gráfico :  Loop (infinitamente), Play Once (rodar uma vez), Single Frame (símbolo estático)Button - determina como funcionará o botão : Track as Button , Track as Menu ItemMovie Clip - determina a instância de um símbolo, ou seja, um símbolo movie clip pode ter várias instâncias , mas com acções diferentes : Instance Name ( Nome da Instância )

 

Edit Symbol - editar símbolo

Duplicate Symbol - duplicar símbolo

Exercício 1 - Símbolo Movie Clip 

1. Neste exemplo vamos criar uma árvore de natal2. File > Import e importe uma imagem de uma árvore3. Window > Library > Options > New Symbol para criar novo símbolo4. Name: bolinhas ; behavior : movie clip5. Desenhe uma bolinha pequena de cor vermelha gradiente6. Seleccione a borda e apague-a7. Crtl + K para alinhar a bola no centro ( em cima do sinal + )8. Seleccione a linha do tempo, frame 2> F6 ou Insert> Keyframe9. Com a ferramenta balde pinte a bolinha de verde gradiente10. Seleccione a linha do tempo, frame 3> F6 ou Insert > Keyframe11. Com a ferramenta balde pinte a bolinha de cinza gradiente12. Seleccione a linha do tempo, frame 4> F6 ou Insert > Keyframe13. Com a ferramenta balde pinte a bolinha de azul gradiente

14. Volte para edição da Cena 1 > Edit Scene 15. Arraste a bolinha movie clip da library para a árvore por várias vezes16. Seleccione a linha do tempo, frame 40 > F5 ou Insert> Frame17. Guarde o ficheiro como exer1-movieclip.fla18. Crtl + Enter e teste a sua animação19. Crtl + F4 para voltar a área de trabalho

Exercício 2 - Símbolo Movie Clip

1.Neste exemplo vamos fazer o ecrã de um computador mudar de cor2. File> Import e importe uma imagem de um computador3. Seleccione a imagem> Crtl B ou Modify> Break Apart para transformar a imagem em bitmap

4. Seleccione a ferramenta lasso tool 5. Nas opções seleccione a segunda varinha mágica> Magic Wand Properties ( Propriedades da Varinha Mágica )6. Threshold : 10  e Smoothing : Normal7. Seleccione a primeira varinha mágica> Magic Wand (Varinha Mágica )8. Clique sobre o ecrã da imagem do computador, caso não fique seleccionado todo o ecrã, volte à segunda varinha mágica e aumente o Threshold para 20 e assim sucessivamente até que seleccione toda o ecrã9. Prima F8 e transforme o ecrã em símbolo movie clip

Name: ecrã ; behavior : movie clip10. Na Library selecione o símbolo ecrã e clique duas vezes sobre o desenho13. Insira uma keyframe na linha do tempo = 2 e pinte de uma outra cor14. Insira uma keyframe na linha do tempo = 3 e pinte de uma outra cor15. Insira uma keyframe na linha do tempo = 4 e pinte de uma outra cor

16. Volte para edição da Cena 1 > Edit Scene 17. Selecione a linha do tempo = 50 > F5 ou Insert > Frame18. Guarde o ficheiro como exer2-movieclip.fla19. Crtl + Enter e teste a sua animação20. Crtl + F4 para voltar a área de trabalho

Botões

O botão tem quatro estados: Up – aspecto do botão Over – aspecto do botão passamos o rato por cimaDown – aspecto do botão quando clicamos neleHit - define a área " clicável " do botão, ou seja, a área em que ele é accionado

Exercício 1 - Botão 1  Comece por criar um novo símbolo (New Symbol) na Biblioteca (Library)

Name: botão1; behavior: button 1. Desenhe uma bola azul2. Clique duas vezes sobre a bola para seleccionar o polígono e o contorno 3. Crtl + D ou  Edit> Duplicate para duplicar a bola 4. Com as setinhas do teclado arraste a cópia da bola para fora do palco 5. Modify> Transform> Scale and Rotate

Scale: 90; Rotate: 0 6. Com as setinhas do teclado arraste a cópia da bola para o meio da primeira bola 7. Seleccione a duas bolas> Crtl + G ou Modify> Group para agrupar as duas bolas, tornando-as um só polígono 9. Digite em branco e Arial Black no botão a palavra ENTRE 10. Seleccione o botão> Crtl K para centralizar os dois objectos (ver img 1) 11. Seleccione a linha do tempo os estados Over, Down e Hit 12. F6 ou Insert> Keyframe 13. Seleccione na linha do tempo o estado Over 14. Modify> Transform> Scale and Rotate

Scale: 120; Rotate: 0 15. Seleccione somente a palavra Entre 16. Seleccione a ferramenta de Texto e altere a cor para amarelo 17. Seleccione na linha do tempo o estado Down 18. Modify > Transform > Scale and Rotate

Scale: 80; Rotate: 0 19. Seleccione somente a palavra Entre 20. Seleccione a ferramenta de Texto e altere a cor para verde 21. Deixe o estado Hit como está, ou seja, igual ao estado Up

22. Clique em Scene 1 para voltar a Cena 1 23. Arraste da Library (Biblioteca) o desenho do botão 1 para área de trabalho 24. Salve o arquivo como exer1-botao.fla25. Crtl + Enter e teste sua animação26. Passe o rato sobre o botão e experimente pressioná-lo

Exercício 2 - Botão 2  Comece por criar um novo símbolo (New Symbol) na Biblioteca (Library)

Name : botão2; behavior: button

1. Seleccione a ferramenta Rectangle 2. Clique na ferramenta auxiliar do rectângulo> Round Rectangle Radius e no item

Corner Radius digite 10 (ver imagem 2)3. Desenhe um rectângulo em vermelho 4. Digite em branco e Arial Black no botão a palavra REGISTO 5. Seleccione o botão> Crtl K para centralizar no sinal (+) o símbolo botão2 6. Seleccione na linha do tempo os estados Over, Down e Hit 7. F6 ou Insert> Keyframe 8. Seleccione na linha do tempo o estado Over 9. Seleccione somente a palavra REGISTO 10. Seleccione a ferramenta de Texto e troque a cor para azul 11. Seleccione na linha do tempo o estado Down 12. Seleccione somente a palavra REGISTO 13. Seleccione a ferramenta de Texto e troque a cor para amarelo 14. Deixe o estado Hit como está, ou seja, igual ao estado Up

15. Clique em Scene 1 para voltar a Cena 1 16. Arraste da Library (Biblioteca) o desenho do botão 2 para área de trabalho 17. Guarde o ficheiro como exer2-botao.fla e teste a sua animação (Crtl + Enter)

Imagem 1

Imagem 2