Design Up
Ola Visitante, Seja bem vindo ao DesignUp, esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades.

Vale tambem ressaltar que durante seu acesso caso vc veja algum assunto sem nexo algum não se preucupe, é que alguns de nossos conteudos são exclusivos para membros, entao não perca tempo, cadastre-se e tenha acesso completo ao forum.

Att. Rafael Ribeiro
Equipe DesignUp

Participe do fórum, é rápido e fácil

Design Up
Ola Visitante, Seja bem vindo ao DesignUp, esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades.

Vale tambem ressaltar que durante seu acesso caso vc veja algum assunto sem nexo algum não se preucupe, é que alguns de nossos conteudos são exclusivos para membros, entao não perca tempo, cadastre-se e tenha acesso completo ao forum.

Att. Rafael Ribeiro
Equipe DesignUp
Design Up
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Escolha o tema
  

Procurar
 
 

Resultados por:
 


Rechercher Pesquisa avançada

Últimos assuntos
» Windows 8 + Ativador 2013 – Torrent
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptySex Out 11, 2013 11:50 am por Rafael Ribeiro

» Melhor Windows XP para pc mais antigos… Alto desempenho da maquina com este windows.
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptySex Out 11, 2013 10:55 am por Rafael Ribeiro

» DONWLOAD DE FONTES TRANSPARENTES.
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptyDom Set 29, 2013 2:07 pm por Keant

» DONWLOAD DE FONTES DOURADAS.
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptyQua Jul 31, 2013 3:01 pm por Carlos Alberto dos Santos

» Marinha abre inscrições para concurso de admissão ao Colégio Naval, em Angra dos Reis - RJ
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptySex Jul 12, 2013 12:12 pm por Rafael Ribeiro

» Escrevendo arquivo texto com a função StreamWriter
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptySeg Nov 12, 2012 8:25 pm por Dexter

» Lendo arquivo texto com a função StreamReader
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptySeg Nov 12, 2012 8:21 pm por Dexter

» Foto config
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptySeg Nov 12, 2012 8:15 pm por Dexter

» Como localizar um ip
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptyQua Set 12, 2012 10:02 am por Dexter

» Jogos Pra Samsun Gt-M2510
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. EmptySeg Jun 18, 2012 8:21 am por San

Navegação
 Portal
 Índice
 Membros
 Perfil
 FAQ
 Buscar
Top dos mais postadores
Antunes Marcelo™ (2685)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
Rafael Ribeiro (1442)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
bru5no (1407)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
San (978)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
abandonei rs' (213)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
Banned+ (143)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
michellgomes (138)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
Micheel (132)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
Kotoquinho (125)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 
Dexter (87)
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_lcap1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Voting_bar1[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Vote_rcap 

Navegação
 Portal
 Índice
 Membros
 Perfil
 FAQ
 Buscar
Parceiros
Fórum grátis


iZiTech
Contador de Visitas
contador free
Facebook

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:..

Ir para baixo

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Empty [TUTO] ..: Animação quadro a quadro - 1 a. Parte:..

Mensagem por Antunes Marcelo™ Qui Ago 05, 2010 12:46 pm

::Objetivo::

Mostrar uma técnica para criar animação construindo cada um dos quadros (frames) individualmente.

::Visão antecipada::

A técnica mostrada neste tutorial resulta em uma gif animada disponível nesta VISÃO ANTECIPADA

::Os objetos para aplicação do efeito::

Conforme você acabou de ver na visão antecipada, usei duas imagens. Uma de um braço que se movimenta na vertical e outra de uma cabeça que se deforma sobre a ação do movimento do braço.

A finalidade deste tutorial é a de mostrar a técnica de animação frame a frame, assim você não precisa ficar limitado ao movimento de "esmagar" mostrado na gif que usei.

Entendendo a técnica e com um pouco de imaginação você poderá obter efeitos completamente diferentes deste e certamente muito mais criativos e interessantes.

E, se você pretende treinar depois de entender este tutorial, sugiro tentar o seguinte.
Criar uma animação de um quadrado que vai aumentando sua dimensão e mudando de cor.


(Para iniciantes: se você aprendeu aqui e conseguiu criar uma animação simples, mande para mim por e-mail que terei prazer em publicar no final deste tutorial as primeiras cinco GIF que chegarem, com o devido crédito. Mas, mesmo que já tenham sido publicadas as primeiras cinco, mande para eu ver.)

Observe as dimensões dos dois objetos usados:

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Argh1

::Preparando as imagens::

O braço não sofrerá deformação durante a animação e então será usada a imagem exatamente como a mostrado na figura anterior em todos os frames.

A cabeça irá sendo deformada ao longo da animação.
Vamos estabelecer como será o achatamento ao longo dos frames.

Observe que se a cada frame achatarmos a cabeça em 10 pixels teremos as alturas 90, 80, 70, 60, 50, 40, 30, 20, 10, 3 pixels, resultando 10 frames. Para o último frame adotamos 7 px de achatamento.

E, na largura deveremos expandir de 95 pixels até 120 pixel (largura total dos frames).
O cálculo é assim:
120px - 95px = 25px. Então teremos que expandir 25px em 10 frames.
E, teremos as seguintes larguras: 95,98,101,104,107,110,113,116,119,120 pixels. Para o último frame adotamos 1 px de expansão.

Assim, as dimensões da cabeça para os 10 frames serão:

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Argh2


frame 1 - 95 x 90
frame 2 - 98 x 80
frame 3 - 101 x 70
frame 4 - 104 x 60
frame 5 - 107 x 50
frame 6 - 110 x 40
frame 7 - 113 x 30
frame 8 - 116 x 20
frame 9 - 119 x 10
frame 10 - 120 x 3

::Criando os 10 frames da animação::

Construa a cabeça inicial não deformada com as dimensões reais (no nosso tutorial
95 x 90 px), selecione e tecle Ctrl + C para copiá-la;

Abra um novo documento. Ajuste as dimensões de canvas para 120 x 135 (o tamanho dos frames) e na cor #999999 e tecle Ctrl + V para colar a cabeça no palco;.

Movimente a cabeça com as setas do teclado até colocá-la centrada e na parte inferior do palco como mostrado no item acima "Os objetos para aplicação do efeito" a figura à direita;

Tecle CTRL + Shift + S ou menu File => Save as e salve como base.png ;

Tecle CTRL + Shift + R ou menu File => Export e salve como frame1.gif ;

Agoras temos dois arquivos salvos. O arquivo base.png que usaremos para construir os demais frames e o arquivo frame1.gif que é o primeiro frame;

Abra o arquivo base.png;

Selecione a cabeça e tecle Ctrl + Shift + T ou
menu Modify => Transform => Numeric Transform para abrir a caixa de diálogo mostrada abaixo.
Ajuste os parâmetros da caixa como mostrado na figura.

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Argh3

Tecle OK e irá aparecer a cabeça achatada de 10 px e alongada de 3 px como abaixo.

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Argh4

Com a cabeça selecionada, use a tecla para baixo do teclado até alinhar (assentar) a cabeça com a parte inferior do palco.

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Argh5

Salve esta cabeça como frame2.gif

Abra o arquivo base.png repita os passos mostrados acima até obter uma cabeça com as dimensões de 101 x 70 px e salve como frame3.gif

Repita os passos como acima e construa as imagens até a frame10.gif

Agora você possui 10 cabeças salvas com o nome de frame1.gif até frame10.gif e com as dimensões mostradas na listagem acima no título "Preparando as imagens" e todas elas em um palco de 120 x 135 px

::Inserindo o braço nos frames::

Vamos posicionar o braço sobre a cabeça, e anotar as coordenadas X e Y do braço.

Acompanhe na figura abaixo:

1-) Abra a imagem do braço, selecione a imagem e tecle Ctrl + C para copiá-la;

2-) Abra o frame1.gif, e tecle Ctrl + V, isto irá colar o braço na cabeça;

3-) Imagem 1 abaixo - selecione a imagem do braço e arraste para cima da cabeça como mostrado ;

4-) Imagem 2 abaixo - selecione o braço e anote as coordenadas X e Y que aparecem no canto inferior esquerdo do palco. No nosso caso as coordenadas são X = 27 e Y = - 87.
Notar que a coordenada Y será negativa.

[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Argh6

5-) Tecle CTRL + Shift + R ou menu File => Export e salve como frame1.gif ;

6-) Irá aparecer um aviso alertando que frame1.gif já existe, tecle OK para salvar em cima, substituindo o original pelo atual.

7-) Abra o frame2.gif;

8-) Tecle Ctrl + V e isto deverá colar o braço no frame2. Se não aparecer o braço, proceda como indicado no item 1-) acima;

9-) Com o braço selecionado vamos movimentá-lo usando as coordenadas X e Y.
Altere X = 27 (o mesmo valor do frame1) e Y= -77 (descer 10px que foi o quanto a cabeça encolheu - de 90px para 80px de altura);

10-) Tecle CTRL + Shift + R ou menu File => Export e salve como frame2.gif ;

11-) Abra o frame3.gif e repita os passos acima. Agora os valores das coordenadas serão
X = 27 (este valor não varia para todos os frames) e Y = -67.

12-) Construa os 10 frames seguindo estes passos. Observe que para o último frame o achatamento foi de 7px e não 10px, em consequência atenção para o valor de Y.
Antunes Marcelo™
Antunes Marcelo™
Administrador
Administrador

Gémeos
Mensagens : 2685
Pontos : 4815
Agradecimentos : 244
Data de inscrição : 19/07/2010
Idade : 32
Localização : Caldas Novas - GO

Outras Informações
Ocorrencias:
[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Left_bar_bleue10/10[TUTO] ..: Animação quadro a quadro - 1 a. Parte:.. Empty_bar_bleue  (10/10)

http://www.pwcentral.com.br

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos