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

"É 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
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.Mary Alvarenga
 
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
 
Literatura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.pptLiteratura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.pptMaiteFerreira4
 
PROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdf
PROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdfPROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdf
PROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdfMarianaMoraesMathias
 
JOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptx
JOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptxJOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptx
JOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptxTainTorres4
 
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
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfCamillaBrito19
 
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...IsabelPereira2010
 
Construção (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãConstrução (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãIlda Bicacro
 
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
 
A QUATRO MÃOS - MARILDA CASTANHA . pdf
A QUATRO MÃOS  -  MARILDA CASTANHA . pdfA QUATRO MÃOS  -  MARILDA CASTANHA . pdf
A QUATRO MÃOS - MARILDA CASTANHA . pdfAna Lemos
 
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
 
11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...
11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...
11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...licinioBorges
 
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
 
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
 
2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamental
2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamental2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamental
2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamentalAntônia marta Silvestre da Silva
 
CRUZADINHA - Leitura e escrita dos números
CRUZADINHA   -   Leitura e escrita dos números CRUZADINHA   -   Leitura e escrita dos números
CRUZADINHA - Leitura e escrita dos números Mary Alvarenga
 
Slides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptx
Slides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptxSlides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptx
Slides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptxLuizHenriquedeAlmeid6
 

Último (20)

"É 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...
 
Atividade - Letra da música Esperando na Janela.
Atividade -  Letra da música Esperando na Janela.Atividade -  Letra da música Esperando na Janela.
Atividade - Letra da música Esperando na Janela.
 
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
 
Literatura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.pptLiteratura Brasileira - escolas literárias.ppt
Literatura Brasileira - escolas literárias.ppt
 
PROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdf
PROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdfPROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdf
PROGRAMA DE AÇÃO 2024 - MARIANA DA SILVA MORAES.pdf
 
JOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptx
JOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptxJOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptx
JOGO FATO OU FAKE - ATIVIDADE LUDICA(1).pptx
 
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?
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdf
 
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
 
Bullying, sai pra lá
Bullying,  sai pra láBullying,  sai pra lá
Bullying, sai pra lá
 
Construção (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! SertãConstrução (C)erta - Nós Propomos! Sertã
Construção (C)erta - Nós Propomos! Sertã
 
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
 
A QUATRO MÃOS - MARILDA CASTANHA . pdf
A QUATRO MÃOS  -  MARILDA CASTANHA . pdfA QUATRO MÃOS  -  MARILDA CASTANHA . pdf
A QUATRO MÃOS - MARILDA CASTANHA . pdf
 
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...
 
11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...
11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...
11oC_-_Mural_de_Portugues_4m35.pptxTrabalho do Ensino Profissional turma do 1...
 
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!
 
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
 
2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamental
2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamental2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamental
2° ano_PLANO_DE_CURSO em PDF referente ao 2° ano do Ensino fundamental
 
CRUZADINHA - Leitura e escrita dos números
CRUZADINHA   -   Leitura e escrita dos números CRUZADINHA   -   Leitura e escrita dos números
CRUZADINHA - Leitura e escrita dos números
 
Slides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptx
Slides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptxSlides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptx
Slides Lição 04, Central Gospel, O Tribunal De Cristo, 1Tr24.pptx
 

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.