Tutorial Flash - Bola Pula No Buraco

12
 TUTORIAL BOLA PULA NO BURACO George Alberto Ferreira Cavalcante - 081 9154702 6 [email protected] Muito bem gente, vamos criar no Flash uma cena animada de uma bola quicando num cenário e caindo dentro de um buraco Porém antes de qualquer coisa devemos lembrar que animação digital não é uma receita de bolo que só pode fazer de um jeito, esforce-se para entender a logica da coisa. CRIANDO UM SÍMBOLO São muito importantes os símbolos na animação, sem eles seria muito complicado e até impossível animar e até programar dentro do Flash. Existem três tipos de símbolo: 1-Clipes de filmes (MovieClips). 2-Botões (Buttons). 3- Gráficos (Graphics). Neste tutorial usaremos apenas um símbolo do tipo gráfico, uma linha guia, um cenário e uma camada máscara. Vamos Começar? Quando abrimos o Flash ele inicia com uma janela perguntando o tipo de novo documento você quer iniciar escolha ACTION SCRIPT 3.0 ou 2.0. Caso você esteja com o Flash aberto então crie um arquivo novo clicando em FILE -> NEW. Vamos criar um símbolo, com o novo documento aberto vá para o menu INSERT ->NEW SIMBOL ou Clique CTRL+F8.

Transcript of Tutorial Flash - Bola Pula No Buraco

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 1/12

 

TUTORIAL BOLA PULA NO BURACO

George Alberto Ferreira Cavalcante - 081 91547026 [email protected]

Muito bem gente, vamos criar no Flash uma cena animada de uma bola quicando num cenário

e caindo dentro de um buraco

Porém antes de qualquer coisa devemos lembrar que animação digital não é uma receita de

bolo que só pode fazer de um jeito, esforce-se para entender a logica da coisa.

CRIANDO UM SÍMBOLO

São muito importantes os símbolos na animação, sem eles seria muito complicado e até

impossível animar e até programar dentro do Flash.

Existem três tipos de símbolo:

1-Clipes de filmes (MovieClips).

2-Botões (Buttons).

3- Gráficos (Graphics).Neste tutorial usaremos apenas um símbolo do tipo gráfico, uma linha guia, um cenário e uma

camada máscara.

Vamos Começar?

Quando abrimos o Flash ele inicia com uma janela perguntando o tipo de novo documento

você quer iniciar escolha ACTION SCRIPT 3.0 ou 2.0.

Caso você esteja com o Flash aberto então crie um arquivo novo clicando em FILE -> NEW.

Vamos criar um símbolo, com o novo documento aberto vá para o menu INSERT ->NEW

SIMBOL ou Clique CTRL+F8.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 2/12

 

 

O Flash mostra uma nova janela (CREATE NEW SIMBOL) para você dar nome e escolher o tipo

de símbolo a ser inserido na biblioteca do novo documento. Chamaremos o novo símbolo de

BOLA e selecionamos o tipo Gráfico para ele.

Observe que agora você não está mais na cena e sim no espaço de edição dentro do símbolo

BOLA.

No meio do palco desenhe uma bola com tudo que tem direito. Após isso separe em camadas

diferentes o contorno e o conteúdo da imagem que acabamos de criar.

Como?

Chame a camada inicial de CONTEÚDO, Clique-duplo, sobre o contorno (confira se apenas o

contorno está selecionado), CTRL+X para recortar o contorno, crie uma nova camada e

denomine-a de CONTORNO, nesta nova Camada cole no mesmo lugar que recortou da camada

CONTEÚDO usando CTRL+SHIFT+V.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 3/12

 

 

Porque fazermos isso?

Para podermos editar diferentemente ambas as camadas.

No frame 20 da camada CONTEÚDO clique F5 dando uma continuidade a textura da bola, no

mesmo frame 20, porém na camada do CONTORNO clique F6, criando um novo quadro-chave.

Na camada contorno clique em qualquer frame entre 1 e o 19 com o botão direito e selecione

a opção CRIAR INTERPOLAÇÃO CLÁSSICA.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 4/12

 

 

Na mesma camada no frame 10, crie um novo quadro chave (F6) e com a ferramenta FREE

TRANFORM TOOL (Q) gire em 180 graus em sentido horário o contorno da bola, e no frame 20

gire cerca de 160 graus. Isto vai dar uma aparência de giro em 360 graus para a bola pela

quebra de quadros do trajeto do giro. Trave a camada.

Na camada CONTEÚDO aplique uma textura Radial ajustando com a Ferramenta GRADIENT

TRANSFORM TOOL (F) para criar uma aparência de que está recebendo iluminação. Trave acamada e Pronto.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 5/12

 

 

Você tem uma bola que gira e mantem um foco de luz e sombra.

LINHA GUIA

Volte para Cena, denomine a camada existente de BOLA, arraste e ajuste o tamanho e posição

do símbolo BOLA nele, feito isto crie uma nova camada, chame-a de GUIA e faça uma linha que

represente o caminho que você deseja que a BOLA percorra.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 6/12

 

Na camada GUIA no frame 35 crie um quadro continuado (F5), e na Camada BOLA, também no

quadro 35, crie um quadro editável (F6). Crie uma Interpolação clássica na camada BOLA.

Agora, no quadro 1 posicione o símbolo BOLA na extremidade desejada e no quadro 35 na

outra extremidade.

Clique sobre a Camada Guia, com o botão direito do mouse ou do Pen da Tablet, e escolha a

opção Linha Guia (Guide).

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 7/12

 

 

Observe como o a camada sofreu uma mudança, mas não guia ainda o símbolo BOLA.

Para ser guiado o simbolo BOLA terá que ser filho da Camada GUIA, e isto é feito arrastando

levemente a camada BOLA para baixo da camada GUIA.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 8/12

 

 

Teste movendo o Cursor da Linha do Tempo (Timeline) se o símbolo BOLA estiver seguindo a

linha GUIA e girando (conforme determinamos dentro da edição do símbolo) então está tudo

correto, se não retorne e refaça o passo a passo e veja o que faltou.

A linha GUIA não aparecerá na apresentação, pois ela só é um objeto visível no programa de

edição (Flash).

CENÁRIO

O cenário você pode importar (ARQUIVO->IMPORTAR->IMPORTAR PARA BIBLIOTECA) ou

desenha-lo diretamente no FLASH.

No meu caso desenhei um cenário simples com um buraco desenhado em uma camada que

movi para baixo de todas. Chamei a camada de CENÁRIO.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 9/12

 

 Desenhei propositalmente um buraco no caminho da linha Guia pelo motivo de querer fazer

que o símbolo BOLA simule que caiu dentro dele, se importou uma imagem do Photoshop cuja

linha GUIA não se posiciona adequadamente, então edite a Linha Guia em sua camada,

 ATENÇÃO: Se for desenhar seu cenário no próprio FLASH não esqueça de travar as demaiscamadas para não haver confusão de linhas e permitir um movimento mais tranquilo do

Mouse ou Pen.

MÁSCARA

Existe um recurso muito bom no Flash que me permite escolher as áreas que serão vistas na

apresentação usando máscaras, porem, como a Linha Guia (Guide), Máscara (Mask) é um

recurso de camada, por este causa não é possível aplicar máscara sobre a Linha Guia.

Como Fazer então?

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 10/12

 

Selecione todos os Frames da Camada Bola e Converta em Quadros-Chaves.

 

Todo o movimento da Guia será dividido em quadros.

Feito isso a camada Guia pode ser deletada.

Crie no lugar dela uma nova camada e a chame de MÁSCARA. No caso deste cenário, crie um

retângulo que cubra toda a cena e delete apena a área de base do buraco do cenário para

baixo, ou seja a área que eu não quero que a BOLA seja visualizada na cena.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 11/12

 

 

Clique com botão direito sobre a camada MÁSCARA e selecione o recurso Máscara (Mask), e

faça da camada BOLA filha da camada MÁSCARA, lembre-se ambas deve estar travadas paraque a mascara tenha efeito no palco.

5/9/2018 Tutorial Flash - Bola Pula No Buraco - slidepdf.com

http://slidepdf.com/reader/full/tutorial-flash-bola-pula-no-buraco 12/12

 

 

Teste sua animação

Sua animação está pronta.

Incremente a sua animação simulando sombra no chão com recursos textura com

transparência e dando efeito de peso a BOLA, criando um efeito de achatamento (strech) no

quadro que tocar o chão e estiramento (squach) quando pula.

Visualize clicando simultaneamente CTRL+ENTER.

Valeu gente, muito sucesso em suas experimentações!!!