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

Dicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim RangelDicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim RangelGilber Rubim Rangel
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfHELENO FAVACHO
 
Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?AnabelaGuerreiro7
 
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfplanejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfmaurocesarpaesalmeid
 
Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Ilda Bicacro
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...azulassessoria9
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdfLeloIurk1
 
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdfReta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdfWagnerCamposCEA
 
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESCOMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESEduardaReis50
 
Ficha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdfFicha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdfFtimaMoreira35
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...azulassessoria9
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxLuizHenriquedeAlmeid6
 
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de..."É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...Rosalina Simão Nunes
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...azulassessoria9
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...azulassessoria9
 
ATIVIDADE PARA ENTENDER -Pizzaria dos Descritores
ATIVIDADE PARA ENTENDER -Pizzaria dos DescritoresATIVIDADE PARA ENTENDER -Pizzaria dos Descritores
ATIVIDADE PARA ENTENDER -Pizzaria dos DescritoresAnaCarinaKucharski1
 
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfPRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfprofesfrancleite
 
ENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdf
ENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdfENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdf
ENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdfLeloIurk1
 

Último (20)

Dicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim RangelDicionário de Genealogia, autor Gilber Rubim Rangel
Dicionário de Genealogia, autor Gilber Rubim Rangel
 
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdfPROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
PROJETO DE EXTENSÃO - EDUCAÇÃO FÍSICA BACHARELADO.pdf
 
Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?
 
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdfplanejamento_estrategico_-_gestao_2021-2024_16015654.pdf
planejamento_estrategico_-_gestao_2021-2024_16015654.pdf
 
Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!
 
Aula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIXAula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIX
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
 
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
5 bloco 7 ano - Ensino Relogioso- Lideres Religiosos _ Passei Direto.pdf
 
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdfReta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
Reta Final - CNU - Gestão Governamental - Prof. Stefan Fantini.pdf
 
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕESCOMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
COMPETÊNCIA 4 NO ENEM: O TEXTO E SUAS AMARRACÕES
 
Ficha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdfFicha de trabalho com palavras- simples e complexas.pdf
Ficha de trabalho com palavras- simples e complexas.pdf
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptxSlides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
Slides Lição 05, Central Gospel, A Grande Tribulação, 1Tr24.pptx
 
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de..."É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
"É melhor praticar para a nota" - Como avaliar comportamentos em contextos de...
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: COMUNICAÇÃO ASSERTIVA E INTERPESS...
 
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
PROVA - ESTUDO CONTEMPORÂNEO E TRANSVERSAL: LEITURA DE IMAGENS, GRÁFICOS E MA...
 
ATIVIDADE PARA ENTENDER -Pizzaria dos Descritores
ATIVIDADE PARA ENTENDER -Pizzaria dos DescritoresATIVIDADE PARA ENTENDER -Pizzaria dos Descritores
ATIVIDADE PARA ENTENDER -Pizzaria dos Descritores
 
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfPRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
 
Bullying, sai pra lá
Bullying,  sai pra láBullying,  sai pra lá
Bullying, sai pra lá
 
ENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdf
ENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdfENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdf
ENSINO RELIGIOSO 7º ANO INOVE NA ESCOLA.pdf
 

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.