Tic-excel-03

TIC

Criação de Páginas Web - Flash

1

FLASH…

2

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

FLASH…Instalação

3

http://macromedia-flash-8.soft32.com/free-download/

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

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 texto Desenhar 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

TIMELINE (LINHA DO TEMPO)

¢ A timeline é um elemento fundamental do Flash ¢ É constituída por duas zonas:

�  Zona de layers; �  Zona de frames.

6 Zona de Layers

Zona de Frames

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.

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.

FRAMES (QUADROS)

9

Frame vazia

Static Frame

Tweening motion

Keyframe

Tweening shape

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

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.

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

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

FLASH…MOTION TWEEN

14

Temos que indicar: §  o início do movimento


§  o fim do movimento

15

Keyframe – É uma frame-chave, que indica o início ou o fim do movimento.


Keyframe - Início Keyframe - Fim

Menu Insert – Opção Timeline/Keyframe ou Tecla F6

16


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

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.


18

Layers

Keyframe

Keyframe Keyframe

Fim da Animação

Símbolo – Graphic – Motion Tween

Keyframe

Crie animações a seu gosto

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

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

FLASH…MOTION GUIDES Q INSERIR UMA IMAGEM DE FUNDO - LAYER

LAYER - FUNDO

Bélgica Áustria

Turquia

Rússia Irlanda

Bulgária

Espanha

PORTUGAL

22

FLASH…MOTION GUIDES q  NOVA LAYER - INSERIR A IMAGEM DA

TAÇA

Fundo

Taça

Bélgica Áustria

Turquia

Rússia Irlanda

Bulgária

Espanha

PORTUGAL

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ússia Irlanda

Bulgária

Espanha

PORTUGAL

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

FLASH…MOTION GUIDES q  CRIAR UM MOTION TWEEN (ANIMAÇÃO INTERPOLADA) PARA A LAYER TAÇA


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

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


Turquia

Rússia Espanha

Irlanda

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


Turquia

Rússia Espanha

Irlanda

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

FIM DA TRAJECTÓRIA – Na última frame colocar a

taça por cima do fim da guia desenhada.


FIM DA TRAJECTÓRIA

PORTUGAL


Turquia

Rússia Espanha

Irlanda

30

ORIENT TO PATH – ORIENTAR PELO CAMINHO


PORTUGAL


Turquia

Rússia

Espanha Irlanda

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

Education

Tic-excel-03