Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma...

71
Flash Prof. Luiz Claudio Ferreira de Souza www.luizclaudiofs.blogspot.com

Transcript of Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma...

Page 1: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Flash

Prof. Luiz Claudio Ferreira de Souza

www.luizclaudiofs.blogspot.com

Page 2: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Flash

Programa destinado para a criação de animações.

www.luizclaudiofs.blogspot.com

Page 3: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Conceitos Importantes

Linha do tempo: Correspondem a quadros que podemos trabalhar um a um.

Flash -> Padrão de 12 quadros por segundo Tv -> 21 a 30 quadros por segundo

www.luizclaudiofs.blogspot.com

Page 4: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Primeiro Exemplo

Selecione Texto, e defina o tamanho da fonte para 48 e o Tipo Arial

www.luizclaudiofs.blogspot.com

Page 5: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione a Ferramenta de Texto (1) e clique no palco (2)

www.luizclaudiofs.blogspot.com

Page 6: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione a cor verde

www.luizclaudiofs.blogspot.com

Page 7: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Digite o B da palavra Brasil

www.luizclaudiofs.blogspot.com

Page 8: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Na Linha do Tempo, selecione o segundo quadro dando um clique com o botão direito do mouse

Observe, o quadro ficará azul!

www.luizclaudiofs.blogspot.com

Page 9: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Clique com o Botão esquerdo do mouse sobre o segundo quadro e insira quadro chave

www.luizclaudiofs.blogspot.com

Page 10: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Deverá ficar assim

www.luizclaudiofs.blogspot.com

Page 11: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Agora Faça as demais letras, para que fique assim

www.luizclaudiofs.blogspot.com

Page 12: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Ferramentas

www.luizclaudiofs.blogspot.com

Page 13: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Segundo Exemplo

Selecione o quadro 50 e Insira um quadro chave

Ficando assim:

www.luizclaudiofs.blogspot.com

Page 14: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Desenhe uma Circunferência no Palco, no frame (quadro) 1

www.luizclaudiofs.blogspot.com

Page 15: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione o Quadro 50 e insira um quadro chave

Ficando assim!

www.luizclaudiofs.blogspot.com

Page 16: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione o quadro 50, e troque de cor a circunferência!

www.luizclaudiofs.blogspot.com

Page 17: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione qualquer quadro entre 1 e 50

www.luizclaudiofs.blogspot.com

Page 18: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Clique com o botão direito do mouse sobre o quadro selecionado e escolha a opção criar uma interpolação de forma

www.luizclaudiofs.blogspot.com

Page 19: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

A Linha do tempo ficará assim!

www.luizclaudiofs.blogspot.com

Page 20: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Ctrl + Enter , veja a execução!

www.luizclaudiofs.blogspot.com

Page 21: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Exemplo 3

Vamos fazer a circunferência do exemplo anterior mudar de posição!

www.luizclaudiofs.blogspot.com

Page 22: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione o Quadro 50 e desloque a circunferência para a nova posição

www.luizclaudiofs.blogspot.com

Page 23: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Exemplo 4

Vamos agora fazer um circulo virar um retângulo!

www.luizclaudiofs.blogspot.com

Page 24: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

No Quadro 1, desenhe uma circunferência no palco

www.luizclaudiofs.blogspot.com

Page 25: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Insira um quadro chave em branco no frame 50

www.luizclaudiofs.blogspot.com

Page 26: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Observe como ficará a linha do tempo!

www.luizclaudiofs.blogspot.com

Page 27: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

No quadro 50 desenhe um quadrado!

www.luizclaudiofs.blogspot.com

Page 28: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Em qualquer quadro entre 1 e 50 insira a interpolação de forma

www.luizclaudiofs.blogspot.com

Page 29: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

www.luizclaudiofs.blogspot.com

Page 30: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

CTRL + Enter e veja como ficou!

www.luizclaudiofs.blogspot.com

Page 31: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Exemplo 5

Até agora utilizamos uma única camada, vamos a um exemplo de duas camadas!

www.luizclaudiofs.blogspot.com

Page 32: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Desenhe a figura abaixo no quadro 1

www.luizclaudiofs.blogspot.com

Page 33: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Insira um quadro chave no frame 50

Ficando a linha do tempo assim!

www.luizclaudiofs.blogspot.com

Page 34: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione a ferramenta transformação livre e aumento a figura desenhada!

www.luizclaudiofs.blogspot.com

Page 35: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Aumente a figura para a direita!

www.luizclaudiofs.blogspot.com

Page 36: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Ficando assim!

www.luizclaudiofs.blogspot.com

Page 37: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Em qualquer quadro entre 1 e 50, insira a interpolação de forma

Ficando a linha do tempo assim!

www.luizclaudiofs.blogspot.com

Page 38: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Adicione uma nova camada!

Clique onde a seta indica, abaixo

www.luizclaudiofs.blogspot.com

Page 39: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Nova camada criada!

www.luizclaudiofs.blogspot.com

Page 40: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Coloque um cadeado na primeira camada!

www.luizclaudiofs.blogspot.com

Page 41: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Na camada 2, no quadro 1 insira o desenho, conforme abaixo

www.luizclaudiofs.blogspot.com

Page 42: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Insira um quadro chave no frame 50

Ficando assim!

www.luizclaudiofs.blogspot.com

Page 43: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Utilizando a ferramenta transformação livre aumente a figura desenhada por último para a esquerda

www.luizclaudiofs.blogspot.com

Page 44: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Na camada 2, entre os quadros 1 e 50, crie a interpolação de forma

www.luizclaudiofs.blogspot.com

Page 45: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

A linha do tempo ficará assim:

www.luizclaudiofs.blogspot.com

Page 46: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Ctrl + Enter , veja como ficou!

www.luizclaudiofs.blogspot.com

Page 47: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Exemplo 6

Vamos fazer agora uma bolinha caindo e subindo!

www.luizclaudiofs.blogspot.com

Page 48: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

No quadro 1, faça o desenho abaixo

www.luizclaudiofs.blogspot.com

Page 49: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

No quadro 25 insira um quadro chave:

www.luizclaudiofs.blogspot.com

Page 50: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione a bolinha desenhada, mantenha a tecla shift pressionada e juntamente tecle a seta para baixo, assim mantemos o eixo

www.luizclaudiofs.blogspot.com

Page 51: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Insira um quadro chave no quadro 30

www.luizclaudiofs.blogspot.com

Page 52: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Insira um quadro chave no quadro 35

www.luizclaudiofs.blogspot.com

Page 53: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione o quadro 1, clique com o botão esquerdo do mouse

www.luizclaudiofs.blogspot.com

Page 54: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione a linha do tempo 55, clique com o botão direito e cole

www.luizclaudiofs.blogspot.com

Page 55: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione o frame 30, selecione a ferramenta transformação e achate a bolinha

www.luizclaudiofs.blogspot.com

Page 56: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione todas os quadros da camada

Para isso, clique no nome da camada (camada 1)

www.luizclaudiofs.blogspot.com

Page 57: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Insira a interpolação de forma, clique com o botão direito do mouse sobre qualquer quadro selecionado em azul

www.luizclaudiofs.blogspot.com

Page 58: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

A linha do tempo ficará assim:

www.luizclaudiofs.blogspot.com

Page 59: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Ctrl + Enter , veja como ficou!

www.luizclaudiofs.blogspot.com

Page 60: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Física com Flash

www.luizclaudiofs.blogspot.com

Page 61: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione um arquivo novo

No quadro 1 desenhe a figura abaixo:

www.luizclaudiofs.blogspot.com

Page 62: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

No quadro 30 Insira um quadro chave em branco, a linha do tempo ficará assim!

www.luizclaudiofs.blogspot.com

Page 63: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

No quadro 30, Insira um quadro chave.

Utilize a ferramenta de transformação livre.

www.luizclaudiofs.blogspot.com

Page 64: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Amplie a chapa de metal desenhada

www.luizclaudiofs.blogspot.com

Page 65: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione qualquer quadro entre 1 e 30

Crie uma interpolação de Forma!

www.luizclaudiofs.blogspot.com

Page 66: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Nomeie a camada1 para Metal e coloque o cadeado!

Ficando assim:

www.luizclaudiofs.blogspot.com

Page 67: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Crie a camada Fogo

www.luizclaudiofs.blogspot.com

Page 68: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Selecione o quadro 1

Importe para o palco o arquivo cbx-fogo 43:

www.luizclaudiofs.blogspot.com

Page 69: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

No quadro 1 da camada Fogo, traga o fogo para baixo na chapa de metal, utilizando a ferramenta:

www.luizclaudiofs.blogspot.com

Page 70: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Faça o mesmo para os quadros 5, 7, 10, 13, 16, 19, 22

www.luizclaudiofs.blogspot.com

Page 71: Flash - anisioteixeira.com.br · selecionado e escolha a opção criar uma interpolação de forma . ... Insira um quadro chave no frame 50 Ficando a linha do tempo assim! ... veja

Agora veja como ficou Ctrl+Enter

www.luizclaudiofs.blogspot.com