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!!!