Animação em Flash - O que eu gostaria de saber antes de começar

 Introdução

Este blog vai ser uma documentação do que eu aprendi fazendo a minha primeira animação em Flash. Ela não vai mergulhar nos específicos nem no básico (como por exemplo como desenhar no Flash), contudo vou escrever tudo que eu gostaria de saber quando estava começando.
*Um vídeo/canal que me ajudou a entender a lógica de animar no Flash foi este: Making a Flash Toon from Start to Finish!

A animação final pode ser vista no Youtube: Sonic Não Vai Comer Morangos

Ou no Newgrounds: Sonic Won't Eat Strawberries

Roteiro

Eu gosto de começar pelo roteiro de uma animação. Eu estabeleço como serão as cenas, as falas, os ambientes, entre outros aspectos antes de começar a produzir.

A minha animação teve um roteiro simples dividido entre descrição de cenas, falas dos personagens e uma esquematização de quantas cenas eu preciso animar e o que contém em cada uma delas como mostrado a seguir:

Cena 1
Sonic sentado no sofá
Tails entra na cena
pilha de morangos
diálogo
flashback
Tails sai da cena

Cena 2
Amy entra na cena
pilha de morangos
diálogo
Amy sai da cena

Cena 3
Eggman entra na cena
pilha de morangos
diálogo
Eggman sai da cena

Sonic Says
Sem agrotóxicos!

Isso ajuda a ter uma visão geral do tamanho do projeto.

Storyboard

Com o programa aberto eu comecei a fazer rascunhos das poses mais importantes na animação e na ordem em que elas aparecem com uma cor de traço mais clara que as linhas finais assim:

Rascunho com anotação de tamanho do Brush e zoom.

*Nota: Se você utilizar zoom, o tamanho do traço da ferramenta "brush" será relativo à quantidade de zoom atual. Então anote o tamanho escolhido e o zoom aplicado para replicar a mesma grossura de linha.

**Se você quiser mudar a proporção da tela ou a cor do fundo, vá na aba Modify> Document> coloque a resolução que quiser trabalhar (isso não influencia na qualidade das linhas em vetor) e para evitar dessincronias com o áudio, escolha um framerate em número fracionário como 24,75 fps, que foi o ideal para este projeto.

Depois de ter os rascunhos prontos, eu preciso ter uma noção de quanto tempo eles vão aparecer na tela. É aí que entra a dublagem, que vai dar o tempo necessário para os personagens falarem.

Dublagem

Este não é um guia focado em dublagem, então eu apenas vou descrever como eu dublei para este projeto.

Eu utilizei um microfone gravando em alta qualidade e um cobertor. Eu gravei as vozes debaixo do cobertor dentro do meu quarto com a porta e a janela fechada durante a manhã para evitar qualquer ruído externo ou eco.

Eu sabia que para esta animação eu precisaria expressar um espectro de vozes muito amplo indo do tom grave e pigarrento do Eggman, a voz lesada do Sonic, uma voz com um toque mais infantil e áspero do Tails até a voz aguda e espontânea da Amy. Então era crucial que cada personagem soasse diferente, ainda mais com apenas eu dublando.

Curiosidade: Eu dublei maior parte das frases do Eggman enquanto estava resfriado aproveitando o catarro na garganta para soar como o Eggman de Mike Pollock e quando eu precisei mudar uma fala do Eggman, mas não estava mais doente, eu optei por uma direção parecida com a do Eggman de Deem Bristow.

O Sonic foi dublado primeiro de manhã para dar um pouco de autenticidade na sua voz desanimada, mas ainda pensando na voz do Sonic de Jason Griffith.

Tails foi dublado depois dele, pois a minha voz já estava mais apta para fazer a sua voz. A direção de voz dele não foi inspirada em nenhum dublador em específico e como dito antes, levei em consideração o alcance vocal de cada personagem para deixar cada voz diferente.

Já a Amy foi a mais difícil de dublar por causa da sua voz ser bem alta, então durante a sessão eu estava quase gritando para produzir essa voz. Eu poderia ter feito melhor, mas eu quis continuar para outras etapas.

Terminando a gravação, selecione os seus takes favoritos e trate o áudio no seu programa de preferência garantindo que ele esteja audível e sem ruído.

Pelo o que eu sei, o Flash aceita apenas arquivos de áudio .wav com um detalhe: você precisa exportar com a mesma taxa de amostragem do seu projeto, geralmente exportar em 16-bit a 44.100 Hz é o ideal.

Crie uma camada para o áudio no projeto e arraste o áudio primeiro para uma pasta para áudios e depois para o viewport. Controle quando um áudio começa e o outro termina utilizando keyframes na linha do tempo.

**Importante**: Na aba "Properties" mude o tipo de "Sync" de "Event" para "Stream" para fazer o áudio parar de tocar quando você pausar.

Desenhos e Símbolos

Partindo para os desenhos finais, crie um símbolo gráfico e nomeie de acordo com o personagem e que parte do corpo você está desenhando.

O ideal é recortar o desenho do rascunho para dentro do símbolo e desenhar em camadas separadas partes diferentes do corpo.

*Dica: Use a funcionalidade de trancar camadas que você não está editando agora. Isso evita que você desenhe na camada errada.

Se você sabe que determinada parte do personagem não vai se mexer nem ser reutilizada várias vezes pela animação, mantenha como desenho.

Caso a parte que você está desenhando irá de mexer ou você irá copiar e colar o mesmo desenho várias vezes e precisa editar todos de uma vez, crie um símbolo com o clique direito sobre desenho selecionado e clique duas vezes no símbolo para editar ele.

Usando essa lógica, no "Main Stage" temos um símbolo com o corpo inteiro de um personagem. Dentro deste símbolo temos outros símbolos que compõem seus membros. Dentro do símbolo da cabeça do personagem eu posso animar o seu Lip Sync (com a ajuda de uma camada de áudio**) utilizando símbolos para as bocas, as quais podem ter todas as suas instâncias editadas alterando o símbolo uma vez.

**Áudios dentro de símbolos gráficos não tocam no "Main Stage".

Na "Library", crie pastas para organizar cada elemento da sua animação de acordo com a sua relação entre si, então por exemplo um personagem tem símbolos para diferentes membros e partes que se movem em uma mesma pasta. Isso ajuda na agilidade de produção do projeto.

Estrutura de pastas dentro da Library.

Timeline e Animação

O tipo de animação utilizada neste projeto utiliza juntas para fazer desenhos rotacionarem a partir de um ponto de articulação*.

*O ponto de articulação pode ser editado para cada símbolo. Isso será levado em conta na rotação.

Dentro dos símbolos dos personagens escolha uma parte do corpo para acrescentar movimento (essa parte deve ser um símbolo ou Flash tornará ela em um símbolo se você aplicar Motion Tween) e delimite o tempo do movimento demarcando Keyframes com a tecla F6.
Mova o símbolo no segundo Keyframe e nos quadros entre Keyframes adicione um Motion Tween com um clique direito ou usando o painel "Properties" para interpolar ambos.

Tweens entre Keyframes.

Para fazer o movimento parecer mais natural, melhore o timing, a clareza do movimento e utilize o "Ease In" para movimentos que aceleram rápido e "Ease Out" para movimentos que são mais lentos ou que possuem peso, ou crie a sua própria curva de movimento no botão "Edit...".

Como os personagens são animados dentro de seus próprios símbolos, no "Main Stage" deve haver apenas camadas para símbolos, áudio e outros efeitos.
Mas devido à natureza isolacionista dos símbolos, podemos animar movimento para símbolos inteiros sem nos preocuparmos com o que esses símbolos contém, por isso também eles são intercambiáveis.

Se a animação não contém todos os personagens no quadro a todo momento, você tem duas opções: Criar Keyframes para esconder o personagem nas trocas de câmera em que ele não for necessário ou deletar o símbolo do personagem em intervalos de Keyframes onde ele não é necessário.

O símbolo do Tails foi excluído neste intervalo após ser colocado na Timeline.

Existem 2 tipos principais de fazer Lip Sync. Um envolve trocar entre Keyframes de um símbolo e o outro envolve posicionar símbolos dentro de Keyframes.

A minha animação faz uso de ambas as técnicas em personagens diferentes.
O Eggman por exemplo utilizou a primeira opção, onde eu mudo qual Keyframe eu quero na hora de animar.

Esse jeito é ideal quando você não quer usar muitos símbolos e quer ter noção de como Keyframes podem transicionar de um para o outro mais suavemente ou para quando você sabe qual Keyframe possui a expressão que você quer.

O lado negativo é justamente ter que lembrar qual o número do Keyframe que você quer que seja utilizado.

O bigode do Eggman tem 2 Keyframes.

Com o Símbolo do bigode selecionado, selecione "Single Frame" e o número do frame em "First"

Um vídeo que me ajudou com esse tipo de animação foi este: How to Animate Lip Sync in Flash - Basic Tutorial! - YouTube

Já todos os outros personagens na animação usam símbolos distintos para animar o Lip Sync.

O ponto positivo é que é só criar Keyframes e arrastar, abrindo possibilidades para maior expressividade de movimento, que simplesmente não é possível com a opção anterior a não ser que você crie um Keyframe só para isso.

O ponto negativo é que pode ser cansativo ter que alinhar a boca que veio antes com a boca do próximo frame e manter a posição da boca consistente sem copiar e colar frames.

Tails utilizando um símbolo para a boca representando o fonema A.

Loader e Vcam

Estamos nos últimos passos para concluir a animação, e para dar um toque de profissionalidade, principalmente no Newgrounds, é essencial o uso de um Loader* para garantir que tudo seja carregado antes de ser exibido e de uma Virtual Camera, ou Vcam**, que serve para movimentar a câmera sem grandes dificuldades.

*Os loaders do newgrounds estao disponiveis em: Newgrounds Wiki - Flash Loaders

**Este vídeo me ajudou a criar uma Vcam com Action Script 2: Flash MX Tutorial Making A Virtual Camera

No caso do Loader, copie o primeiro quadro do projeto .fla do Loader no primeiro quadro do seu projeto.
Dica: selecione uma coluna da timeline inteira de uma vez clicando nas linhas com medidas de tempo no topo da timeline e acrescente um frame vazio pressionando a tecla F5 uma vez.

Se você quiser criar um loader customizado, você pode copiar o código contido dentro do painel "Actions" do loader do Newgrounds e colar nas Actions do seu Movie Clip para conseguir o mesmo  efeito.

Exportando a versão final

A este ponto você terminou toda a animação, agora só resta remover o que não é mais necessário para lançar.

Exclua a camada de rascunho e os símbolos "Tweens" dos rascunhos caso você tenha animado o Storyboard. Se preferir salve a versão sem a camada de rascunho em um novo arquivo com o sufixo "final".

Vá para File>Publish Settings>Formats selecione apenas Flash>Flash>Audio Stream>Set...> Bit rate: 160 kbps Quality: Best.

Pressione Ok e Ok. Agora no Viewport pressione as teclas Control e Enter para compilar o .swf, é este arquivo que será o produto final caso você publicar a animação em um site com Flash como o Newgrounds.

Mas para o Youtube é necessário transformar esse vídeo em vetor para um vídeo rasterizado, ou seja, feito de pixels.
Para isso, a comunidade do Newgrounds desenvolveu o Swivel, um programa gratuito feito especificamente para tornar arquivos .swf em .mp4.
Ele funciona em basicamente todas as versões do Flash e está disponível em: Newgrounds Wiki - Swivel - Flash to Video

No Swivel carregue o seu .swf*. Mantenha as configurações padrão.

*Se você está utilizando um loader no seu .swf, coloque o "Start:", que é o frame inicial, no 2, já que o loader pausa o tempo até apertar o botão, mas a animação esta sendo convertida para .mp4, então não precisamos de uma tela de carregamento.

Na aba "Video", em Video Bitrate escolha lossless para a melhor qualidade visual. E em "Audio" use a quantidade de kbps que você exportou os seus áudios, mas se estiver em dúvida, 256 kbps deve ser o suficiente para a maioria dos projetos.

E pronto! Você aprendeu tudo que eu sei sobre animar em Flash. Agora é só pôr em prática e tirar as dúvidas que surgirem no caminho. Desejo que você faça seus projetos com qualidade!

Olá, meu primeiro Blog!

  Essa é a minha primeira vez tendo um blog, então nem sei o que colocar aqui para ser sincero xD

Mas essa é a primeira postagem de várias que virão se eu não abandonar aqui como fiz com o Twitter.

O que eu espero fazer aqui é escrever textos para vocês lerem, já que eu só produzo audiovisual no momento, e documentar processos no tempo em que eles acontecem ou postar meus desenhos de novo, acho que esse é o propósito de um Blog afinal, Eureka!