iwtraining

Criando uma animação simples com Adobe Edge Animate Edge Animate

Criando uma animação simples com Adobe Edge Animate

Trabalhar com animações no Adobe Edge Animate CC é muito fácil.

Painel Timeline

O painel Timeline é responsável por permitir o controle da aparência dos elementos com o passar do tempo. Entenda aparência como sendo as propriedades (características) de cada um. As propriedades ficam internamente, para que apareçam, basta clicar no triângulo de cada elemento.

Além disso, você pode bloquear um elemento (cadeado) para que ele não sofra alterações, bem como pode ocultar (tirar a visibilidade, olhinho) caso deseje que ele não atrapalhe em algum momento. Estes recursos ajudam no processo criativo.

Como forma de teste, tire a visibilidade do elemento cover. Note que o texto agora aparece. Volte ao normal. Agora bloqueie a camada cover.

EdgeAnimate_08

Animação

De maneira simples, animação é a mudança de uma propriedade ao longo do tempo. Movimento é a mudança de localização ao longo do tempo. Se um objeto começa em uma posição e termina em outra, então você tem um objeto que se move. Seu trabalho, como animador, é dizer onde o objeto está no início e onde ele estará no fim, e o Adobe Edge fará o resto para você.

Um quadro-chave (keyframe) é um conceito comum entre os animadores. Em softwares de edição de vídeo, softwares de animação 3D, e até mesmo em animação tradicional (desenhada à mão), quadros-chave referem-se aos pontos ao longo de uma linha do tempo, em que há uma mudança no objeto ou personagem.

1. Selecione o elemento logo. Isso pode ser feito tanto utilizando o painel Elements com através da Timeline.

EdgeAnimate_09

2. No painel Properties, clique no botão Add Keyframe (lozango) na frente da propriedade X.

EdgeAnimate_10

3. Mova o playhead para 00:00,500, que equivale a meio segundo e solte.

4. Arraste o elemento logo para a direta, de forma que ele se encaixe na parte preta (lado direito). A posição será algo em torno de 200px. Para visualizar sua animação, dentro do Edge, utilize os controles que se encontram no canto superior esquerdo da Timeline.

EdgeAnimate_12

6. Para visualizar no navegador, escolha File > Preview in Browser (Command + Enter).

7. Feche o navegador e volte para o Edge. Vamos agora continuar nossa animação.

8. Arraste o playhead para 00:01,500.

9. Como você deseja que, do quadro-chave anterior até este novo ponto, o texto (logo) fique parado, iremos apenas adicionar um quadro-chave. Clique no botão Add Keyframe, conforme mostrado abaixo.

EdgeAnimate_13

10. Agora mova o playhead para 00:02.

11. Arraste o texto (logo) para a direta, para que ele fique fora do Stage. Utilize a tecla shift para manter o movimento sempre reto.

12. Salve e teste sua composição no navegador.

Está com duvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário