SlideShare uma empresa Scribd logo
1 de 11
TUTORIAL ANIMAÇÃO EM FLASH
- BOLA PULA NO BURACO -
George Alberto Ferreira Cavalcante
081 91547026 - gafcartes@hotmail.com
Oi Gente, estou enviando pra vocês um belo Tutorial que envolve Mascara, Som e Vídeo.
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.
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+Xpara 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.
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.
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 a camada e Pronto.
Você tem uma bola que gira e mantem um foco de luz e sombra.
Gafc Artes - o futuro em suas mãos.
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.
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).
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.
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.
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
demais camadas 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?
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.
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 para que a mascara tenha efeito no palco.
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!!!
Gafc Artes - o futuro em suas mãos.

Mais conteúdo relacionado

Mais procurados

Aula 5, 6 e 7 - Flash CS5 - Linha do Tempo e Camadas
Aula 5, 6 e 7 - Flash CS5 - Linha do Tempo e CamadasAula 5, 6 e 7 - Flash CS5 - Linha do Tempo e Camadas
Aula 5, 6 e 7 - Flash CS5 - Linha do Tempo e CamadasDayse Lúcia de Almeida
 
Photoshop CS6 - Recriando Efeitos de Luz do Sol em Fotografias
Photoshop CS6 - Recriando Efeitos de Luz do Sol em FotografiasPhotoshop CS6 - Recriando Efeitos de Luz do Sol em Fotografias
Photoshop CS6 - Recriando Efeitos de Luz do Sol em FotografiasRuan Silva
 
Photoshop CS6 - Efeito Plastico
Photoshop CS6 - Efeito Plastico Photoshop CS6 - Efeito Plastico
Photoshop CS6 - Efeito Plastico Debora Maciel Nunes
 
Aula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animaçõesAula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Photoshop CS6- Corda brilhante, Efeito de luz no texto.
Photoshop CS6- Corda brilhante, Efeito de luz no texto.Photoshop CS6- Corda brilhante, Efeito de luz no texto.
Photoshop CS6- Corda brilhante, Efeito de luz no texto.Julia Da Silva
 
Photoshop Cs6 - Trabalho fonte the walking dead
Photoshop Cs6 - Trabalho fonte the walking deadPhotoshop Cs6 - Trabalho fonte the walking dead
Photoshop Cs6 - Trabalho fonte the walking deadJoão Vitor Silva
 
Photoshop CS6 Efeito Dupla Exposição
Photoshop CS6 Efeito Dupla ExposiçãoPhotoshop CS6 Efeito Dupla Exposição
Photoshop CS6 Efeito Dupla ExposiçãoJosé Honório Júnior
 
Animação Digital (Aula 6): Princípios para Animação no Maya 2015
Animação Digital (Aula 6): Princípios para Animação no Maya 2015Animação Digital (Aula 6): Princípios para Animação no Maya 2015
Animação Digital (Aula 6): Princípios para Animação no Maya 2015Dra. Camila Hamdan
 
Splatter no photoshop
Splatter no photoshopSplatter no photoshop
Splatter no photoshopRoney Sousa
 
Aula 3 aparência
Aula 3 aparênciaAula 3 aparência
Aula 3 aparênciaScratch_TCC
 
Lais Aparecida Maciel Efeito de fogo GIMP2.8
Lais Aparecida Maciel Efeito de fogo GIMP2.8Lais Aparecida Maciel Efeito de fogo GIMP2.8
Lais Aparecida Maciel Efeito de fogo GIMP2.8Lais Maciel
 
Photoshop - Efeito Glitch - Daniel Tomio
Photoshop - Efeito Glitch - Daniel TomioPhotoshop - Efeito Glitch - Daniel Tomio
Photoshop - Efeito Glitch - Daniel TomioDaniel Tomio
 
Aula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animaçõesAula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Aula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animaçõesAula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 

Mais procurados (20)

Efeito 3 d
Efeito 3 dEfeito 3 d
Efeito 3 d
 
Aula 5, 6 e 7 - Flash CS5 - Linha do Tempo e Camadas
Aula 5, 6 e 7 - Flash CS5 - Linha do Tempo e CamadasAula 5, 6 e 7 - Flash CS5 - Linha do Tempo e Camadas
Aula 5, 6 e 7 - Flash CS5 - Linha do Tempo e Camadas
 
Photoshop CS6 - Recriando Efeitos de Luz do Sol em Fotografias
Photoshop CS6 - Recriando Efeitos de Luz do Sol em FotografiasPhotoshop CS6 - Recriando Efeitos de Luz do Sol em Fotografias
Photoshop CS6 - Recriando Efeitos de Luz do Sol em Fotografias
 
Efeito desintegração
Efeito desintegraçãoEfeito desintegração
Efeito desintegração
 
Photoshop CS6 - Efeito Plastico
Photoshop CS6 - Efeito Plastico Photoshop CS6 - Efeito Plastico
Photoshop CS6 - Efeito Plastico
 
Aula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animaçõesAula 2 Flash - Divirta-se criando animações
Aula 2 Flash - Divirta-se criando animações
 
Aula03 aparencia
Aula03 aparenciaAula03 aparencia
Aula03 aparencia
 
Photoshop CS6- Corda brilhante, Efeito de luz no texto.
Photoshop CS6- Corda brilhante, Efeito de luz no texto.Photoshop CS6- Corda brilhante, Efeito de luz no texto.
Photoshop CS6- Corda brilhante, Efeito de luz no texto.
 
Photoshop Cs6 - Trabalho fonte the walking dead
Photoshop Cs6 - Trabalho fonte the walking deadPhotoshop Cs6 - Trabalho fonte the walking dead
Photoshop Cs6 - Trabalho fonte the walking dead
 
Aula 01
Aula 01Aula 01
Aula 01
 
Photoshop CS6 Efeito Dupla Exposição
Photoshop CS6 Efeito Dupla ExposiçãoPhotoshop CS6 Efeito Dupla Exposição
Photoshop CS6 Efeito Dupla Exposição
 
Animação Digital (Aula 6): Princípios para Animação no Maya 2015
Animação Digital (Aula 6): Princípios para Animação no Maya 2015Animação Digital (Aula 6): Princípios para Animação no Maya 2015
Animação Digital (Aula 6): Princípios para Animação no Maya 2015
 
Splatter no photoshop
Splatter no photoshopSplatter no photoshop
Splatter no photoshop
 
Aula 3 aparência
Aula 3 aparênciaAula 3 aparência
Aula 3 aparência
 
Aula 01
Aula 01Aula 01
Aula 01
 
Lais Aparecida Maciel Efeito de fogo GIMP2.8
Lais Aparecida Maciel Efeito de fogo GIMP2.8Lais Aparecida Maciel Efeito de fogo GIMP2.8
Lais Aparecida Maciel Efeito de fogo GIMP2.8
 
Photoshop - Efeito Glitch - Daniel Tomio
Photoshop - Efeito Glitch - Daniel TomioPhotoshop - Efeito Glitch - Daniel Tomio
Photoshop - Efeito Glitch - Daniel Tomio
 
Aula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animaçõesAula 3 Flash - Divirta-se criando animações
Aula 3 Flash - Divirta-se criando animações
 
Aula06 controle
Aula06 controleAula06 controle
Aula06 controle
 
Aula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animaçõesAula 7 Flash - Divirta-se criando animações
Aula 7 Flash - Divirta-se criando animações
 

Destaque

Aula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animaçõesAula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animaçõesProjeto Meu Brasil
 
Mini-curso: Desenvolvimento de Games no Adobe Flash
Mini-curso: Desenvolvimento de Games no Adobe FlashMini-curso: Desenvolvimento de Games no Adobe Flash
Mini-curso: Desenvolvimento de Games no Adobe FlashAryel Tupinambá
 
Flex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flashFlex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flashIgor Costa
 
Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4
Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4
Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4Igor Musardo
 
Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...
Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...
Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...Coradini Lucas, PMP
 
O FLASH ESTÁ MORTO! PROGRAME EM HTML5
O FLASH ESTÁ MORTO! PROGRAME EM HTML5O FLASH ESTÁ MORTO! PROGRAME EM HTML5
O FLASH ESTÁ MORTO! PROGRAME EM HTML5Renato Melo
 
Flash Platform + Zend Amf
Flash Platform + Zend AmfFlash Platform + Zend Amf
Flash Platform + Zend AmfMiguel Pinto
 
O Flash no mundo da Animação
O Flash no mundo da AnimaçãoO Flash no mundo da Animação
O Flash no mundo da AnimaçãoLeonardo Pereira
 
Web 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma FlashWeb 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma FlashAna Laura Gomes
 
Dinastia do Flash no Brasil
Dinastia do Flash no BrasilDinastia do Flash no Brasil
Dinastia do Flash no Brasilppgmkt
 
Active Sessions [0] - html5 vs Flash
Active Sessions [0] -  html5 vs FlashActive Sessions [0] -  html5 vs Flash
Active Sessions [0] - html5 vs FlashActive Media
 
Flash & arduino (via Glue API) - (24 Jun 2010)
Flash & arduino (via Glue API) - (24 Jun 2010)Flash & arduino (via Glue API) - (24 Jun 2010)
Flash & arduino (via Glue API) - (24 Jun 2010)Ricardo Castelhano
 
Criando aplicações em flash para web
Criando aplicações em flash para webCriando aplicações em flash para web
Criando aplicações em flash para webJoão Paulo Radd
 
Fim do Flash - Html5 e Java
Fim do Flash - Html5 e JavaFim do Flash - Html5 e Java
Fim do Flash - Html5 e JavaRenato Melo
 
Flash + WordPress = Amantes
Flash + WordPress = AmantesFlash + WordPress = Amantes
Flash + WordPress = AmantesActive Media
 
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo Projeto Meu Brasil
 
Apresentação de Flash
Apresentação de FlashApresentação de Flash
Apresentação de FlashCDP_Online
 

Destaque (20)

Aula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animaçõesAula 4 Flash - Divirta-se criando animações
Aula 4 Flash - Divirta-se criando animações
 
Mini-curso: Desenvolvimento de Games no Adobe Flash
Mini-curso: Desenvolvimento de Games no Adobe FlashMini-curso: Desenvolvimento de Games no Adobe Flash
Mini-curso: Desenvolvimento de Games no Adobe Flash
 
Flex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flashFlex 4 para desenvolvedores flash
Flex 4 para desenvolvedores flash
 
Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4
Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4
Desenvolvimento de Rich Internet Application com Flex 4 e Flash Builder 4
 
Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...
Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...
Interfaces pra materiais didáticos digitais: Um estudo de caso das ferramenta...
 
O FLASH ESTÁ MORTO! PROGRAME EM HTML5
O FLASH ESTÁ MORTO! PROGRAME EM HTML5O FLASH ESTÁ MORTO! PROGRAME EM HTML5
O FLASH ESTÁ MORTO! PROGRAME EM HTML5
 
Flash Platform + Zend Amf
Flash Platform + Zend AmfFlash Platform + Zend Amf
Flash Platform + Zend Amf
 
O Flash no mundo da Animação
O Flash no mundo da AnimaçãoO Flash no mundo da Animação
O Flash no mundo da Animação
 
Web 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma FlashWeb 2.0, web 3.0 e Plataforma Flash
Web 2.0, web 3.0 e Plataforma Flash
 
Dinastia do Flash no Brasil
Dinastia do Flash no BrasilDinastia do Flash no Brasil
Dinastia do Flash no Brasil
 
Active Sessions [0] - html5 vs Flash
Active Sessions [0] -  html5 vs FlashActive Sessions [0] -  html5 vs Flash
Active Sessions [0] - html5 vs Flash
 
Flash & arduino (via Glue API) - (24 Jun 2010)
Flash & arduino (via Glue API) - (24 Jun 2010)Flash & arduino (via Glue API) - (24 Jun 2010)
Flash & arduino (via Glue API) - (24 Jun 2010)
 
Criando aplicações em flash para web
Criando aplicações em flash para webCriando aplicações em flash para web
Criando aplicações em flash para web
 
Fim do Flash - Html5 e Java
Fim do Flash - Html5 e JavaFim do Flash - Html5 e Java
Fim do Flash - Html5 e Java
 
Html
HtmlHtml
Html
 
Flash + WordPress = Amantes
Flash + WordPress = AmantesFlash + WordPress = Amantes
Flash + WordPress = Amantes
 
Lingua hebraica 04
Lingua hebraica 04Lingua hebraica 04
Lingua hebraica 04
 
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
Aula 4 - Curso Grátis Online de Email - Projeto Educa São Paulo
 
Planejamento do trabalho de conclusão de curso
Planejamento do trabalho de conclusão de cursoPlanejamento do trabalho de conclusão de curso
Planejamento do trabalho de conclusão de curso
 
Apresentação de Flash
Apresentação de FlashApresentação de Flash
Apresentação de Flash
 

Semelhante a Tutorial animação em flash - BOLA NO BURACO

05 camadas e fotogramas em flash - Flash 8
05 camadas e fotogramas em flash - Flash 805 camadas e fotogramas em flash - Flash 8
05 camadas e fotogramas em flash - Flash 8Reuel Lopes
 
Animação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squashAnimação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squashDra. Camila Hamdan
 
Photoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADOPhotoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADOmylena willrich
 
Photoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADOPhotoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADOmylena willrich
 
Apostila de Construct - Welington Carvalho
Apostila de Construct - Welington CarvalhoApostila de Construct - Welington Carvalho
Apostila de Construct - Welington CarvalhoWelington Carvalho
 
Tutorial proshow producer 3
Tutorial proshow producer 3Tutorial proshow producer 3
Tutorial proshow producer 3ramproducoes
 
Como adicionar asas a uma foto com Adobe Photoshop CS6
Como adicionar asas a uma foto com Adobe Photoshop CS6Como adicionar asas a uma foto com Adobe Photoshop CS6
Como adicionar asas a uma foto com Adobe Photoshop CS6VictorBigliardi
 
Apostila O Mundo Mágico do Photoshop
Apostila O Mundo Mágico do PhotoshopApostila O Mundo Mágico do Photoshop
Apostila O Mundo Mágico do PhotoshopWelington Carvalho
 
Sem TíTulo 1
Sem TíTulo 1Sem TíTulo 1
Sem TíTulo 1Edilson
 
GIMP 2.8 - Efeito foto rasgada
GIMP 2.8 - Efeito foto rasgadaGIMP 2.8 - Efeito foto rasgada
GIMP 2.8 - Efeito foto rasgadaLissandraFischer
 
Tic-excel-03
Tic-excel-03Tic-excel-03
Tic-excel-03diogoa21
 
Modelagem e animação com blender
Modelagem e animação com blender Modelagem e animação com blender
Modelagem e animação com blender Nayron Fernandes
 

Semelhante a Tutorial animação em flash - BOLA NO BURACO (20)

05 camadas e fotogramas em flash - Flash 8
05 camadas e fotogramas em flash - Flash 805 camadas e fotogramas em flash - Flash 8
05 camadas e fotogramas em flash - Flash 8
 
Animação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squashAnimação Digital (Aula 7): Animação de esfera stretch/squash
Animação Digital (Aula 7): Animação de esfera stretch/squash
 
Photoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADOPhotoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADO
 
Photoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADOPhotoshop CS6 GIF ANIMADO
Photoshop CS6 GIF ANIMADO
 
PhotoShop
PhotoShopPhotoShop
PhotoShop
 
Ldits apresentação animada
Ldits apresentação animadaLdits apresentação animada
Ldits apresentação animada
 
Apostila de Construct - Welington Carvalho
Apostila de Construct - Welington CarvalhoApostila de Construct - Welington Carvalho
Apostila de Construct - Welington Carvalho
 
Photoshop efeitosinteressantes
Photoshop efeitosinteressantesPhotoshop efeitosinteressantes
Photoshop efeitosinteressantes
 
Photoshop efeitosinteressantes
Photoshop efeitosinteressantesPhotoshop efeitosinteressantes
Photoshop efeitosinteressantes
 
Photoshop efeitosinteressantes
Photoshop efeitosinteressantesPhotoshop efeitosinteressantes
Photoshop efeitosinteressantes
 
Tutorialproshowproducer3
Tutorialproshowproducer3Tutorialproshowproducer3
Tutorialproshowproducer3
 
Tutorial proshow producer 3
Tutorial proshow producer 3Tutorial proshow producer 3
Tutorial proshow producer 3
 
Como adicionar asas a uma foto com Adobe Photoshop CS6
Como adicionar asas a uma foto com Adobe Photoshop CS6Como adicionar asas a uma foto com Adobe Photoshop CS6
Como adicionar asas a uma foto com Adobe Photoshop CS6
 
Oficina
OficinaOficina
Oficina
 
Apostila O Mundo Mágico do Photoshop
Apostila O Mundo Mágico do PhotoshopApostila O Mundo Mágico do Photoshop
Apostila O Mundo Mágico do Photoshop
 
Mask
MaskMask
Mask
 
Sem TíTulo 1
Sem TíTulo 1Sem TíTulo 1
Sem TíTulo 1
 
GIMP 2.8 - Efeito foto rasgada
GIMP 2.8 - Efeito foto rasgadaGIMP 2.8 - Efeito foto rasgada
GIMP 2.8 - Efeito foto rasgada
 
Tic-excel-03
Tic-excel-03Tic-excel-03
Tic-excel-03
 
Modelagem e animação com blender
Modelagem e animação com blender Modelagem e animação com blender
Modelagem e animação com blender
 

Último

Simulado 2 Etapa - 2024 Proximo Passo.pdf
Simulado 2 Etapa  - 2024 Proximo Passo.pdfSimulado 2 Etapa  - 2024 Proximo Passo.pdf
Simulado 2 Etapa - 2024 Proximo Passo.pdfEditoraEnovus
 
Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.keislayyovera123
 
Programa de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades MotorasPrograma de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades MotorasCassio Meira Jr.
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxleandropereira983288
 
activIDADES CUENTO lobo esta CUENTO CUARTO GRADO
activIDADES CUENTO  lobo esta  CUENTO CUARTO GRADOactivIDADES CUENTO  lobo esta  CUENTO CUARTO GRADO
activIDADES CUENTO lobo esta CUENTO CUARTO GRADOcarolinacespedes23
 
Gerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalGerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalJacqueline Cerqueira
 
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniModelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniCassio Meira Jr.
 
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptxSlides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptxLuizHenriquedeAlmeid6
 
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaJúlio Sandes
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresLilianPiola
 
Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...
Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...
Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...ArianeLima50
 
A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.silves15
 
trabalho wanda rocha ditadura
trabalho wanda rocha ditaduratrabalho wanda rocha ditadura
trabalho wanda rocha ditaduraAdryan Luiz
 
William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfAdrianaCunha84
 
Bullying - Texto e cruzadinha
Bullying        -     Texto e cruzadinhaBullying        -     Texto e cruzadinha
Bullying - Texto e cruzadinhaMary Alvarenga
 
Recurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasRecurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasCasa Ciências
 
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumGÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumAugusto Costa
 

Último (20)

Simulado 2 Etapa - 2024 Proximo Passo.pdf
Simulado 2 Etapa  - 2024 Proximo Passo.pdfSimulado 2 Etapa  - 2024 Proximo Passo.pdf
Simulado 2 Etapa - 2024 Proximo Passo.pdf
 
Em tempo de Quaresma .
Em tempo de Quaresma                            .Em tempo de Quaresma                            .
Em tempo de Quaresma .
 
Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.Época Realista y la obra de Madame Bovary.
Época Realista y la obra de Madame Bovary.
 
Programa de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades MotorasPrograma de Intervenção com Habilidades Motoras
Programa de Intervenção com Habilidades Motoras
 
Pedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptxPedologia- Geografia - Geologia - aula_01.pptx
Pedologia- Geografia - Geologia - aula_01.pptx
 
activIDADES CUENTO lobo esta CUENTO CUARTO GRADO
activIDADES CUENTO  lobo esta  CUENTO CUARTO GRADOactivIDADES CUENTO  lobo esta  CUENTO CUARTO GRADO
activIDADES CUENTO lobo esta CUENTO CUARTO GRADO
 
Gerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem OrganizacionalGerenciando a Aprendizagem Organizacional
Gerenciando a Aprendizagem Organizacional
 
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e TaniModelos de Desenvolvimento Motor - Gallahue, Newell e Tani
Modelos de Desenvolvimento Motor - Gallahue, Newell e Tani
 
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptxSlides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
Slides Lição 03, Central Gospel, O Arrebatamento, 1Tr24.pptx
 
Orientação Técnico-Pedagógica EMBcae Nº 001, de 16 de abril de 2024
Orientação Técnico-Pedagógica EMBcae Nº 001, de 16 de abril de 2024Orientação Técnico-Pedagógica EMBcae Nº 001, de 16 de abril de 2024
Orientação Técnico-Pedagógica EMBcae Nº 001, de 16 de abril de 2024
 
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma AntigaANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
ANTIGUIDADE CLÁSSICA - Grécia e Roma Antiga
 
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolaresALMANANHE DE BRINCADEIRAS - 500 atividades escolares
ALMANANHE DE BRINCADEIRAS - 500 atividades escolares
 
CINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULACINEMATICA DE LOS MATERIALES Y PARTICULA
CINEMATICA DE LOS MATERIALES Y PARTICULA
 
Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...
Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...
Cultura e Literatura indígenas: uma análise do poema “O silêncio”, de Kent Ne...
 
A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.A horta do Senhor Lobo que protege a sua horta.
A horta do Senhor Lobo que protege a sua horta.
 
trabalho wanda rocha ditadura
trabalho wanda rocha ditaduratrabalho wanda rocha ditadura
trabalho wanda rocha ditadura
 
William J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdfWilliam J. Bennett - O livro das virtudes para Crianças.pdf
William J. Bennett - O livro das virtudes para Crianças.pdf
 
Bullying - Texto e cruzadinha
Bullying        -     Texto e cruzadinhaBullying        -     Texto e cruzadinha
Bullying - Texto e cruzadinha
 
Recurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de PartículasRecurso Casa das Ciências: Sistemas de Partículas
Recurso Casa das Ciências: Sistemas de Partículas
 
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - CartumGÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
GÊNERO TEXTUAL - TIRINHAS - Charges - Cartum
 

Tutorial animação em flash - BOLA NO BURACO

  • 1. TUTORIAL ANIMAÇÃO EM FLASH - BOLA PULA NO BURACO - George Alberto Ferreira Cavalcante 081 91547026 - gafcartes@hotmail.com Oi Gente, estou enviando pra vocês um belo Tutorial que envolve Mascara, Som e Vídeo. 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.
  • 2. Vamos criar um símbolo, com o novo documento aberto vá para o menu INSERT ->NEW SIMBOL ou Clique CTRL+F8. 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+Xpara recortar o contorno, crie uma nova camada e denomine-a de CONTORNO, nesta nova Camada cole no mesmo lugar que
  • 3. recortou da camada CONTEÚDO usando CTRL+SHIFT+V. 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.
  • 4. 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.
  • 5. 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 a camada e Pronto. Você tem uma bola que gira e mantem um foco de luz e sombra. Gafc Artes - o futuro em suas mãos. 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.
  • 6. 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).
  • 7. 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.
  • 8. 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.
  • 9. 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 demais camadas 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? Selecione todos os Frames da Camada Bola e Converta em Quadros-Chaves.
  • 10. 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. 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 para que a mascara tenha efeito no palco.
  • 11. 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!!! Gafc Artes - o futuro em suas mãos.