Para quem está conhecendo o programa Flash neste instante, demonstraremos agora, de forma

rápida e clara, os fundamentos básicos e necessários para um ótimo aproveitamento do conteúdo do

restante do site.

IMPORTANTE!!!
Todos os atalhos e comandos aqui mostrados são da versão 9 (Alpha) do Flash em Inglês, porém
não são muito diferentes das versões anteriores e da CS3.

Figura 1 (clique)
Cena
Ao abrirmos o Flash pela primeira vez, teremos ao centro nossa Cena (figura 1-A), um quadrado
Branco onde tudo que colocarmos ai será exibido ao gerarmos nosso arquivo final e logicamente o
que estiver fora dessa área será ocultado.

Ferramentas

Ao lado esquerdo encontraremos as ferramentas de criação, formas básicas, texto, pintura e etc
(figura 1 – B).
Simples e intuitivas, sempre que uma é selecionada, opções são mostradas logo abaixo e também na
caixa Properties aberta (figura 1 – C).
(se não estiver aparecendo, clique Ctrl+F3 ou Wondow – Properties – Porperties)
Fique a vontade para testá-las.
Janelas/Caixas de opções
À direita teremos várias caixas com as mais diversas opções (figura 1-D), sendo que podemos
expandi-las, adicionar e eliminar as mesmas apenas clicando e arrastando (quando quisermos
eliminar ou mover) sobre o titulo da caixa desejada.
Caso nenhuma caixa esteja sendo mostrada ou você tenha excluído alguma e a quer de volta, vá em
Windows e escolha qual quer que reapareça.
Se ela não aparecer no local certo, basta arrastá-la e ela se auto-encaixará.

Timeline
Na parte superior temos o Timeline e é ai que as animações realmente acontecem (figura 1 –E).
Ele é dividido em vários quadradinhos Frames (quadros).

Explicando de maneira rápida, para que tenhamos a ilusão de movimento, é necessário colocar um
desenho após o outro e é isso que fazemos no Timeline.
O frame branco com uma bolinha também branca significa frame vazio, ao colocarmos o primeiro
desenho essa bolinha ficará preta, então teclando F7 é criado um novo frame vazio (Blank
Keyframe) onde colocaremos o segundo desenho e assim por diante até que todos os desenhos
sejam colocados.
Para ver o quadro anterior ou posterior, como se tivesse usando uma mesa de luz, selecione Onion
Skin (figura 1 – F)
Ao darmos Play (tecla Enter) teremos a ilusão de movimento (Enter novamente para parar ou use os
controles de exibição no topo – Window – Toolbars – Controller) (figura 1 –G).
Para avançar ou retroceder apenas um quadro, use as teclas de atalho < > .
Layers
O Timeline também trabalha com Layers (camadas).
Trabalhar com Layers significa trabalhar cada elemento de sua animação de forma independente,
um Layer para o cenário, um para o personagem principal, outro pros secundários e etc, isso agiliza
o trabalho mantendo tudo organizado.
Clique em Insert – Timeline - Layer para criá-los ou na folhinha com um + localizado no próprio
Timeline
(figura 1 – H).
Clicando e arrastando sobre seu titulo pode-se jogá-lo para cima ou para baixo de um Layer já
existente.
ATENÇÃO: Para trabalhar com interpolação de movimentos (Motion ou Shape Tween), como
veremos no tópico Motion e Shape Tween, é obrigatório um Layer para cada Graphic, Movie Clip
ou Button que se esteja trabalhando, por isso já se habitue a criar um Layer para cada elemento.
Caixa Properties
Já na parte inferior temos a caixa de propriedades (Window – Properties) (figura 1 – C) que é
importantíssima, pois é sensível às ferramentas ou a seleção de Graphics, Movie Clips e Buttons,
isto é, quando selecionamos alguns deste itens de nossa cena ou alguma ferramenta, propriedades e
opções dos mesmos são ai mostrados.
Actions
Por final temos a caixa Actions (F9 ou Window - Actions) (figura 1- I ).
Essa caixa serve para o uso da linguagem de programação do Flash chamada Action Script.
Em nossas animações não usamos nada a mais que Play e Replay e por esse motivo temos
pouquíssimo conhecimento em programação, porem se você tem interesse em criação de conteúdo
interativo como apresentações multimídia, home-pages, jogos e etc, essa é uma das linguagens mais
usadas no momento e o que não faltam são livros e sites especializados no assunto.
Conclusão
Com essa geral, acreditamos que já de para vocês se familiarizarem melhor com o Flash e não deixe
de fuçar em tudo para ir conhecendo cada vez mais.

A grosso modo, animação pode ser resumida em movimentação durante um determinado tempo,
onde o tempo que algo fosse exibido seriam os Frames, cada mudança nesses Frames seriam os
Keyframes e se em um determinado tempo nada aparece, seria um Blank Keyframe.
Uma maneira fácil de entendermos o que são Keyframes, é lembrar daquelas animações feitas em
blocos de papel ou até mesmo no canto dos livros de escola.
Cada folha desenhada seria um Keyframe e se uma folha em branco aparecesse seria classificado
como um Blank Keyframe.
O desconforto neste tipo de animação é que se um mesmo desenho tiver que se repetir por algum
tempo, é necessário redesenhar várias vezes, o que não acontece no Flash, pois para esses casos
inserimos Frames, que exibirão o ultimo Keyframe durante o tempo que desejarmos.
Saindo do papel e voltando para o Flash, veremos como tudo funciona.
O Chute de Boby Psicótico
Na figura abaixo você pode visualizar como Frames, Keyframes e Blank Keyframes são exibidos
no Timeline.

Vamos ver um exemplo onde para Boby Psicótico dar um chute, foram feito 5 desenhos que já
foram convertidos em Graphic e estão todos na Library.
Clique aqui para baixar o arquivo.

Cada desenho desse já é considerado um Keyframe, pois existe uma mudança, então, traduzindo, é
um quadro chave, pois tem uma mudança em cada um deles.
Abra o arquivo baixado, acesse a Library (Ctr+L) e veja que os 5 desenhos já estão em ordem lá.
Nosso Timeline sempre começa com um Blank Keyframe, isto é , vazio, então agora vamos
selecionar o primeiro Boby (Boby 1 )de nossa Library e arrastar para o centro de nossa cena.
Automaticamente, o Blank Keyframe vira um Keyframe, afinal colocamos algo lá.

Página>> 2 - 3
O Boby precisa chutar, porém queremos deixar ele um pouco parado, então esse Keyframe precisa
se repetir por um tempo.
Para isso vamos adicionar Frames, afinal não haverá mudanças no desenho.
Clique no Frame 15 do Timeline e para inserir um Frame basta clicar a tecla de atalho F5 ou botão
direito Insert Frame.
Com isso sabemos que Boby ficará parado por 15 Frames ou meio segundo.
Agora é a hora de Boby começar a se mexer, então vamos colocar novos Keyframes.
No quadro 16, clique F6 (Botão direito - Insert Keyframe) para criar um Keyframe.
O mesmo Boby ainda está lá, então clique nele e Delete, agora arraste Boby 2 da Library e
posicione mais ou menos onde estava o antigo.
Para fazer o ajuste fino da posição, ligue o Onion Skin que funciona como uma mesa de luz e
podemos ver os Frames anteriores e posteriores.
Veja na imagem abaixo onde ele fica.

Onion Skin

Como ele levanta a perna esquerda, vamos alinhar pelo calcanhar direito, veja a setinha azul na
imagem acima.
Com ele ajustado, vamos inserir o próximo, mas dessa vez de uma forma diferente para você
conhecer outra maneira de proceder.
No quadro 17, insira um novo Keyframe (F6) mas não Delete o Boby dessa vez, selecione ele e em
Properties, clique em Swap... .
 Botão Swap
A janela que se abre lista tudo o que você tem em sua Library e basta você selecionar o Graphic
desejado para que ele seja substituído exatamente no mesmo lugar do anterior, e neste caso vamos
escolher o Boby3.
Como ele pega como base o centro do Graphic, será necessário também fazer o ajuste de
posicionamento pelo calcanhar como fizemos anteriormente.
O bom de usar o Swap, é que se você tiver mudado o tamanho, rotacionado, distorcido ou até
aplicado um efeito no quadro que será substituído, o novo vai com todas essas modificações.

Janela Swap

Antes de colocarmos o próximo Boby, vamos deixar ele um tempinho parado com os pé para cima,
então insira mais Frames até o quadro 30 (clique no quadro 30 em F5).
No mesmo quadro, de um F6 e com Swap mude para Boby4.
De F6 no quadro 31 e Swap para o Boby5.
Agora vamos fazer o Boby voltar a posição incial.
Como já fizemos, vamos deixar ele um pouco parado nessa posição (Insira Frames até o quadro 50
- clique no 50 em F5).

Nosso Timeline até o momento (clique)

Para a volta, vamos colocar o Boby4 no Frame 51 e Boby2 no Frame 52.
Você pode usar o Swap novamente ou copiar e colar os Frames e assim os pegar já na posição
correta.
Clique no quadro 30 e Botão Direito do Mouse – Copy Frames, vá para o quadro 51, Botão
Direito do Mouse – Paste Frames.
Copie também o Frame 16 e cole no 52.

Colando os Frames copiados (clique)

Gere sua animação Ctrl+Enter.

Animação Final
Veja que, neste caso, não foi preciso copiar o quadro 1 e coloca-lo no final pois automaticamente
nossa animação começa novamente voltando pro primeiro quadro.
Dicas adicionais
- Outra forma de copiar e colar Frames, é clicar no Frame e clicar novamente mantendo a tecla Alt
pressionada e arrastar o Frame para onde desejar.
- Se você achar que o movimento ficou muito rápido, coloque um Frame a mais em cada
Keyframe (clique no Keyframe e F5).
-Para aumentar a quantidade de quadros a ser visualizado no Onion Skin, clique as bolinhas que
aparecem no Timeline (veja imagem abaixo).

- As outras opções de Onion Skin são Onion Skin Outline, onde é visto apenas os traços do
desenho e Edit Multiple Frames que serve para mexer nos gráficos de vários quadros ao mesmo
tempo.

Bem, esperamos que com esse tópico, suas dúvidas sobre criação e manipulação de Frames e
Keyframes tenham sido sanadas.
Um erro de todo iniciante em animação é querer logo em seu primeiro trabalho fazer algo longo,
cheio de detalhes,personagens e tudo mais,porem o que acaba geralmente acontecendo é a
desistência do projeto nas primeiras aparições de problemas ou dificuldades. Essa desistência torna-
se algo desanimador para o artista e acarreta muitas vezes no abandono total da carreira de
animador.
Animação é pratica, treino, dedicação e estudos, por isso quando começar a ter idéias para suas
primeiras criações, pense sempre em algo curtinho, como uma tira de quadrinhos, onde o começo,
meio e fim de uma piadinha se desenrolam em apenas 3 ou 4 quadros no máximo com um ou dois
personagens em apenas um cenário.
Um exemplo do que fizemos e poderia ser algo bem curto, é a animação do Nouass, o Pintinho que
não tinha Toba (clique aqui se ainda não assistiu).
Essa é uma piada antiga e poderia ser feita simplesmente em 3 tomadas.
1 – Você conhece o Nouas? O Pintinho que não tinha toba?
2 – Um dia foi peidar e...
3 – Explodiu!!! (FIM)

Seria algo bem simples de ser feito, com um personagem, um cenário e poderia ficar igualmente
engraçado.
A maior vantagem de se começar assim é o fato de você começar, terminar, poder publicar seu
trabalho e com isso satisfazer-se plenamente com a realização do projeto, afinal, não existe nada
mais compensador que vermos nosso trabalho pronto, com isso ganhar uma injeção de animo e já
darmos inicio ao um novo projeto.
Outra vantagem, dessa vez mais técnica, é a aparição e solução de problemas.
Com algo simples, os problemas e soluções tendem a serem simples, abrindo nossa mente e nos
alertando sobre a maneira correta de proceder da próxima vez.
Logicamente, em todo novo trabalho um novo problema poderá surgir, porém com a experiência já
adquirida nos antigos projetos eles serão solucionados com maior rapidez e serão cada vez menos
freqüentes.

“Mas então quando devo começar a fazer algo mais longo?”

Através de suas realizações, você saberá a hora certa de encarar algo maior, mas o que costuma
acontecer é isso ir acontecendo gradativamente, sem que se de muita conta, afinal, com cada novo
trabalho finalizado e estimulo revigorado, você estará se empenhando sempre mais.
Nossas animações mesmo, no inicio, tinham em torno de 30 segundos, hoje a média já aumentou
para cerca de 2 minutos, sendo que temos animações com até 5 min.
Nossa meta é sempre não ultrapassar mais que 3 min pois, devido a nossa experiência e como
nosso foco principal é internet, percebemos que acima disso, no mundo corrido que vivemos,
muitos usuários não querem perder muito tempo na frente do computador assistindo a esse tipo de
conteúdo.
Isso muda, logicamente, se o objetivo principal for TV, onde o telespectador pode ficar relaxado na
cama ou no sofá da sala sem se preocupar com o tempo passando.
Bem galera, acho que deu para entender o que queríamos passar, é melhor fazer algo pequeno e
terminar do que ficar sempre tentando acabar algo.
O Story-board nada mais é que a versão em quadrinhos de sua animação e é nele que descobrimos,
antecipadamente, os possíveis problemas que nossa animação pode apresentar, procurando
soluções, com isso economizado tempo e evitando desenhar etapas que podem ser inutilizadas.
Apesar de todos os iniciantes (isso também aconteceu conosco) ignorarem essa etapa, todos
futuramente irão mudar de opinião quando descobrirem a importância do mesmo e a partir daí
nunca mais deixarão de fazê-lo.
Hoje em dia os story-boards são usados em praticamente tudo, desde uma simples apresentação de
website até as grandes produções de Cinema, pois com ele o posicionamento de câmeras, por
exemplo, pode ser definido com antecedência, poupando horas nos sets de filmagem.
Em nossas animações
Em nossas animações não é diferente.
Com o roteiro definido, começamos a esboçar tudo o que cada cena necessitará, número de
personagens, perspectiva do cenário, objetos, fundos, etc...
Usando um modelo igual ao da figura abaixo (você pode fazer um semelhante ou simplesmente usar
o nosso) procuramos colocar o máximo de informações possíveis como definir a posição e número
de personagens, perspectiva do cenário, objetos na cena, etc.
A linhas abaixo de cada quadro são usadas para as falas e observações.

Modelo de Story-Board (clique)

Nas figuras abaixo você vê uma das seqüências de nosso story-board e os respectivos quadros do
resultado final.
É nítida a grande semelhança entre ambos.

Story-Board do episódio de Osama Bin Laden “Reconciliação” e Quadros finais

Nos story-boards, o nível de detalhes depende do artista que o fará.
Você pode criá-los com mais simplicidade ou até mesmo com muito mais precisão, porém o que
realmente importa, é que ele seja feito e que o animador entenda o que deve ser feito.
Agora mãos a obra, passe para o papel aquela idéia que parece perfeita em sua cabeça e veja que
com a ajuda do story-board ela pode melhorar ainda mais.
O Flash tem a ótima opção Scene que nos permite trabalhar no mesmo arquivo com diversas cenas
independentes uma da outra, o que torna o trabalho bem mais organizado.
“Mas por que eu trabalharia com várias cenas?”

Imaginem fazer uma animação de 1 minuto, com vários personagens, vários ambientes e vários sons
numa única cena.
Você teria uma cena abarrotada de Layers para administrar e um grande problema caso algum
trecho da animação tivesse a necessidade de ter seu tempo aumentado ou diminuído, pois seria
necessário ficar arrastando todos o Key Frames para lá e para cá o que tomaria tempo e a
possibilidade de erros caso algum Layer ou Frame tivesse sido esquecido.
O número de cenas que iremos usar é previamente definido após a conclusão do story-board, mas
durante a animação, novas cenas podem ser incluídas dependendo da complexidade da mesma e/ou
quando muitos Layers começam a ser criados ou o número de frames começa a se estender demais
no Time Line, preferimos duplicá-la e continuarmos em outra para evitar os problemas citados
acima.
Criando Cenas
Criar cenas no Flash é muito simples.
Abra o painel Scene (Shift+F2 ou lWindow-Other Panels – Scene)
Como pode ser visto, ele é bem básico e possui as seguintes opções:

Duplicar
Copia totalmente a cena atual.
Adicionar
Insere uma nova cena vazia logo após a cena atual.
Apagar
Apaga a cena atual.

Apesar de poucas, essas opções são suficientes sendo que você ainda pode dar nomes próprios a
cada uma delas dando um duplo clique sobre a cena deseja.
Pode-se também mudar a ordem de uma cena clicando e arrastando para o novo local.
Para navegar entre uma cena e outra, clique sobre a cena desejada ou use Page Up/Page Down.
Testando apenas a cena atual
Quando gerada a animação, as cenas serão lidas de cima para baixo uma atrás da outra na ordem
que definirmos na janela Scene.
Para testarmos a animação, basta você clicar Ctlr+ENTER, porém o que muita gente não sabe é
que da pra testar apenas a cena que você está trabalhando, para isso basta clicar Ctrl+Alt
+ENTER.
Isso ótimo para economizar tempo, se não imagine numa animação com 30 cenas, quando você
mexesse na cena 30 e quisesse testar, ter toda vez que esperar a animação toda rolar!!!
Conclusão
Como já disse no começo, trabalhar com cenas é essencial para um projeto organizado e livre de
dores de cabeça, por isso a partir de agora, ao planejar sua animação, tenha em mente essa
possibilidade e veja como seus trabalhos fluirão bem melhor.

É importante antes de começar, saber algumas coisas fundamentais para evitar perda de tempo ou
ter que refazer seu trabalho.
Antes de Abaixo segue os itens que considero mais importantes para ajudá-los a começar com o pé
direito, ou seria mão direita? :-D
Tipo de mídia que ira exibir sua animação
Saber o tipo de mídia que seu trabalho será exibido é fundamental para ver até onde você pode ir e
que tipo de sistema deve usar.
Em todos os caso se trabalha normalmente no Flash, o diferencial será na hora de exportar o que foi
feito.
Vamos aos tipos disponíveis e o que se deve ficar atento.
- Internet
Se for para Internet o principal fator a se considerar é o tamanho do arquivo final, por isso tome
cuidado com roteiros muito longos ou tente quebra-los em capítulos.
Hoje os principais tipos e arquivo para exibição on line são os formatos SWF e FLV, ambos gerados
pelo FLASH.
SWF
O SWF torna as animações bem mais leves, porém se você pretende animar usando 30 quadros por
segundo, terá problemas de sincronização de áudio e então terá de partir para FLV.
Trabalhando com 12 quadros por segundo, você não terá problemas e nesse caso, para manter
seu arquivo leve, tente evitar trilhas de áudio muito grandes.
Sempre que possível, tente cortar em um pequeno trecho e manter seu conteúdo em looping.
Tire proveito do sistema de armazenamento de gráficos usado no Flash onde cada desenho
convertido em Graphic, Movie Clip ou Button fica na livraria e sempre que o usamos, na verdade
estamos pegando uma referência do original, com isso gastando a memória de apenas um podendo-
se ter 1000 objetos numa cena e gastar apenas 5kb, por exemplo.
Por isso tente sempre manter tudo organizado e evitar ficar jogando coisas à toa na cena sem antes
as converter (em Graphic, Movie Clip ou Button).
Um sistema de “carregando” que mostre o progresso baixado também é essencial, pois se não
muitas pessoas desistem de esperar.
Você pode baixar um prontinho e que usávamos em nossas animações clicando aqui .
Se pretender colocar filmagens em sua animação, então parta para FLV.
FLV
Ideal para trabalhar com filmagens e com animações trabalhando a 30 quadros por segundo.
Infelizmente, perto o SWF, o tamanho fica bem maior e para não e ter um arquivo muito grande
para a pessoa assistir, é necessário deixa-lo com pouca qualidade, mas é o que temos hoje em dia e
o que usamos no Mundo Canibal.

-TV
A principal observação é a limitação existente no Flash em não exportar conteúdos animados dentro
de Movie Clips, por isso use a lei dos Irmãos Piologo: USE SÓ GRAPHICS!!!
-Grandes Projeções (Cinema ou Telão)
Para Cinema, além do mesmo problema da TV, devesse lembrar que desta vez será exibido num
tamanho gigantesco.
Diferente de Bitmaps, vetores não tem limitações quando se necessita aumentar, porém pequenas
imperfeições podem parecer falhas grotescas quando projetadas em uma grande tela. Neste caso,
faça desenhos no tamanho maior possível e tenha cuidado redobrado na hora de finalizar e vetorizar.

Esse é o famoso e tão pedido sistema de carregando usado nas animações SWF do
Mundo Canibal.
Para usa-lo é o muito simples, não sendo necessário ter grandes conhecimentos no
Flash:
1 - Clique aqui e faça o download do arquivo de exemplo(em Flash MX);
2 - Abra o arquivo;
3- Abra sua animção. A primeira cena de sua animação deve ser onde será colocado o sistema de
carregando;
4 - Você deve copiar o Movei Clip "preloader" (selecione e de Ctrl+C) deste arquivo e
colar (Ctrl+V) em sua animação no 1º quadro da 1ª cena .
IMPORTANTE! Não pegue da livraria pois ele irá sem os comandos necessários.
5 - Ainda no 1º quadro, coloque também uma ação de Stop: Selecione o 1º quadro, abra
o painel Actions (F2 ou Window - Actions).
Agora no painel Actions, abra Global Functions, Timeline Control e um duplo clique
em STOP;

6 - Vá até o quadro 10 e clique F7 para ser criado um quadro vazio e nele coloque um
botão de Play, pois o Carregando está configurado para quando acabar de carregar ir
para o quadro 10 e parar.
Para criar o Botão, digite Play na tela ou crie um botão a seu gosto e com ele
selecionado, clique F8, selecione Button e OK.

Antes de começar sua animação é crucial que se saiba e entenda sobre quantos quadros por segundo
deve-se usar.
Como o nome mesmo diz, Quadros por Segundo (Frames per second –fps) indica quantos
quadros serão exibidos em um segundo e existem diferentes padrões para cada tipo de mídia.
TV roda a 30fps , Cinema 24fps e para Internet muitos costuma-se usar de 12 a 15.
Independente de como você fez sua animação, ao exportar tudo acaba bem, porém as coisas mudam
na hora de desenhar a animação.
Se você esta trabalhando a 30fps, logicamente tudo irá ocorrer mais rápido e por esse motivo você
terá que desenhar mais para fazer um movimento lento como um braço levantando por exemplo.
Se você quer que ele demore um segundo para levantar, terá de desenhar 30 quadros mas se
estivesse trabalhando a 12 fps, seriam apenas 12.
Então trabalhar a 12fps parece bom, mas existe um problema visual.
A visão do ser humano não percebe a troca de quadros a partir de 24fps, e assim vemos um
movimento bem fluido, menos que isso, começamos ver um movimento meio “truncado”.
Abaixo, pode-se ver essa diferença claramente numa simples animação.

Quando começamos com o Mundo Canibal, isso em 1998, preferíamos usar 12fps porque
exportávamos em SWF e essa taxa de quadros por segundo não exigia uma placa de vídeo muito
potente, assim a maioria das pessoas poderia ver nossas animações sem problemas, porém não
gostávamos dos truncados e mais para frente mudamos definitivamente para 30fps.
Como hoje exibimos as animações em FLV e a maioria dos PCs já vem com uma placa de vídeo
razoável para se ver vídeos, os problemas de exibição não existem mais.
“Então que valor eu devo usar?”
Nós achamos muito melhor 30fps, mas você pode fazer testes, ver o que corresponde com seu
objetivo e mande ver, mas ATENÇÃO!!!
Decida antes de começar, porque se, por exemplo, estiver usando 12fps e resolver mudar depois que
já começou sua animação, tudo vai ficar acelerado demais e você terá de fazer ajustes em tudo que
foi trabalhado até o momento.
Configurando no Flash
Para configurar no Flash quantos quadros por segundo você pretende trabalhar, vá em Modify –
Document (Ctrl+J) ou em Properties (Ctrl+F3 sem nada selecionado) e altere o valor de Frame
Rate para o número desejado.
Para deixar isso como padrão do Flash e você não precisar mudar toda vez que for começar um
arquivo novo, clique em Make Default.

Bem, é isso ai, está feito!!!

Este é mais um ponto que muitos iniciantes desconhecem e quando vão saber de sua existência
geralmente é tarde demais sendo que um trabalho todo pode ter a necessidade de ser refeito ou pelo
menos uma grande parte dele.
A Área de Segurança, conhecida também como Safe Frame, é usado para garantir que o conteúdo
principal de um vídeo seja visualizado quando exibido em Televisões, uma vez que devido a grande
variedade de modelos existentes no mundo, é normal a perda de imagens localizadas nos cantos da
tela.
Com o Safe Frame, saberemos até onde podemos desenhar e organizar o material que queremos que
seja visto pelo telespectador.
No caso de exibições em monitores de computador ou televisões de alta definição, praticamente
nada é perdido devido à diferença de tecnologia empregada, porém como sempre pensamos em usar
nosso material nos mais diversos tipos de mídia, o Safe Frame é empregado como solução
definitiva.
Infelizmente o Flash não tem opção de visualização de Safe Frame como em vários editores de
vídeos existentes no mercado, provavelmente porque nem mesmo a Macromedia quando o criou
esperava um sucesso tão grande na criação deste software que rompeu as barreiras da internet e hoje
é usado para os mais diversos fins.
Criando o Safe Frame
Como o Flash não tem pronto, vamos então cria-lo e isso é extremamente simples.
A lógica é fazer um quadrado sem preenchimento do tamanho exato do seu projeto, centralizar e
fazer duas cópias dele, diminuindo uma 10% e a outra 20% do tamanho original.
Mas vamos ao passo a passo.
Abra o Flash e regule o tamanho do seu documento para 320x240 pixels (Modify –Document)
Esse é o tamanho que vamos usar como exemplo mas pode ser qualquer um, a lógica é a mesma.
Agora clique na Ferramenta de criação de quadrados (Rectangle Tool , Tecla R), escolha uma
cor para o contorno e sem cor para o preenchimento.

Clique e arraste para fazer um retângulo de qualquer tamanho.

De um duplo clique no contorno dele para selecioná-lo todo, e na aba Properties, clique no
cadeadinho para desligá-lo e assim evitar que mude proporcionalmente.
Agora digite o tamanho do seu documento em W: (Width – largura) e H: (Height) altura, nesse
caso 320 e 240.
Agora digite zero em X e Y para posicionarmos tudo bem no centro.
Você também pode usar o painel Align para alinhar (Windown – Align ou Ctrl+K).
Com ele centralizado e selecionado, clique Ctrl+G para Agrupá-lo e em seguida faça uma cópia
dele (Ctrl+V).
Precisamos colar uma cópia dele exatamente no mesmo lugar e para isso clique Ctrl+Shift+V
(Edit – Paste in Place).
Parece que nada aconteceu porque foi colado exatamente no mesmo lugar.
Ainda com ele selecionado, abra o painel Transform (Ctrl+T ou Window – Tranform), selecione
Constrain para manter a proporção, digite 90 em um dos campos e tecle ENTER.

Veja que ficou menor.

Vamos repetir o mesmo processo, cole mais uma cópia do maior exatamente no mesmo lugar (Ctrl
+Shift+V) mas agora no painel Transform digite 80 em um dos campos e tecle ENTER.
Pronto, ai está nosso Safe Frame.

Você deve deixar um Layer exclusivo para ele e, claro, sempre acima de todos para que você
sempre possa vê-lo.
Para não correr o risco de mexer nele sem querer, bloqueie o Layer, clicando no cadeado do
Layer e para efeito de organização , coloque o nome do Layer como “Safe Frame” (duplo clique
sobre o nome do Layer)
Evitando que apareça na animação
Quando você gerar sua animação, o Safe Frame vai aparecer e para evitar isso, pode-se fazer duas
coisas, deletar o Layer dele ou enganar o Flash.
O Flash trabalha com o sistema de linha guia para animação que não é exibido quando se gera a
animação, então o que faremos é clicar com o botão direito do mouse sobre o layer do Safe
Frame e escolher a opção Guide.
Dessa forma o Flash “pensa” que é uma guia, não exibe e você não precisa ficar deletando toda vez
que for testar ou gerar a animação.

Entendendo o Safe Frame

A área menor do Safe Frame é o limite onde você pode ter certeza que tudo o que será colocado ai
dentro vai aparecer em qualquer formato exibido.
A segunda linha é até onde você pode ir caso queira dar uma aumentadinha, mas além disso, é por
conta e risco.

Veja na imagem abaixo que existem várias partes fora da área de segurança, porém o que queiramos
realmente mostrar se encontra todo dentro do limite correto.
Salve seu Safe Frame
Nós aqui já temos um arquivo com tudo isso feito e pronto para uso, dessa forma não temos que
ficar refazendo toda vez que vamos fazer uma animação.
Faça isso também ou clique aqui para baixar os nossos, um no formato de TV padrão e outro em
WIDE Screem.
Imprima seu Safe Frame
Também existe a necessidade de ter uma versão impressa do Safe Frame que muitas vezes servirá
como base enquanto se desenha à animação e principalmente os cenários, evitando assim desenhar
algo importante numa área de risco.
Então é isso, se como nós, seu objetivo é mostrar seus trabalhos no mais diversos formatos, não
deixe de usar o Safe Frame.
Antes de começar...
... gostaria de deixar claro que quando começamos o Mundo Canibal, em 1995, tínhamos um PC,
um Mouse de bolinha e um Scanner de mão e usamos isso anos e anos.
Então antes também de você ver o equipamento que temos hoje e começar a se lamentar tipo, “Ah!
Mas por isso que eles conseguem, eles tem Tablet” ou “Puxa, se eu tivesse uma Cintiq, eu
conseguiria fazer” ou ainda “Quando eu tiver uma Tablet eu começo”, lembre que passamos muito
tempo sem isso e mesmo assim conseguíamos fazer as animações.
Quando você quer e tem determinação, você consegue!
Ficar se lamentando não resolve nada, o importante é não desistir ok!!!

Então vamos lá...

Muitas pessoas acham que por usarmos o computador, desenhamos tudo nele com o Mouse (já
pensou o trabalho) ou com Tablets, aquelas pranchetas digitais com uma caneta.
Mas não, aqui ainda usamos o método tradicional do lápis e papel, porém também usamos Tablet e
sim, é possível fazer uma animação toda usando ela.
O motivo de ainda desenharmos tudo a mão é simplesmente uma preferência nossa.
Material
Para desenhar usamos o que existe de mais “avançado” : lapiseira 05 2B, limpa-tipos ou borracha
bem macia, papel tamanho Oficio e para finalizar caneta preta Paper Mate Futura.
Tudo isso você encontra em qualquer papelaria.
A caneta preta Paper Mate Futura é um caneta com a ponta porosa e bem legal para finalizar, porém
esta cada vez mais difícil de achar, então se você não encontrar, não se prenda a isso, procure outras
alternativas.
Aqui não é importante a marca da caneta e sim seu capricho, pois no final vamos scannear tudo em
Preto e Branco Puro, então até mesmo se você finalizar com carvão de churrasqueira, o preto final
vai ser o mesmo :-D
Equipamento
Tablets
Hoje em dia as Tablets evoluíram muito sendo possível fazer uma animação toda com elas e artistas
no mundo todo as usam com resultados perfeitos.
Como já citamos é mais uma questão de gosto e costume, e para vocês verem como isso é normal,
assistam o Making Of do DVD da animação 2D Clone Wars e verão que os dois animadores
principais (que são também os criadores do Laboratório do Dexter), um desenha direto na Tablet e
outro no lápis e papel.
Porém para pintura ela é fundamental e é onde as usamos 100%.
Os modelos que temos são Bamboo, Graphire, Cintiq da marca Wacom que são as mais
recomendadas por terem perfeita sensibilidade e um Tablet PC HP Pavilion tx2000z que funciona
igual a Cintiq, porém não depende de um PC para funcionar sendo assim portatil.

Existem várias outras marcas, mas não podemos dar nosso parecer por nunca ter usado, então se
possível, teste ou converse com alguém que tem antes de comprar.
As da linha Bamboo Fun e Graphire (de tamanho menor, 4x5” e 6x8”) são as mais baratas e mais
do que suficiente para um ótimo trabalho.
Não pense que maior é melhor porque na verdade pode atrapalhar, pois as muito grandes ocupam
muito espaço físico e dependendo de sua área de trabalho isso pode ser um problema.
Nossa Cintiq é a 12WX e esse é o modelo de tablet que se desenha direto na tela dela, é show de
bola e acreditamos ser o futuro da animação, isto é, logo o lápis e papel serão esquecidos.
Como desenhamos a vida toda no método tradicional, hoje só estamos, além de pintar, fazendo
alguns cenários e itens nela para ir pegando o jeito e para quem sabe logo fazer tudo direto ai.
No caso das Cintiqs o tamanho maior não é problema e sim recomendado.
Mesa de Luz/Animação
Usar mesa de animação (aquelas com um circulo no meio e uma luz por baixo) é extremamente
recomendado, mas acredite, Rodrigo Piologo tem, mas não usa.
Ele prefere sua antiga e simples prancheta escolar de madeira com um segurador de folhas na lateral
para fazer suas animações, da pra acreditar???

Apesar de uma opção estranha, isso serve para mostrar mais uma vez que ao invés de ficar se
lamentando por não ter uma mesa de luz ou uma Tablet, com força de vontade se consegue fazer
tudo.
Mas claro, você pode preferir ter uma.
Infelizmente é um pouco complicado achar isso no Brasil e em minha ultima busca encontrei duas
boas opções:

Mesa de Luz Arraia: do N.A.D.A (Núcleo de Animação PUC – RIO) e projetada pela designer
Talitha Magalhães é uma opção prática (mais detalhes aqui)

Mesa de Luz Arraia

Mase de Luz tradicional: construídas pelo NCA (Núcleo de Animação de Campinas) (mais
detalhes aqui)
 Mase de Luz tradicional:
Não sei quanto custa, mas se não tiver a fim de gastar , você também pode seguir o esquema abaixo
para fazer uma.

(clique)
Bem, em relação a material e equipamento para desenho é isso, o resto é usar a criatividade!!!
Vamos passar aqui algumas dicas que usamos na criação deles e esperamos que elas o ajude a
adquirir seu próprio estilo, porem isso só é conseguido com muito empenho, dedicação e estudos.
Existem milhares de livros, cursos, sites e tudo mais sobre desenho e um bom treino é tentar copiar
personagens existentes.
Não existe problema algum nisso só vai melhorar seu traço e abrir sua mente para o que queremos e
já citamos, você ter um estilo próprio.
Os nossos personagens
No Mundo Canibal os personagens que criamos seguem um estilo exagerado de estilização, onde
seus elementos como olhos ou bocas são deformados ao extremo, dando uma identidade aos nossos
personagens.
O próprio corpo dos personagens já foge do padrão humano e varia de um para outro.
Repare nas figuras abaixo a diferença e variedade entre eles.

Diferença entre o corpo humano básico e “Carlinhos”, um de nossos personagens (clique)

 Diferentes padrões usados (clique)
Porém o que se deve ter em mente é o fato de que deformar um personagem não é apenas aumentar
aqui, diminuir ali e pronto, ta feito.
Apesar de “estranhos” é preciso manter um equilíbrio e uma lógica para seu desenho não passar do
estilizado para o infantil ou não profissional.
Uma boa dica é ir deformando aos poucos e fazer vários estudos até chegar ao resultado final.
Veja na figura abaixo os estudos realizados para a criação de Deforméd Baby.

Estudo para criação de Deforméd Baby (clique)

Observe que vários desenhos foram feitos.
Nessa fase é importante que se desenhe livremente, sem se preocupar em deixar o desenho com
traços perfeitos, boa finalização e etc, afinal isso é apenas um rascunho do que poderá vir a ser
nosso personagem.
Referências como fotografias e outros desenhos podem e devem ser usados, ajudando e muito na
elaboração do que se deseja alcançar.
Como Deforméd já foi definido, vamos agora olhar a próxima figura e ver onde mais nossos traços
são diferentes em relação às estilizações tradicionais.
 Diferença entre estilização tradicional e a usada no Mundo Canibal (clique)
Repare que apesar da construção ser a mesma, é na finalização que vamos impor o estilo que nosso
personagem deve seguir.
No Tradicional, muito usado em desenhos da Disney, Turma da Mônica e etc, existem uma
simetria entre ambos os lados e seu traço é mais claro e objetivo. Já o Mundo Canibal segue um
estilo em evidencia nos desenhos atuais onde a simetria foi pro espaço, existem mais detalhes e os
traços forçam o observador a se concentrar mais na aparência do personagem, mas mesmo assim o
desenho continua organizado.

Isso se dá pelo fato de que apesar de suas deformações, o equilíbrio esta presente, como pode ser
visto nos olhos que mesmo sendo um maior que outro, no todo, contando com as olheiras, são da
mesma largura e a cabeça compensa a diferença na altura.

Na boca é fácil perceber que os dentes foram colocados de forma pensada e não jogados de
qualquer forma, pois isso poderia dar a aparência que a boca do Pássaro continha dentes podres, não
sendo esse o objetivo do desenho.
Estilos semelhantes ao usado por nós também podem ser vistos, na maioria das vezes, em
personagens que possuem um humor mais escrachado como “Vaca e Frango” da Cartoon
Network.
Ainda nesta figura, vários outros detalhes podem ser vistos, mas realmente o que conta na hora de
estilizar um desenho, ainda mais no nosso estilo, é o treino e ser bastante exigente consigo próprio.
A opinião de outras pessoas também é muito importante pois pode mostrar pontos que passaram
desapercebidos por você.
Neste outro exemplo que você poderá usar como base para um exercício, vemos a estilização de
uma simples cabeça de Urso.
Na figura, observamos quatro tipos de estilizações onde também foi necessário construções
diferentes devido ao fato de apresentarem um grande numero de diferenças entre si.

4 Cabeças com diferentes construções e estilização

Agora é com você
Agora é a vez de você tentar criar algumas cabeças de urso variando bem os estilos.
Algumas vezes o resultado pode vir da mistura dos vários esboços que você já tenha feito como
olho de um, boca de outro e etc, mas o resultado final tem, acima de tudo, que lhe agradar, afinal de
contas você terá que redesenhá-lo inúmeras vezes na hora de animar e não existe nada pior do que
fazer algo que não gostamos muito.
Dica e jabá (claro :-D )
Ainda temos pouquíssimas unidades do nosso Livro Aprenda a Desenhar
Cartoons para Produção com Animação & Computadores a venda e ele pode
lhe ajudar muito na criação de personagens, então se você quer ter o seu,
clique já aqui , pois tem pouco meeeeesssmo!!!

A desfocagem de movimento é um recurso que ninguém repara, mas é muito usado em animação e
ajuda muito a agilizar o trabalho.
A idéia é simular o desfoque que se tem em filmagens ou fotografias quando algo se movimenta
muito rápido.
Em programas de tratamento de imagens e edição de vídeo esse efeito, conhecido também como
Blur, é conseguido automaticamente, porém em animação, aplicar esse efeito automático pode
deixar a coisa meio estranha, e o normal é o desenhista/animador já o simular.
O processo é muito simples e geralmente apenas um quadro já resolve toda a movimentação.
Como fazer?
No exemplo que veremos, Chuq Nóia vai dar um chute, então a primeira coisa que se deve
desenhar é o quadro antes da desfocagem e o depois.

Quadro inicial e final do movimento (clique)

Com isso, devemos então imaginar o trajeto que a perna dele faria do começo até o final.
 Estudando a trajetória da perna
Agora, como é a perna que se movimentara rapidamente, vamos desenhar o quadro intermediário
deformando, esticando e simulando como se estivéssemos vendo vários quadros em um só.

Quadro intermediário simulando a desfocagem de movimento (clique)

Na hora de montar no Timeline, se achar que ficou muito rápido, você pode deixar dois Frames para
cada desenho, que é o que foi feito acima.
Um toque a mais na hora da pintura
Para ajudar ainda mais a criação do efeito, na hora que for pintar, procure substituir o contorno
preto da área do movimento por sobre-tons das cores usadas.
Na figura abaixo podemos ver isso claramente.

Pintura diferenciada na hora da desfocagem ajuda no resultado do efeito (clique)

Conclusão
Lendo e vendo os resultados desse tópico, pode parecer algo meio besta e obvio, mas a verdade é
que muita gente não faz e se mata desenhando vários quadros quando poderia resolver dessa forma.
Porém, fazer isso é o tipo de coisa que exige estudos, treinos seguidos de tentativas e erros.
Por mais que escrevêssemos sobre isso aqui, é só tentando que você vai começar a entender melhor
e pegar o jeito da coisa.
Para ajudar nisso, fizemos uma seleção com vários tipos de desfocagens que esperemos ajudar em
suas criações, por isso, meta tinta nessa impressora, imprima essa referencia e comece a mandar
ver!!!
 Referências (clique)

Após ter desenhado e finalizado é hora de digitalizar, isto é, passar para o computador os desenhos e
respectivamente para o Flash através de um scanner de mesa, sendo que qualquer modelo pode ser
utilizado, uma vez que usamos apenas o recurso de imagens em preto e branco e isso todos eles
fazem iguais.
Além de digitalizar, ou como se diz, “scannear”, vamos também vetorizar nossos desenhos, isto é,
eles deixarão de ser imagens para virarem traços matemáticos, o que tornará sua animação muito
mais leve de ser carregada quando usada para exibição on-line e também muito mais fácil de
pintar e manipular.
Fazer isso é muito simples, e resumidamente basta scannear o densenho em Preto e Branco puro
(não tons de cinza) , importar no Flash e usar o comando Trace Bitmap para vetorizar, pronto, ta
feito!
Mas agora vamos ver isso passo a passo.
Como exemplo, vamos scannear o garotinho da Avaianda de Pau correndo que constitui de 4
desenhos.
Você pode scannear seu(s) desenho(s), mas se preferir ou não tiver scanner, clique aqui e baixe
as imagens já scanneadas.

Abra seu programa de scannear (aquele que sempre vem grátis com o scanner).
É provável que ele já scanneie direto e lhe mostre um preview, mas se não fizer clique em algo tipo
Prescan ou Preview (Pré-digitalizar).
O importante agora é configurar corretamente o scanner para termos a imagem da melhor forma
para vetorizar.
Como cada programa é de uma forma, procure algo como:
Tipo de Saída ou Color ou Cores Filter Select: Escolha Preto e Branco ou alguma opção que
resulte nisso.
IMPORTANTE!!!
É extremamente importante que seja PRETO E BRANCO e NÃO Tons de cinza, pois na hora da
vetorização, se scanneou errado (tons de cinza) vão ficar “sujeiras” na hora da vetorização.

Resolution ou Resolução ou DPI: Para nossos desenhos usamos sempre 200 DPI, dependendo do
tamanho do desenho você pode aumentar (quanto menor o desenho, mais deverá ser a resolução),
porém como você já sabe, nada de desenhar coisas muito pequenas para não correr o risco de perder
muitos detalhes na vetorização.

Configuração usando o programa de o scanner da HP (clique)

Com o tipo de imagem a ser scanneada ajustado, selecione a área que quer digitalizar e clique em
Scan ou End (Digitalizar, Finalizar).
O tipo de arquivo a ser salvo pode ser qualquer um,JPG, GIF, TIF , TGA, etc, o importante é
SCANNEAR PRETO E BRANCO!!!
Para facilitar seu trabalho, salve as imagens com uma seqüência numérica, isto é, 001,002,003, etc,
dessa forma, o Flash vai reconhecer e importar já de forma correta uma atrás da outra como iremos
ver.
Feche a janela do scanner assim que todas as imagens tenham sido digitalizadas;

Abra o Flash.
Como estamos importando um ciclo de movimento, para facilitar nossa animação, vamos importar
as imagens já dentro de um Graphic vazio.
Para criá-lo, basta clicar Ctrl+F8 (Insert - New Symbol...), dar o nome de Garoto Corre, escolher
Graphic e OK.
Automaticamente já entraremos dentro do Graphic criado e ele já estará na Library (Ctrl+L).

Com o tipo de imagem a ser scanneada ajustado, selecione a área que quer digitalizar e clique em
Scan ou End (Digitalizar, Finalizar).
O tipo de arquivo a ser salvo pode ser qualquer um,JPG, GIF, TIF , TGA, etc, o importante é
SCANNEAR PRETO E BRANCO!!!
Para facilitar seu trabalho, salve as imagens com uma seqüência numérica, isto é, 001,002,003, etc,
dessa forma, o Flash vai reconhecer e importar já de forma correta uma atrás da outra como iremos
ver.
Feche a janela do scanner assim que todas as imagens tenham sido digitalizadas;

Abra o Flash.
Como estamos importando um ciclo de movimento, para facilitar nossa animação, vamos importar
as imagens já dentro de um Graphic vazio.
Para criá-lo, basta clicar Ctrl+F8 (Insert - New Symbol...), dar o nome de Garoto Corre, escolher
Graphic e OK.
Automaticamente já entraremos dentro do Graphic criado e ele já estará na Library (Ctrl+L).

Agora sim, vamos importar as imagens, para isso clique em File – Import - Import to Stage...
(Ctrl+R).
Como gravamos o nome das imagens em uma seqüência númerica, clique apenas na primeira, neste
caso a 001.gif e de Abrir.
O Flash vai detectar as outras e perguntar se você quer importar a seqüência toda, clique em
SIM/YES.
As imagens são rapidamente importadas e você já pode ver no Time Line os 4 Keyframes criados.

Os 4 Keyframes criados (clique)

Clique no Frame 1 e em seguida na imagem.
Então clique em Modify – Bitmap – Trace Bitmap..., a janela Trace Bitmap se abrirá.

Janela Trace Bitmap

A configuração correta do Trace Bitmap para imagens Preto e Branco é Color Threshold 100 e
Minimum Area 1, que determina a tolerância das cores limitando apenas em pegar um tom de cada
cor.

Já o Curve Fit e Corner Threshold, vai variar muito do estilo do traço do artista.
Curve Fit determina o quanto se quer suavizar o traço na hora da vetorização, sendo a opção
PIXEL a mais fiel a imagem, pegando mesmo pixel por pixel.
Isso vai deixar tão fiel que o serrilhado da imagem vai se manter e o vetor vai ficar bem pesado.
Very Smooth é o que mais vai suavizar, podendo levar a perda de detalhes ou deformação de
algumas partes.
Veja abaixo a diferença entre os dois em relação a imagem original.

PIXEL ------------------------------------ ORIGINAL ----------------------------VERY SMOOTH

(repare na deformação do brilho do olho e cabelo)
Corner Threshold, índia se vc quer os cantos mais suaves ou ponte agudos.
Nosso traço é bem grosso, então a configuração Curve Fit e Corner Threshold em NORMAL nos
cai bem, porém se você tem um traço bem fino, talvez seja bom fazer um teste com Tight e Very
Tight que detalham mais.
Bem, com as configurações feitas, clique em OK.
Prontinho. Agora se você clicar fora da imagem e depois clicar no que seria o fundo dela e dar um
DELETE, vai ver que com apenas um clique o fundo é eliminado sem a necessidade de ficar
criando as chatas mascaras que os Bitmaps nos forçam a fazer.
Repita o processo em todos os Frames e para garantir que não esqueceu de arrancar nenhum fundo,
principalmente entre os braços e dedos do personagem, é interessante mudar a cor de fundo de todo
o projeto, para isso vá em Modify – Document e na janela Document Properties, mude a cor em
Background Color.

Mudando a cor de fundo.

Para ver o resultado, volte para a cena cliando em Scene 1 no topo do Time line ou clique Ctrl+E e
abra a Libary (Ctrl+L).
Arraste o Garoto Corre para o centro da cena e diminua bem o tamanho dele usando a ferramenta
Free Transform (tecla Q).
Mantenha SHIFT pressionado enquanto diminui para manter a proporção.

Diminuindo o Graphic Garoto Corre (clique)

Como é um Graphic, precisamos ter mais de 4 frames no Time Line da cena para vermos ele rodar,
então vá no frame 60 e tecle F6 para criar um novo Keyframe e arraste o garoto para a direita até
sair do palco.
Depois, em qualquer ponto entre os dois Keyframes, clique com o botão direito e escolha Create
Motion Tween.

Criando o Keyframe(1) e o Motion Tween(2) (clique)

Tecle Ctrl+Enter para ver o resultado.
Caso tenha funcionado, mas seu personagem não esteja mexendo as pernas, clique no frame 1 e
depois no personagem, então na aba Properties veja se Options for Graphics está em Loop, que é
o correto. Verifique também no frame 60.
Com tudo ok, você pode deletar todos Bitmaps da livraria, eles não são mais úteis e só vão fazer seu
arquivo FLA ficar pesado.
Bem, é isso e você pode baixar o FLA final clicando aqui .
Agora é hora do próximo passo, a pintura!!!!
A pesar de poucas opções, é possível se obter excelentes resultados com as inteligentes ferramentas
existentes no Flash. Logicamente também temos que levar em conta a sensibilidade e dedicação do
artista que efetuará tal tarefa.
A única maneira de se pintar um desenho feito fora do Flash se faz com ele vetorizado, como
explicado no tópico Desenhando>Do Papel para o computador, pois ele não tem suporte para
pintura de imagens Bitmap.
Porém, o sistema vetorial só nos traz benefícios, pois além de mais leve, um simples clique é
necessário para se alterar uma cor, sem que seja preciso a criação máscaras e Layers.
Colocando a mão na tinta, ou melhor, no mouse/tablet
Para esse exemplo, vamos usar o arquivo Pintando.FLA que já contem um Graphic Vetorizado,
clique aqui para baixá-lo.
Você pode também usar um desenho vetorizado seu se preferir.

Desenho que iremos pintar e toda a etapa de pintura (clique)

Com o arquivo aberto, de um duplo clique no desenho para poder pintá-lo vendo a cena de fundo ou
botão direito – Edit para trabalhar só com o desenho

É hora de selecionar a ferramenta Paint Bucket Tool (tecla K), o tradicional baudinho de
pintura que vemos em todos os programas (Figura abaixo A).
Para escolher uma cor, basta clicar em Fill Color (figura abaixo B) que uma paleta de cores se
abrirá.

Paint Bucket Tool e suas opções.

O mais importante a se saber aqui, é a opção Gape Size (figura acima-C) onde você configura o
nível de precisão que será pintado em caso de desenhos com “aberturas”, isto é, quando não se
finaliza muito bem deixando pequeninos espaços onde a “tinta” vai vazar para o lugar que não
deveria e teremos que concertar até fechar tais buracos.
Essa ferramenta inicialmente pode parecer muito útil, porém para desenhos bem finalizados,
detalhados e com pequenos espaços em uma área onde será pintado usando-se a mesma cor, pode
vir a ser uma péssima escolha usá-la.
O Flash irá achar que esses pequenos espaços são furos e não irá pintá-los, interrompendo a pintura
em partes onde duas linhas estão muito próximas.
Na figura abaixo fica claro o que pode acontecer.
 Gape Size – Problema ou Solução?
Pintado com Close Large Gaps, a cabeça da minhoca foi preenchida corretamente mas o anzol foi
interrompido bem antes de preencher tudo pois o Flash considerou a distancia entre as duas linhas
um potencial buraco.
Aqui está bem claro e bastava mais um clique para finalizar a pintura, mas isso geralmente poder
ocorrer em lugares bem pequenos que poderão, talvez, somente ser vistos quando feita uma
ampliação do desenho, o que, por exemplo, pode ser tarde demais no caso do desenho pintado ter
sido usado para uma grande projeção ou num banner publicitário.
Em todas as animações que trabalhamos, deixamos sempre essa opção em Don’t Close Caps.
Ok!, Então com tudo configurado corretamente é só começar a pintura.
Começando a Pintura
Começamos com as cores chapadas e básicas do personagem, no caso do exemplo que estamos
usando, repare que também pintamos alguns de seus contornos de cinza, pois sua roupa seria preta e
pretendíamos manter os contornos aparentes (figura abaixo)
IMPORTANTE: Se você pintar duas áreas diferentes que se toquem, com a mesma cor,elas vão se
fundir e virar uma coisa só, essa também é mais um motivo de termos primeiro pintado o contorno
de cinza.

Adição das cores básicas no personagem

Você poderá também clicar em Custom Colors (figura abaixo A), para ter acesso à janela de cores
personalizadas ou também poderá manter abertas às janelas Color Mixer (Shift+F9) e Color
Swatches (Ctrl+F9), pegando as cores desejadas diretamente daí (figura abaixo B).
É possível também mudar o nível de transparência de uma cor diminuindo o valor do campo Alpha.

Custom Colors, Color Mixer e Color Swatches (clique)

Após as cores básicas terem sido aplicadas, vamos começar a marcar onde iremos acrescentar
sombras e mudar mais algumas cores de contorno.
Isso só o Flash tem (até agora)
Diferente de outros programas de imagens vetoriais como Corel e Ilustrator, o Flash é o único que
conhecemos até o momento que trata linhas e preenchimentos de uma forma totalmente diferente e
por isso mesmo super eficaz.
Quem mexe com isso vai ver, entender a diferença e ver como facilita muito as coisas.

Vamos usar a ferramenta Pencil Tool (tecla Y) (figura abaixo A) configurada como Smooth a
fim de suavizar o traço feito (figura abaixo B) e usar Hairline, o mais fino dos traços para não
atrapalhar na visualização (figura abaixo C). Use também uma cor bem contrastante com a do
personagem (figura abaixo D), ficando mais fácil de ver onde estão os contornos quando formos
removê-los após já tivermos pintado as áreas criadas.
Desligue também a opção Object Drawing (figura abaixo E), pois ele cria os traços agrupados e
dessa forma não vão misturar com o preenchimento, que é o que queremos.

Pencil Tool e suas opções (clique)

IMPORTANTE: Desabilite o Snap to Objects (tecla Ctrl+Shift+;), o ícone de um Imã rosa

localizado no topo ou lateral da tela, quando for fazer os traços.
Como ele força uma aproximação de objetos, vai ficar forçando também seus traços prejudicando o
resultado final.
Com tudo marcado (figura abaixo A), basta pintar as áreas criadas (figura abaixo B) e depois
eliminar os traços com um simples duplo clique sobre eles (figura abaixo C).
 Etapas da adição de sombras no personagem (clique)
Como percebemos a possibilidade de se traçar linhas sobre os vetores e pintar diretamente sobre as
áreas criadas torna o serviço simples e rápido e era essa a característica exclusiva que citamos.
Atualmente, a versão X3 do Corel Draw incorporou algo semelhante, mas ainda achamos no Flash
mais prático e claro, não precisamos ficar saindo do programa.
Você deve ter reparado que mudamos as cores dos contornos do cabelo e outras áreas, para fazer
isso, usamos o Pencil Tool para bloquear a passagem do preenchimento.
Veja na figura abaixo como é simples.

Mundo as cores de alguns contornos (clique)

Primeiro a imagem com o contorno cinza, depois traços feitos usando a Pencil Tool bloqueiam a
passagem de preenchimento para o óculos e do óculos para a pele.
Usando Paint Bucket Tool, pintamos o contorno do cabelo, óculos e então é só deletar o traço.
Repare que cruzamos os traços e fazemos isso para o duplo clique selecionar todos de uma vez.
AVISO IMPORTANTE!!!
Lembre-se que você está fazendo uma animação, então o nível de detalhamentos que der em um
personagem, terá de dar em todos os quadros dele, por isso pense sempre bem no que está fazendo
ok.
Conclusão
Depois de aprender a pintar assim, lembrar de pintura usando Bitmap da até desgosto, mas
infelizmente a tecnologia com vetores ainda não disponibiliza todos os efeitos que podemos dar em
uma imagem, porém para animação geralmente não se precisa mais do que isso, então é só
alegria!!!
Iniciantes na área artística e de design costumam adorar o uso de Degrade/Gradient, usando de
todas as formas possíveis e achando que tudo fica lindo e maravilhoso com ele, mas é exatamente ai
que a maioria acaba queimando o próprio filme.
O uso descontrolado e sem necessidade acaba deixando tudo muito carregado, sem sentido e muitas
vezes um trabalho horrível.
Por um gosto totalmente pessoal, fazemos pouco uso de degrades em nossas animações por achar
que não combina muito com nosso estilo, porém quando é usado, geralmente passa despercebido, e
essa é uma ótima dica: não deixe a pintura em degrade em evidencia demais.
O mais normal é usarmos em céus e alguns detalhes de cenário de forma sutil.
Abaixo um bom exemplo do uso correto e controlado

Uso correto e controlado de degrade (clique)

Numa mesma tomada foram usados 5 tipos de degrades, porém sempre com sobre-tons ou cores
pastel, para não chamar muito a atenção para isso.
O objetivo da cena era passar um ambiente bem grande e quente, por isso o uso de vermelho e
laranja, de cima para baixa na lava, foi aplicado dessa forma justamente para ajudar no efeito de
profundidade, assim como também no céu, mas dessa vez a cor mais clara ficou embaixo simulando
a iluminação que a lava proporciona.
No chão, a combinação laranja e cinza, simula também a influencia da luz emitida pela lava no
cenário.
Já no Carlinhos, o degrade ajuda a dar ainda mais volume as olheiras.
Deu para perceber que com cuidado o degrade trás muitos benefícios e valoriza seu trabalho, então,
como já foi dito, só tente não exagerar.
Mas vamos parar de teoria e vamos para a prática.
Criando um ícone translúcido
A idéia desse exercício veio de um tutorial que lemos a muiiito tempo na revista Digital Designer
onde uma pessoa ensinava basicamente o que vamos aprender.
Achamos muito interessante, pois, criando apenas esse ícone, pode-se aprender tudo o que a
ferramenta tem a oferecer.
Infelizmente não lembramos à edição nem o nome do artista, mas se alguém souber, por favor, nos
mande que teremos prazer em colocar como referência.
Demos uns toques a mais mostrando também opções que vão além do degrade, então vamos lá.
Vamos criar o ícone abaixo, que depois que a Apple introduziu em seu sistema operacional,
ninguém mais parou de copiar :-D
Abra um arquivo novo renomeie o Layer para Base.

Clique na ferramenta Oval Tool (tecla O), certifique-se que Object Drawing está desligado e crie
um circulo com qualquer cor de preenchimento, mas sem contorno.

Para que ele fique um circulo perfeito, mantenha SHIFT apertado enquanto o cria.

Circulo criado (clique)

Agora clique no baldinho de pintura (tecla K) e na escolha de cor de preenchimento, clique no
degrade circular azul que é um dos pré-definidos do Flash.
 Degrade escolhido (clique)
Desligue o Lock Fill para você ter controle do que será pintado e pinte o circulo.

Lock Fill desligado

Esse é um degrade com o centro azul claro indo para preto, então o controle funciona da seguinte
forma, onde você clicar será o centro do degrade.
Clique no centro na vertical, mas um pouco para cima na horizontal, como na figura abaixo.

Pintando o circulo
Vamos mudar a cor do degrade, ao invés de azul para preto, vamos de azul para azul escuro, isso
torna o resultado final mais realista.

Com a Ferramenta de seleção (tecla V), selecione o circulo e abra o painel Color Mixer (Shift +
F9).

De um duplo clique na cor preta da direita na barra de degrade, escolha a cor #000099 e clique fora
do circulo para ver o resultado.

.
Escolhendo o Azul Escuro #000099 (clique)
Se com seu degrade aplicado, você ainda não está satisfeito com o posicionamento dele dentro do
circulo, use a ferramenta Gradient Transform Tool (Tecla F), para fazer os ajustes necessários.
Basta clicar sobre o circulo que ícones de ajuste surgirão, veja na figura abaixo suas funções.
A - Move o centro do degrade;
B - Alarga ou achata o degrade tirando a simetria;
C - Aumenta ou diminui a cobertura geral do degrade;
D - Muda a direção do degrade.
Com os ajustes realizados, crie um novo Layer, de o nome de Brilho, e faça agora um oval Branco
semelhante ao da figura abaixo.
Para alinhar ele ao centro horizontal da Base, selecione Base e Brilho, abra o painel Align (CtrL
+K), e clique em Align Horizontal Center.

Criando e posicionando o Brilho (clique)

Para a base, criamos um gradiente circular e agora para o brilho vamos criar um Linear.
Clique no primeiro que temos na janela Fill Color que vai de branco para preto.

Escolha do degrade Linear (clique)

Ele deverá ser aplicado de cima para baixo no Brilho e para fazer isso, clique, mantenha
pressionado e arraste o mouse.
Você verá uma linha que indica a direção do degrade.

Para deixar perfeitamente reto, mantenha pressionado também a tecla SHIFT durante a operação.
 Aplicando o degrade Linear
Os ajustes com a Gradient Transform Tool (Tecla F) são semelhantes ao circular.

A - Move o centro do degrade;

B - Aumenta ou diminui a cobertura geral do degrade;
C - Muda a direção do degrade.

Até o momento o Brilho está com um degrade de Branco para Preto, mas o que queremos é deixar
de Branco para Transparente, simulando assim um brilho real, então da mesma forma que mudamos
para azul escuro o preto do gradiente da Base, mude o preto do Linear para Branco e coloque
Alpha, que indica a transparência da cor, como zero.
Clique fora para ver o resultado.

Mudando a cor do degrade para transparência (clique)

No final fizemos um degrade de Branco para Branco com transparência, mas e se apenas
colocássemos Alpha Zero no Preto?
Também daria certo, porém a transição de Branco para Preto Transparente iria gerar no meio alguns
tons de cinza não deixando tão homogêneo o degrade, por isso, sempre que for criar degrade com
transparência, procure usar a mesma cor nas duas pontas.
O branco do topo do Brilho está muito forte, use Gradient Transform Tool (Tecla F) para mudar o
centro posicionando um pouco mais para cima, veja a figura abaixo.
 Posicionamento usando Gradient Transforme Tool
Nosso ícone está quase pronto e só falta fazermos uma sombrinha que também deve ser translúcida.
Criando a Sombra
O Flash tem os Efeitos Drop Shadow e Glow para Movie Clip que realizam o efeito que vamos
criar agora, mas como estamos estudando o uso do degrade, é esse o porquê de fazermos tudo do
zero.
Selecione a Base e a copie (Crtl+C).
Crie um Layer novo, arraste ele para baixo da base, de o nome de Sombra, cole a base que copiou
(Ctrl+V - não precisa e nem deve ficar exatamente no mesmo lugar) e pinte com um degrade
circular de branco para preto.

Criando a Sombra (clique)

Para facilitar a visualização, oculte o Layer Base e Brilho clicando nas bolinhas na coluna do
ícone de um olho no Timeline.

Ocultando temporariamente a Base e Brilho

Só com a Sombra visível, clique nela e mude a cor branca do degrade dela para preto e o preto, da
direita, coloque Alpha Zero.

Ajuste do degrade da Sombra

Sua sombra deve estar semelhante a da figura abaixo a esquerda, muito dispersa.
Ajuste isso clicando na cor preta (da esquerda) e arraste para a direita com a sombra selecionada.
Deve ficar próximo a figura abaixo na direta.
 Ajusta na dispersão da Sombra
Ainda com a Sombra selecionada, clique F8 e a transforme num Graphic com nome Sombra.
Isso vai nos ajustar a controlar o nível de transparência e cor da sombra.

Torne visíveis os Layers ocultados e posicione a sombra um pouco para baixo e direita em relação a
Base.

Posicionamento da Sombra
Como transformamos a Sombra em Graphic, agora fica fácil darmos transparência nela como um
todo ou mudar a cor da sombra deixando o efeito translúcido mais real.
Para dar transparência, selecione a sombra e em Properties (Ctrl+F3) vá em Color – Alpha e
regule quanto quer.

Colocando transparência
Para mudar a cor vê em Color – Tint e selecione a Cor e a intensidade que deseja aplicar.

Mudando a Cor
Para mudar a cor e dar também transparência, vá em Color – Advanced – Settings....
Na janela que se abre, ajuste a cor e Alpha como desejar.

Mudando cor e aplicando transparência (clique)

Prontinho, seu ícone translúcido está feito.
Conclusão
Acreditamos que com esse simples exercício, tudo o que pode ser feito em relação a pintura com
degrade foi mostrado, faltando apenas essas ultimas dicas:
- é possível colocar mais cores no degrade apenas clicando em qualquer lugar logo abaixo da barra
com o degrade;
- para deletar alguma das cores que adicionou, clique arraste ela para baixo;
- para mudar um degrade linear para circular ou vice e versa, escolha o que deseja em Type;
- Lock Fill serve para quando você quer continuar um degrade de um elemento para outro.
Você usa o Conta Gotas (tecla I) para pegar o degrade, aplica no outro elemento e ele manterá as
coordenadas do Gradient Transform Tool (Tecla F) aplicadas no primeiro.

Bem, é isso, divirta-se e cuidado com os exageros.

Em nossos trabalhos, só usamos Graphics por suas vantagens no caso de animação e por ser
exportado facilmente para qualquer tipo de mídia e agora vamos ver como montamos Graphic
repleto de elementos.

Na Figura abaixo você pode ver uma cena com apenas 7 Layers sendo que em 3 (Carro, Rua Frente
e Rua Fundo) usamos Graphics animados.
 Cena usando os Graphics Carro, Rua Frente e Rua Fundo (clique)
Os Layers Rua Frente e Rua Fundo contem 1 Graphic cada que tem em sua animação as listras da
estrada, já o Layer Carro possui o Graphic Fusca com 15 Graphics Internos
Por que um Graphic com tudo isso?
Queríamos que ao mesmo tempo em que o Fusca andasse na tela várias coisas acontecessem nele e
animar na Cena cada Graphic num Layer separado seria muito ruim pois além de nossa área de
trabalho ficar poluída demais com 22 Layers, se resolvêssemos mover o Fusca para o outro lado ou
espelhá-lo, imagine o trabalho de ter que arrumar todos os Graphics.
Sendo assim, criamos um Graphic para cada acontecimento, depois criamos o Graphic Fusca e
colocamos tudo dentro dele resolvendo qualquer dor de cabeça que pudesse vir a acontecer.
Para você entender melhor cada parte e o que cada Graphic contem, veja a Figura 18.4 onde
abrimos todos os Graphics do Fusca e numeramos todos os seus quadros internos.

Graphic Fusca com todos seus Graphics Internos (clique)

Clicando aqui , você pode baixar o arquivo completo do Fusca.

Seguindo a imagem acima e com a imagem de referencia que também está na Library, você poderá
tenta remontar todo esse detalhado Graphic.
Junto também está o arquivo final que lhe ajudará ainda mais e também serve de estudo.

Conclusão
Dominando bem o uso de Graphics pode-se enriquecer muito as animações e ter muito menos
trabalho do que se parece na edição final de sua animação, agora o número de Graphics que serão
feitos dependerá da sua necessidade e vontade, coisa que, como se nota, não falta para Rodrigo
Piologo, quem desenha e pinta todas as animações do Mundo Canibal, afinal só assim você também
poderá se tornar um “SuperMegaUltraPowerGraphicer” :-D
A Linha Guia ou Guide, é muito usado por nós por ser algo extremante útil e fácil de usar, porem
costumamos usá-lo mais em objetos do que em personagens.
Com ela criamos caminhos onde nossos gráficos irão percorrer sem a necessidade de criar vários
Keyframes.
A diferença clara e o por que de usar Guides, pode ser vista nas duas animações abaixo.
Na animacao 01, feita usando-se Guide, pode-se ver que o avião atravessa toda a tela fazendo um
suave rasante e acompanhando toda a trajetoria do caminho.
Já na animação 02, onde usamos 3 Keyframes, um na saida, um pro rasante e um para o final, a
animação ficou bem “dura” e mecânica.
A diferença é que com a Guide, nos desenhamos o caminho, uma linha curva que automaticamente
o Avião seguiu, e já com Keyframes, isso é impossível, pois é sempre gerado um movimento linear
entre dois pontos.
Mas agora vamos fazer um exemplo onde ficará mais fácil ainda de entender e será visto como é
simples de se fazer.
Use um arquivo seu com algum desenho convertido em Graphic ou clique aqui e baixe o nosso
aviàozinho.

Com arquivo aberto, use a ferramenta Pencil Tool (Tecla Y) e crie o caminho que desejar.
Procure sempre fazer usando o menor tamanho para o traço, que é o Hair Line, pois assim se sabe
exatamente onde o Graphic passará.
Você pode também desenhar sua Guide usando as outras ferramentas de desenho (Line, Pen,
Brush, etc).
De um duplo clique sobre o nome do Layer e renomeie para Guide.

clique

Em seguida, de botão direito do mouse e selecione Guide para avisar que esse Layer é uma Guia.
Veja que o ícone do Layer mudará para uma régua “T” ou martelinho como muitos por ai dizem :-
D.
Agora crie um Layer novo (Insert – Timeline – Layer), renomeie ele para Avião e clique e arraste
ele para baixo e levemente para a esquerda do Layer Guide.
Repare que o ícone da Guide vai escurecer informando que você está vinculando o Layer Avião a
Guide que é isso mesmo que queremos.
A régua T muda para um Bolina com um tracejado, indicando que funcionou.

Abra agora sua Library (Ctrl+L) e arraste o Avião para este Layer.
Certifique-se que Snap To Objects está ligado (View – Snapping – Snap to Objects ou ícone do
Imã no topo ou lateral direito da tela), pois ele nos ajudará a posicionar corretamente o Avião no
caminho.
Vamos fazer o avião vir da Esquerda para Direita do caminho criado, então o arraste para o começo
do caminho no lado Esquerdo posicionando o seu centro (bolinha Branca) bem no começo da linha.
Com o Snap ligado, você vai sentir que será “puxado” para o local correto,

Até agora fizemos tudo isso no Frame 1, porém precisamos de mais Frames para poder fazer o
Movimento, então clique no Frame 60 do Layer Guide e tecle F5 para inserirmos Frames até ai.

Faça isso também no Layer Avião.

Como o que será movimentado será o Avião, ainda no Frame 60 do Layer dele, tecle agora F6
para criar um Keyframe e arraste o Avião para a outra ponta do caminho, na direita.
Não é necessário criar um Keyframe no quadro 60 da Guide porque ela não se movimentará.

clique
Se não funcionar, veja se no primeiro ou ultimo Keyframe o Avião está encaixado corretamente na
ponta do caminho que você desenhou.
Com tudo certo, apesar de agora o Avião já estar seguindo o caminho, ele ainda não segue o sentido
do que foi desenhado, como acontece na Animação 01.
Para que isso acontece, basta clicar em qualquer ponto do Motion Tween, e em Properties
selecionar Orienth to Path.

Prontinho, resolvido!
Dicas Adicionais
-Você pode aumentar, diminuir, rotacionar, dar efeitos e etc normalmente no seu Graphic nos
Keyframes do Avião.
-Se a partir do Frame 61 você quiser continuar sua animação, mas sem o uso do Caminho, basta no
Frame 61 do Layer Guide você inserir um Blank Keyframe (F7).
-Não é possível usar Máscaras e Guias juntos, mas para resolver isso, basta criar a animação toda
que se vai usar Guide dentro de um Graphic e então usar a Máscara no Timeline principal ou até
mesmo dentro de um outro Graphic.
-Outra forma de criar um Layer Guide, é selecionar um Layer normal e clicar no ícone Add Motion
Guide. O Layer já criado vinculado ao debaixo.
É isso ai pessoal e agora “sigam seu caminho” (Nossa! Essa foi péssima).
As máscaras são usadas para definimos o que deve ou não aparecer, sendo que somente o que
estiver abaixo dela será exibido.
Ela tem infinitas utilidades e usamos muito em nossas animações.
Mask pode conter qualquer tipo de gráfico e até mesmo um Movie Clip animado, o que pode gerar
efeitos bem interessantes, só não esqueça que se for usar Movie Clip, eles não são exportados para
formato de vídeo.
O uso de Mask é muito simples de criar e usar, podendo ser resumido em 5 etapas:
1 – Crie um Layer;
2 – Transforme-o num Layer Mask;
3 – Desenhe a área que deve exibir o conteúdo do Layer abaixo;
4 – Crie o Layer abaixo da Mask onde colocará o conteúdo a ser exibido;
5 – Arraste esse Layer para o Layer Mask para vinculá-lo.
Mas vamos fazer um passo a passo e conhecer tudo em detalhes
Tomelirolla saindo do buraco
Antes de começar, clique aqui e baixe o arquivo que usaremos.
Ele possui um cenário, o Tomelirolla já animado e os Graphics que foram usados nele.
Nosso exercício consiste apenas em fazer nosso personagem Tomelirolla sair de um buraco no chão,
mas graças ao uso de Maks, não precisaremos nem mesmo furar o Graphic do cenário para
conseguirmos esse efeito, então vamos lá.
Com o arquivo e Library aberta (Ctrl+L) , arraste o cenário para a cena e o centralize usando o
painel Align (Ctrl+K) e clicando em To Stage: nos ícones Align Horizontal e Vertical center.

Alinhando ao centro
Com duplo clique no nome Layer, renomeie ele para Cenário, apenas para organização visual.
Crie um novo Layer (Ícone ), renomeie para Tomelirolla e arraste o Tomelirolla Animado
gordinho da Library para a direção do buraco, mas fora e abaixo dele, veja a figura.
 Posição do Tomelirolla
Antes de criar a máscara, vamos animar o Tomelirolla, para isso vamos adicionar Frames até o
quadro 40 (F5 no Frame 40 de cada Layer).
A figura abaixo indica o que faremos, primeiro para cima e depois para baixo, imaginando que ele
estivesse saindo do buraco.

O que será animado (clique)

Clique no Layer Cenário e bloqueie-o clicando na bolinha na direção do cadeado a fim de evitar que
mexamos nele sem querer.
Volte para o Layer Tomelirolla, e crie um Keyframe (tecla F6) no quadro 10 e arraste ele para
cima.

Layer Cenário Bloqueado e Tomelirolla posicionado no Frame 10 (clique)

Agora crie um Keyframe no quadro 20 e posicione Tomelirolla na calçada.
Clique com o botão direito em qualquer ponto entre os Keyframes 1 e 10 e selecione Creation
Motion Tween para criarmos a interpolação de movimento entre eles.
Faça isso também entre o 10 e 20.

Posição de Tomelirolla no Frame 20 e criação da interpolação de movimento entre os Keyframes

 (clique)
Criando a Máscara
Finalmente vamos criar a máscara, então crie um novo Layer acima do Tomelirolla, de o nome dele
de Mask e com Botão direito sobre ele escolha Mask para transformar o Layer em Layer de
Máscara.

Criando o Layer Mask (clique)

Veja que o ícone do Layer muda, Tomelirolla foi vinculado automaticamente a Mask e ele
bloqueou ambos os Layers.
Rode sua animação (Ctrl+ENTER).

Animação até o momento (clique Play)

Repare que mesmo criando o Layer Mask, Tomelirolla ainda não sai do buraco.
Isso acontece porque deixamos Mask sem nada e precisamos criar a área que queremos exibir, isto
é, uma máscara.
Apenas para um teste rápido e você já começar a entender o que faremos a seguir, desbloqueie o
Layer Mask e crie um quadrado sem contorno como na figura abaixo.
Uma dica, nós sempre criamos máscaras com cores bem vibrantes para não nos confundirmos com
outros itens de cena.
Gere sua animação (Ctrl+ENTER).

Quadrado criado no Layer Mask...

Veja que Tomelirolla parece somente onde foi criado o quadrado e é exatamente este o
funcionamento da máscara.
Agora que você entendeu isso, o que temos que fazer para que o efeito dele saindo fique perfeito é
refinar a máscara criada, fazendo uma certinha com a curva do buraco, mas ao invés de redesenhar,
que também seria correto, vamos pegar do nosso próprio cenário, então delete o quadrado, ele não
será mais útil.
Desbloqueie o Layer do Cenário, selecione e copie-o (Ctrl+C) e cole-o exatamente no mesmo
lugar, mas no Layer Mask (Ctrl+Shift+V).
 Cenário colado no Layer Mask (clique)
Nosso Cenário é um Graphic, então para podermos selecionar apenas uma parte dele, temos que dar
um Break Apart para transformá-lo num Shape simples, para isso, com ele selecionado, clique Ctrl
+B ou vá em Modify - Break Apart.
Clique fora dele para desfazer a seleção, clique depois apenas no interior do buraco e pinte ele de
verde forte.

Parte interna do buraco pintada de verde

Com o interior do buraco ainda selecionado, de um Ctrl+X para copiar e recortar, agora clique
direto em qualquer Frame do Layer Mask para selecionar todo o conteúdo deste Layer e clique
Delete para apagar tudo.
Clique Ctrl+Shift+V para colocar o interior do buraco que recortamos exatamente na mesma
posição.
Veja sua animação agora.

Layer Mask apenas com o interior do buraco

Animação até o momento (clique Play)

Apesar do contorno do buraco estar certinho, o problema agora é que Tomelirolla só aparece lá,
então temos que aumentar a máscara, o que é muito simples de fazer, basta, no Layer Mask, criar
um quadrado sem contorno da mesma cor, que comece do meio do interior do buraco para cima e
mais largo que ele (veja a figura abaixo).
 Quadrado criado para aumentar a área da máscara (clique)
Rodando a animação você verá que estamos quase lá, mas falta a “aterrissagem”.
Para solucionar este problema, ou criamos um Keyframe no quadro 10 do Layer Mask e
aumentamos ainda mais a máscara ou, mais fácil ainda, inserimos um Blank Keyframe (F7) neste
mesmo quadro, o que vai resultar no apagamento da máscara, e a partir deste ponto tudo é exibido.

Blank Keyframe inserido no quadro 10 do Layer Mask

Dicas adicionais
- Você pode vincular quantos Layers quiser numa mesma máscara;
- Para desvincular um Layer, basta clicar e arrastar levemente para baixo e esquerda;
- Às vezes quando se cria dois shapes da mesma cor, um sobre o outro, ao se gerar a animação o
resultado pode aparecer errado, isso geralmente acontece porque ao criar o segundo shape, você o
manteve selecionado e ele ainda não se fundiu ao anterior, clique fora dele que o problema será
solucionado;
- Para ver o resultado da máscara direto no Timeline, basta bloquear o Layer dela e de todos que
estão vinculados a ela;
- Caso a máscara esteja atrapalhando sua edição, impedindo de ver o que tem abaixo dela, esconda-
a temporariamente clicando na bolinha na direção do olho ou no quadradinho para ver apenas o
contorno.

Opções para esconder e exibir apenas o contorno de um Layer

Conclusão
Esse foi o funcionamento básico das máscaras, mas as possibilidades do uso delas são infinitas
como: transições de cena, o queimar de uma pavio, espelho, spot de luz, reflexo na água e etc.
Não esqueça que você também pode as animar e com isso aumentar ainda mais as possibilidades de
uso.

Como descrevemos no tópico Desenhando – Desfocagem de Movimento, essa deformação forçada

que se usa em animação ajuda em diversos momentos além de deixar ainda mais interessante seu
trabalho.
Dessa vez vamos ver como realizar uma desfocagem usando apenas um desenho e deformações
feitas direto no Flash.
Muita gente quando descobre a interpolação de movimento que o Flash cria, o Motion Tween,
acaba usando apenas isso para tudo.
Esquecendo de estudar animação tradicional, geralmente essas animações ficam lentas e com uma
movimentação totalmente mecânica
Pra mostrar como é diferente animar usando só interpolação de movimento e animação tradicional,
vamos fazer algo realmente besta e simples, mas que demonstrará uma grande diferença entre as
duas técnicas.
Olhando pro outro lado
É isso mesmo que vamos fazer, uma simples movimentação de dois olhos olhando de um lado para
o outro.
Para começar, crie 3 Layers e de o nome do primeiro de Pupila 1, o segundo Pupila 2 e do
terceiro de Globos.

Layers Criados

Clique no Layer Globos e usando a Oval Tool (Tecla O) desenhe dois ovais brancos com
contorno preto que representam os Globos oculares numa silhueta de meio perfil.
Pode deixar com jeitão de Cartoon e se for seguir a imagem abaixo, desenhe primeiro o da esquerda
e depois o da direita para um sobrepor o outro corretamente.

Globos oculares criados

Agora bloqueie este Layer clicando na bolinha em na coluna do cadeadinho, clique no Layer Pupila
1 e crie um circulo Preto sem contorno.
Com ele selecionado, tecle F8 para transformá-lo num Graphic e de o nome de Pupila.

Pupila criada (clique)

De um Ctrl+C para copiar essa Pupila, clique no Layer Pupila 2, cole-a (Ctrl+V) e posicione igual
à figura abaixo, como se os olhos estivessem olhando para a direita.
Você pode diminuir também um pouco essa segunda pupila usando a Free Transform Tool
(tecla Q) para deixar mais interessante.

Segunda Pupila posicionada no Layer Pupila 2

Movimentando
Vamos adicionar Frames para podemos animar, então clique no Frame 50 de cada Layer e tecle F5.

Adicionado 50 Frames para cada Layer

Para visualizarmos melhor o resultado, vamos deixar um pouco as pupilas paradas e depois vamos
fazê-las movimentar para o outro lado, então crie Keyframes (Tecla F6) no Frame 10 apenas no
Layer Pupila 1 e 2 e NÃO OS MOVIMENTE.
Não é necessário criar Keyframe nos Globos, afinal não vamos animá-los.
Crie novamente para esses dois Layers Keyframes no Frame 14 e agora sim movimente as duas
Pupilas pra o outro lado.
Clicando botão direito do Mouse em qualquer ponto entre os dois Keyframes criados do Layer
Pupila 1 e 2, escolha Create Motion Tween para gerar a interpolação de movimento entre os eles.

Keyframes e Motion Tween criados (clique)

Antes de gerar sua animação, certifique-se que seu projeto está a 30 quadros por segundo na janela
Document Properties (Ctrl+J) e Tecle Ctrl+ Enter para ver o resultado até o momento.

Frame Rate 30fps

Até agora fizemos o que a maioria das pessoas fariam no caso de precisar animar algo assim, porém
só fizemos isso para comparar com o que faremos agora.
Animando Manualmente
Remova os Motion Tweens criados clicando botão direito do Mouse e Remove Tween em qualquer
ponto entre os dois Keyframes dos dois Layers.

Removendo a interpolação de movimento

Agora, crie mais um Keyframe para Pupila 1 e 2 no Frame 12 de cada um, ligue o Onion Skin e
ajuste para que você veja o quadro 10 e 14 ao mesmo tempo.

Criando os Keyframes no Frame 12 e ligando o Onion Skin

Com a Free Transform Tool (Tecla Q), estique, achate e posicione as pupilas do Frame 12
deixando-as uma ponta na posição do Frame 10 e outra na do Frame 14.
Veja na figura abaixo como deve ficar.

Deformando as Pupilas
Prontinho, sem dar Motion Tween em nada, de Ctrl+ENTER e confira agora o resultado.
Eu não sei quanto a vocês, mas nós achamos esse resultado muito mais interessante do que
simplesmente usar o Motion Tween, e ainda simula um desfoque das pupilas.
Conclusão
Você pode usar essa técnica para as mais diversas situações, porém nós aqui quando a usamos
geralmente são em objetos, em personagens preferimos desenhar.
Abaixo você vê o uso em uma das cenas da animação Macumbéd Baby.
Para virar a faca de lado e antes dela o atingir, usamos a mesma lógica usada acima.
Então é isso, agora pense bem antes de aplicar um Motion Tween, ele pode facilitar o
trabalho, mas muitas vezes o resultado é muito melhor no velho e tradicional modo do quadro
a quadro.
Ah! Se quiser, baixe aqui o arquivo final criado neste tópico.
O Efeito Glow(Brilho) no Flash é facilmente conseguido quando precisamos usá-lo em um
Movie Clip, bastando selecionarmos o Movie Clip criado, abrir o painel Filters em Properties
( Ctrl+F3), escolher Glow e ajustar.

Aplicando Efeito Glow em um Movie Clip (clique)

O resultado é bem legal e da pra ser usado sem problemas, porém, como, a nosso ver, o Flash cria
um Bitmap para isso, quando se começar a dar muito zoom, você perceberá um pouco de serrilhado
e isso sim pode ser um problema.
Então o que vamos passar aqui é uma outra forma de criar o mesmo efeito, mas de forma vetorial,
evitando este problema e conhecendo uma nova ferramenta que pode ser útil também para muitas
outras coisas.
Criando um Sabre de Luz Jedi!!!
Nada melhor e mais divertido para criarmos um Glow do que fazer um Sabre de Luz Jedi, então
vamos começar mudando a cor de fundo de nosso projeto para Preto a fim de facilitar a
visualização.
Mude isso em Document Properties (Ctrl+J ou Modify – Document...) Background Color.
Deixe também o tamanho em 320x240 para assim trabalharmos na mesma proporção e facilitar seu
entendimento.

Mudando a cor de fundo para Preto

Agora vamos criar a base do Sabre de Luz, que será um retângulo Branco sem contorno com os
cantos arredondados, usando a Rectangle Tool (Tecla R).
Ajuste o nivel de arredondamento para 10 clicando no ícone em Options logo abaixo da caixa
de ferramentas.
Crie com a opção Object Drawing DESLIGADA.

Selecionando o nível de arredondamento

Crie o retângulo quase na altura total da Cena e bem fino, mais ou menos como na figura abaixo.
 Base do Sabre de Luz criado (clique)
Vamos dar forma afunilada a essa base, selecionando ela toda, clicando em Free Transform
Tool (tecla Q) e em Option – Distort.

Opção Distort
Agora mantenha a Tecla Shift pressionada, clique na aresta superior esquerda e arraste para a
direita (o uso do Shift mantém a simetria dos dois lados).
É provável que ainda fique muito gorda, então use a Free Transform Tool (tecla Q) para afinar
um pouco clicando e arrastando a aresta lateral.
O resultado deve ser algo semelhante ao da figura abaixo.

Ajuste na base do Sabre de Luz (clique)

Com a base seleciona, a copie (Ctrl+C), renomeie o Layer para Base, o bloqueie e oculte-o.
Crie um Layer novo , arraste para baixo da Base, de o nome de Glow e cole a base copiada
exatamente no mesmo lugar (Ctrl+Shift+V).

Bloqueando e ocultando o Layer Base, e o colando no Layer Glow(clique)

Vamos agora finalmente fazer o Glow.
Com a base copiada selecionada, vá em Modify – Shape – Soften Fill Edges.
 Modify – Shape – Soften Fill Edges
Como o nome mesmo diz, a função dessa ferramenta é suavizar as bordas da figura criada e
por esse motivo só funciona com figuras desagrupadas, por isso que criamos nossa base com o
Object Drawing desligado.
Na janela que se abre vamos configurar o nível de qualidade do nosso Glow definindo a
distancia (Distance) e numero de repetições (Number of Steps).
Para ficar fácil de você entender como funciona, veja na figura abaixo dois tipos de configurações.

Exemplos do uso de Soften Fill Edges (clique)

Na figura da esquerda, o Glow se propagara pela distancia de 25 pixels, porém com apenas 5
duplicatas, onde cada um tem um nível mais baixo de cor Alpha, simulando assim a suavização da
borda.
Com poucas repetições, fica visível e muito ruim o efeito final.
Já na esquerda, temos 25 repetições para a distribuição do nível de cor Alpha e também uma
repetição bem mais próxima da outra, deixando assim o efeito bem mais homogêneo mesmo com
nível alto de zoom que estamos visualizando neste exemplo.
Então, de forma resumida, mais repetições significa mais qualidade, mas alguns problemas
podem ocorrer quando você colocar o valor das repetições maior do que o da distancia, geralmente
em figuras complexas que você esteja aplicando o Soften Fill Edges, afinal, como colocar, por
exemplo, 50 duplicatas numa distancia de 25 pixels?
Cada uma precisaria aumentar meio pixel,o que é um pouco complicado :-D
Bem, mas vamos voltar para o nosso Sabre de Luz e configurar Distance 25, Steps 25, Direction –
Expand (pois queremos expandir as bordas) e dar ok.

Soften Fill Edges aplicado em nossa base(clique)

Selecione todo o Glow criado e converta em Graphic (tecla F8) dando o nome de Glow.
Convertendo em Graphic
Agora desoculte o Layer Base, clique no Graphic Glow , vá em Color na barra Properties (Ctrl
+F3), escolha Tint, uma cor que gostaria de usar para seu Sabre de Luz e a intensidade da cor.
Prontinho, sua arma Jedi está feita.

Escolhendo a cor para o Sabre de Luz (clique)

Dicas Adicionais
O motivo de fazermos o Glow branco e transforma-lo em Graphic foi para podermos usar o Tint e
assim mudar com facilidade a cor do mesmo, caso contrario, teríamos que refazer todo Glow se
resolvêssemos mudar a cor dele.
Num zoom muito aproximado, o Bitmap, como foi dito, pode parecer serrilhado.
No caso do Vetor, poderemos ver as repetições, então, se você vai dar um zoom muito grande no
que será exibido, já crie sua figura bem grande, assim terá bastante espaço em Pixel para poder
colocar mais repetições.
Se você fizer algo usando Dégradé /Gradient com Alpha, a suavização também funcionará
perfeitamente.
Veja abaixo uma seqüência de quadros simulando uma fumaça onde na base foi aplicado um
Dégradé Linear de cima para baixo com Alpaha Zero na cor superior.

Conclusão
Nós evitamos ao máximo usar Bitmaps em nossos trabalhos, por isso essa ferramenta é muito
interessante e esperamos que seja útil para você também.
Clique aqui se quiser baixar o arquivo final e abaixo uma seqüência de quadros da animação
Bosta Wars III quando a espada de João Que Nobi amolece.

O som numa animação tem uma importância enorme no que se pretende mostrar.
Toda a atmosfera de uma cena pode ser melhor sentida apenas com uma única musica de fundo
sobre toda a animação, o que também chamará muito mais atenção do espectador.
É claro que existem infinitas e ótimas animações “mudas” pelo mundo todo, porém nesse caso o
conteúdo tem que ser realmente interessante para manter alguém por mais de um minuto na frente
da tela sendo isso pior ainda quando o assunto é Internet, onde ninguém tem paciência de esperar
nada.
Em nossas animações o som tem um papel crucial e é usado exaustivamente tanto nos efeitos como
nos diálogos dos personagens.
Sem contar os diálogos, os efeitos e trilhas musicais são as ultimas coisas que se deve colocar numa
animação.
Isso deve ser feito porque se você quer saber se uma piada ou cena está realmente funcionando, ela
deve funcionar sem o áudio.
Essa é uma ótima forma de testar seu trabalho e quando dá certo você sempre diz; “Nossa! Imagina
então quando colocarmos os efeitos” . ;-)
Nós aqui do Mundo Canibal sabemos que um dos grandes destaques de nossas animações são as
vozes, por isso um bom equipamento é fundamental.
Para se captar um som de qualidade, no mínimo deve-se ter um bom microfone e uma boa placa de
som.
Para quem entende bem de áudio, uma mesa de som também é fundamental.
Porém, esse equipamento pode acabar saindo caro, foi ai que Tomi Terrata, o Musiquêro do
Mundo Canibal, nos mostrou uma ótima solução profissional com um preço bem acessível.
O que usamos atualmente é um microfone Samson USB que, justamente por ser USB, elimina a
necessidade de uma cara placa ou mesa de som, basta plugar e é só alegria.
Além disso compramos os outros acessórios listados abaixo e tudo não chegou a R$ 700,00 .

Microfone C01U(para PC e MAC) : o legal dele é que é USB, isto é, já fica digital direto evitando
ruídos(clique aqui para detalhes do produto);

Anti-Shock SP01: Aquela aranha que fica envolta do microfone;

Pop Filter PS01: Uma proteção que parece ser de meia calça e serve para amenizar sons tipo quando
se pronuncia palavras que começam com "P" que costumam estourar.

Tripé: Esse é um tripé simples para microfone encontrado em qualquer loja de instrumentos
musicais.
Compramos na www.golinhomeaudio.com.br onde fomos muito bem atendidos e recebemos
muito rapidamente os equipamentos.
Você pode encontrar os Pop Filters também aqui: www.sabrasom.com.br
Bem, isso é exatamente o que usamos hoje para as dublagens e captação de algum som.
AH! IMPORTANTE!
Pode parecer estranho, mas o microfone vem com um CD com um programa e tal, mas o Drive para
instalação eu é bom mesmo não vem (vai entender!!!).
Então, como é meio chato achar isso no site, aqui está o link direto para a página:
http://www.samsontech.com/main/misc.cfm?pageID=45

Para se ter uma boa qualidade de gravação de áudio é indispensável um bom equipamento, como já
falamos no tópico Áudio – Equipamentos, e para a edição, tratamento e aplicação de efeitos
também precisamos de um bom programa, porem nesse caso temos a possibilidade de ter algo bom
e o melhor, de graça.
É o caso do Audacity, um pacote completo para edição que não deixa nada a desejar em
comparação a programas pagos como o conhecido Sony Sound Forge.

Audacity – Oba! É Grátis e com versão em Português (Clique)

Então clique aqui para baixar o Audacity, instale-o e vamos começar.
Gravando
A interface do Audacity é bem simples, intuitiva e para começar a gravar basta clicar no ícone

Gravar e em Parar para interromper a gravação.

Por padrão de instalação, o Audacity grava em MONO, para mudar para Estereo, vá em Editar –
Preferências (Ctrl+P) e na aba Dispositivos, mude Canais para 2 (Estéreo).
Também é ai, em Dispositivo, que você escolhe o equipamento que usara para gravar. Caso esteja
usando uma placa de som e microfone básico, deixe em Mapeador de som da Microsoft – Input.
Na imagem você verá Samson USB Mic que é o que usamos e citamos em Equipamentos.
Você só precisará fazer isso uma vez mantendo essa configuração para as próximas vezes que usar o
programa.

Configurando equipamento e canais de gravação

O mais importante na gravação é não deixar o som “estourar”.
Para acompanhar e evitar isso, deve-se ficar de olho na barra superior direita que mostra a entrada
de áudio estéreo, que não pode chegar ao final.
Abaixo a figura mostra no quadrado verde parte do áudio corretamente gravado e no vermelho onde
estourou.

Áudio estourando no final da gravação (clique)

sso acontece porque a entrada de áudio está muito alta para o tipo de som que está se gravando
naquele momento.
Regule a entrada de áudio clicando e arrastando para a esquerda, no caso de querer diminuir, a barra
do controle Volume de Entrada.

Ajuste do volume de entrada

Não existe um padrão ou regra, como já foi dito, depende do que está sendo gravado e você sempre
 terá de regular.
Se um mesmo personagem vai falar e em seguida gritar, como no exemplo acima, grave as duas
falas separadamente usando a regulagem certa para cada uma, evitando assim o estouro.
Exemplos claros disso em nossos personagens podem ser vistos no Sr. Donizildo que sempre está
gritando, com isso temos que diminuir a entrada, e no Whatahell que fala baixo e por isso
mantemos o volume no máximo.

Sr. Donizildo e Whatahell

(vozes de Phelippe G. Neto)
Se você está usando um equipamento como o nosso, Microfone Samson C01U, faça esse ajuste no
programa Softpre abrindo-o juntamente com o Audacity.
Ele possui um alerta CLIP que pisca quando o áudio estourou em algum momento (clique nele para
parar de piscar).
Nunca tivemos a oportunidade de usar esse programinha com outro equipamento, então não
sabemos dizer se funciona, mas não custa nada você tentar ;-)

Regulagem de entrada usando o Softpre (clique)

Com seu áudio gravado, você pode usar a Ferramenta de Seleção para selecionar e copiar, colar ou
deletar partes da gravação.
Para selecionar basta clicar e arrastar.

Selecionando parte da gravação (clique)

Tirando ruídos
Dependendo do equipamento e/ou regulagem, a gravação pode conter ruídos.
Para tirar isso, selecione todo o áudio (Ctrl+A) ou a parte que quer limpar e vá em Efeitos –
Remover ruído... .
A janela Remoção de ruído vai abrir e nesse primeiro momento você deve clicar em Perceber
Perfil do ruído para que o Audacity faça uma analise da gravação.
 janela Remover ruído (clique)
Feito isso, entre novamente em Remover Ruído e use a barra inferior para ajustar o nível de
filtragem.
A barra é bem sensível, então não exagere muito, vá dando preview até que esteja satisfeito e então
tecle Remover ruído.

Ajustando o nível de filtragem

Aplicando efeitos
Todo mundo nos pergunta como fazemos a voz do Treco, o Narrador do Mundo Canibal e é isso
que veremos aqui.

Treco – O Narrador do Mundo Canibal

(voz de Rodrigo Piologo)
Como temos vários personagens mas apenas quatro pessoas para fazer todas as vozes, e isso já
incluindo nós dois, então em muitas vozes, além de já as fazermos diferente, também aplicamos
efeitos de PITCH para afiná-las ou engrossa-las.
O processo para aplicação do efeito é basicamente como o de Remover ruído, depois da área
selecionada, vá em Efeitos – Alterar altura (pitch)... .
Igualmente simples, se quiser afinar a voz, basta arrastar a barra inferior para direita e no caso de
engrossar, para esquerda.
Você pode também entrar com os dados manualmente nos campos acima, mas eles servem
principalmente para você anotar a configuração usada em determinado personagem e assim sempre
aplicar igual nas futuras gravações.
Infelizmente o Audacity ainda não tem um sistema para já deixar gravado os ajustes aplicados.
 Janela de efeito Alterar altura (pitch)
No caso do Treco, feito pelo Rodrigo, o nível de Pitch aplicado é bem baixo, tanto que se você o
ouvir fazendo, vai achar que é a voz final.
Aplicamos efeitos em muitos dos nossos personagens e principalmente nas crianças, porém vozes
como do Boby, Whatahell, Donizete, Sr. Donizildo, Monstro Jackson, (feitas por Phelippe G. Neto),
Carlinhos, Direitêro (feitas por Rogério Vilela), Palhaço Elézio (feita por Ricardo Piologo) e Gordo
Bobo (feito por Rodrigo Piologo) não possuem efeito algum, entrando ai o talento de cada um.

Rodrigo Piologo Rircado Piologo Rogério Vilela Phelippe G. Neto

Esse é apenas um dos muitos efeitos existentes e que podem ser combinados entre si gerando os
mais diferentes e interessantes resultados.
Ouvindo em Loop
O Audacity tem um “segredo” de uma coisa boba e que perdemos um bom tempo para descobrir e
por isso que vamos citar aqui.
As vezes quando se grava um som, principalmente uma musica, queremos dar Play e ficar ouvindo
em loop, porém esse botão fica bem escondido no programa.

É necessário teclar SHIFT para que o ícone Play mude para Loop .
Não custava nada um botãozinho a mais, né! :-D
Conclusão
Infelizmente nosso conhecimento em gravação e tratamento de áudio limita-se praticamente nisso,
porem como você já deve ter observado, existem muitas outras coisas que podem ser feitas no
Audacity, então fique a vontade para testar e se descobrir algo interessante, nos mande ;-D
Trabalhar com som no Flash é extremamente fácil, podendo-se importar os principais tipos de
arquivo de áudio incluindo o adorado MP3.
Sempre gravamos nossos sons com alta qualidade e se você acha que isso irá “pesar” na animação,
não se preocupe, pois no próprio Flash há a opção de escolher o formato de áudio que será
publicado em seu filme, conforme veremos mais adiante.
Ao importar os arquivos eles vão todos para a Library (Ctrl+L) e um dos modos mais simples de
usá-los em sua animação é simplesmente clicando sobre ele e o arrastando para a cena. Ele será
colocado no Layer e Frame selecionado.
 Arquivo sonoro na Library e sendo exibido no TimeLine (clique)
Uma outra maneira de incluir o áudio é selecionar o Frame, ir na barra de propriedades (Ctrl+F3) e
selecionar um dos sons importados no campo Sound.

Selecionando arquivo
importado
Com o arquivo selecionado, repare que podemos ver o formato no qual o som foi gravado, além de
termos as opções Effect, Edit e Sync.
Opções Effect, Edit e Sync
Para entendermos perfeitamente essas opções, vamos fazer passo a passo a colocação de uma
música.
Clique aqui para baixar o arquivo, abra um arquivo novo e o importe (File – Import – Import
to Library...)
Antes coloca-lo me cena, clique no Frame 80 de insira frames (Tecla F5).
Agora sim, arraste ele da Library para a cena.

Musica já no Layer
Antes de dar Play, clique em qualquer parte da música no Timeline e veja em Sync se está como
Event, se não estiver, coloque.
 Música como Event
Para que um som Event seja tocado enquanto você edita sua animação, é necessário que você
clique no Frame que ele foi colocado ou antes, então, agora volte para o Frame 1 e de Play (Enter).
Veja que chegará no final da animação mas a música não para de tocar e até hoje os programadores
não inventaram um simples botãozinho pratico para parar com esse inferno, pelo menos nós não
conhecemos, então antes que você fique louco, clique novamente no Timeline e depois em
Edit... , vai abrir uma janela, feche-a e não se preocupe que vamos vê-la ainda.

Clique em Edit... para parar o som. Não custava nada um botãozinho Mute :-D
São quatro as opções existentes em Sync, que determinam o tipo de sincronização de áudio que
será usado pelo Flash na hora da reprodução do som selecionado.
Vamos ver cada um em detalhes.
Event
Como vimos, o som toca livremente, independente do número de Frames da cena e do que está
sendo exibido.
Agora na sua cena, crie um Layer novo, clique na Ferramenta de Texto (tecla T) e no centro
da cena escreva “Cena 1”.

Abra o painel de cenas (Shift + F2) e crie uma cena nova .

Escreva no centro “Cena 2” e insira também Frames até 80.
 80 frames na cena 02
Volte para a Cena 1 (use Page Up e Page Down para navegar entre as cenas) e gere um Preview da
sua animação (Ctrl+ENTER).
Tudo vai ocorrendo bem, a música começa a tocar, vai para a cena 2 e depois começa a bagunça.
Quando a animação recomeça, ela começa a tocar a música novamente uma por cima da outra e a
zona está feita.
Clique em Play e veja que bagunça
Para evitar isso, uma das opções é mudar Sync para Start

Start
Com essa opção selecionada, se o mesmo som estiver em dois ou mais quadros diferentes, só será
tocado uma vez até chegar ao seu final.
Para ver o resultado, basta mudar Sync para Start (não esqueça de clicar em qualquer parte da
música no Timeline da cena 1 para as opções apreçam em Properties).
Problema resolvido com o uso de Start
Agora, mude novamente de Start para Stream e veja o resultado.
Usando Stream a música não é tocada na cena 02
Veja que usando Stream a música não é tocada na cena 02, mas por que isso acontece?
Vamos ver.
Stream
O som em Stream não passa de uma cena para a outra, mas apesar desse aparente “problema”, o
Stream é fundamental para ajustarmos o diálogo dos personagens, por ser possível ouvir o som
quadro a quadro na edição bastando clicar e arrastar o Mouse no Timeline ou dar play em qualquer
ponto que o som esteja sendo exibido.
Outra coisa importantíssima é que, em caso de exibições em formato SWF, o Stream garante o
sincronismo de áudio em todos os pontos da animação forçando a reprodução a andar mais rápido
mas para fazer isso ele precisa pular alguns Frames.
Pode parecer ruim, mas é melhor do que em sua animação, por exemplo, o som de uma explosão
seja reproduzido antes que a mesma ocorra ou os diálogos ficarem como dublagens de novela
mexicana :-D
Isso ocorre no caso de Event que, como foi dito, ignora o que está ocorrendo na animação.
Como você deve ter percebido também, a música recomeçou e isso acontece porque Stream
depende do tamanho do Timeline da cena, isto é, se sua música tem 3 segundos, precisaria de no
mínimo 90 frames na mesma cena para tocar inteira.
“Mas se Stream corta a música, como solucionar isso?”
Neste exemplo, existe a solução de cortar seu áudio Stream em duas partes e colocar a continuação
do Frame um da cena dois, mas isso é chato e às vezes demorado, ainda mais se tiver várias cenas.
O melhor é usar a seguinte regra: Músicas de fundo usar EVENT demais áudios, STREAM.
Problema resolvido.

Só nos restou agora a opção STOP.

Stop
Stop interrompe a execução apenas do som selecionado, não sendo necessário usar o comando
Action Script Stop All Sounds que, como o nome diz, interrompe todos os efeitos sonoros em
andamento.
O uso de Stop é vital para as músicas em Event que começam em uma determinada cena, mas
devem parar em outra.
Vamos testar no nosso exemplo.
Na cena 01, mude o som para Event, agora na cena 2, crie um novo Layer, vá no Frame 20, crie
um Blank Keyframe (tecla F7), e arraste novamente a música da Library para este ponto.

Música colocada no Frame 20 da cena 02

Veja que chegará no final da animação mas a música não para de tocar e até hoje os programadores
não inventaram um simples botãozinho pratico para parar com esse inferno, pelo menos nós não
conhecemos, então antes que você fique louco, clique novamente no Timeline e depois em
Edit... , vai abrir uma janela, feche-a e não se preocupe que vamos vê-la ainda.

Clique em Edit... para parar o som. Não custava nada um botãozinho Mute :-D
São quatro as opções existentes em Sync, que determinam o tipo de sincronização de áudio que
será usado pelo Flash na hora da reprodução do som selecionado.
Vamos ver cada um em detalhes.
Event
Como vimos, o som toca livremente, independente do número de Frames da cena e do que está
sendo exibido.
Agora na sua cena, crie um Layer novo, clique na Ferramenta de Texto (tecla T) e no centro
da cena escreva “Cena 1”.

Abra o painel de cenas (Shift + F2) e crie uma cena nova .

Escreva no centro “Cena 2” e insira também Frames até 80.

80 frames na cena 02
Volte para a Cena 1 (use Page Up e Page Down para navegar entre as cenas) e gere um Preview da
sua animação (Ctrl+ENTER).
Tudo vai ocorrendo bem, a música começa a tocar, vai para a cena 2 e depois começa a bagunça.
Quando a animação recomeça, ela começa a tocar a música novamente uma por cima da outra e a
zona está feita.
Para evitar isso, uma das opções é mudar Sync para Start
Start
Com essa opção selecionada, se o mesmo som estiver em dois ou mais quadros diferentes, só será
tocado uma vez até chegar ao seu final.
Para ver o resultado, basta mudar Sync para Start (não esqueça de clicar em qualquer parte da
música no Timeline da cena 1 para as opções apreçam em Properties).
Problema resolvido com o uso de Start
Agora, mude novamente de Start para Stream e veja o resultado.
 Usando Stream a música não é tocada na cena 02
Veja que usando Stream a música não é tocada na cena 02, mas por que isso acontece?
Vamos ver.
Stream
O som em Stream não passa de uma cena para a outra, mas apesar desse aparente “problema”, o
Stream é fundamental para ajustarmos o diálogo dos personagens, por ser possível ouvir o som
quadro a quadro na edição bastando clicar e arrastar o Mouse no Timeline ou dar play em qualquer
ponto que o som esteja sendo exibido.
Outra coisa importantíssima é que, em caso de exibições em formato SWF, o Stream garante o
sincronismo de áudio em todos os pontos da animação forçando a reprodução a andar mais rápido
mas para fazer isso ele precisa pular alguns Frames.
Pode parecer ruim, mas é melhor do que em sua animação, por exemplo, o som de uma explosão
seja reproduzido antes que a mesma ocorra ou os diálogos ficarem como dublagens de novela
mexicana :-D
Isso ocorre no caso de Event que, como foi dito, ignora o que está ocorrendo na animação.
Como você deve ter percebido também, a música recomeçou e isso acontece porque Stream
depende do tamanho do Timeline da cena, isto é, se sua música tem 3 segundos, precisaria de no
mínimo 90 frames na mesma cena para tocar inteira.
“Mas se Stream corta a música, como solucionar isso?”
Neste exemplo, existe a solução de cortar seu áudio Stream em duas partes e colocar a continuação
do Frame um da cena dois, mas isso é chato e às vezes demorado, ainda mais se tiver várias cenas.
O melhor é usar a seguinte regra: Músicas de fundo usar EVENT demais áudios, STREAM.
Problema resolvido.

Só nos restou agora a opção STOP.

Stop
Stop interrompe a execução apenas do som selecionado, não sendo necessário usar o comando
Action Script Stop All Sounds que, como o nome diz, interrompe todos os efeitos sonoros em
andamento.
O uso de Stop é vital para as músicas em Event que começam em uma determinada cena, mas
devem parar em outra.
Vamos testar no nosso exemplo.
Na cena 01, mude o som para Event, agora na cena 2, crie um novo Layer, vá no Frame 20, crie
um Blank Keyframe (tecla F7), e arraste novamente a música da Library para este ponto.

Música colocada no Frame 20 da cena 02

Se rodássemos a animação agora, a música tocaria e quando chegasse no Frame 20 da cena 02
 começaria a tocar novamente embolando tudo.
O motivo de colocarmos ela novamente, é porque temos que avisar que música queremos parar,
então agora em Sync, mude para STOP.

Mudando Sync para STOP.

Ao fazer isso, você nota que a música não é mais vista no Timeline, a não ser apenas um quadrinho
azul.
Rode a animação.
Obedecendo ao Stop, a música para perfeitamente no Frame 20 e só toca novamente quando toda a
animação recomeça.
Se depois do 20, você quisesse que a mesma música ou outro som começasse a tocar, bastaria
criar um novo Blank Keyframe e arrastar o áudio para ele.
Loop e Repeat
O funcionamento dessas opções é bem obvio.
Loop fará com que o áudio selecionado fique tocando seguidamente até que a animação acabe ou se
use Stop.
Já com a opção Repeat , você determina o número de repetições digitando no quadrinho da
esquerda.
Ao aumentar o número de repetições, você poderá ver o resultado e o tamanho no próprio
TimeLine.
Tanto Loop quanto Event mantém todos os efeitos dados e que veremos a seguir.

Opções Loop e Repeat

Effect
Effect deveria chamar Volume, porque de efeito mesmo, infelizmente, é só isso que ele tem.
Ele possui alguns predefinidos como, por exemplo, tocar o som em uma só caixa ou diminuir o
volume no final do áudio, mas você também pode customizar clicando em Edit... que abrirá a
janela Edit Envelope.

Edit Envelope
Aqui se pode diminuir o volume de todo o som, de apenas um determinado trecho ou variar o envio
do áudio para os canais (esquerdo - direito). Para isso basta clicar num ponto qualquer da fina linha
superior que cruza todo o som onde surgirá um quadrinho branco que pode ser arrastado livremente
(figura abaixo A).

Janela Edit Envelope (clique)

Você também pode encurtar o som clicando e arrastando numa pequena barra vertical localizada no
início e final do áudio entre os dois canais (figura acima B).
Isso é muito útil quando se quer fazer, por exemplo, um loop de apenas um pedaço da música, não
sendo necessário sair do Flash e cortar o áudio em um editor de som.
Para uma melhor sincronia com sua animação pode-se escolher entre visualizar o tempo em quadros
ou segundos bastando clicar no relóginho ou filme no canto inferior direito (figura acima C),
logicamente em qualquer etapa é possível verificar como seus efeitos estão ficando clicando em
Play dentro do próprio Edit Envelope. STREAM.
Configurando a qualidade de saída do áudio
Como dissemos no começo, sempre gravamos e importamos nossos áudios com alta qualidade para,
dentro do Flash, escolhermos com qual qualidade ele deve ser exportado dependendo de onde e
como será exibido.
Se você for exportar seu filme em formato de vídeo (AVI ou MOV), a escolha deve ser feita na
janela de opções que se abre ao exportar todo o arquivo (File – Export – Export Movie...).
As opções de áudio são bem claras podendo-se escolher as que melhor se adaptam ao seu objetivo.
No caso de executáveis, o som será exportado no mesmo formato em que o arquivo foi importado
ou configurado na Library.

Janela Export Movie usando o formato AVI

Já para arquivos SWFs existe a opção de configurar individualmente cada som na livraria ou todos
de uma só vez através do Publish Settings.
Para configurar individualmente, abra a Library (Ctrl+L), selecione o áudio desejado, clique com
o botão direito sobre ele, selecione Export Settings, desabilite Use Imported MP3 Quality e então
use a opção que melhor lhe convier.
É muito útil na criação de websites onde se pode deixar uma qualidade melhor para a música e
inferior para clique em botões por exemplo.
 Janela Export Settings(clique)
Mas no caso de animações, onde geralmente se usa vários sons, fazer isso, um por um, é muito
chato e demorado, então vamos usar as opções de Publish Settings onde podemos fazer tudo isso
de uma vez.
Para abrir a janela de opções vá em File - Publish Settings (Ctrl+Shift+F12).
Selecione Override sound settings, que fará com que todas as configurações da Library sejam
ignoradas e clique em Set... de Áudio Stream e Event para definir como cada tipo de áudio será
exportado.

Configurando a saída de todo o áudio(clique)

De todos os testes que fizemos a configuração da imagem acima foi a que nos deu um arquivo bem
pequeno com uma qualidade de áudio aceitável, mas fique livre para fazer seus testes.
Conclusão
Ufa! Quanta informação não é mesmo!
Mas são realmente importantes e vão ser muito úteis para você, principalmente na hora de fazer o
sincronismo labial dos personagens, por isso não esqueça a regra básica: Músicas de fundo usar
EVENT demais áudios, STREAM.
Como nossas animações possuem muitos diálogos, desenvolvemos um método interessante de criar
e controlar o sincronismo labial.
Nos métodos tradicionais, principalmente os desenhos animados americanos que assistimos no
cinema e TV, depois das falas gravadas, é feito uma decupagem previa de todos os diálogos,
criando-se uma ficha e indicando em que frame cada fonema deve ir.
Essa ficha depois é passada ao animador que a seguirá, desenhando cada boca em seu respectivo
Frame.
Nos Animes japoneses, não existe uma preocupação tão grande com isso, e é normal vermos longos
diálogos usando apenas uma boca aberta e outra fechada, em compensação, a animação dos caras é
imbatível.
Como você já deve estar pensando, o primeiro método é chato e trabalhoso. Já o segundo, facilita
um pouco, mas não tem um resultado tão interessante, então uma alternativa para facilitar, evitar os
dois problemas acima e que é muito vista em animações na Internet, seria fazer um Graphic ou
Movie Clip com várias bocas em Loop e deixar rolar no tempo da fala.
Isso realmente pode facilitar, e muito, mas realmente fica uma mer$@ porque o resultado parece
dublagem de novela mexicana :-D
Bem, como não queríamos ter muito trabalho e nem deixar nosso sincronismo tão porco, acabamos
desenvolvendo uma maneira própria para agilizar toda a tarefa e é isso que veremos aqui.
 Desenhando os fonemas e expressões
Nosso método inicialmente consiste em desenhar as bocas separadas da cabeça e, no caso das
bocas, apenas os fonemas principais: A , E, I, O, U e fechada.
Geralmente, esses já são suficientes para se ter um resultado muito bem aceitável e muitas vezes
usamos até mesmo uma mesma boca ou cabeça para diferentes fonemas.
Logicamente, alguns personagens ou expressões exigem que as bocas sejam desenhadas juntas com
a cabeça, então o procedimento é o mesmo, desenhar os fonemas principais da cabeça toda.

Fonemas Principais em Bocas separadas e juntos da cabeça (clique)

Todo animador possui um espelho em sua área de trabalho para fazer todos os fonemas e expressões
necessárias e assim as estudar através de seu próprio reflexo, por isso, ao passar perto de um
animador e o ver fazendo um monte de caretas, fique tranqüilo, ele não está ficando louco não :-D
Mais uma vez, isso é o tipo de coisa que exige um conhecimento de desenho, estudos e dedicação.
Os fonemas acima são apenas uma maneira de começar a lhe ajudar nisso e com um pouco de
pratica, logo, logo você estará desenhando de tudo sem nem perceber.
Preparando o personagem
Antes mesmo de saber o que o personagem vai dizer, com todos os desenhos prontos, vamos
preparar tudo para a sincronização.
Clique aqui para baixar o arquivo que usaremos e, como sempre, você também pode usar o seu
próprio se preferir.
Abra o arquivo e na Library (Ctrl+L) você poderá ver tudo que usaremos, as bocas, cabeça, corpo
e a fala da personagem.

Library aberta (clique)

Antes de começar a montar, vamos criar um Graphic vazio (Ctrl+F8) e dar o nome de Menina
Completa onde montaremos toda a menina e sincronismo labial.

Isso facilita pois depois você pode mover, aumentar, diminuir e etc livremente sem precisar fazer
isso em cada elemento se tivesse montado tudo no Timeline principal.
 Graphic vazio sendo criado
Dentro do Menina Completa, mude o nome do Layer 1 para Cabeça e Corpo (duplo clique no
nome do Layer).
Crie um novo Layer , de o nome de Bocas e mais um Layer com o nome de Áudio. Ele deve ficar
acima de todos apenas para facilitar a visualização.
Clique no Frame 100 de cada Layer e de F5 em cada um para adicionarmos 100 quadros e termos
espaço para toda a fala.
Clique no Layer Cabeça e Corpo e arraste da Library os Graphics Corpo e Cabeça posicionando-
os como na figura abaixo.
A Cabeça deve ficar por cima do Corpo e para organizar isso entre dois ou mais elementos num
mesmo Layer, clique em um dos elementos e Ctrl+Shift+Setinha para Cima, se quiser colocar
acima de tudo, ou Setinha para Baixo para ficar abaixo.
Você pode ir também em Modify – Arrange e escolher as opções lá.
Feito isso você pode bloquear esse Layer, não mexeremos mais nele.

Layers e Frames criados, Cabeça e Corpo posicionados eLayer bloqueado (clique)

Vamos agora clicar no Layer Bocas, arrastar a Boca A de nossa Library e posiciona-la corretamente
(veja figura).
Gostamos sempre de começar com a Boca A pois é uma boa referência para o posicionamento das
outras, mas seria indiferente começar com qualquer uma ok.

Boca A posicionada
Assim a boca é colocada, clicamos sobre seu Frame, vamos em Properties (Ctrl+F3) e no campo
Frame nomeamos da seguinte forma: //A.
As duas barras são encaradas como um comentário e o “A” indica que estamos usando uma boca
com o fonema “A” neste Frame.
Fazendo isso, esse comentário aparecerá no Timeline e quando existir a necessidade de uma nova
boca “A” é fácil localizá-la e duplicá-la.
 Frame nomeado para A
Repita o processo para todas as outras Bocas pulando um Frame (para facilitar a visualização),
teclando F7 (cria um Frame vazio), arrastando a Boca da Library e nomeando o Frame.
Para ajudar no posicionamento correto das Bocas, ligue o Onion Skin (figura abaixo A) para ver os
quadros anteriores e de um Zoom no Timeline (figura abaixo B) o que facilitará você ver o nome
do Frame no caso de posicionar duas bocas em Frames seguidos.
Você pode aumentar o Zoom do Timeline até o nível de ver as Bocas no próprio Timeline, porém
aqui gostamos de usar no Médium.
A referência para posicionar as outras bocas deve ser o Lábio superior e o lado esquerdo pois a
garota está de meio-perfil.
Simplesmente alinhar todas as bocas ao centro uma da outra deixaria tudo errado.

Bocas posicionadas com ajuda do Onion Skin ligado e Zoom no Timeline (clique)
Colocando o Áudio
Clique no Layer Áudio e arraste da Library para a Cena o áudio Fala da Menina.mp3.
Como vimos em Áudio – Importando e usando os áudios no Flash, para sincronismo labial
temos que usar Sync como Stream, garantindo o sincronismo e facilitando a tarefa de sincronizar
no Flash.
 Áudio no Timeline e Sync configurado em Stream em Properties

Vamos sincronizar!!!

Agora para sincronizar não tem segredo, e sim devesse ter paciência.
Você terá de dar Play e Stop (tecle ENTER) num trecho da fala e posicionar as bocas
correspondentes.
Logicamente, para você não perder as já posicionadas, você vai duplicar os Frames existentes,
bastando clicar, por exemplo no Frame “A”, clicar novamente e arrastar com o Alt pressionado até
o Frame desejado, ou você pode usar o caminho mais demorado, botão direito no Frame – Copy
Frame e depois Past Frame.
O resultado deve ser algo semelhante à figura abaixo.

Sincronismo completo (clique)

Colocando a Menina Completa em Cena
Com o sincronismo pronto, volte para a cena principal (Ctrl+E) e arraste o Graphic Menina
Completa para ela.
Como Graphic não reproduz áudio, temos que aplicar o mesmo áudio no Timeline da cena da
mesma forma que aplicamos dentro do Graphic.
Crie um Layer novo, de o nome de Áudio, arraste da Library para a Cena o áudio Fala da
Menina.mp3 e certifique se Sync está como Stream.
Adicione também 100 Frames para cada Layer da cena principal e gere sua animação (Ctrl
+ENTER)

Garota na cena Principal (clique)

Dicas adicionais
- O método do A, E , I, O, U e Fechada funciona, mas é sempre importante você já saber o que o
personagem vai falar e com que expressão, assim você definirá se fará à boca junto da cabeça ou
separada e se precisará desenhar mais fonemas e/ou expressões especificas.
- Aqui estamos trabalhando com Graphics, mas claro que poderíamos trabalhar também com um
Movie Clip e ele sim reproduziria todo o áudio sem necessidade de jogar no Timeline principal.
Usamos só Graphics em nossos trabalhos por poder indicar rapidamente através da criação de
Keyframes e da janela Properties o momento de iniciar, parar, dar um Loop e etc, evitando o uso de
Actions Scripts que numa possível exportação para vídeo apresentaria problemas.
Outro motivo de usar Graphics é a possibilidade de ver tudo em tempo real no Timeline sem
precisar ficar gerando vários Previews.
- Lembre-se, sempre que você acaba de falar uma palavra/frase você fecha a boca.
Dizemos isso pois já vimos muita gente deixar a ultima boca colocada e o sincronismo ficar errado.
-Boca Fechada é fácil localizar no Timeline, bastando ver o gráfico do Áudio, se não tiver nada,
apenas uma linha fininha, é bem provável que ai seja uma boca fechada, então, se preferir, você
pode posicioná-las primeiro.
Conclusão Final
Como você já deve ter percebido, não existe milagre, a coisa tem que ser feita meio que na raça,
porém acreditamos que esse método ajuda muito.
Existem programas que ajudam a gerar sincronismo automático baseado nas bocas que você indicar,
nunca os usamos, então não sabemos dizer o nível de eficiência.
O Toon Boom possui um sistema desse integrado ao software mas existem vários outros programas
que rodam independentes mas, até nossa ultima pesquisa pela internet, não achamos um que
exportasse ou trabalhasse legal com o Flash, porém se alguém conhecer, por favor nos passe e pode
deixar que se descobrirmos algo, vamos postar aqui também.
Tem gente que gosta de fazer esse tipo de sincronismo e outros não (somos um desses), mas tem
que ser feito.
Com certeza os animadores tradicionalistas devem criticar nosso “incrível” sistema de sincronismo
labial, mas esperamos apenas que nossa técnica ajude-os nessa “maravilhosa” tarefa.
Bem, tradicional ou não o importante é você escolher o que mais lhe agrada e soltar a voz.
Alem do Flash, existem outros ótimos programas para animação 2D.
Um dos motivos de usarmos o Flash é porque, na nossa opinião, ele é rápido e prático.
Outro motivo é por já mexermos a anos com ele e não termos muito tempo de parar e começar a
aprender outro programa, como o Toon Boom, por exemplo, que um programa especifico para
animação 2D e por isso bem mais completo que o Flash.
Uma boa e recente noticia, é que a próxima versão do Flash virá com muitas melhorias em relação à
animação e com ferramentas que nem o Toom Boom tem, como Bones, então pode ser que
fiquemos pra sempre no Flash mesmo :-D

Toon Boom

Pacote completo e profissional para Animação 2D é usado em diversas produções para TV e

cinema, como o caso do Simpsons o Filme.
Site: http://www.toonboom.com/
Anime Studio
O maior destaque do Anime Studio, que também totalmente voltado para Animação 2D, é ser o
único programa que contem o sistema de Bones em 2D.
Bones são usado em animações 3D, onde se monta um esqueleto dentro do modelo e então basta
animar esse esqueleto que a malha vai acompanhar.
Essa ferramenta em 2D é realmente ótima e ajuda em varias tarefas que são complicadas e chatas de
animar manualmente.
Uma coisa legal também é que o Help dele é completo e você consegue aprender a mexer em tudo
em um dia.
Site: http://graphics.smithmicro.com/
Synfig

O Synfig é um poderoso e completo pacote de animação 2D com a vantagem de ser GRÁTIS!!!

A desvantagem, se que é podemos chamar isso de desvantagem, é que só roda em LINUX e MAC.
Site:http://www.synfig.com/
Pencil

Quem tem bastante prática com Tablet e quer criar suas animações direto no PC pode usar o Pencil,
um novo, leve e gratuito programinha.
O mais legal dele é que você pode desenhar num Layer como Bitmap e com isso se soltar todo no
esboço e num layer acima finalizar em Vetor e exportar pro Flash.
Ideal para Pencil Test, confira AQUI!!!
Site: http://www.les-stooges.org/pascal/pencil/

Swift 3D
O Swift 3D é um programa que incorpora modelagem e animação 3D com a praticidade, leveza e
facilidades do Flash.
Nas demonstrações dos recursos mostradas no site, existem coisas impressionantes tendo em vista
que o resultado são arquivos vetoriais.
Ótimo para quem está a fim de entrar no mundo 3D para web.
Site: http://www.erain.com/products/swift3d/
Mirage

Programa completo para animação 2D com destaque para poderosos efeitos visuais disponíveis.
O que nós achamos ruim, é que ele não tem suporte para arquivos vetoriais, pelo menos até onde
sabemos.
Site: http://www.bauhaussoftware.com/

Faltou algum???
Se você conhece algum programa interessante de animação 2D ou que mereça destaque, nos mande
um e-mail (flashanimado@piologo.com.br), queremos muito conhecer e teremos prazer de colocá-
lo aqui.