A Enciclopedia do SEO e Tutoriais Web

flash

Animação do Planeta Terra Girando em Flash: Aprenda a Fazer

Aprenda a fazer uma animação super legal do planeta terra girando no nosso tutorial de Flash. Tutorial básico para quem está aprendendo animações em Flash.

Tutoriais de Flash

Tutorial de Flash: Efeito da Terra Girando

Tutoriais de Flash da SEOpedia: Terra Girando

Nesse tutorial de Flash vamos ensinar a fazer de um modo simples e em poucos passos um efeito do planeta terra girando no espaço.

É um Tutorial de Flash Básico, ideal para quem está começando a montar animações e o resultado fica bem legal, fica profissional.

O primeiro passo deste tutorial de flash é escolher uma foto que represente a terra, uma foto quadrada que tenha os continentes e os mares. Para facilitar o trabalho já separamos um boa foto que tem essas características:

Mapa da Terra, será usado em nossa animação Flash

Como a terra vai ficar dando voltas ao redor de sí mesma, é interessante que enquanto um continente esteja do lado visível da terra, uma cópia dele também esteja rodando do lado oposto para poder dar um efeito de continuidade quando a animação em flash rodar.

Para conseguir esse efeito, o próximo passo do nossso tutorial de flash é duplicar essa imagem, uma após a outra. Copie e cole a imagem usando um programa de edição e deixe da seguinte maneira ( é importante deixar a foto muito bem encaixada para a animação não ficar pulando ! ):

Mapa da Terra duplicado

Agora que o nosso fundo do planeta terra está pronto, é só pegar uma boa foto de fundo do universo:

Foto do Universo para pano de fundo

Pronto ! Já temos todo o material necessário para fazer o nosso tutorial de flash, já podemos entrar na parte da animação em sí.

Planeta Terra Girando: Implementação da Animação em Flash

Crie um novo projeto no flash definindo o tamanho em 470 por 320, o fundo branco e a velocidade em 12 frames por segundo, da seguinte maneira:

Tutorial de Flash: Ajustando tamanho e parâmetros

Continuando nosso tutorial de flash, crie agora 3 layers de 20 frames para o seu projeto, use os nomes Globo, Mapa e Universo para ficar mais fácil entender.

Tuturial de Flash Terra Girando: Ajustando Frames e Layers

Para o layer Universo, cole a foto do universo acima ( esse será o fundo da animação ). No layer Mapa, cole a foto do mapa ( a duplicada ) e por fim no frame do globo use as ferramentas de desenho do Flash para fazer um circulo vermelho de 215×215 pixels. Você vai obter o seguinte resultado:

Tutorial de Flash Terra Girando: Aspecto Geral dos elementos gráficos

O próximo passo agora do nosso tutorial de Flash é programar os layers.

Tutorial de Flash Terra Girando: Programação dos Layers e Finalização

Criando o Movimento

Para criar o efeito de movimento do planeta. Crie um Keyframe no final do layer do mapa ( para criar o Keyframe no Flash, selecione o frame e clique como botão direito e escolha: Insert Keyframe ). Dentro deste Keyframe desloque o meio da imagem do mapa para o final do circulo. Vai ficar da seguinte maneira:

Tutorial de Flash Ajustando as Imagens para o Motion Tween

Voltando ao keyframe criado, crie agora a animação do movimento selecionando o layer com o botão direito do mouse e escolhendo: Create Motion Tween. A programação final dos layers deste tutorial de flash vai ficar da seguinte maneira:

Tutorial de Fireworks: Programação Final dos Layers

Adicionando a Máscara e Finalizando o Efeito

Agora que as fotos já estão prontas e os layers foram programados, vem última etapa do nosso tutorial Flash: adicionar a máscara que vai modelar o planeta de forma redonda. Para adiciona-la basta clicar com o botão direito no layer do Globo e selecionar mask:

Tutorial de Flash: Adicionando a máscara final

Pronto !! Como efeito final você deve obter a seguinte animação:

 
 
Artigos do Tema: flash
 
Comentários
 

André Guímel
No dia 16/11/2009 às 14:54 disse:

Kra vlw …
eu pensei que fosse mais complicado !
fuiiiiii

William Kimura
No dia 16/11/2009 às 18:00 disse:

Olá André

Essa é justamente uma das características do Flash, que a gente quis mostrar neste tutorial de flash: ele não é tão dificil de mexer o quanto parece.

bia
No dia 20/11/2009 às 17:35 disse:

poxa…já to um pouco mais sem medo..kiki..vlw

guinho
No dia 26/01/2010 às 9:23 disse:

kara, muito legaaaaal essa animação…

VALEW..

felipe
No dia 27/01/2010 às 10:23 disse:

Bom Dia,
Eu consigo fazer esse movimento de rotação com uma frase ao invez de uma imagem, sempre continuo?

felipe
No dia 27/01/2010 às 10:27 disse:

Desculpe!
Na verdade consegui fazer o efeito com frase, porem ele não ficou digamos com visao 3d igual o globo oque pode ser o fundo?

felipe
No dia 27/01/2010 às 11:46 disse:

Resolvido!

Criei uma borda na parte superior e inferior da frase!
Assim ficou parecendo o eixo do circulo!
Talvez não seja a forma mais adequada, porem funcionou!

Obrigado

Daniele
No dia 19/03/2010 às 8:10 disse:

Obrigadaaa vc salvou meu dia noa trabalho bjsss Deus abenções vc e a sua inteligencia bjsss

Bio
No dia 12/05/2010 às 18:44 disse:

Genteee please, não to conseguindo fazer a terra girar, fiz tudo direitinho mas no final ela não gira, uma coisa que to achando estranho, é quando clico com o botão direito no final do layer para criar um Keyframe não fica igual na imagem do tuto…, ela fica pro lado direito, to fazendo alguma coisa errada? me ajudem pleaseee

Alex
No dia 16/05/2010 às 12:46 disse:

Legal o efeito! Obrigado.

 
Deixe um Comentário
 

 Nome

 Mail ( Não será publicado )

 Website