O básico de animações para programadores(as) — ou para quem não manja nada

Diego Martins de Pinho
Code Prestige
Published in
4 min readDec 11, 2020

Você tem pouca habilidade artística (assim como eu, rs) ou te falta conhecimento sobre o processo criativo de animações MAS ainda sim você deseja ingressar nesse mundo divertidíssimo? Seja bem-vindo(a) ao clube! Neste artigo conheceremos o Wick Editor, uma ferramenta poderosa, intuitiva e gratuita de animações.

Versão em Vídeo

Além das instruções que darei abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Inscreva-se no nosso canal!

A Interface do Editor

Fazer animações pode ser um processo bastante trabalhoso, no entanto, o editor que apresentarei faz o possível para tornar essa tarefa o mais fácil e divertida possível.

O Wick Editor é um projeto de código aberto que funciona inteiramente na web. Ou seja, basta ânimo, um computador, uma conexão estável com a internet e um navegador para começar.

O primeiro passo é acessar o editor neste link.

Página inicial do Editor

Se alguma vez você já trabalhou com o antigo Adobe Flash (hoje chamado de Adobe Animate), vai notar vários elementos parecidos na interface. Na parte superior temos as opções clássicas de softwares de edição: seleção, pincel, lápis, borracha, quadrado, elipse, linha, texto… até as cores de preenchimento e contorno.

No canto direito desta mesma barra temos outros elementos importantes: alinhamento, lixeira, copiar, voltar e avançar.

Logo abaixo, temos o canvas, também chamada de área de desenho. Aqui não há muito segredo, é o espaço onde todo o trabalho deverá ser feito usando as ferramenta de desenho já citadas.

A Linha do Tempo

Toda vez que pensamos em uma animação, precisamos lembrar de que ela nada mais é do que uma ilusão, ou seja, são inúmeros desenhos passados rapidamente que são dão a impressão de que algo está se mexendo. Para cada um destes desenhos damos o nome de frame.

Você já deve ter ouvido falar neste termo, certo? Seja em jogos, na sua câmera ou celular… a quantidade de frames que são passados por segundo ditam o ritmo em que essa animação (ou vídeo) será transmitido. Por padrão, uma animação com transições suaves trabalha entre 24 a 30 frames por segundo (se lembra que eu disse que o processo era trabalhoso?), mas para quem está começando, dá para fazer muita coisa legal com uma taxa bem menor.

Eu, por exemplo, costumo trabalhar na faixa dos 12 frames por segundo.

E como podemos saber quantos frames nós temos? Para isso se faz necessário usar a linha do tempo que fica logo abaixo do canvas. Essa linha do tempo é dividida em frames e, toda vez que você faz um desenho no canvas, a bolinha fica preenchida dentro da linha do tempo.

Frames e a Linha do Tempo

Note que no desenho acima temos dois desenhos, no entanto, em condições diferentes. O primeiro desenho ocupa o espaço de 4 frames, enquanto o segundo ocupa o espaço de 1 frame. Conseguimos fazer isso apenas arrastando no frame em que estamos trabalhando.

Além disso, notou que um dos desenhos está transparente? Esse recurso é que o chamamos de onion skinning. Este recurso funciona como um papel vegetal digital: é possível ver o desenho anterior para ter uma base para desenhar o passo seguinte.

Essa opção é habilitada na barra de opções que fica no canto inferior direito do canvas.

Salvando e Exportando

Somente com esses conceitos você já é capaz de criar suas primeiras animações. Uma vez que você terminou (ou deseja continuar depois), é necessário acessar o menu superior direito da ferramenta.

Menu superior direito

As duas primeiras opções criam e abre um novo projeto, respectivamente. Já a opção de exportar deve ser acessada quando o seu projeto estiver finalizado. Nesta janela, você terá a opção de gerar um gif, vídeo ou código HTML5 para sua animação.

Exportação do projeto

A opção de salvar fará o download de um arquivo .wick no seu computador. Para toda vez que você salvar o projeto, ele criará um arquivo novo.

Por fim, temos a engrenagem. Nesta janela, poderemos fazer algumas configurações globais sobre a animação, como por exemplo, selecionar a cor de fundo, dimensões do canvas, taxa de frames, atalhos, etc.

Conclusão

O Wick Editor é um editor excelente para iniciantes e que fornece recursos profissionais para todos os gostos. Sua utilização é simples e segue os mesmo princípios de outros software de animações. Seu ponto negativo talvez esteja na questão de não possuir uma opção para salvar na conta, uma vez que o projeto não exige nenhum tipo de login. Mas tirando esse detalhe, a ferramenta é uma ótima opção para entusiastas e saudosistas do bom e velho flash.

Agradecimentos

Curtiu? Então dê uma passada no meu canal no Youtube ou me procure nas redes sociais para trocarmos uma ideia!

--

--

Diego Martins de Pinho
Code Prestige

Professor de tecnologia, desenvolvedor de software e escritor