O documento fornece instruções sobre como criar animações e botões em Flash, incluindo motion tween, tween shapes e motion guides. Explica como adicionar camadas, frames e keyframes para criar animações e como converter imagens em símbolos gráficos.

1. TIC
Criação de Páginas Web - Flash
1

2. FLASH…
2
§ Programa de Animação
§ Permite a criação de páginas WEB
§ Utiliza camadas – Layers – desenhos,
imagens, texto, som ou vídeo.

3. FLASH…Instalação
3
http://macromedia-flash-8.soft32.com/free-download/

4. 4
Palco
Linha do Tempo
Painel Propriedades
D
E
S
E
N
H
O
P
I
N
T
U
R
A
Painéis
de
Tarefas

5. FERRAMENTAS DE DESENHO E PINTURA
5
Selecionar, mover e redimensionar
objetos
Modificar ângulos, direções e comprimentos de
segmentos retos e curvos
Retirar amostras de cor de
imagens
Remover contornos e preenchimentos
Digitar textoDesenhar formas vetoriais
Desenhar linhas
Desenhar objetos retangulares
Ligar ou encaixar traços
Lupa
Cor da linha
Cor do fundo
Alternar entre cores de preenchimento e
cores de contorno
Movimentar na área de
trabalho
Selecionar objetos
Transformar objetos Rotação de objetos
Colorir áreas vazias ou delimitadas
Criar traços semelhantes a pinceladas
Desenhar objetos ovais
Desenhar linhas personalizadas
Colorir cor da linha

6. TIMELINE (LINHA DO TEMPO)
¢ A timeline é um elemento fundamental do Flash
¢ É constituída por duas zonas:
— Zona de layers;
— Zona de frames.
6Zona de Layers
Zona de Frames

7. LAYERS (CAMADAS)
7
Adicionar Layers
Eliminar Layers Bloquear layers
Ocultar Layers
¢ As layers podem ser imaginadas como sendo várias
folhas transparentes, sobrepostas, nas quais podemos
organizar todos os itens de forma integrada e
independente.
¢ Cada símbolo que for sujeito a animação deve ter uma
camada própria.

8. FRAMES (QUADROS)
8
¢ As frames estão representadas na timeline. Existem
vários tipos de frames:
— Frames vazias – todas as frames visualizadas na timeline
quando iniciarmos um projeto.
— Keyframe – para se inserir um objeto – keyframe
— Static frame – cor de fundo cinzenta. É precedida de
keyframes. O seu conteúdo matém-se até à próxima keyframe
— Tweening motion – possui cor de fundo azul e indica um
movimento.
— Tweening shape – possui uma cor de fundo verde. Começa e
acaba com uma keyframe e uma seta nas frames intermédias.

9. FRAMES (QUADROS)
9
Frame vazia
Static Frame
Tweening motion
Keyframe
Tweening shape

10. q Área de Trabalho
q 4 instrumentos muito úteis
q Réguas (Rulers) – existem na parte
superior e esquerda do palco
q Grelha (Grid) – aspeto do palco com
quadriculas que facilitam a
disposição e desenho dos objetos.
q Linhas de Guia (Guides) – linhas
que se movimentam na vertical e na
horizontal dentro do palco.
q Ajustamento (Snapping) – define o
alinhamento, o ajustamento às
linhas, às grelhas, etc. Opção – Edit
Snapping – Menu View
10
PALCO

11. 11
Layers – camadas transparentes e sobrepostas.
Possibilita visualizar todos os elementos inseridos
nas diversas layers.
LINHA DO TEMPO
Frame - Tempo em Flash.
Um instante onde podemos inserir elementos
de som, imagem e texto.

12. q 3 Tipos de Animações
q Motion Tween (animação interpolada) –
Animação simples, que utiliza o conceito tween
(between – “entre” ou “no meio de dois”.
q Tween Shape (animação de formas) – Animação
que permite transformar uma forma noutra
completamente diferente.
q Motion Guides (Guias de Movimento) – Animação
em que se define uma trajetória para um objeto
descrever durante um movimento. palco.
12
Animações em Flash

13. 13
Motion Tween (Animação Interpolada) – É um
movimento que ocorre no meio de dois pontos.
FLASH…MOTION TWEEN

14. 14
Temos que indicar:
§ o início do movimento
FLASH…MOTION TWEEN
§ o fim do movimento

15. 15
Keyframe – É uma frame-chave, que indica o início ou o
fim do movimento.
FLASH…MOTION TWEEN
Keyframe - Início Keyframe - Fim
Menu Insert – Opção Timeline/Keyframe ou
Tecla F6

16. 16
FLASH…MOTION TWEEN
New Symbol – Define o tipo de
símbolo a que o objecto
corresponde.
Name – o nome do novo
símbolo.
Graphic – utilizado para as
animações interpoladas.
Menu Insert – Opção New Symbol ou Convert
to Symbol (Botão do lado direito do rato)

17. 17
Vamos dizer que a bola tem de se movimentar
FLASH…MOTION TWEEN
Clicar com botão do lado direito do rato sobre a
keyframe de início e seleccionar a opção Create
Motion Tween.
Keyframe - Início Keyframe - Fim

18. 18
Layers
Keyframe
Keyframe
Keyframe
Fim da
Animação
Símbolo –
Graphic –
Motion Tween
Keyframe
Crie animações
a seu gosto

19. 19
Motion Shape – Transforma uma forma noutra
completamente diferente
FLASH… TWEEN SHAPES
1. Na keyframe incial desenhar a
primeira forma
2. Selecionar a keyframe e no
painel Properties definir o
tipo Tween como Shape
O Keyframe onde está a forma
inicial adotou a cor verde

20. 20
FLASH… TWEEN SHAPES
3. Clique na frame onde deseja
terminar a animação e insira
uma keyframe em branco,
onde irá desenhar a forma
final da apresentação
4. Para inserir a keyframe em
branco, clique do lado direito
do rato e escolha a opção
Insert Blank Keyframe.
5. Na keyframe em branco
desenhe a forma final em que
a primeira se irá transformar.

21. 21
FLASH…MOTION GUIDES
Q INSERIR UMA IMAGEM DE FUNDO - LAYER
LAYER - FUNDO
Bélgica
Áustria
Turquia
RússiaIrlanda
Bulgária
Espanha
PORTUGAL

22. 22
FLASH…MOTION GUIDES
q NOVA LAYER - INSERIR A IMAGEM DA
TAÇA
Fundo
Taça
Bélgica
Áustria
Turquia
RússiaIrlanda
Bulgária
Espanha
PORTUGAL

23. FLASH…MOTION GUIDES
Q CONVERTER A IMAGEM PARA SIMBOLO
Convert to
Symbol
(Botão lado
direito do
rato):
§ Nome
§ Graphic
Taça
Fundo
Bélgica
Áustria
Turquia
RússiaIrlanda
Bulgária
Espanha
PORTUGAL

24. 24
FLASH…MOTION GUIDES
q PARA TODAS AS LAYERS – KEYFRAME –
INDICAR O FIM DA ANIMAÇÃO – TECLA F6
Fundo
– F6
Taça –
F6
PORTUGAL
Bélgica
Áustria
Bulgária
Turquia
Rússia
Espanha
Irlanda

25. 25
FLASH…MOTION GUIDES
q CRIAR UM MOTION TWEEN (ANIMAÇÃO
INTERPOLADA) PARA A LAYER TAÇA
Keyframe - Início Keyframe - Fim
Clicar com botão do lado direito do rato sobre a
keyframe de início e seleccionar a opção Create
Motion Tween.
Create Motion Tween

26. 26
FLASH…MOTION GUIDES
q ADD MOTION GUIDE – ADICIONAR GUIAS DE
MOVIMENTO
Layer taça
- botão do
lado direito
do rato -
opção Add
Motion
Guide.
Taça
Fundo
PORTUGAL
Bélgica
Áustria
Bulgária
Turquia
RússiaEspanha
Irlanda

27. 27
FLASH…MOTION GUIDES
TRAJECTÓRIA DA TAÇA – Clicar na tecla Y (lápis)
ou na N (linhas) desenhar a trajectória da taça
Lápis
Linha
PORTUGAL
Bélgica Áustria
Bulgária
Turquia
Rússia
Espanha
Irlanda

28. 28
FLASH…MOTION GUIDES
INÍCIO DA
TRAJECTÓRIA
INÍCIO DA TRAJECTÓRIA – Na frame 1 colocar a taça por
cima do início da guia desenhada.
PORTUGAL
Bélgica
Áustria
Bulgária
Turquia
Rússia
Espanha
Irlanda

29. 29
FIM DA TRAJECTÓRIA – Na última frame colocar a
taça por cima do fim da guia desenhada.
FLASH…MOTION GUIDES
FIM DA
TRAJECTÓRIA
PORTUGAL
Bélgica
Áustria
Bulgária
Turquia
Rússia
Espanha
Irlanda

30. 30
ORIENT TO PATH – ORIENTAR PELO CAMINHO
FLASH…MOTION GUIDES
PORTUGAL
Bélgica Áustria Bulgária
Turquia
Rússia
Espanha
Irlanda

31. 31
FLASH…BOTÕES
http://www.youtube.com/watch?v=OgqL1PWLnt8
http://www.youtube.com/watch?v=MoAwGpEIBjg
http://www.youtube.com/watch?v=LvQ4lC0KIBE
http://www.youtube.com/watch?v=k5zdMbarAZQ
http://tutoriais-pt.blogspot.pt/2011/06/criar-um-botao-flash-8.html