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 2
Partindo de um ponto, e usando animação com shape tween, construa uma animação que termine numa caixa.

Exercício 3
Crie 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 4
As Letras
Construa 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 Caixa
Partindo 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 Tweening
Exercí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: FLASH
3. Clique na ferramenta de Selecção;
Clique sobre o texto
4. Prima a tecla F8 para transformar o texto em símbolo
5. Na Caixa de Diálogo introduza: Name: texto; behavior: graphic;
6. Seleccione na linha de tempo a frame 50
7. Insira uma keyframe nesta frame (F6 ou botão direito do rato> Insert> Keyframe
8. 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ção
9. 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 claro
2. 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ímbolo
5. Na Caixa de Diálogo introduza: Name: bola1; behavior: graphic ;
6. Clique sobre a bola1 com o botão direito do rato> Properties
7. Colors Effects > Alpha > Alpha: 40
8. Seleccione na linha do tempo a frame 50 e insira uma keyframe
9. Crtl + K para centrar a bola:
Vertical> Align
Horizontal > Align >
Match Size > Match Width ;
10. Modify > Transform > Scale and Rotate :
Scale : 900 ; Rotate : 0
11. Clique duas vezes sobre o layer 1 e renomeie para bola1
12. Clique no ícone Add Layer (folha branca) criando o layer 2
13. Clique duas vezes sobre o layer 2 e renomeie para texto1
14. Seleccione na linha de tempo a frame 1
15. Seleccione a ferramenta Text (Texto);
fonte: verdana; tamanho 48; cor: vinho
Digite: Teste
16. Crtl + K para centralizar o texto:
Vertical> Align >
Horizontal > Align >
17. Seleccione a ferramenta de Selecção
Clique sobre o texto
18. Prima F8 para transformar o texto em símbolo
19. Na Caixa de Diálogo introduza: Name: texto1; behavior: graphic;
20. Insira uma keyframe na frame 50
21. Seleccione a frame 1
22. Seleccione o texto> Modify> Transform> Flip Vertical
23. Clique sobre a frame 1> botão direito do rato> Create Tweening
25. Grave o ficheiro como exer03.fla
24. Crtl + Enter e teste a sua animação
25. 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 preto
2. Desenhe uma bolinha com a cor azul
3. Seleccione a ferramenta Selecção e clique sobre a borda da bolinha; elimine a borda
4. Clique sobre a bolinha> Crtl + D para duplicar
5. Através das setas do seu teclado mova a bolinha para fora do palco
6. Pinte a segunda bolinha de verde
7. Seleccione a bolinha verde> Crtl + D para duplicar
8. Através das setas do seu teclado mova a bolinha para fora do palco
9. Pinte a terceira bolinha de vermelho
10. Seleccione a bolinha vermelha> Crtl + D para duplicar
11. Através das setas do seu teclado mova a bolinha para fora do palco
12. Pinte a quarta bolinha de roxo
13. Duplique e arraste para fora do palco
14. Pinte a quinta bolinha de laranja
15. Duplique e arraste para fora do palco
16. Pinte a sexta bolinha de amarelo
17. Duplique e arraste para fora do palco
18. Seleccione todas as bolinhas> F8 para transformar em símbolo
19. Name : bolinhas ; behavior : graphic
20. Seleccione na linha do tempo a frame 40 e insera uma keyframe
21. Seleccione na linha do tempo a frame 1> Create Motion Tweening
22. Com o botão direito do rato sobre a frame 1 na linha do tempo> Properties
Tweening > Motion > Rotate : Clockwise e digite 999 times ( vezes ) ;
No item Easing (aceleração) :
In > a animação fica rápida e no final devagar
Out > a animação fica devagar e no final rápida
Geralmente deixar em default, isto é, no meio entre In e Out
23. Guarde o ficheiro como exer04.fla
24. Crtl + Enter e teste a sua animação
25. 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 preto
2. Seleccione a ferramenta Text ( Texto ) ;
fonte : arial black ; tamanho 48 ; cor : branco ;
digite : FLASH
3. Seleccione a ferramenta de selecção
Clique sobre o texto
4. Prima F8 para transformar o texto em símbolo
5. Na Caixa de Diálogo : Name : texto2 ; behavior : graphic ;
6. insira uma keyframe na frame 50
7. Seleccione na linha do tempo a frame 1> Create Motion Tweening
8. Clique sobre o texto com o botão direito do rato > Properties
Colors Effects > Alpha > Alpha : 0
9. Guarde o ficheiro como exer05.fla
10. Crtl + Enter e teste a sua animação
11. Crtl + F4 para voltar a área de trabalho
 Ficha de Exercícios 2 Flash
Efeito 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 Guide
1. Desenhe uma bola
2. 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 objecto
4. 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.fla
9. Há duas maneiras de exportar a animação ou seja para rodar a animação:
* Crtl + Enter ou
* File> Export Movie
10. Para voltar à área de trabalho> Crtl + F4
Exercício 02 - Dança das Letras
1. Digite em Arial Black ; tamanho 48, azul, a 15. Clique duas vezes sobre o terceiro layer e
palavra: A M O R (com espaço entre as renomeie para O
letras) 16. Clique duas vezes sobre o quarto layer e
2. Mantenha o texto seleccionado e quebre o renomeie para R
texto (Break Apart), para transformar o texto 17. Seleccione a linha do tempo = 50 dos quatro
em imagem layers> F6 para inserir keyframe
3. Seleccione somente a letra A> F8> symbol : 18. Clique no ícone olho para
A; behavior: graphic esconder o layer M, O, R
4. Seleccione somente a letra M e usando a 19. Seleccione a linha do tempo = 1 do layer A
ferramenta balde pinte-a de vermelho 20. Seleccione na área de trabalho as letras M,
5. Mantenha o M seleccionado> F8> symbol: O, R> delete
M; behavior: graphic 21. Seleccione a linha do tempo = 50 do layer A
6. Seleccione somente a letra O e usando a 22. Seleccione na área de trabalho as letras M,
ferramenta balde pinte-a de verde O, R> delete
7. Mantenha o O seleccionado> F8> symbol : 23. Mantendo a linha do tempo 1 coloque a letra
O; behavior : graphic A na parte superior à direita da tela
8. Seleccione somente a letra R e usando a 24. Clique na linha do tempo = 1> botão direito
ferramenta balde pinte-a de laranja do rato> Create Motion Tween
9. Mantenha o R seleccionado> F8> symbol : 25. Adicione a Linha de Guia (Add Motion Guide)
R; behavior : graphic 26. Seleccione a ferramenta Pencil (Lápis) e
10. Seleccione na linha do tempo a frame 1> desenhe o caminho por onde passará a
botão direito do rato> Copy Frame (Copiar bola , iniciando dentro do sinal ( + ) de um
Frame ) A e terminando no eixo ( + ) do outro A
11. Clique no ícone Add Layer (Adicionar 27. Esconda também o Layer Guide A
Layer) três vezes, uma layer para cada letra 28. Repita o mesmo procedimento para as
12. Seleccione a linha do tempo = 1 de cada outras letras, escondendo sempre os layers
layer recém-criado separadamente> botão com os quais não esteja a trabalhar;
direito do rato> Paste Frame (Colar Frame ) 29. Terminando todas as letras clique no olho
13. Clique duas vezes sobre o primeiro layer e para visualizar todos os layers
renomeie para A 30. Guarde a sua animação, neste caso,
14. Clique duas vezes sobre o segundo layer e motionguide2.fla
renomeie para M 31. Crtl + Enter para visualizar.
 Botão AnimFicha de Exercícios 3 Flash
Sí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ímbolos

New Symbol > criar novo símbolo
New Folder > criar nova pasta
Properties > propriedades do símbolo
Delete > eliminar símbolo
Subir ou descer para o próximo símbolo
Aumentar a área de visualização sobre os símbolos
Diminuir a área de visualização sobre os símbolos
Ir para o primeiro símbolo

Options (Opções do Símbolo)

New Symbol Criar novo símbolo
New Folder Criar nova pasta , ou seja , serve para organizar os símbolos por categorias
Rename Renomear símbolo
Move to New Folder Mover para nova pasta
Duplicate Duplicar símbolo
Delete Eliminar símbolo
Edit Editar símbolo
Properties Propriedades do símbolo
Select Unused items Seleccionar símbolos que não estão sendo usados
Update Actualizar símbolos
Play Executar símbolo ( movie clip, botão e som )
Expand Folder Expandir pasta
Collapse Folder Fechar pasta
Expand All Folders Expandir todas as pastas
Fechar todas as pastas
Collapse All Folders

Propriedades de um Símbolo
Definition (Definição)
Behavior
Graphic, Button, Movie Clip
(Comportamento)
Graphic - determina quantas vezes irá “rodar” o símbolo gráfico : Loop
(infinitamente), Play Once (rodar uma vez), Single Frame (símbolo
estático)
Play Mode Option
Button - determina como funcionará o botão : Track as Button , Track as
(maneira para rodar a
Menu Item
animação)
Movie 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 natal
2. File > Import e importe uma imagem de uma árvore
3. Window > Library > Options > New Symbol para criar novo símbolo
4. Name: bolinhas ; behavior : movie clip
5. Desenhe uma bolinha pequena de cor vermelha gradiente
6. Seleccione a borda e apague-a
7. Crtl + K para alinhar a bola no centro ( em cima do sinal + )
8. Seleccione a linha do tempo, frame 2> F6 ou Insert> Keyframe
9. Com a ferramenta balde pinte a bolinha de verde gradiente
10. Seleccione a linha do tempo, frame 3> F6 ou Insert > Keyframe
11. Com a ferramenta balde pinte a bolinha de cinza gradiente
12. Seleccione a linha do tempo, frame 4> F6 ou Insert > Keyframe
13. 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 vezes
16. Seleccione a linha do tempo, frame 40 > F5 ou Insert> Frame
17. Guarde o ficheiro como exer1-movieclip.fla
18. Crtl + Enter e teste a sua animação
19. 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 cor

2. File> Import e importe uma imagem de um computador
3. 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 : Normal
7. 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 clip
10. Na Library selecione o símbolo ecrã e clique duas vezes sobre o desenho
13. Insira uma keyframe na linha do tempo = 2 e pinte de uma outra cor
14. Insira uma keyframe na linha do tempo = 3 e pinte de uma outra cor
15. 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 > Frame
18. Guarde o ficheiro como exer2-movieclip.fla
19. Crtl + Enter e teste a sua animação
20. 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 cima
Down – aspecto do botão quando clicamos nele
Hit - 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 azul
2. 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 Imagem 1
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.fla
25. Crtl + Enter e teste sua animação
26. 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 Imagem 2
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)