SÉRIE TECNOLOGIA DA INFORMAÇÃO (TI)

ANIMAÇÃO
CONFEDERAÇÃO NACIONAL DA INDÚSTRIA – CNI

Robson Braga de Andrade

Presidente

DIRETORIA DE EDUCAÇÃO E TECNOLOGIA

Rafael Esmeraldo Lucchesi Ramacciotti

Diretor de Educação e Tecnologia

SERVIÇO NACIONAL DE APRENDIZAGEM INDUSTRIAL – SENAI

Conselho Nacional

Robson Braga de Andrade

Presidente

SENAI – Departamento Nacional

Rafael Esmeraldo Lucchesi Ramacciotti

Diretor-Geral

Gustavo Leal Sales Filho

Diretor de Operações
 SÉRIE TECNOLOGIA DA INFORMAÇÃO (TI)

ANIMAÇÃO
© 2012. SENAI – Departamento Nacional

© 2012. SENAI – Departamento Regional de Santa Catarina

A reprodução total ou parcial desta publicação por quaisquer meios, seja eletrônico, mecâ-
nico, fotocópia, de gravação ou outros, somente será permitida com prévia autorização, por
escrito, do SENAI.

Esta publicação foi elaborada pela equipe do Núcleo de Educação a Distância do SENAI de
Santa Catarina, com a coordenação do SENAI Departamento Nacional, para ser utilizada por
todos os Departamentos Regionais do SENAI nos cursos presenciais e a distância.

SENAI Departamento Nacional

Unidade de Educação Profissional e Tecnológica – UNIEP

SENAI Departamento Regional de Santa Catarina

Núcleo de Educação – NED

FICHA CATALOGRÁFICA
_________________________________________________________________________
S491a
Serviço Nacional de Aprendizagem Industrial. Departamento Nacional.
Animação / Serviço Nacional de Aprendizagem Industrial.
Departamento Nacional, Serviço Nacional de Aprendizagem Industrial.
Departamento Regional de Santa Catarina. Brasília : SENAI/DN, 2012.
134 p. : il. (Série Tecnologia da informação - (TI)).

ISBN 978-85-7519-562-8

1. Computação gráfica. 2. Projeto auxiliado por computador. 3.

Animação por computador. I. Serviço Nacional de Aprendizagem
Industrial. Departamento Regional de Santa Catarina. II. Título. III.
Série.

CDU: 004.92
_____________________________________________________________________________

SENAI Sede

Serviço Nacional de Setor Bancário Norte • Quadra 1 • Bloco C • Edifício Roberto

Aprendizagem Industrial Simonsen • 70040-903 • Brasília – DF • Tel.: (0xx61) 3317-
Departamento Nacional 9001 Fax: (0xx61) 3317-9190 • http://www.senai.br
Ilustrações
Figura 1 -  Infográfico com a evolução das mídias em uma escala de tempo.............................................18
Figura 2 -  Mídias impressas...........................................................................................................................................25
Figura 3 -  Máquina de trucagem.................................................................................................................................31
Figura 4 -  Teatro de sombras.........................................................................................................................................32
Figura 5 -  Exemplo de storyboard............................................................................................................................. 35
Figura 6 -  Personagem Golum/Smeagol do filme “Senhor dos Anéis”..........................................................38
Figura 7 -  Making of do projeto da empresa Animaking – Minhocas, o Filme...........................................39
Figura 8 -  Exemplo de animação em 2D...................................................................................................................40
Figura 9 -  Exemplo da tela do Adobe Captivate ...................................................................................................41
Figura 10 -  Tela da barra de animação do Photoshop.........................................................................................42
Figura 11 -  Tela do Blender ...........................................................................................................................................44
Figura 12 -  Render feito no Rhinoceros.....................................................................................................................45
Figura 13 -  Exemplo de tela do Unity.........................................................................................................................46
Figura 14 -  Exemplo de tela 3DsMax .........................................................................................................................46
Figura 15 -  Malha de polígonos e técnica NURBS.................................................................................................47
Figura 16 -  Exemplo de animação em 3D................................................................................................................47
Figura 17 -  Marcador para ler realidade aumentada............................................................................................48
Figura 18 -  Exemplo de animação em realidade aumentada...........................................................................49
Figura 19 -  Foto de um movimento registrado por Muybridge (1907) ........................................................55
Figura 20 -  Foto de um Fenaquistiscópio................................................................................................................55
Figura 21 -  Como funciona o movimento ...............................................................................................................56
Figura 22 -  Timeline do programa Captivate.........................................................................................................58
Figura 23 -  Timeline do programa Adobe Flash....................................................................................................58
Figura 24 -  Modo timeline do programa Adobe Photoshop.............................................................................59
Figura 25 -  Modo frames do programa Adobe Photoshop ..............................................................................60
Figura 26 -  Timeline do programa Pencil 2D..........................................................................................................60
Figura 27 -  Matiz e paleta de cores RGB e CMYK...................................................................................................69
Figura 28 -  Tela do programa Dreamweaver...........................................................................................................72
Figura 29 -  Tela do programa Captivate....................................................................................................................72
Figura 30 -  Tela do programa Blender.......................................................................................................................73
Figura 31 -  Tela inicial do Flash.....................................................................................................................................78
Figura 32 -  Camadas na animação tradicional (bloco de folhas) e um flipbook.......................................79
Figura 33 -  Camadas ou Layers..................................................................................................................................81
Figura 34 -  Organização das layers de um curso...................................................................................................81
Figura 35 -  Objeto inserido no primeiro frame....................................................................................................83
Figura 36 -  Esfera no frame 25......................................................................................................................................84
Figura 37 -  Print Screen do ambiente virtual do curso Sesi Goiás 2 (Escola)..............................................85
Figura 38 -  Menu inserir do Flash................................................................................................................................86
Figura 39 -  Caixa de diálogo de cenas.......................................................................................................................88
Figura 40 -  Ir para cena através do menu exibir.....................................................................................................88
Figura 41 -  Aba propriedades com desenho selecionado.................................................................................90
Figura 42 -  Tipos de linhas.............................................................................................................................................91
Figura 43 -  Aba propriedades com desenho selecionado.................................................................................91
Figura 44 -  Desenho selecionado com a ferramenta subselecionar..............................................................91
Figura 45 -  Ferramenta Free Transform...................................................................................................................92
Figura 46 -  Desenho selecionado com a ferramenta 3D Rotation.................................................................92
Figura 47 -  Desenho selecionado com a ferramenta 3D Translation............................................................93
Figura 48 -  Desenho selecionado com a ferramenta Lasso Tool....................................................................93
Figura 49 -  Ferramenta Pen Tool...............................................................................................................................94
Figura 50 -  Desenho selecionado com a ferramenta Pen Tool........................................................................94
Figura 51 -  Aba propriedades do texto Clássico....................................................................................................95
Figura 52 -  Aba propriedades do texto TLF.............................................................................................................96
Figura 53 -  Caixa de ferramentas das figuras geométricas................................................................................97
Figura 54 -  Figuras geométricas..................................................................................................................................97
Figura 55 -  Ferramenta Pincel.......................................................................................................................................97
Figura 56 -  Ferramenta Pincel Deco...........................................................................................................................98
Figura 57 -  Formas prontas da ferramenta Deco Tool........................................................................................98
Figura 58 -  Ferramenta Bone Tool............................................................................................................................99
Figura 59 -  Utilizando a ferramenta Bone..............................................................................................................99
Figura 60 -  Ferramentas Paint Bucket Tool e Ink Bottle Tool......................................................................... 100
Figura 61 -  Ferramenta Eraser Tool........................................................................................................................ 100
Figura 62 -  Aba amostras das cores do preenchimento e contorno........................................................... 101
Figura 63 -  Aba cores sólidas de preenchimento e contorno........................................................................ 102
Figura 64 -  Aba cores gradientes de preenchimento e contorno................................................................ 102
Figura 65 -  Aba de preenchimento de bitmap.................................................................................................. 103
Figura 66 -  Exemplos com efeito de cores............................................................................................................ 104
Figura 67 -  Preenchimento com bitmap.............................................................................................................. 104
Figura 68 -  Objeto alterado........................................................................................................................................ 105
Figura 69 -  Processo do texto transformado em vetor..................................................................................... 106
Figura 70 -  Ferramenta Align (alinhar) através do menu Modify................................................................ 107
Figura 71 -  Aba Align (alinhar)................................................................................................................................... 107
Figura 72 -  Ferramenta Transform ........................................................................................................................... 108
Figura 73 -  Ferramenta Motion Presets ou Predefinições de animação..................................................... 108
Figura 74 -  Caixa Convert to Symbol.................................................................................................................... 109
Figura 75 -  Propriedades de um símbolo.............................................................................................................. 111
Figura 76 -  Ferramenta Color Effects................................................................................................................... 112
Figura 77 -  Timeline de um button......................................................................................................................... 113
Figura 78 -  Propriedades de um graphic............................................................................................................. 114
Figura 79 -  Campo Instance name........................................................................................................................... 115
Figura 80 -  Biblioteca do Flash (com exemplos de objetos)........................................................................... 117
Figura 81 -  Biblioteca botão ...................................................................................................................................... 118
Figura 82 -  Ferramenta Filtros.................................................................................................................................... 119
Figura 83 -  Importação de imagem......................................................................................................................... 121
Figura 84 -  Importação de vídeo.............................................................................................................................. 122
Figura 85 -  Interface do Media Encoder................................................................................................................. 123
Figura 86 -  Skinning.................................................................................................................................................. 124
Figura 87 -  Vídeo importado e as configurações................................................................................................ 124
Figura 88 -  Aba Properties de uma imagem importada.................................................................................. 125
Figura 89 -  Biblioteca do áudio................................................................................................................................. 125
Figura 90 -  Sound Properties..................................................................................................................................... 126
Figura 91 -  Propriedades do áudio inserido no frame.................................................................................... 126

Quadro 1 - Matriz curricular...........................................................................................................................................14

Quadro 3 - Unidades de tempo.....................................................................................................................................54
Quadro 4 - Tipos de Cores (CMYK e RGB)...................................................................................................................70
Quadro 5 - Símbolos do Flash..................................................................................................................................... 110

Tabela 1 - Diferença entre mídia, meio e veículo....................................................................................................19

 Sumário
1 Introdução.........................................................................................................................................................................13

2 Mídias..................................................................................................................................................................................17
2.1 Tipos de mídias..............................................................................................................................................18
2.1.1 Mídias eletrônicas......................................................................................................................19
2.1.2 Mídias impressas........................................................................................................................23

3 Animação...........................................................................................................................................................................29
3.1 Fundamentos da animação......................................................................................................................30
3.1.1 Conceitos de animação...........................................................................................................30
3.2 Fundamentos do storyboard....................................................................................................................33
3.2.1 Criando o storyboard...............................................................................................................33
3.3 Tipos e técnicas de animação..................................................................................................................36
3.4 Construir a animação..................................................................................................................................51
3.4.1 Técnicas de criatividade...........................................................................................................51
3.4.2 Tempo da animação..................................................................................................................53

4 WEB......................................................................................................................................................................................65
4.1 Princípios básicos para projeto web......................................................................................................66
4.2 Necessidades dos formatos web............................................................................................................68
4.3 Cores e formatos web.................................................................................................................................69
4.3.1 Tipos e padrão de cores...........................................................................................................69
4.3.2 Tipos e formatos web...............................................................................................................70

5 Animando no Adobe Flash..........................................................................................................................................77

5.1 Preparando o arquivo no flash................................................................................................................78
5.2 Layers (camadas)..........................................................................................................................................79
5.3 Organizar a animação.................................................................................................................................80
5.4 Frames e keyframes.....................................................................................................................................82
5.5 Controle da animação................................................................................................................................85
5.6 Scene (cena)...................................................................................................................................................86
5.6.1 Propriedades da scene.............................................................................................................87
5.7 Caixa de ferramentas do flash..................................................................................................................89
5.7.1 Ferramentas de desenho........................................................................................................89
5.7.2 Manipulando objetos ........................................................................................................... 105
5.8 Símbolos....................................................................................................................................................... 109
5.8.1 Movie clip .................................................................................................................................. 111
5.8.2 Button ........................................................................................................................................ 113
5.8.3 Graphic ...................................................................................................................................... 114
5.8.4 Organização dos símbolos e actions............................................................................... 114
5.8.5 Tipos de animações no adobe flash................................................................................. 116
 5.9 Library............................................................................................................................................................ 116
5.9.1 Organizando a library............................................................................................................ 117
5.10 Filters .......................................................................................................................................................... 118
5.10.1 Efeitos de transição de animação................................................................................... 120
5.11 Utilizando mídias.................................................................................................................................... 121

Referências......................................................................................................................................................................... 129

Minicurrículo dos Autores............................................................................................................................................ 131

Índice................................................................................................................................................................................... 133
 Introdução

Prezado aluno! Tudo bem com você? Seja bem-vindo à Unidade Curricular Animação do
curso Desenhista de Produção Gráfica - Web Design. Aqui você conhecerá alguns tipos de mí-
dias e seus diversos meios de comunicação. Partindo destes conhecimentos, você poderá en-
tender um pouco da relação existente entre a animação e a evolução da humanidade.
Sendo assim, nesta unidade curricular você irá conhecer uma breve história da animação
e poderá visualizar diversas técnicas e ferramentas que lhe auxiliarão a entender melhor os
processos de desenvolvimento de uma animação. Você terá, ainda, a possibilidade de verificar
como funciona o tempo, o movimento e os plots (enredo ou trama) em uma animação. Você
também irá conhecer como criar uma animação para um projeto de web, além de certos prin-
cípios da área de web design pra aplicar no desenvolvimento das animações. Além disto, irá
aprender como utilizar o software Adobe Flash CS5 para os principais tipos de edição e como
aplicar algumas ferramentas e técnicas básicas para criar uma animação. Portanto, será um
estudo que o auxiliará na criação e na edição de animações.
A seguir, são descritos, na matriz curricular, os módulos e as unidades curriculares previstos
e as respectivas cargas horárias.
14 ANIMAÇÃO

Desenhista de Produtos Gráficos – Web Design

CARGA
UNIDADES CARGA HORÁRIA
MÓDULOS DENOMINAÇÃO
CURRICULARES HORÁRIA DO
MÓDULO

• Fundamentos para o 30h

Básico Básico 30h
design

• Projeto Web 30h

• Identidade visual 40h

Específico Web Design 150h
• Animação 40h

• Desenvolvimento Web 40h

Quadro 1 - Matriz curricular

Fonte: SENAI DN

Agora, você é convidado a trilhar os caminhos do conhecimento. Faça deste

processo um momento de construção de novos saberes, em que teoria e prática
devem estar alinhadas para o seu desenvolvimento profissional. Bons estudos!
 1 INTRODUÇÃO
15

Anotações:
 Mídias

Neste capítulo, você vai conhecer algumas mídias integradas e também poderá acompa-
nhar a evolução dos meios de comunicação em escala temporal e seus detalhes, verificando o
que surgiu antes do mundo globalizado de hoje. Portanto, partindo destes conhecimentos, ao
final desse capítulo, você terá subsídios para:
a) reconhecer os tipos de mídias e seus diversos meios;
b) compreender a evolução das mídias em paralelo à evolução da humanidade.
Inicie com dedicação e atenção, fazendo do seu estudo uma oportunidade de refletir sobre
suas práticas diárias, pois as oportunidades de aprendizagem serão muitas.
 ANIMAÇÃO
18

2.1 TIPOS DE MÍDIAS

Os meios de comunicação social são compostos por mídias, ou media na tra-

dução para o inglês, que são tecnologias, canais e ferramentas de comunicação
utilizadas para transmitir mensagens. Os meios de comunicação, quando utiliza-
dos para atingir o grande público, são chamados de meios de comunicação de
massa (em inglês, mass media). Hoje em dia, os meios de comunicação de massa
já fazem parte do dia a dia e, por isso, pode-se dizer que já possuímos uma cultura
de massa. Esses meios são categorizados como:
a) mídias eletrônicas;
b) mídias impressas.
Acompanhe na figura a seguir um exemplo de como se deu a evolução dos
meios de comunicação das mídias impressas e eletrônicas ao longo do tempo.

D´Imitre Camargo (2012)

Figura 1 -  Infográfico com a evolução das mídias em uma escala de tempo

Portanto, perceba que a mídia é a categoria, o meio é a forma da mídia, e o

veículo é a empresa ou marca responsável pela mensagem. Para exemplificar,
acompanhe a figura a seguir.
 2 MÍDIAS
19

Anúncio no Jornal Catarinense

RBS (2012)

Mídia -> impressa

Meio -> Jornal

Veículo -> Diário Catarinense

Tabela 1 - Diferença entre mídia, meio e veículo

2.1.1 MÍDIAS ELETRÔNICAS

As mídias eletrônicas podem ser caracterizadas como aquelas que trabalham

com eletricidade e luz. Confira, a seguir, alguns exemplos desses tipos de mídia,
que foram surgindo ao longo do tempo.
c) Telégrafo – Inventado em 1835, nos EUA. É composto por mensagens inter-
valadas com bips (também conhecidas por código Morse). A primeira linha
telegráfica mandou mensagens de Baltimore para Washington, em 1844.
Uso inicialmente militar.
 ANIMAÇÃO
20

Geocities (2012)
d) Telefone – Aparelho eletroacústico que emite sons por meio de sinais elé-
tricos. Inventado em 1860, popularizou-se pelo uso pessoal e domiciliar. Os
primeiros telefones eram operados por uma telefonista, em uma central ma-
nual com fios. Com o tempo, o meio telefônico se popularizou e absorveu
várias tecnologias, como as aplicadas nos telefones analógicos, digitais, voip,
celular, público, pager e smartphones.

Intelbras (20--?), Youpix (20--?), Hemera (20--?), Isto-

ckphoto (2012), (20--?)

e) Rádio – O rádio foi inventado em 1894, no início foi utilizado para fins mi-
litares e, posteriormente, foi popularizado pela música e pela radionovela.
Seu funcionamento ocorre por mensagens propagadas no ar/espaço, por
meio de ondas eletromagnéticas que se deslocam por antenas e estações
de rádio.
 2 MÍDIAS
21

Istockphoto (2012)
f) Cinema – Inventado em 1895, transmite imagens e sons em movimento. Os
filmes utilizam técnicas de animação e efeitos visuais. Com o tempo, a indús-
tria cinematográfica cresceu em grandes proporções e, atualmente, rende
bilhões por ano.
Photodisc ([20--?]), Istockphoto ([20--?]), Istockphoto ([20--?]), Creatas ([20--?])
 ANIMAÇÃO
22

g) TV (televisão) – É um sistema eletrônico de reprodução de imagens e sons

transmitidos por meio de um aparelho (televisor). Recebe, atualmente, men-
sagens tanto através de cabos como por ondas de rádio e satélite (nesses
dois últimos, por meio de antena). Inventada em 1924, se popularizou com o
uso domiciliar e com a tele difusão. Já a TV Digital, inventada em 1970, pos-
sui imagens em alta definição que interagem com a Internet e o celular e só
foi popularizada há pouco tempo.

Istockphoto ([20--?])

Para ser um bom animador, você deve buscar sempre refe-

FIQUE rências e estar em constante aperfeiçoamento. As mídias
mudam, o público muda, enfim, tudo na comunicação
ALERTA muda rapidamente. Portanto, você deve acompanhar as
mudanças e ficar de olho nas tendências e vanguardas.

h) Internet – Popularizada como “web”, é conhecida como a integração das

redes mundiais. Foi inventada na 2ª Guerra Mundial para fins militares, e se
popularizou, após os anos 80, gradativamente até hoje. A Internet possibilita
a transferência de documentos por meio da World Wide Web (na tradução
para o português, Rede de Alcance Mundial).
 2 MÍDIAS
23

VOCÊ Que em 2010 foi constatado, por meio de pesquisas,

que um terço da população mundial possui acesso à
SABIA? Internet?

Istockphoto ([20--?])

Agora que você já viu alguns exemplos e especificações das mídias eletrôni-
cas, confira, a seguir, alguns exemplos e características das mídias impressas.

2.1.2 MÍDIAS IMPRESSAS

As mídias impressas são caracterizadas por utilizarem pigmento/tinta. Veja, a

seguir, alguns exemplos.
a) Livro – É um volume composto por páginas encadernadas manuscritas ou
impressas, normalmente portátil. O livro faz parte de uma publicação, que
pode ser unitária, literária ou científica. Documentos registram sua origem
no séc. II a.C. Os livros possuem certas características literárias, como: região,
país, época, entre outras. Possuem ainda diferentes tipos textuais, como: ro-
mance, suspense, terror, comédia, fábulas, novela, contos, poesias e ficção
científica.
 ANIMAÇÃO
24

b) Jornal – É normalmente organizado por notícias. Sua circulação geralmente

é diária, e atinge uma grande massa da população por apresentar um custo
relativamente baixo. O jornal, tradicionalmente, é impresso em preto e bran-
co com poucos detalhes coloridos. No início, eram utilizados como Folhetins
(com poucas páginas dobradas ao meio) e hoje em dia, normalmente são
produzidos em gráficas rotativas, numa escala muito maior.

VOCÊ Esse meio de comunicação deu o nome ao ‘papel jornal’,

um tipo de papel mais poroso e barato, tipicamente uti-
SABIA? lizado na produção de jornais.

c) Revista – Com um custo um pouco mais alto, é produzida em gráficas Offset,

e com um tipo de papel e impressão melhores. Normalmente, é encaderna-
da com grampo e acabamento em formato de canoa. A revista costuma ser
organizada por artigos e matérias com muitas fotos e imagens coloridas. É
importante destacar que a revista geralmente é focada sobre um perfil e,
portanto, trata sobre temas voltados a determinado assunto e público. Con-
fira, a seguir, alguns exemplos: revista científica, revista de política, revista de
fofocas, dentre outras.
d) Papelaria – São chamados normalmente de papelaria, os materiais promo-
cionais impressos em pequenas tiragens e formatos. Panfletos são mídias
impressas, normalmente feitas em papel mais simples e impressão mais ba-
rata. Já os Folders, são flyers (em português, voador) com papéis e acaba-
mentos especiais e muito utilizados com dobra, grampo, faca, formatos e
cortes diferenciados. Os Cartazes são meios impressos em tamanhos maio-
res, normalmente colados em paredes. Os cartazes foram muito utilizados
nas grandes guerras e hoje assumem outro papel, na divulgação de festivais,
festas, eventos, teatro e cinema.

Que o termo flyer originou-se na 2ª Guerra Mundial,

VOCÊ quando os aviões jogavam panfletos nas cidades para
informar às pessoas sobre a Guerra? Por este motivo,
SABIA? tinham que ser leves e pequenos para voar, se espalhar
e cair até as pessoas.
 2 MÍDIAS
25

e) Outdoor (Busdoor, Backlight, Frontlight) – Muitos profissionais chamam to-

dos os meios de mídia externa (de rua) de outdoor. No Brasil, são chamadas
de Outdoor, principalmente, as placas de aço de 9 metros (largura) por 3 me-
tros (altura), regulamentadas pela Central do Outdoor.

SAIBA Conheça as leis, regras, cobertura e padrões utilizados em

Outdoors em nosso país. Acesse o site da Central do Outdoor:
MAIS <http://www.outdoor.org.br/site/>.

f) Histórias em Quadrinhos – Meio impresso formado, principalmente, por ima-

gens. A narrativa é visual e textual, onde o leitor vê a arte sequencial nos
quadros ou quadrinhos. Inicialmente, surgiram nos jornais (como tirinhas e
sátiras) e com o passar do tempo, como fanzines (quadrinhos agrupados,
produzidos em papel e impressão mais simples). Com o tempo, foram fican-
do coloridas e em papel especial. Atualmente, as histórias em quadrinhos
vêm ganhando respeito e espaço maior de publicação, além dos Jornais e
Revistas em Quadrinhos, estas histórias também podem ser encontradas na
Internet e em Livros em Quadrinhos.
Peter Ilustra([20--?])
Istockphoto ([20--?]),

Figura 2 -  Mídias impressas

 ANIMAÇÃO
26

1 LAYOUTISTA Para você entender melhor tudo o que foi tratado até o momento sobre mí-
dias, acompanhe, a seguir, o Casos e Relatos chamado «As Histórias do Vô Jorge»,
É o profissional que monta
o layout do jornal. onde serão abordadas diversas mídias, sua evolução e aplicação na prática. Além
de ter aprendido sobre a história das mídias e sua influência, você pôde constatar
as mudanças que as mídias sofreram e a evolução que tiveram paralelamente ao
desenvolvimento da sociedade.

CASOS E RELATOS

As histórias de Vô Jorge
Hoje com 90 anos, o senhor Jorge tem muitas histórias para contar. Nas-
ceu no final da 1ª Guerra Mundial. Quando era menino, enquanto de-
senhava, ouvia seu pai Antônio e os demais pescadores falarem do que
acontecia “pros lados de lá”. O assunto que se ouvia por todos os lados
era sobre a Grande Guerra. Ele via os cartazes espalhados pelo centro da
cidade e se interessava pelo evento.
Com tanta curiosidade, aos 18 anos, viu o alistamento da marinha no jor-
nal e resolveu se alistar. Foi quando eclodiu a 2ª Guerra Mundial e Jorge
foi para a tão sonhada Guerra, finalmente iria defender seu país. Como já
estudava o telégrafo, virou o mensageiro oficial das tropas. Jorge manda-
va recados de um pelotão ao outro por meio do telefone que carregava
nas costas. Enviava as mensagens através de ondas de rádio. Escrevia car-
tas para todo o pelotão e mandava às esposas e família dos guerrilheiros,
aqui do Brasil.
Para facilitar a comunicação entre os guardas, foi desenvolvido um folhe-
tim chamado “A Vida é Bela”, o qual ele imprimia em uma prensa manual
que havia encontrado.
Jorge sempre aguardava ansioso o avião trazer os flyers com notícias de
seu país. Terminada a Guerra em 1945, Jorge volta da Alemanha. Cansado
da Guerra ele pensa: “O que fazer agora? Preciso de um emprego.” Jorge
então resolve aproveitar seus dotes de desenhista e comunicador e co-
meça a trabalhar em um jornal local, ajudando o layoutista1 a desenhar as
ilustrações manuais. Após essa época, começa a fazer desenhos para re-
vistas e cartazes de cinema. Editoras e jornais se especializam e montam
novas equipes, agora voltadas à nova mídia, há pouco lançada, chamada
‘televisão’.
 2 MÍDIAS
27

Partindo dessa história, perceba como se aplicam as mídias e como os meios

de comunicação caminham juntos à sociedade, e a partir de suas necessidades.
Portanto, perceba que, na medida em que as mídias evoluem, a sociedade se
adapta a elas, assim como as mídias também se adaptam às mudanças e necessi-
dades da sociedade, como num processo de mão dupla.
E então, gostou do assunto abordado até aqui sobre mídias? Agora, você é
convidado a explorar todas as informações disponíveis sobre animação, faça do
seu aprendizado um processo de construção do conhecimento. Vamos lá!

RECAPITULANDO

Neste capítulo, você pôde compreender a importância das mídias e

meios de comunicação. Entender melhor a diferença de certas termino-
logias, visualizar a evolução dos meios de comunicação em escala tem-
poral, além de suas características e particularidades.
Partindo de uma visão abrangente da totalidade, você pôde entender o
processo de comunicação multimídia, no qual as mídias interagem, pois
ao mesmo tempo que estão interligadas são interdependentes, sendo
que uma reforça a outra.
Neste capítulo, você teve a possibilidade de diferenciar cada tipo de mí-
dia, e com isso, planejar estratégias e táticas de acordo com suas caracte-
rísticas, públicos e tipos de mensagem. Você pôde observar também que,
por meio da cultura de massa e através dos diversos meios que mandam
mensagens, a sociedade se funde, se comunica e interage. Portanto, de
forma dinâmica, as mídias e a sociedade evoluem.
Hoje em dia, tem-se acesso a filmes americanos, desenhos japoneses, li-
vros ingleses, brinquedos chineses e novelas mexicanas. O mundo hoje é
globalizado e conectado, as fronteiras, barreiras e muralhas antigas não
isolam mais. Sendo assim, é essencial que você perceba o quanto essas
mídias são importantes e passe a refletir sobre a quantidade e a qualida-
de das mensagens que você recebe a todo instante.
 Animação

Para que você compreenda como funciona uma animação, é importante conhecer alguns
fatores, como: os fundamentos da animação, os processos para construir uma animação e per-
ceber porque se deve enxergar a animação em movimento. Todos esses itens serão contempla-
dos neste capítulo. Além disto, você também poderá visualizar alguns softwares que auxiliam
no desenvolvimento de uma animação. Dessa forma, ao final desse capítulo, você terá subsí-
dios para:
a) reconhecer a história da animação;
b) analisar os processos de desenvolvimento de uma animação;
c) aplicar as técnicas de animação;
d) aplicar as ferramentas de animação.
Perceba que as oportunidades de aprendizagem serão muitas. Por isso, dedique-se ao estu-
do, lembrando que motivação e comprometimento são fundamentais para sua aprendizagem.
Faça desse processo uma construção significativa e prazerosa.
 ANIMAÇÃO
30

3.1 FUNDAMENTOS DA ANIMAÇÃO

Para iniciar seus estudos, você acompanhará uma breve história da animação,
onde serão retratados alguns conceitos e processos de desenvolvimento de ani-
mação que foram surgindo ao longo do tempo.

3.1.1 CONCEITOS DE ANIMAÇÃO

É fundamental que você saiba que a animação é criada em um espaço de tem-

po, representado por um número de quadros que formam o movimento. Desta
forma, a duração em tempo da animação é indicada de acordo com o número de
quadros a serem apresentados. A animação também se caracteriza por transfor-
mações ocorridas nos elementos existentes na cena e o espaço de tempo pré-
-definido.
De acordo com o codiretor do filme O Rei Leão (DISNEY, 1994), Rob Minkoff, a
animação:

(...) em termos cinematográficos é diferente de um filme ao

vivo, onde você põe os atores na frente da câmera e diz o que
devem fazer. É filmado e depois montado. O que fazemos é o
oposto. Escrevemos o filme, editamos o filme primeiro, em for-
ma de storyboards, e aí sabemos como será cada tomada in-
dividual, conhecemos cada tomada, assim não há desperdício
algum de filme. Você sabe exatamente como está contando
a história, quadro a quadro, e aí tem que passar por todos os
processos de animação, layout e cor para juntá-los. Assim você
trabalha de fora para dentro, do maior para o menor.
A Fonte Geek ([20--?])
 3 ANIMAÇÃO
31

Muitas empresas de animação criadoras de sites, com o tempo, se tornam es-

túdios de animação e passam a fazer outros tipos de animações para diversas mí-
dias, como: propaganda, Internet, TV, Games, celulares, EAD (ensino a distância),
IPAD, entre outras. A 2Advanced é um exemplo de estúdio que passou por essa
transformação, começou com pequenos sites animados e, atualmente, trabalha
com todo tipo de animação no universo eletrônico.

SAIBA Para explorar mais informações sobre a 2Advanced, acesse:

MAIS < http://www.2advanced.com/>

Que no início dos anos 2000 o site EYE4U foi a primeira

VOCÊ empresa do mundo a se popularizar na Internet, por uti-
SABIA? lizar recursos animados em Flash? Para saber mais sobre
esta empresa, acesse: <http://www.eye4u.de>.

Veja, a seguir, alguns dos processos de animações.

Animação por trucagem
Muito utilizada em desenhos animados, onde a câmera fica na posição verti-
cal e os objetos, na posição horizontal. O objetivo é modificar imagens filmadas
ao vivo, em diversos ângulos, tanto em sua forma como na ordem da projeção.
A técnica de escurecer uma cena após a outra, como se fosse uma transição de
cenas, e diversos outros tipos de efeitos são realizados utilizando o equipamento
de trucagem.
CTAV (2012)

Figura 3 -  Máquina de trucagem

 ANIMAÇÃO
32
1 BISCUIT
É um tipo de massa de fácil
modelagem, feita de amido
de milho, cola branca para
porcelana fria e conservante
(vaselina, limão ou vinagre).
2 ESBOÇO
Desenho rápido com
poucos traços, também
chamado de rafe.
Animação por acetato
Com o surgimento das animações feitas em folhas de acetato foi possível fazer
a combinação de figuras em movimento com os elementos estáticos. Pois, até
então, os desenhos eram produzidos em folhas de papel opaco, obrigando os
desenhistas a simplificar os desenhos.
Quadro a quadro
A animação quadro a quadro é um dos processos básicos da animação. Consis-
te no registro de cada desenho ou imagem, sejam objetos, cenário, personagem,
etc. Representa as posições daquilo que, posteriormente, aparecerá movendo-se
na projeção.
Stop motion
É uma técnica de animação que consiste na filmagem quadro a quadro de ob-
jetos, personagens, entre outros, enquadrando para se ter uma prévia de como
ficará na animação. Como por exemplo: após a filmagem quadro a quadro de
um objeto, roda-se a animação a 24 quadros por segundo, desta forma, cria-se a
ilusão de que os objetos estão se movendo. Nesse tipo de processo de animação,
geralmente os objetos e personagens são feitos de massa de modelar ou biscuit1.
Teatro de sombras
Nesse processo de animação, as figuras são recortadas e articuladas por uma
ou mais pessoas, que se movem por meio da projeção de suas silhuetas, através
de uma fonte de luz e um plano (exemplo: vidro fosco). Podem-se utilizar objetos
de vários tipos, como: papel, papelão, isopor ou, até mesmo, partes do corpo hu-
mano para refletir. São conhecidas também como ‘sombras chinesas’.
Plim Plim ([20--?])
Figura 4 -  Teatro de sombras
 3 ANIMAÇÃO
33

Para você saber um pouco mais sobre esse tipo de animação,

SAIBA assista ao vídeo disponibilizado no seguinte endereço:
MAIS <http://formasanimadas.wordpress.com/2010/08/02/teatro-
-de-sombras-com-as-maos/>.

Você chegou ao final de mais uma etapa de estudos. O que achou até agora
do que foi apresentado? Esperamos que tenha sido interessante e de valia para
as suas atividades profissionais. Preparado para seguir adiante? A seguir, você co-
nhecerá os fundamentos do storyboard.

3.2 FUNDAMENTOS DO STORYBOARD

Quer saber o que é um storyboard? Uno de Oliveira (2012), em seu site Caligra-
ffiti, relata o que é um storyboard, acompanhe.

Storyboard é a arte de projetar uma cena através de desenhos.

É praticamente impossível você ver um storyboard e não se en-
cantar com o estilo dos traços, quase sempre rabiscados, tra-
duzindo a velocidade do pensamento do autor.

O storyboard tem como objetivo ser um guia que contém as principais cenas
para o animador, ator ou ilustrador utilizar na elaboração de um jogo, animação,
filme ou história em quadrinhos. Com base no roteiro, o desenhista deve ilustrar
de forma clara. Em geral, ele utiliza apenas os detalhes necessários para dar forma
à animação, é como um esboço2.
Porém, vale ressaltar que no mercado publicitário e de cinema existem story-
boards extremamente refinados, muitas vezes quase iguais ao produto final.
A seguir, confira como analisar e criar um storyboard, e quais suas característi-
cas e funções.

3.2.1 CRIANDO O STORYBOARD

Desenhar uma figura pode até ser relativamente fácil para algumas pessoas,
contudo, criar uma animação demanda mais trabalho. Por esse motivo, é impor-
tante, inicialmente, criar muitas figuras, decidir a ordem delas, o enquadramento,
o áudio, etc.
 ANIMAÇÃO
34

3 TIMECODE A seguir, acompanhe um exemplo mais detalhado do que é um storyboard:

É um código de oito dígitos

que permite a localização
precisa de pontos de áudio O primeiro esboço exibe uma ideia inicial – Senhor Comatoso
e vídeo durante a edição. e seu despertador.

O segundo esboço é idêntico ao primeiro, exceto pelo balão

da conversa no lado esquerdo do frame, onde o texto indica
que alguém está gritando com seu herói inconsciente (quer
permanecer morto para o mundo).

No terceiro esboço uma mão aparece do lado esquerdo do

desenho segurando uma xícara com o logotipo do Lotta Ca-
ffeina e colocando no criado mudo do lado do Senhor Coma-
toso.

O quarto esboço é quase idêntico ao segundo, exceto pela

mão que se foi, e o nariz do Senhor Comatoso tem seu olfato
atiçado pela poderosa bebida.

O quinto esboço exibe um olho aberto. E a boca do Senhor

Comatoso não está mais fechada.

O último esboço exibe um close do homem tomando um gole

da xícara, seus olhos estão bem abertos e brilhando, um sorri-
so no rosto, enquanto um “balão de pensamento” diz aos es-
pectadores: “Ah, por isso vale a pena acordar!”.

No mundo da animação, essa série de esboços rápidos é cha-

mada de storyboard. (GROVER; VEER, 2009).

Veja agora outro exemplo de storyboard.

 3 ANIMAÇÃO
35

Pixar ([20--?])
Figura 5 -  Exemplo de storyboard

É importante que você saiba que existem dois tipos de storyboard. Veja, a se-
guir, quais são.
a) Para apresentar ao cliente: devem ser bem elaborados, com cores, traços
bem definidos e que deem uma ideia mais sucinta do que será executado.
b) Para a equipe de produção: devem conter a movimentação, o timecode3 e
outros elementos que facilitem a projeção.

Utilizar o tempo rascunhando um storyboard permite que

FIQUE você monte sua ideia do começo ao fim. Não se importe o
ALERTA quão sofisticado (ou não) está; ninguém além de você verá
os modelos. (GROVER; VEER, 2009).

A seguir, você pode ver algumas dicas de como utilizar o storyboard.

Storyboards de tamanho natural funcionam melhor se dese-

nhados em folhas separadas do roteiro. Por fim, os quadros do
storyboard vão ser separados e presos a um quadro na parede
ou em outra superfície, para que possam ser alterados ou
reorganizados no decorrer do processo de produção. O quadro
do storyboard deve ser desenhado com precisão, para indicar
se será usada a razão de aspecto 3x4 do padrão de filme 16mm;
35mm e vídeo NTSC; ou razão de aspecto 9x16, do filme wides-
creen ou HDTV (televisão de alta definição). Cada quadro deve
ser numerado de forma a corresponder com a tomada, com
notas indicando panorâmicas, zooms, inclinações e outros mo-
vimentos e, se necessário, a organização do fundo, assim como
o áudio correspondente. (MUSBURGUER, 2008, p. 162).
 ANIMAÇÃO
36

4 2D O storyboard subdivide-se em três tipos de funções:

Desenho em duas a) visualizar o filme, definir a sequência das cenas, ritmo, ângulos, atitudes e
dimensões. expressões dos personagens;
b) apresentar o roteiro para os responsáveis pela aprovação e liberação de
verbas;
5 3D
c) orientar a produção do filme, sempre seguindo o que foi aprovado pelo
Desenho em três cliente.
dimensões.

É importante que você pense de forma visual. Você precisa

FIQUE pensar em como os quadros deverão aparecer, o que as
imagens contarão ao público, o que acontecerá na ação
ALERTA e como a ação desenvolverá a história. (MUSBURGUER,
2008).

Agora que você já entendeu melhor como funciona um storyboard, siga em

frente e conheça os tipos e técnicas de animação. Lembre-se: dedicação e com-
prometimento são essenciais para o processo de aprendizagem. Vamos em fren-
te!

3.3 TIPOS E TÉCNICAS DE ANIMAÇÃO

Você sabia que combinando técnicas de programação juntamente com téc-

nicas de animação podem-se obter ótimos resultados na elaboração de recursos
animados?
Essa combinação é atualmente muito utilizada, por exemplo, em cursos para
educação a distância. A animação pode trazer mais vida e interatividade a conte-
údos que antes eram somente textos cansativos e estáticos.
Lembre-se de que, unindo uma imagem, de preferência em vetor e um roteiro
de animação já se tem os principais elementos necessários para criar uma anima-
ção.
Anteriormente, as animações para web eram feitas em formatos de gif anima-
do, que são imagens em sequência, com corte seco. Depois veio o Future Splash,
que era um tipo de animação vetorial. Logo, o Programa Future Splash se tornou
o Programa Macromedia Flash que, nos dias atuais, se encontra na versão Adobe
Flash CS5.5.
 3 ANIMAÇÃO
37

Saiba que existem diversos tipos e formatos de animações, contudo as duas

mais utilizadas são: a 2D4 e a 3D5.

Istockphoto ([20--?])
Confira, a seguir, algumas técnicas de animação:
a) animação tradicional – cada quadro ou célula (transparente) é desenhada
com as mãos;
b) animação digital – é a arte de criar imagens em movimento utilizando
computadores;
c) animação de recortes – utiliza objetos e cenários recortados e depois são
animados.
d) captura de movimento – usa sensores no dublê, que faz o movimento com
o corpo;
e) animação por stop motion – com uma câmera, tira-se foto de cada quadro
e movimenta-se o objeto proposto. Técnicas com barro (Claymation), o fa-
moso desenho de massinha; com objetos reais (Pixilation); ou com bonecos
(animação com fantoches);
f) animação limitada – os personagens não são desenhados inteiramente,
mas em partes;
g) motion comics – história em quadrinhos animados (pode ser na Internet,
em celulares ou ipads);
 ANIMAÇÃO
38

6 ACTION SCRIPT h) motion capture (captura de movimento) – usa sensores no dublê, que faz o
movimento com o corpo. Essa técnica é muito utilizada em filmes de Com-
Em português, significa
ação no roteiro. É o tipo putação Gráfica (CG), como por exemplo, no filme “O Senhor dos Anéis”, no
de programação utilizada qual o personagem Golum/Smeagol foi desenvolvido utilizando a captura
no programa Adobe Flash.
Muito comum ser citado de movimento. Já estão desenvolvendo tecnologias parecidas e mais sofisti-
apenas como: ação ou
action. cadas, com o Kinect (acessório do videogame Xbox 360).

Ghost in The Machine ([20--?]), Haven Lynariko ([20--?])

Figura 6 -  Personagem Golum/Smeagol do filme “Senhor dos Anéis”

Você sabia que o primeiro longa-metragem, em formato

VOCÊ de stop motion, da America Latina, dentre os oitenta
primeiros do mundo, está em produção aqui no Brasil?
SABIA? O projeto se chama “Minhocas” e está sendo produzido
pela Animaking, em Florianópolis, Santa Catarina.
 3 ANIMAÇÃO
39

Old Black Gallery ([20--?]), Essas Coisas e tal ([20--?]), Animaking ([20--?])
Figura 7 -  Making of do projeto da empresa Animaking – Minhocas, o Filme

Para criar uma animação computadorizada, podem-se utilizar diversos softwa-

res, tais como: Adobe Flash, Adobe Captivate, Adobe Photoshop, Silverlight, Mi-
crosoft Power Point, Blender, Rhinoceros, Unity, 3DsMax, dentre outros.

A maioria desses softwares tem mais ou menos a mesma

FIQUE lógica de construção da animação: trabalham com layers
(camadas), linha da timeline (tempo) e frames (quadro a
ALERTA quadro), mais utilizados para animações com desenhos
vetoriais.

Há também os tipos de linguagens que dão vida a um objeto via programação,

como: Realidade Aumentada, Action Script6 3.0, Papervison, Html, Xhtml, Html 5,
Javascript, etc. A seguir, você vai conhecer mais detalhadamente cada um dos
softwares e os tipos de linguagens. Siga em frente e explore esses conhecimentos
ao máximo!
 ANIMAÇÃO
40

ADOBE FLASH

É o programa mais utilizado para criar animações para web. Com este software
você pode desenvolver diversos tipos de animações, como: um movimento de
uma boca abrindo e fechando; apresentações com vários tipos de transições;
banners; jogos interativos; atividades interativas; sites; realidade aumentada;
aplicativos para dispositivos móveis; entre outros.
A seguir, veja alguns exemplos de animações feitas em Flash.

Design Row ([20--?])

Eliezer ([20--?])

Figura 8 -  Exemplo de animação em 2D

O Flash, por ser mais usado na área de web design, será o software que utili-
zaremos para mostrar como usar camadas, quadros, bibliotecas, importação de
mídias, criação de cenas, controle da animação, entre outros.
A seguir, veja outros tipos de softwares utilizados para criar modelos e anima-
ções.

ADOBE CAPTIVATE

É um programa para criação de slides, quiz (questões de múltipla escolha, ver-

dadeiro ou falso, entre outras) muito utilizado na educação a distância para gra-
vações de captura de telas e para o desenvolvimento de tutoriais que servem, por
exemplo, para demonstração de softwares, e como utilizar determinados progra-
mas. O Captivate grava a captura conforme o cursor do mouse e, enquanto faz a
captura, ele pode tanto gravar o áudio ao mesmo tempo, ou inserir o áudio de-
pois de finalizada a gravação. Este software também importa arquivos em Power
Point, Photoshop e pdf. Saiba que por causa de suas ferramentas e recursos, o
Captivate costuma ser muito utilizado no desenvolvimento de materiais didáticos
para a educação a distância.
 3 ANIMAÇÃO
41

SAIBA A nova versão do Adobe Captivate 5.5 exporta o vídeo dire-

MAIS tamente em formato .wmf para o Youtube.

Adobe (2012)

Figura 9 -  Exemplo da Tela do Adobe Captivate

ADOBE PHOTOSHOP

É o software de edição de imagens mais utilizado na área de tratamento de

imagens. O formato no qual ele salva seus arquivos é o psd. Ele cria animações do
tipo gif, que são imagens sequenciais. Veja, a seguir, uma tela de demonstração
do Photoshop animando um gif.
 ANIMAÇÃO
42

7 PYTHON

É um tipo de linguagem
de programação orientada
a objetos, interpretada e
imperativa.

8 SOFTWARE LIVRE

Código aberto.

Adaptado de Eliezer (2012)

Figura 10 -  Tela da barra de animação do Photoshop

SILVERLIGHT

É uma nova plataforma de desenvolvimento web muito parecida com o Flash.

Os arquivos finais geralmente ficam bem mais leves que os do Flash, porém, ela
é pouco conhecida ainda. Essa plataforma oferece uma ampla variedade de in-
corporação de animações, vídeos e interfaces interativas. O Silverlight cria, ainda,
gráficos vetorizados (assim como o Flash), textos, animações, efeitos de alta qua-
lidade e aplicativos. E também pode programar em várias linguagens, entre elas:
AJAX, C#, Python7, Ruby e Visual Basic.
Este software foi projetado para trabalhar em diversas arquiteturas e sistemas
operacionais. Pode produzir aplicativos como: tocar um piano, tatuar braços, abrir
um aplicativo fora do navegador com HTML e Flash, entre outros.
 3 ANIMAÇÃO
43

Para baixar o software e conhecer mais sobre o Silverlight na

prática, acesse um dos links a seguir e faça o download.
<http://www.silverlight.net/content/samples/1.0/ink-tattoo-
-studio/default.html>
SAIBA <http://www.silverlight.net/content/samples/1.0/grand-
MAIS -piano/default.html>
<http://code.msdn.microsoft.com/Silverlight>
<http://www.silverlight.net/content/samples/sl3/toolkitcon-
trolsamples/run/default.html>

MICROSOFT POWERPOINT

É um programa utilizado para criar e editar apresentações interativas, que po-

dem incluir áudio, vídeos, arquivos em formatos “swf”, efeitos de transições, entre
outros. Os formatos ou extensões dos arquivos mais utilizados são salvos como
modelo de apresentação do Power Point, pdf, swf e jpg.

BLENDER

É um software livre8 que cria modelos, animações, texturização, composição,

edição de vídeo e de imagem, renderização e jogos em 3D. O Blender é multipla-
taforma, e por essa característica, pode ser rodado em diversos sistemas opera-
cionais. Possui versões de 32 e 64 bits.
O Blender disponibiliza ferramentas de simulação parecidas com as de outros
softwares 3D, como: dinâmica de corpo macio, de fluidos e de corpo rígido. A
modelagem é baseada em modificadores, e ele possui uma ferramenta chamada
Sculp, que trabalha como se estivesse esculpindo. Pyton8 é uma ferramenta que
cria a animação de personagens e de objetos modelados, cenas e ângulos de câ-
mera. O Pyton é o tipo de suporte de linguagem script utilizado para a construção
de jogos e funciona com várias teclas de atalhos.

Para conhecer uma animação feita no Blender, acesse o se-

SAIBA guinte link:
MAIS
<http://smellycat.com.br/big-buck-bunny-o-filme/>.
 ANIMAÇÃO
44

9 VISUAL BASIC Confira, a seguir, a tela do Blender.

É um tipo de linguagem de
programação que permite
o desenvolvimento de
aplicativos, a interface
gráfica, a criação do ActiveX
e o acesso à base de dados.

10 GRASSHOPPER

É um Plugin para o
programa Rhinoceros que
permite trabalhar a partir
de parâmetros. Possui
uma interface gráfica
que permite visualizar e
manipular os dados de

Blender (2012)
forma intuitiva.

Figura 11 -  Tela do Blender

O Blender renderiza diversos formatos, como: jpg, bitmap, tiff, avi, mpg, DVD,
e cria também formatos de animação, como o gif. O Blender importa e exporta
formatos tridimensionais de/para outros softwares, como: 3Ds, AC, lwo, ps, eps,
gimp, entre outros.

FIQUE RENDER em Software 3D: é o ato de gerar uma imagem,

para simular um objeto em três dimensões, podendo visu-
ALERTA alizá-lo como um objeto real.

RHINOCEROS

O Rhinoceros também é um software 3D muito utilizado, principalmente na

arquitetura, no design industrial, no design de jóias, no design de transportes aé-
reos e terrestres, entre outros. Esse software cria animações, exporta e importa
mais formatos do que o Blender. Possui mais recursos para modelar e é mais fácil
de utilizar, por não depender de tantas teclas de atalhos como o Blender. Esse
software possui a linguagem de script Visual Basic9 e Grasshopper10, que permi-
tem ler e gravar arquivos diretamente no software. Veja, a seguir, um Render feito
no Rhinoceros.
 3 ANIMAÇÃO
45

Arqui300 ([20--?]), Raz3dfx ([20--?])

Figura 12 -  Render feito no Rhinoceros

O Rhinoceros suporta malhas de polígonos e nuvens de ponto. Tem alta pre-

cisão na renderização e pode ser personalizado, permitindo ao usuário uma fácil
utilização do software.

UNITY

É um software 3D que cria jogos para web em plataformas IOS, Windows e

Android em formato muito leve, é um dos mais utilizados para esse tipo de apli-
cação. Esse programa é gratuito, e para rodá-lo, você deve fazer um registro. A
licença mais simples tem alguns limites, porém, permite que você faça diversas
coisas, como: texturização, efeitos de imagens, sombras e efeitos de água. Para
rodar os jogos no navegador, você terá que instalar o Unity Web Player. Veja, a
seguir, uma tela desse software.
 ANIMAÇÃO
46

11 POLÍGONOS

São triângulos ou
quadrados que definem
pequenas áreas da
superfície do objeto que
está sendo modelado.

Cidade Gamer ([20--?]), Um Bom Game ([20--?])

12 NURBS

Que é a sigla de Non

Uniform Rational B-Splines
ou B-Splines Ravionais não
uniformes.

Figura 13 -  Exemplo de Tela do Unity

3DSMAX

É um outro tipo de software 3D, e é o mais utilizado entre todos. Esse software
também cria personagens, cenários, maquetes eletrônicas, vinhetas para comer-
ciais, cenas, animações, renderizações e jogos.
A modelagem no 3DsMax é por polígonos11, porém existe a técnica NURBS12,
que substitui os polígonos, suavizando melhor o modelo.

Autodesk ([20--?])

Figura 14 -  Exemplo de tela 3DsMax

 3 ANIMAÇÃO
47

As curvas e superfícies NURBS não existiam no mundo tradicional do desenho.

Elas foram criadas especificamente para modelagem 3D, usando computadores.
Curvas e superfícies representam contornos ou formas dentro de um espaço de
modelagem 3D. Elas são construídas matematicamente.
No entanto, a técnica NURBS não foi bem desenvolvida no 3DsMax, e o méto-
do mais utilizado continuou sendo por polígonos. Acompanhe as figuras a seguir,
elas mostram essas duas técnicas de modelagem e um exemplo de animação fei-
ta em 3D.

X3D ([20--?]), Integrityware ([20--?])

Figura 15 -  Malha de polígonos e técnica NURBS

Fonte: 3D Total (2012)
Falem de Tudo ([20--?])

Figura 16 -  Exemplo de animação em 3D

 ANIMAÇÃO
48

A seguir, veja mais detalhadamente os tipos de linguagens.

REALIDADE VIRTUAL

Conhecida hoje em dia como Realidade Aumentada é uma forma de inte-

ração entre usuário e animação, por meio de uma webcam. O reconhecimento
exibe imagens na tela do usuário, permitindo uma maior interação e ligando o
mundo virtual com o mundo real. Essa leitura é feita através de marcadores, na
maioria das vezes, em preto e branco, conforme mostrado na figura a seguir.

The Multiman ([20--?])

Figura 17 -  Marcador para ler realidade aumentada

Lembre-se de que essa identificação já é pré-definida na hora de realizar a pro-

gramação do sistema. Feito esse reconhecimento, é carregado na tela um conte-
údo que também já foi definido na programação.
A realidade aumentada é usada, na maioria das vezes, para exibir conteúdos
animados em 3D, em que o usuário pode movimentar o marcador e ver a anima-
ção por vários ângulos. Para produzir um sistema por meio da realidade aumen-
tada é utilizada uma biblioteca no Flash, chamada Papervision. A linguagem de
programação utilizada é o Action Script 3.0, que faz a leitura de objetos em 3D.
Veja, a seguir, um exemplo de animação em realidade aumentada.
 3 ANIMAÇÃO
49

Kuca Moraes ([20--?])

Figura 18 -  Exemplo de animação em Realidade Aumentada

Confira, nos sites a seguir, mais alguns exemplos de realida-

de aumentada: <http://realidadeaumentada.com.br/home/
index.php?option=com_content&task=view&id=25&Item
id=43>;
<http://olhardigital.uol.com.br/produtos/central_de_videos/
SAIBA crie-sua-propria-realidade-aumentada>;
MAIS
<http://comunicadores.info/2011/11/07/acao-de-realidade-
-aumentada-para-o-canal-national-geographic/>;
<http://www.tecmundo.com.br/2279-uma-selecao-de-
-aplicacoes-de-realidade-aumentada-para-voce-mesmo-
-experimentar.htm>.

Percebeu como as animações feitas em 3D são fundamentais para mostrar um

pouco de realismo virtual?
As animações em 3D também são muito importantes para simular diversas
produções, como: simuladores de voo para treinamento de pilotos, visualização
de objetos e corpo humano para enciclopédias digitais, representação de am-
bientes para facilitar no estudo de texturas e iluminação, e diversas outras aplica-
ções para mostrar o produto final.
Agora, você vai conhecer um pouco dos tipos de linguagens mais utilizadas
na web.
 ANIMAÇÃO
50
13 ADOBE FLASH PLAYER
Reprodutor multimídia
utilizado para reproduzir
jogos, vídeos e animações
na web.
14 ADOBE AIR
Permite a execução de
alguns softwares sem a
necessidade de utilizar um
navegador.
15 PLUG-INS
São pequenos sistemas que
servem para se encaixar
a outros programas e
executar mais recursos.
interações com o usuário, e não é indicado para criar ambientes virtuais, pois,
pelo excesso de informações, ele pode travar e não rodar todo o código que foi
utilizado.
a) Action Script 3.0 - é uma linguagem de programação da Adobe Flash
Player13 e do Adobe AIR14 (Adobe Integrated Runtime). Essa linguagem é usa-
da, na maioria das vezes, para criar uma interação com uma animação web,
permitindo que você controle ou manipule algum objeto contido na anima-
ção. A versão mais atual dessa linguagem é, atualmente, a 3.0, que é baseada
nos padrões da ECMA (European Computer Manufacturers Association).
b) HTML - é a sigla da expressão Hypertext Markup Language, que é uma lin-
guagem de marcação utilizada para o desenvolvimento de páginas web.
Essa linguagem é interpretada por todos os navegadores web. Por serem
arquivos de texto, os documentos html podem ser criados e editados por
qualquer documento de texto. Existem hoje, vários editores html que faci-
litam a programação das páginas e uma visualização antes mesmo de sua
publicação.
c) XHTML - é uma evolução do html. Essa linguagem é baseada na XML, e é
muito parecida com o html, pois utiliza o mesmo conjunto de elementos. O
que diferencia as duas linguagens é que o Xhtml utiliza regras de xml e pos-
sui alguns elementos adicionais, que não são encontrados no html.
d) HTML 5 - Após o seu lançamento, a linguagem HTML, com o decorrer dos
anos, foi evoluindo e surgiram novas versões, como por exemplo: HTML 2.0,
3.0 e o 4.0, nas quais foram feitas mudanças que enriqueceram a linguagem.
Após alguns anos do surgimento da linguagem HTML, foi lançado o HTML 5,
que revolucionou o mercado web, pois se adaptou à forma de trabalho dos
desenvolvedores web. Portanto, com o HTML 5 é possível fazer animações
muito próximas do Flash, muito mais leves e sem uso de plug-ins15.
e) Javascript - é uma linguagem orientada a objetos e incorporada ao HTML.
O Javascript é executado pelo navegador na hora da execução, e pode ser
copiado de qualquer site, por estar incorporado ao html. Ele possibilita a cria-
ção de pequenas animações e sites mais evoluídos, permitindo interativida-
de ao usuário. É importante ressaltar, ainda, que as páginas são carregadas
rapidamente.
FIQUE O javascript ainda tem problemas de compatibilidade,
pois precisa do plug-in do navegador para ser executado
ALERTA corretamente.
Esse tipo de linguagem é mais utilizada para sites que contenham pequenas
 3 ANIMAÇÃO
51

Aqui você finaliza esta etapa de estudo, onde você pôde conhecer alguns tipos
e técnicas de animação, softwares e linguagens mais utilizadas. Ainda tem muita
coisa interessante aguardando por você. Portanto, organize bem seus estudos e
garanta o sucesso!

3.4 CONSTRUIR A ANIMAÇÃO

Para desenvolver uma animação, é necessário contemplar várias etapas, como:

roteiro, storyboard, ilustrações e validações, algumas destas já vistas anteriormen-
te, para garantir a compreensão do processo de construção de uma animação. A
seguir, você terá algumas orientações básicas e exemplos de técnicas criativas e a
utilização do tempo na animação.

3.4.1 TÉCNICAS DE CRIATIVIDADE

BRIEFING

Você sabe, ou já ouviu falar no que é um briefing?

O briefing é um tipo de pesquisa realizada com o cliente, na qual serão feitas al-
gumas perguntas fundamentais para desenvolver um projeto, seja ele: uma peça
gráfica, um site, uma identidade visual, um cartão de visita ou um projeto gráfico
para materiais didáticos.
Hemera ([20--?])
 ANIMAÇÃO
52

O tipo de briefing que será aplicado pode variar de projeto para projeto. Um
modelo simples de briefing deve conter as seguintes questões.
a) Qual o problema a ser resolvido?
b) Quais peças serão produzidas (banner, logo, papelaria...)?
c) Aonde as peças criadas vão ser aplicadas (on-line, camisetas, cartazes...)?
d) Já existe algo pronto ou planejado?
e) Há alguma identidade a ser seguida?
f) Existe alguma ideia pré-estabelecida (conceito, cores, formas)?
g) Qual o foco da empresa atualmente?
Depois de definido o que será colocado no briefing, é só aplicar ao cliente, pos-
sibilitando à equipe compreender e mensurar o projeto. Agora, você é convidado
a conhecer uma técnica utilizada após a aplicação do briefing. Vamos lá!

BRAINSTORMING

Após o briefing, é necessário fazer uma reunião com a equipe envolvida na

produção, apresentando a ela todos os elementos coletados no briefing para, a
partir daí, definir o projeto gráfico e sistematizar como será desenvolvido o pro-
duto em questão. Essa reunião com toda a equipe, em que são lançadas as ideias,
é o brainstorming, também chamado de ‘tempestade de ideias’.
O brainstorming é uma técnica de criatividade que propõe que cada um da
equipe contribua com sua criatividade, pensamentos, diferenças e ideias. O intui-
to é consensar ideias que venham a contribuir de forma qualitativa para o projeto.
Comstock ([20--?])
 3 ANIMAÇÃO
53

Após listadas todas as ideias dos componentes, é necessário que a equipe ana-
lise uma a uma e chegue a um acordo sobre a ideia ou conjunto de ideias mais
apropriadas e viáveis para serem aplicadas ao projeto.
No brainstorm os componentes da equipe falam várias palavras e lançam di-
ferentes ideias, sempre de acordo com o projeto proposto. Essa etapa é realiza-
da dentro de um determinado tempo, e cada palavra, ideia e/ou sugestão deve
ser anotada para posterior análise. Na sequência, as palavras e ideias devem ser
analisadas por toda a equipe, independente de sua complexidade, ou por mais
inviável que pareçam inicialmente. É necessário que a equipe analise as ideias
sempre de acordo com a proposta, prazo e pessoas qualificadas para aplicar o
que foi definido.
Após esses processos e com o projeto gráfico delineado, é hora de organizar a
equipe e começar a produção em si.
Agora que você já conhece algumas técnicas de construção de animação, você
verificará, a seguir, a importância do tempo nesse universo.

3.4.2 TEMPO DA ANIMAÇÃO

O tempo é a unidade de medida de duração da animação. Existem animações

com 05 (cinco) segundos, 30 (trinta) segundos, 01 (um) minuto, 01(uma) hora,
isso varia de acordo com o tipo de animação. Saiba que, em comerciais de TV
são utilizados como padrão: 30 segundos e 01 minuto. Já no cinema, os curtas-
-metragens (ou só curtas) são filmes de até 30 minutos, normalmente produzidos
com 10 minutos.
A empresa Pixar (hoje um dos estúdios da Walt Disney), além de fazer os mais
famosos desenhos de animação para a indústria cinematográfica americana e
mundial, também é famosa por seus curtas-metragens. Os longas-metragens (ou
só longas) são filmes ou animações a partir de 60 minutos. Normalmente, são
produzidos longas de uma hora e meia, até duas horas, mas isso também não é
regra. No geral, em sites, normalmente as animações são mais rápidas, tirando al-
guns momentos - como abertura ou encerramento, que utilizam animações mais
demoradas.

VOCÊ Toy Story, lançado em 1995, foi o primeiro longa-metra-

gem dos estúdios Pixar e também o primeiro do mundo
SABIA? totalmente feito por computação gráfica 3D.
 ANIMAÇÃO
54

Blue Sky ([20--?])

Lembre-se de que o tempo de uma produção, como a animação de filmes,
deve sempre levar em consideração que o espectador também possui um tempo
de leitura e raciocínio, com isso, o animador tem que guiá-lo, respeitando e ade-
quando o tempo de sua produção ao seu público-alvo.
A seguir, você verá um quadro com os símbolos utilizados em roteiros e abre-
viaturas para as principais unidades de tempo.

UNIDADE SÍMBOLOS DE ABREVIATURA

1 hora 1h 1h

1 minuto 1´ 1min

1 segundo 1´´ 1s

Quadro 3 - Unidades de tempo

Ao rever a história, percebe-se que a preocupação com o tempo sempre acom-

panhou a evolução dos processos de animação.
No século XIX, Eadweard Muybridge estudou diversos tipos de ação ao foto-
grafar pessoas e animais em movimento. Criou técnicas e máquinas para fotogra-
far mais frames por segundo, com isso conseguia capturar o movimento quadro
a quadro de um cavalo correndo, por exemplo. Técnicas totalmente inovadoras
na época.
 3 ANIMAÇÃO
55

Kino Dinamico ([20--?])

Figura 19 -  Foto de um movimento registrado por Muybridge (1907)

Inventou também o Zoopraxiscópio, uma máquina similar ao Zootrópio, um

brinquedo que, ao ser girado, é possível ver uma animação.

Muybridge também inventou o Fenaquistiscópio, para ver

SAIBA a animação que esse brinquedo gera, acesse o seguinte site
MAIS desse tipo de animação: <http://www.cinematografo.com.
br/o-fenaquistiscopio/>.
Hugo Leandro ([20--?])

Figura 20 -  Foto de um Fenaquistiscópio

 ANIMAÇÃO
56
16 PLOT
Enredo ou trama, plot em
Inglês, é o desenrolar de
acontecimentos executados
pelos personagens em uma
ficção, a fim de criar sentido
ou emoção no espectador.
TIMING
É importante lembrar também que cada animação ou filme, em seu enredo,
tem momentos, cenas e plots16 que duram determinado tempo. Portanto, na hora
de desenvolver o roteiro, essa parte também deve ser planejada.
Você sabe o que quer dizer timing, no mundo da animação?
Diferente do significado literal de time (que significa tempo, em inglês), timing
quer dizer o tempo ou o momento certo para determinada ação dramática acon-
tecer.
Veja um exemplo: No desenho animado Rei Leão, bem na hora do nascimento
do Simba (leãozinho), todos os animais o esperavam, a música era orquestrada
e cantada para o momento em que o macaco o levanta no topo da montanha e
apresenta a todos, o futuro Rei Leão. Tudo aconteceu no tempo certo, ou melhor,
no timing certo. Cada movimento tem uma forma orgânica de ser. Se alguém tro-
peçasse, caísse ou mesmo se fosse tudo muito lento ou rápido, fugiria do timing
certo.
Veja, nas figuras a seguir, exemplos de timing e o tempo de uma caminhada.
Adaptado de Jaime Estevez ([20--?])
Figura 21 -  Como funciona o movimento
A palavra timing também se refere ao tempo que cada coisa se movimenta na
vida real, como por exemplo: um elefante tem um tempo e velocidade diferentes
de uma gazela ao caminhar, pois os dois possuem pesos diferentes. Se, ao elabo-
rar a animação, você fizer um elefante muito rápido ou uma gazela muito lenta,
estará trocando o timing de cada um.
 3 ANIMAÇÃO
57

Contudo, veja a seguir, alguns exemplos de timing trocados que fizeram su-
cesso. Exemplos: A velocidade e leveza do elefante Dumbo, que ao voar, foge do
elefante real. Ou a peixinha Dory, do desenho Procurando Nemo, ao falar “balei-
ês” (falandooo bemmm devagarrrrr, como uma baleia).

Fan Pop ([20--?])

Partindo desses exemplos, você pode perceber que quem controla o timing é
o animador ou a equipe criativa.
Você sabe o que é o clímax de um filme?
O Clímax é o momento alto do filme, no timing certo.
No momento em que for necessária uma interação mais complexa entre os
elementos da animação, nesse caso, ilustrações por meio do programa Adobe
Flash, entra em ação a parte de programação e do programador.
 ANIMAÇÃO
58
17 ANIMATIC
Mostra os principais
quadros-chave das cenas
de uma animação. Com
ele, você já tem uma prévia
da animação, podendo
ter voz e trilha sonora.
Normalmente é um gif
animado.
TIMELINE
Fazendo uma analogia, a linha do tempo é uma metáfora dos antigos rolos de
filme, onde cada quadro aparecia no rolo, normalmente na posição horizontal.
Em programas de animação, a timeline (ou linha do tempo, em português) é a
barra de ferramentas utilizada para controlar e organizar a animação em sua es-
cala de tempo (segundos, minutos), portanto, é a sequência dos quadros. Se você
se movimenta na linha do tempo, a animação acontece. Normalmente, existe um
indicador de reprodução que mostra em qual segundo você está na animação.
Conforme você pode acompanhar, na figura a seguir, da timeline do programa
Captivate.
Adobe ([20--?])
Figura 22 -  Timeline do programa Captivate
Timeline no programa Adobe Flash
Veja, na figura a seguir, a timeline do programa Adobe Flash.
Adobe (2012)
Figura 23 -  Timeline do programa Adobe Flash
Como você pode perceber, no programa Adobe Flash, a timeline é dividida
em duas partes. No primeiro quadrante (da esquerda), são listadas as camadas e
no segundo quadrante (da direita), é onde fica a linha do tempo. Diferentemente
de outros programas, onde a linha do tempo é inteira, no Flash cada segundo
tem um frame/quadro em branco. De 5 em 5 segundos há um quadro cinza para
facilitar a visualização temporal.
 3 ANIMAÇÃO
59

No rodapé do segundo quadrante aparecem, entre outras opções, o número

do quadro atual, a velocidade (taxa de amostragem em FPS) e o tempo decorrido
até o momento. Um keyframe (ou quadro-chave) pode permanecer por diversos
quadros na timeline. Verifique, a seguir, algumas orientações.
a) Quadro-chave em branco: quer dizer que não tem nenhum objeto neste
quadro. Possui um círculo vazio.
b) Quadro-chave cinza: informa que o quadro tem algum objeto. Possui um
círculo preto preenchido (que simboliza o início do quadro-chave) e um re-
tângulo branco (que simboliza o final do quadro-chave). Se o quadro-chave
estiver em cinco segundos, por exemplo, quer dizer que possui o mesmo
objeto durante esse tempo.
Conheça também algumas teclas de atalho.
a) F5 – Insere um novo quadro.
b) F6 - Insere um novo quadro-chave.
c) F7 - Insere um novo quadro-chave vazio.
d) SHIFT + F6 - Remove o quadro-chave.
e) SHIFT + F5 - Remove o quadro.
Timeline no programa Adobe Photoshop
O Photoshop também faz gifs animados. Com ele, você pode fazer Animatics17
com seus desenhos ou storyboards. Para isso, adicione a janela Animação, acres-
cente mais uma layer (camada) e a janela aparecerá na parte inferior da tela.
Adobe (2012)

Figura 24 -  Modo timeline do programa Adobe Photoshop

 ANIMAÇÃO
60

18 DROPDOWN Na parte superior da janela você encontra o tempo e a velocidade da anima-

ção. No quadrante esquerdo estão as camadas e os comentários. Na parte inferior,
É o nome da seta apontada
para baixo, que geralmente você encontra o painel de controle da animação que, assim como em aparelhos
serve para indicar que há de som, possui as opções: play, pause, passar adiante, retroceder, som, além de
um menu oculto. Quando
se clica ou passa o mouse uma barra de zoom (com ela você pode fazer aparecer mais ou menos frames).
sobre ela, aparece, na
mesma, um menu. É muito No canto inferior direito há também um ícone que você pode utilizar para mudar
utilizada em programas e o modo de visualização (modo timeline ou modo frames). Veja, a seguir, o modo
sites.
frames do programa Adobe Photoshop.

19 ARTEFATO INTERATIVO

São meios de comunicação

interpessoal.

Adobe (2012)
Figura 25 -  Modo frames do programa Adobe Photoshop

Perceba que no modo frames você consegue ver uma miniatura do quadro
em que está. Na parte inferior do frame, você pode regular o tempo de cada qua-
dro. Na dropdown18 você escolhe o fluxo da animação, pode passar uma vez só,
três vezes ou repetidamente. No ícone quadrado com um canto de página virada,
você pode adicionar uma nova layer na animação.

FIQUE Lembre-se de que essa layer não aparecerá na barra de

ALERTA ferramentas de camadas.

Timeline no programa Pencil 2D

O Pencil 2D é um Freeware (software livre) de animação, não muito conhecido
comercialmente. Contudo, é utilizado em cursos de animação em nível nacional,
como o AnimaEdu, da Otto desenhos animados.
Pencil 2D ([20--?])

Figura 26 -  Timeline do programa Pencil 2D

 3 ANIMAÇÃO
61

Veja algumas funções encontradas nessa timeline.

a) Na parte superior esquerda você pode verificar os símbolos de + e -, nesses
botões você acrescenta layers.
b) Na parte superior central há os símbolos de + e -, onde você pode acrescen-
tar keyframes.
c) Na parte superior central você encontra o símbolo de Onion skin, ali você
habilita o modo cebola, onde a camada superior fica transparente, sendo
possível ver a camada inferior.
d) Na parte superior direita há o símbolo de play (inicia e pausa a animação),
looping (ao terminar a animação ela reinicia novamente), som (desliga e liga
o som) e FPS (mostra a velocidade da animação em frames por segundo).
e) Na parte inferior esquerda temos as camadas de vetor e as camadas de bit-
map.
f) Na parte inferior direita temos a linha do tempo. O que está em azul é bit-
map, o que está em verde é vetor.

CASOS E RELATOS

Demonstrando técnicas de animação

Um professor, que dava aula em um curso de Design, estava ministrando
uma disciplina chamada Usabilidade e Ergonomia de Interfaces, Projeto
de Viabilidade. Nesta disciplina, ele resolveu dar uma aula diferente das
tradicionais. Sendo assim, ele separou a turma em grupos, e o objetivo
era que cada grupo criasse um tipo de artefato interativo19 e o demons-
trasse de forma diferente.
Um desses grupos criou um produto que ajudava na limpeza doméstica,
fazendo com que as pessoas colaborassem mais com a limpeza da casa.
No entanto, para simular esse produto e analisar a usabilidade e intera-
tividade com as pessoas, eles utilizaram diversas técnicas de animação.
Uma delas foi utilizando papéis, com a interface do “futuro produto”,
onde as pessoas tinham que “clicar” nos papéis como se tivessem aces-
sando o produto.
 ANIMAÇÃO
62

A outra técnica de animação foi montando o layout final do produto e

salvando todas as telas de demonstração como imagem. Nisso, uma pes-
soa ficava filmando o monitor onde apareceriam essas imagens, e a outra
pessoa ficava passando pra frente a imagem e simulando um clique com
o dedo.
Esse exemplo foi dado pelo professor, pois a ideia de demonstrar um
produto com diversas técnicas de animação, fora do computador e dire-
tamente com o usuário, é muito relevante, pois dessa forma é possível vi-
sualizar o que deve ser melhorado, e concluir se as pessoas conseguiram
ter uma boa interatividade.

Aqui você pôde ver que a animação ou filme não é só o produto final, ela pode
servir também de base para demonstrar, apresentar ideias e mensagens. Muitas
empresas e serviços utilizam a animação para potencializar suas apresentações
e vendas. Como por exemplo: empresas do ramo de publicidade, produtoras de
áudio e vídeo, jornalismo, empresas de Educação a Distância, estúdios de anima-
ção, softhouses (empresas criadoras de programas e games), dentre várias outras.

SAIBA Para conhecer mais sobre técnicas de animação acesse:

<http://artefatosinterativos.blogspot.com/search/label/
MAIS P%C3%A3n>.

Após ter visto exemplos práticos do dia a dia que englobam a animação, você
verá, a seguir, um apanhado geral do que foi estudado neste capítulo. Confira no
recapitulando.
 3 ANIMAÇÃO
63

RECAPITULANDO

Neste capítulo foram permeados alguns princípios e fundamentos da

animação. Você pôde conferir a variedade de tipos e formatos de ani-
mações, como também, a importância do storyboard e sua utilização nas
animações. Pôde entender melhor a utilização do tempo, com suas uni-
dades de medida, o tempo dentro do enredo e a emoção na animação.
Viu exemplos de animações e empresas de animação famosas e premia-
das nacional e internacionalmente, como a Pixar. Conheceu alguns prê-
mios como o Anima Mundi, aqui no Brasil, e o Oscar, no EUA, além das
invenções e estudos de Eadweard Muybridge, de suma importância para
a história da animação e do cinema, contribuindo com a descoberta de
novos olhares sobre o movimento. Pôde ainda, ver como um corpo se
movimenta quadro a quadro. Você descobriu também o que é a persis-
tência retiniana e como é interessante o estudo da visão, além da impor-
tância do timing no roteiro e no desenvolvimento da história. Por fim,
você pôde conhecer alguns programas que utilizam animações.
Continue atento para aprender mais a cada etapa cumprida. Na sequên-
cia, o convite será para aprender sobre web. Vamos em frente!
 WEB

Este capítulo trará uma noção básica de como estruturar uma animação para um projeto
web. Aqui você verá o que deve ser feito na criação de um projeto de animação, focando sem-
pre no público envolvido e na importância do roteiro, além do estudo da imagem, usabilidade
e formatos mais utilizados nas animações. Partindo desses conhecimentos, ao final desse capí-
tulo, você terá subsídios para:
a) aplicar os princípios da área de web design no desenvolvimento das animações;
b) desenvolver animações para um projeto de web.
Agora, você é convidado a explorar todas as informações disponíveis sobre esses assuntos,
fazendo do seu aprendizado um processo de construção do conhecimento. Portanto, inicie
com dedicação e atenção, fazendo do seu estudo uma oportunidade de refletir sobre suas prá-
ticas diárias.
 ANIMAÇÃO
66

4.1 PRINCÍPIOS BÁSICOS PARA PROJETO WEB

“Na produção de áudio, vídeo e na produção digital, usadas como produções

interativas baseadas na Web, o escritor precisa escolher as melhores técnicas para
representar o conceito que deseja, no roteiro”. (MUSBURGER, 2008, p. 44). Contu-
do, saiba que não é necessário um amplo conhecimento de técnicas de produção
para desenvolver um roteiro, basta entender um pouco de cada meio, para poder
produzir e avaliar quais recursos e técnicas serão necessários para a produção da
animação.

Você sabia que um dos caminhos que vem sendo pes-

VOCÊ quisado atualmente é a interface com o reconhecimen-
SABIA? to de voz: para substituir o mouse pelos auriculares e
pelo microfone? (ROYO, 2008).

Acompanhe, agora, alguns princípios a serem considerados na concepção de

um projeto web:
a) devem ser claros e concisos na linguagem: não escrever se-
não o estritamente necessário e pensar que o que escrevemos
deve ser entendido por uma criança de pouca idade;
b) mostrar uma navegação simples e sequencial se a ajuda exigir
mais que uma parte;
c) dividir a ajuda em tantas partes quantas necessárias para ex-
plicar os passos da forma mais simples possível: é importante
não explicar mais do que um conceito em cada parte da ajuda;
d) acompanhar os textos de esquemas ou ilustrações informati-
vas sempre que necessário ou quando for uma boa ajuda para
esclarecer um conceito. (ROYO, 2008, p. 109).

FIQUE Evite que o usuário perca o tempo dele buscando opções

e caminhos muito óbvios, o importante é conhecer as ex-
ALERTA pectativas e a reação do usuário.

De acordo com Muybridger (2008), os envolvidos pelo projeto devem certifi-

car-se de:
 4 WEB
67

a) informar-se sobre a organização e as responsabilidades da

equipe técnica e de produção com que você irá trabalhar no
roteiro;
b) aprender as técnicas de produção básicas e formas alternati-
vas de realizar o projeto;
c) pensar com clareza sobre as imagens e os sons que deseja para
sua produção;
d) estar pronto para aceitar algumas alterações necessárias no
roteiro para que o programa seja concluído. Saber como a pro-
dução será distribuída.
Perceba que o design visual se divide em dois planos que se complementam.
Um é dar identidade a um espaço vazio, complementando com cores, tipografia,
imagens, esquemas, ícones, etc., ou seja, a identidade visual do projeto de web.
O outro plano que se complementa é estabelecer a largura do website, criando
elementos hipertextuais, coerentes com o contexto atribuído.
Lembre-se de que para manter uma identidade visual coerente é necessário
manter a proposta gráfica em toda a interface, demonstrando ao usuário alguns
princípios básicos dos padrões de visualização de imagens, como:
a) organização;
b) equilíbrio;
c) unificação;
d) segregação;
e) continuidade
f) semelhança;
g) fechamento.
A Gestalt, mais conhecida como psicologia da forma, é um estudo muito utili-
zado por designers. Ela serve de apoio para analisar e dar forma a uma imagem e/
ou à unificação de várias imagens.

SAIBA Veja um pouco sobre as leis da Gestalt nesse site: <http://

MAIS chocoladesign.com/fundamentacao-e-leis-da-gestalt>.
 ANIMAÇÃO
68

Aqui finalizamos mais uma etapa de estudos. Preparado para seguir adiante?
Explore essa oportunidade de aprendizagem e veja quantas descobertas serão
possíveis!

4.2 NECESSIDADES DOS FORMATOS WEB

É importante que você saiba que os tipos de formatos para carregar uma ani-
mação em um ambiente virtual precisam deixar os arquivos leves, para não cau-
sarem problemas de demora no carregamento.

Na produção de áudio, vídeo e na produção digital, usadas

como produções interativas ou baseadas na web, o escritor
precisa escolher as melhores técnicas para representar o con-
ceito que deseja no roteiro. Um amplo conhecimento de téc-
nicas de produção não é necessário para o escritor; por outro
lado, um determinado conhecimento fornece ao escritor os
meios necessários para entender como o processo de produ-
ção funciona. (MUSBURGER, 2008, p. 44).

Os projetos web variam de acordo com o que cliente deseja, como: um site,
um banner, materiais didáticos para educação a distância ou um jogo. No entan-
to, focando mais na educação a distância - que geralmente possui um grande
número de animações para proporcionar mais interatividade durante o curso -,
os formatos das animações ou conteúdos devem ser leves, sejam elas criadas em
PowerPoint, Flash, javascript ou qualquer outro tipo de formato.
Por exemplo: uma animação feita para um curso extenso, não deve ser desen-
volvida apenas em Flash, pois na hora do seu carregamento, e dependendo do
tipo de hardware que o usuário possua, ela pode travar. Assim como, em javas-
cript, que pode funcionar apenas em um navegador web. O correto é não utilizar
apenas esse tipo de linguagem (no caso do javascript, é mais utilizado para sites e
não para ambientes virtuais de aprendizagem).

O Flash está expandido bastante na área de programa-

ção, e é o responsável pelo carregamento de tutoriais,
VOCÊ vídeos, objetos em 3D e realidade aumentada, como
citado anteriormente. Podendo ser utilizado na parte de
SABIA? atividades, demonstrações e simulações, tendo sempre
como contrapartida não utilizar apenas um tipo de pro-
gramação na construção para web.
 4 WEB
69

O assunto não para por aqui. Siga em frente, aproveite todos os caminhos que
levam ao conhecimento.

4.3 CORES E FORMATOS WEB

É importante sempre lembrar que para o projeto gráfico de uma mídia

eletrônica a equipe criativa tem a função de delimitar alguns parâmetros, como:
quantidade, tamanhos, sequência, número de hits, ilustrações, botões, caixas,
planejamento da navegabilidade, ideias, velocidade, tipos, tempo, cenas, plots,
cores, roteiro, dentre vários outros fatores que influenciam em um projeto de ani-
mação. Sendo assim, acompanhe, a seguir, os tipos e padrões de cores e formatos
web.

4.3.1 TIPOS E PADRÃO DE CORES

Para desenvolver qualquer trabalho é importante definir qual padrão de cores

será aplicado. De acordo com o meio que será veiculado, você pode encontrar
vários tipos de padrão. Os mais utilizados são RGB e CMYK. Veja, a seguir, a matiz
e paleta de cores RGB e CMYK.
Adaptado de Wikipedia ([20--?]), Corel ([20--?])

Figura 27 -  Matiz e paleta de cores RGB e CMYK

 ANIMAÇÃO
70

1 ANIMATIC RGB CMYK

(Red, Green e Blue) (Cyan, Magenta, Yellow e Black)
É uma composição de
computação gráfica Vermelho, verde e azul Ciano, Magenta, Amarelo e Preto
que mostra a ilustração,
animação, música e Soma de todas as cores = Branco Soma de todas as cores = Preto intenso
vozes, dando uma noção Tela: Luz Impresso: Pigmento
do projeto final. É muito
parecido com o storyboard.

Free Great Picture ([20--?])

Midia Publicitária ([20--?]),
iStockphoto ([20--?])
BPI Inc. ([20--?])

Ex.: Tela Computador Ex.: Livro

Resolução Ideal: 72DPI Resolução Ideal: 300 DPI
Medida Padrão: px Medida Padrão: cm
Escala de: 0 > 255 Escala de: 0 > 100
Quadro 4 - Tipos de Cores (CMYK e RGB)

Procure na Internet artigos sobre o tema ou leia o livro:

SAIBA FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho. Psicodi-
MAIS nâmica das cores em comunicação. 4. ed. São Paulo: Edgar
Blücher, 1990.

As cores dão vida ao trabalho, não é mesmo? Sendo assim, é extremamente

necessário você conhecer os padrões mais utilizados. Use sua imaginação, cria-
tividade e abuse do elemento cor. Claro, sempre de acordo com o PG (Projeto
Gráfico).

4.3.2 TIPOS E FORMATOS WEB

Há diversos formatos utilizados para a criação de projeto para web. Formatos

tanto para a parte estática quanto para a parte dinâmica. Portanto, há os tipos
que são utilizados especificamente para web, e outros formatos para material im-
presso. A diferença se dá no momento da exportação, pois para web o formato
tem que ser mais leve, sendo assim, o formato RGB é o mais apropriado. Já para
impressão, o formato mais pesado pode ser utilizado, como o CMYK, para as co-
res, obtendo assim, uma maior definição na hora da impressão.
 4 WEB
71

É muito importante ficar atento ao formato de cores quando se for tratar uma
imagem ou qualquer outro tipo de função, pois as cores mudam muito do RGB
para o CMYK.
Confira, a seguir, algumas das principais extensões de arquivos e seus respec-
tivos programas.
a) .pdf (arquivo para impressão) - Utilizado frequentemente para as imagens
em vetor e vetor com imagem.
b) .eps (arquivo para impressão) - Pouco utilizado, normalmente para vetores
finalizados.
c) .cdr (Corel Draw) - Utilizado com muita frequência para imagens vetoriza-
das, personagens para animação, cenários e afins.
d) .psd (Photoshop) – É usado com muita frequência para tratamento e mon-
tagem de imagens e, dependendo do projeto, para criação e colorização de
personagens.
e) .tif - Pode acontecer de algumas vezes vir imagens do conteudista ou for-
necedor nesse formato. Nesse caso, salve, de preferência, em .jpg ou .pdf. É
importante proceder com a troca de formato, principalmente por causa do
tamanho do arquivo (que fica muito grande).
f) .bmp - Pode acontecer de algumas vezes vir imagens do conteudista ou for-
necedor nesse formato. Nesse caso, salve, de preferência, em .jpg ou .pdf.
g) .jpg (foto) - Utilizado com frequência, principalmente para fotos e imagens.
h) .png (WEB) – Formato de imagem bastante utilizado para web. Permite dei-
xar uma imagem com fundo transparente.
i) .gif – Extensão utilizada normalmente quando uma imagem requer transpa-
rência no fundo. Bastante utilizado para animatics1. Pode ser feito no Adobe
Photoshop.
j) .ai (Adobe Ilustrator) - Utilizado para vetorizar as imagens. Seu uso é bastan-
te comum para fazer capas e anúncios publicitários.
k) .fla (Adobe Flash) – Arquivo de animação do Adobe Flash. Utilizado em ve-
tores, imagens, sons, vídeos, entre outros.
l) .swf (Animação para Web) - Normalmente utilizado como formato final para
os arquivos feitos em .fla.
m) .html e .php – Utilizado pelos programas Dreamweaver e Fireworks para
websites. Veja, a seguir, a tela do programa Dreamweaver.
 ANIMAÇÃO
72

2 ANIMATIC

É um minissite, utilizado
para um público em
específico, tendo uma
maior relação entre o site e
o usuário.

Adobe (2012)
Figura 28 -  Tela do programa Dreamweaver

n) .pps e .ppt – Extensões utilizadas no Microsoft PowerPoint para fazer slides

ou hotsites.
o) .cptx (Captivate) – Extensão utilizada no Captivate. Programa que faz cap-
turas de telas, muito utilizado para fazer vídeoaulas. Confira, a seguir, a tela
do programa Captivate.

Adobe (2012)

Figura 29 -  Tela do programa Captivate

 4 WEB
73

p) .max – Extensão para animação em 3D, no programa 3DMAX. Um dos pro-

gramas mais conhecidos e utilizados para animação 3D.
q) .blend – Extensão também para animação em 3D, só que do programa
Blender (Software Livre). Confira, a seguir, a tela do programa Blender.

Blender ([20--?])
Figura 30 -  Tela do programa Blender

Lembre-se sempre de utilizar adequadamente as ferramentas e seus recursos,

otimize o tempo, garanta um resultado de qualidade e atenda os padrões defini-
dos no projeto gráfico.

Você sabia que a empresa Macromedia, famosa por ter

VOCÊ uma linha com mais de 30 programas (dentre eles, o
Macromedia Flash), foi comprada pela empresa Ado-
SABIA? be Systems, em 2005, por 3.4 bilhões de dólares (em
ações)?

Veja, a seguir, uma pequena história que mostra a importância do planeja-

mento entre equipes, e como é enriquecedor o conhecimento específico de cada
um, para contribuir com um projeto que esteja sendo elaborado em equipe.
 ANIMAÇÃO
74

CASOS E RELATOS

Conhecimento e bom senso

Em uma pequena empresa de Design, que trabalhava mais especificamente
com materiais didáticos, havia umas pessoas um pouco inexperientes quan-
do o assunto era “Interface gráfica”, pois eles pensavam que essa área era
mais focada em tipos de programação. E, no entanto, esqueciam-se da parte
principal, que era o layout e a usabilidade.
Certa vez, pegaram um projeto grande para desenvolver um curso de capa-
citação, e neste mesmo período haviam pesquisado sobre a linguagem Java
Script. Eles resolveram, então, utilizar esta linguagem no projeto. Contudo,
não sabiam que esta linguagem já estava um pouco ultrapassada para a épo-
ca e acabaram aplicando este tipo de linguagem em todo o material que esta-
va sendo desenvolvido e que, futuramente, seria disponibilizado na web para
os alunos.
Adivinhe o que aconteceu quando os alunos começaram a acessar as salas
virtuais de aprendizagem?
Quando os alunos foram acessar os conteúdos, não foi possível carregá-los.
Inicialmente, travaram-se todos os objetos clicáveis, pois quando carregados,
em alguns navegadores e dependendo do tipo de velocidade da Internet, es-
tes não funcionavam. Após receber o retorno de reclamação dos alunos, vá-
rios testes foram realizados pela equipe responsável. Foi quando uma desig-
ner e um programador mais experientes tomaram conhecimento da situação
e resolveram ajudar.
Os profissionais deram a ideia de fazer apenas partes do curso com este tipo
de linguagem, já que a mesma é muito pesada. O restante do curso precisaria
ser desenvolvido utilizando recursos com formatos mais leves, foi então que
eles sugeriram utilizar a realidade aumentada, efeitos em 3D, atividades e jo-
gos interativos em Flash, que são, ao mesmo tempo, mais interativos e de me-
lhor usabilidade, e se encaixavam melhor com a proposta inicial do projeto.
Os ajustes foram providenciados pela equipe que, após este acontecimen-
to, passou a analisar melhor os tipos de programa aplicados aos projetos e a
importância de se verificar sempre a usabilidade antes de disponibilizar aos
alunos.
 4 WEB
75

Com este exemplo, você pôde perceber o quanto é fundamental que os

profissionais detenham conhecimento sobre os programas que trabalham, e
tenham uma constante atualização e busca por novos softwares ou linguagens,
para que o produto final seja de qualidade.
Aqui você finaliza mais uma etapa. Explore todas as informações disponíveis.
Lembre-se: dedicação e comprometimento são essenciais para o processo de
aprendizagem.

RECAPITULANDO

Neste capítulo você pôde constatar a importância do planejamento de

um projeto web para criar uma animação. Um projeto web tem que ser
bem planejado, pensando sempre no público de interesse, na usabilida-
de e na interface gráfica, verificando o que é viável fazer ou não. Você
aprendeu ainda, que é preciso apresentar algo inovador ao cliente, dei-
xando para trás técnicas que não são mais utilizadas e sempre projetando
algo além do que pode ser esperado, surpreendendo a todos os envolvi-
dos e trazendo bons resultados.
Você viu também a importância do roteiro, do projeto gráfico e suas uti-
lizações. Além disto, foram abordadas as leis da Gestalt, grande norte-
adora do Design, da usabilidade e navegabilidade em todas as mídias
eletrônicas. Você pôde estudar a questão do design de interfaces na web,
como os tipos de cores mais utilizados (RGB para mídia eletrônica e CMYK
para mídia impressa). Foram permeadas as linguagens 2D e 3D em seus
mais diversos formatos e programas, constatando que as animações não
possuem apenas um arquivo ou um formato.
Por fim, é importante salientar que é fundamental que você conheça os
mais diversos formatos e programas para adentrar no universo da anima-
ção. Procure sempre pesquisar e experimentar novos programas e utilize-
-os de forma coerente e de acordo com o objetivo almejado.
 Animando no Adobe Flash

Neste capítulo, você irá conhecer alguns programas que irão lhe auxiliar na criação de ani-
mações. Verá também os princípios básicos para o desenvolvimento de uma animação utilizan-
do o programa Adobe Flash, conhecendo suas principais ferramentas e formas de animação,
técnicas e tipos de edição. Portanto, ao final deste capítulo, você terá subsídios para:
a) identificar as ferramentas básicas para criar uma animação no Flash;
b) aplicar as técnicas de edição do Flash.
Agora, você é convidado a explorar todas as informações disponíveis sobre o Adobe Flash.
Faça do seu aprendizado uma oportunidade de refletir sobre suas práticas diárias.
 ANIMAÇÃO
78

5.1 PREPARANDO O ARQUIVO NO FLASH

Ao abrir o programa Adobe Flash, você encontrará diversas opções de tipos de

arquivos para criar, porém, o mais utilizado é o Action Script 2.0. Portanto, abra o
Flash e escolha File > Create New > Action Script Flash 2.0.
Após, o Flash irá exibir um documento novo em branco que se chama Stage,
que em português significa palco. Esse palco pode ser configurado do tamanho e
da cor que você desejar.

FIQUE A melhor forma de você se certificar que a animação ficará

com o tamanho correto é configurando o stage logo no
ALERTA início da criação da mesma.

A seguir, veja em detalhes, a tela inicial do Flash.

Adobe (2012)

Figura 31 -  Tela inicial do Flash

Que o arquivo do Flash possui extensão .fla? Portanto,

ao finalizar seu trabalho no Flash, o arquivo será salvo
VOCÊ com essa extensão. Clicando na aba arquivo, configura-
ções de publicação ou a tecla de atalho ctrl+shift+f12
SABIA? abrirá uma janela com as opções de publicação que o
Flash possui. A mais utilizada para publicação web é o
formato .swf.
 5 ANIMANDO NO ADOBE FLASH
79

A seguir, você irá conhecer alguns conceitos e ferramentas essenciais que são
disponibilizados no programa Adobe Flash. Siga em frente, ainda tem muita coisa
interessante aguardando por você.

5.2 LAYERS (CAMADAS)

É importante sempre lembrar que a utilização de camadas serve para facilitar

o processo de empilhamento de objetos. Imagine as camadas de uma animação
como se fossem as páginas de um livro, uma página em cima da outra, ou seja,
cada página corresponde a uma camada.

Você sabia que o flipbook foi o primeiro dispositivo de

VOCÊ animação linear, criado em 1868, chamado também de
SABIA? Kineógrafo, Thumb Book (livro de polegar) ou filme de
bolso?

Veja na figura a seguir, um exemplo de flipbook. Adobe (2012)

Figura 32 -  Camadas na animação tradicional (bloco de folhas) e um flipbook

No Adobe Flash, no Adobe Photoshop e em outros programas, normalmente

os objetos das primeiras camadas (de cima pra baixo, as mais altas) ficam em cima
e assim por diante, como nas páginas de um livro. As camadas servem para orga-
nizar os objetos da animação sem que um interfira no outro. Com isso, você pode
criar animações mais complexas.
 ANIMAÇÃO
80

1 LEARNING GAME No Adobe Photoshop, na barra de ferramentas das layers, você pode acres-
centar efeitos à camada, como: opacidade, bloqueá-la, ocultá-la, aplicar máscara,
O significado literal, em
português, é jogo de grupo, pasta, nova camada e excluí-la.
aprendizagem. É um jogo
ou minijogo utilizado como Saiba que as layers são muito utilizadas para fazer fotomontagens com vários
método educativo, um
tipo de material didático objetos, onde um pode ser terminado pelo outro, misturando-se um ao outro.
pedagógico. Além disso, as layers podem ser usadas para desenhar. Por exemplo: em uma ca-
mada de baixo desenha-se o rascunho ou traço, na camada superior desenha-se
a arte-final, por cima do desenho, sem mexer na anterior, como se fossem duas
folhas. Depois, se você quiser, é só apagar a layer do rascunho. Você pode ainda
acrescentar uma layer abaixo da layer arte-final e pode utilizar essa mesma para
colorir o desenho (usando, no total, apenas 03 layers). Esse mesmo desenho pode
ser utilizado, posteriormente, no Adobe Flash.
No Adobe Flash também é possível animar objetos de forma independente
com as layers, com um objeto animado para cada camada. Para isso, você deve
clicar na janela da timeline e depois em New Layer. Após, uma nova camada será
criada acima das layers já existentes.
Normalmente esse procedimento é feito para a programação, deixando uma
camada só para as actions (ou ações que, ao teclar F9, você pode acrescentar à
programação). Fazendo isso, o keyframe fica com um ícone de um “a” pequeno.
Aqui você finaliza mais uma etapa. Explore todas as informações disponíveis,
na próxima etapa você verá como organizar uma animação. Lembre-se: dedica-
ção e comprometimento são essenciais para o processo de aprendizagem.

5.3 ORGANIZAR A ANIMAÇÃO

Como foi citado anteriormente, no método tradicional de animação tem-se

um bloco em que são empilhadas várias folhas com desenhos, e nesta vasta gama
de desenhos é necessário existir um padrão de organização.
Imagine se entra um vento forte na sala em que estão todas as folhas sobre a
mesa e todas as folhas se espalham e caem no chão. Como saber qual fica antes
ou depois?
Seria bem complicado e demorado reorganizar, pois esta sequência é funda-
mental. No Adobe Flash cada desenho tem primeiro um número de quadro e
segundo, uma ordem padronizada (uma sobre a outra e uma depois da outra).
Como dito anteriormente, para criar uma nova camada no Flash, basta clicar na
janela da timeline e depois em New Layer, que logo uma nova camada será criada
acima das camadas já existentes. Conforme é mostrado na figura a seguir.
 5 ANIMANDO NO ADOBE FLASH
81

Adobe (2012)
Figura 33 -  Camadas ou Layers

Outra sugestão é organizar as camadas pelo tipo de objeto. A seguir, veja um

exemplo de organização de camadas, utilizado em um Learning Game1 para Ensi-
no a Distância.
Neste caso, o animador procurou organizar as camadas da seguinte maneira:
Adobe (2012)

Figura 34 -  Organização das layers de um curso

 ANIMAÇÃO
82

2 GOTOANDPLAY No Adobe Flash, no ícone de um olho , você pode mostrar ou ocultar determi-
nada camada, quando precisar. Já no ícone do cadeado , você pode bloquear
Número do frame ou nome
do objeto. determinada camada. A camada que você estiver no momento fica com um ícone
de lápis , simbolizando que está sendo editada. No quadrado ao lado do
cadeado, você pode selecionar uma camada e deixá-la em outline, ou seja, invi-
sível (neste modo ela automaticamente se bloqueia). Acompanhe um exemplo:
você tem 05 camadas e quer ver 04 delas e mexer na 03. Sendo assim, você deve
ocultar a que não quer ver e bloquear todas as que não quer mexer, mas quer ver.
Desta forma, você verá 04 e conseguirá mexer na camada 03 sem alterar as outras.

FIQUE Tente sempre deixar os nomes das camadas com números,

letras minúsculas e evite caracteres especiais (acentos, es-
ALERTA paços, barras...).

Com os ícones da parte inferior esquerda você pode, respectivamente:

a) inserir uma camada nova;
b) criar uma nova pasta;
c) deletar a camada.
Viu como pode ser fácil organizar uma animação? Preparado para seguir
adiante? A seguir, o assunto será Frames e Keyframes. Explore essa oportunidade
de aprendizagem e veja quantas descobertas serão possíveis!

5.4 FRAMES E KEYFRAMES

Anteriormente, você teve uma visão geral sobre Frames, agora você vai acom-
panhar com mais detalhes o assunto. Conforme já visto, a animação nada mais é
do que uma sequência de imagens enquadradas e mostradas uma após a outra.
Para você compreender melhor este processo, é importante saber que os
keyframes (quadros-chave) são as imagens distintas que você designou, ou seja,
o “frame” principal. Já os frames (quadros) são onde estão contidas quaisquer
imagens, ou intervalos entre um keyframe e outro.
Para fazer a animação parar em um certo ponto desejado deve-se usar o co-
mando stop() que é utilizado para parar a animação. Esse comando pode ser in-
serido diretamente no frame desejado ou programado em um botão para parar
a animação.Para continuar a execução da animação é utilizado o comando play()
que pode ser feito através de um botão.Caso seja necessário pular a animação
para um ponto especifico da animação existe o comando gotoAndPlay2.
 5 ANIMANDO NO ADOBE FLASH
83

Por volta de 1870, Joseph Plateau provou que o olho humano conserva a im-
pressão do objeto luminoso até um terço de segundo após a desaparição desse
objeto. Para isso, Plateau fixou o olhar no sol por 25 seg., ficando cego mais tarde.
Para você testar essa teoria sem prejudicar sua visão (pois olhar diretamente
para o sol pode causar graves danos aos olhos), sugerimos que você olhe um ob-
jeto escuro que seja mais uma silhueta por 30 segundos e depois olhe para uma
parede branca. Você notará que a mesma imagem se projeta na parede.
Outra experiência pode ser feita com as cores: fique olhando 30 segundos para
uma cor muito forte, depois olhe para uma parede branca. Você pode ver que a
cor projetada não foi a mesma, mas sim a cor invertida (cor complementar). Veja
o exemplo: se você olhou primeiramente para o vermelho, na parede aparecerá
a cor verde.

Você sabia que o olho humano vê, em média, 24 frames

VOCÊ por segundo?
SABIA? Por isso, os filmes e animações normalmente são feitos
com 24 ou 30 frames por segundo.

Você sabe ou já ouviu falar no fenômeno da “Persistência Retiniana” ou “Inér-

cia Ocular”?
É o fenômeno em que a imagem vista fica no fundo do olho humano (na retina)
durante um breve lapso de tempo. Sendo assim, mesmo após o objeto visto ter
desaparecido, na mente da pessoa que olhou permanece a ideia do que se viu
anteriormente. Em 1824, Peter Mark Roget escreveu sobre a persistência da visão.
Adobe (2012)

Figura 35 -  Objeto inserido no primeiro frame

 ANIMAÇÃO
84

Para deixar mais claro, vamos usar como exemplo uma esfera feita no Flash
que se encontra no frame 1 (da imagem anterior). Perceba que a bolinha do frame
está preta, isso quer dizer que há um objeto inserido naquele frame. Para fazer
essa esfera se movimentar de um lado para outro lado do palco, basta que a cada
novo frame inserido você desloque a esfera alguns centímetros para o lado onde
o objeto deverá percorrer. Para que isto aconteça, clique com o botão direito do
mouse no próximo quadro e escolha Inserir Keyframe, ou pressione a tecla F6. Ele
repetirá o mesmo símbolo. Veja a imagem a seguir:

Adobe (2012)
Figura 36 -  Esfera no frame 25

VOCÊ Que para um banner são utilizados até 50 frames, e que

um tutorial ou demonstração de algum produto requer
SABIA? a partir de 100 frames?

E então, gostou desse assunto? Percebeu como é importante saber utilizar os

Frames e Keyframes do Adobe Flash? E esse assunto não para por aqui. A seguir,
você conhecerá um pouco sobre ‘controle da animação’. Vamos em frente!
 5 ANIMANDO NO ADOBE FLASH
85

5.5 CONTROLE DA ANIMAÇÃO

Para desenvolver um controle para o usuário monitorar uma animação e po-

der, por exemplo: reproduzir, parar, avançar e voltar. Você pode disponibilizar
esse controle de diferentes maneiras, tanto através de botões como de ações do
teclado. E outra forma de controle de animação é por meio de ações que movi-
mentam um determinado objeto ou personagem, como por exemplo, a movi-
mentação de personagem através das setas do teclado. Para a criação do mesmo,
segue-se a mesma lógica dos botões de reproduzir e avançar. Lembrando sempre
de que é necessário criar uma função para cada ação.
A seguir, acompanhe um exemplo no qual foi utilizado controle no persona-
gem de um Learning Game para ensino a distância. Neste personagem foi feita
uma programação em que o usuário, com as setas do teclado, consegue controlá-
-lo. Quando o mesmo chega às salas de aula, muda da cena geral para a sala am-
pliada internamente. Veja, a seguir, a figura da cena geral, onde o personagem se
locomove pela escola.

Adobe (2012)

Figura 37 -  Print Screen do ambiente virtual do curso Sesi Goiás 2 (Escola)

Fonte: Curso Sesi Goiás 2 ( 2010)
 ANIMAÇÃO
86
3 MOUSE OVER
Esse termo se refere ao
objeto que, quando o
mouse passa por cima,
tem alguma ação e
programação.
4 CLAQUETE
Ferramenta utilizada pelo
diretor para mostrar o
número da tomada, a cena
e marcar o início do tempo
na gravação de filmes.
Simboliza a arte do cinema.
Mais a frente você poderá ver como utilizar os botões para controlar a anima-
ção. Uma maneira de controlar com botão é quando você clica em um botão e ele
aciona alguma outra animação. Por exemplo: você tem um plano de fundo que é
um semáforo e, ao clicar nos botões que sãos as cores do semáforo (verde, ama-
relo e vermelho), acontece determinada ação, como: ao clicar no verde, um carro
anda na tela; no amarelo, ele freia; e no vermelho, ele para. Com isso, você con-
segue ver um tipo de controle, onde o usuário é quem dita o que irá acontecer.
Mais uma etapa de estudos foi concluída. O que achou até agora do que foi
apresentado? Esperamos que tenha sido interessante e significativo. Ainda tem
muita coisa aguardando por você, explore, a seguir, os conhecimentos sobre Ce-
nas.
5.6 SCENE (CENA)
Uma cena pode conter alguns elementos, como cenários e personagens ani-
mados. Cada cena pode ser ordenada e renomeada mesmo depois de ser criada.
Esse procedimento é recomendado para que cada cena possa ser identificada por
sua função dentro da animação.
O uso de cenas recomenda-se para animações feitas em Flash, mais voltadas
para conteúdos multimídias. Para conteúdos web recomenda-se a utilização de
carregamento de filme externo, substituindo as cenas por arquivos .swf separa-
dos, pois para carregar na web, quanto menor o tamanho do arquivo em Flash,
mais rápido a animação será carregada.
Quer saber como criar e renomear uma cena? Veja a seguir.
Para alterar o nome de uma cena, você deve primeiramente clicar no Menu
Window, Other Panels e depois em Scene.
Adobe (2012)
Figura 38 -  Menu inserir do Flash
 5 ANIMANDO NO ADOBE FLASH
87

5.6.1 PROPRIEDADES DA SCENE

No Adobe Flash, quando é aberto um novo arquivo, este possui apenas uma
cena e cada cena possui apenas uma linha do tempo. Você pode acrescentar no-
vas cenas sempre que achar necessário.
Deste modo, cada cena fica com uma timeline independente, como se fossem
filmes separados. Todas as cenas dividem a mesma biblioteca da animação. Com
isso, ao invés de tudo ficar na mesma timeline, você pode separar cada etapa da
animação em uma cena diferente, organizando o filme em partes lógicas. Ficando
assim, muito mais organizada e, ao mesmo tempo, dinâmica a criação e a altera-
ção das cenas.
Isso facilita o trabalho de todos os envolvidos no desenvolvimento da anima-
ção, pois ajuda na organização, ficando mais fácil de situar em que momento ela
está. Além disto, o arquivo também não pesa tanto na memória do computador
do usuário.
Veja, a seguir, um exemplo de organização de cenas de um learnig game de-
senvolvido para um curso de educação a distância.
a) Cena 1 – Introdução rápida.
b) Cena 2 – Loading – aviso de carregamento (se precisar, quando a animação
é muito extensa ou pesada).
c) Cena 3 – Abertura com som e movimento.
d) Cena 4 – Interface com botões, mouse over3 e ações.
e) Cena 5 – Mapa geral da fábrica.
f) Cena 6 – Recepção.
g) Cena 7 – Sala de Jogos.
h) Cena 8 – Sala de leitura.
i) Cena 9 – Sala de Reuniões.
j) Cena 10 – Produção.
k) Cena 11 – Finalização.
l) Cena 12 – Créditos.
Na parte superior do palco você pode mudar de cena apenas clicando no íco-
ne da claquete4. Ela abrirá um menu com uma lista de todas as cenas. Basta esco-
lher a que você quiser, e pronto, a cena será mudada. Conforme figura a seguir.
 ANIMAÇÃO
88

Adobe (2012)
Figura 39 -  Caixa de diálogo de cenas

No menu exibir você pode navegar nas cenas. Exibir > Ir para > cena 1, 2, 3. Ou
Exibir > Ir para > Primeiro, Anterior, Próximo e Último. Conforme a seguinte figura.

Adobe (2012)

Figura 40 -  Ir para cena através do menu exibir

 5 ANIMANDO NO ADOBE FLASH
89

Você notará que, quando a última cena acabar, automaticamente a primeira

cena roda novamente. Para evitar que isto aconteça, você pode usar a progra-
mação em Action Script. Para isso, vá até a última cena, clique uma vez no último
quadro da timeline e pressione F9, para mostrar o painel Actions. Digite: stop().
Essa programação fará a animação parar quando chegar ao final da cena.

Você sabia que Steven Spielberg foi um dos pioneiros a

VOCÊ criar um gráfico de emoção?
SABIA? Com o gráfico, ele sabe em que momento o filme tem
maior tensão nas cenas.

Aqui você finaliza mais uma etapa. Explore todas as informações disponíveis.
Lembre-se: dedicação e comprometimento são essenciais para o processo de
aprendizagem. Vamos em frente!

5.7 CAIXA DE FERRAMENTAS DO FLASH

A caixa de Ferramentas do programa Adobe Flash é composta de uma grande

variedade de opções e ferramentas.
Na área de Tools (Ferramentas), constam os ícones das principais ferramentas
para criar e manipular os objetos no palco possibilitando criar elementos gráficos
e texto. Também é possível alterar cores de preenchimento e de linhas, rotacio-
nar, dimensionar e distorcer objetos do palco.
A barra de ferramentas é dividida em seis áreas, ferramentas de seleção, ferra-
mentas de criação, ferramentas, ferramentas de visualização, seleção de cores e
opções de ferramentas.
A seguir, confira de forma mais detalhada, a funcionalidade de algumas ferra-
mentas essenciais do Flash para a criação de animações.

5.7.1 FERRAMENTAS DE DESENHO

A ferramenta seta é chamada de ferramenta de seleção, e você pode utili-

zá-la para selecionar os objetos que constam no palco com apenas um clique, ou
para selecionar mais do que um objeto, clicando e arrastando o cursor do mouse
sobre as opções que você deseja selecionar. Depois de selecionado o objeto, é só
clicar na aba Propriedades, e alterar as propriedades.
 ANIMAÇÃO
90

Adobe (2012)
Figura 41 -  Aba propriedades com desenho selecionado

FIQUE A tecla de atalho para habilitar a seta é a letra “V”.

ALERTA

Para criar uma forma, você pode definir a posição X e Y, e também as dimen-
sões w (que corresponde à largura) e h (que corresponde à altura). Na opção Fill
and stroke (contorno e preenchimento), você pode: alterar as propriedades de co-
res, a espessura do contorno e o tipo da linha. Além disto, quando houver cantos
abertos (cap) e os objetos não forem fechados, esta ferramenta permite arredon-
dar e cortar os contornos.
Saiba que os objetos são diferenciados por contorno e preenchimentos. Por
exemplo, ao clicar no centro do objeto com um simples clique, você selecionará
apenas o preenchimento, e se você der um duplo clique, selecionará o objeto
como um todo (preenchimento e linha).
Veja, a seguir, uma forma desenhada com os diferentes tipos de linhas.
 5 ANIMANDO NO ADOBE FLASH
91

Adobe (2012)
Figura 42 -  Tipos de linhas

Na próxima figura é possível visualizar o objeto com os tipos de seleção. O

primeiro está apenas com o preenchimento selecionado; no segundo, a linha está
selecionada; já o terceiro objeto está todo selecionado.

Adobe (2012)

Figura 43 -  Aba propriedades com desenho selecionado

A flecha branca se chama subselecionar, essa ferramenta permite traba-

lhar com os nós da sua imagem. Veja, na figura a seguir, como fica um desenho
selecionado com essa ferramenta.
Adobe (2012)

Figura 44 -  Desenho selecionado com a ferramenta subselecionar

A ferramenta Free Transform fica abaixo da seta subselecionar. Ao clicar

sobre ela, serão abertas outras opções de ferramentas. Confira a figura a seguir.
 ANIMAÇÃO
92

Adobe (2012)
Figura 45 -  Ferramenta Free Transform

A Ferramenta Free Transform Tool ou Transformação livre serve para di-

mensionar, rotacionar e inclinar o objeto. Pressionando a tecla ALT ao dimensio-
nar um lado do desenho, o outro lado fará a mesma dimensão.
A segunda opção é a Ferramenta de Gradient Transform Tool, ou transforma-
ção de gradiente , que permite dimensionar, rotacionar ou inclinar o gradien-
te aplicado no objeto.
Logo abaixo tem a Ferramenta de Rotation Tool, rotação 3D , que só fun-
cionará se você abrir um arquivo no Flash como Action Script 3.0 e o próprio esti-
ver convertido em símbolo. Essa ferramenta rotaciona sua imagem em perspecti-
va. Veja, a seguir, um desenho selecionado com a ferramenta 3D Rotation.
Adobe (2012)

Figura 46 -  Desenho selecionado com a ferramenta 3D Rotation

 5 ANIMANDO NO ADOBE FLASH
93

Junto a essa ferramenta, há a ferramenta de translação 3D ou 3D Translation

Tool , que serve para direcionar o objeto na direção “x”, “y” ou “z”, conforme
é feito nos sofwares 3D. Confira, na sequência, um desenho selecionado com a
ferramenta 3D Translation.

Adobe (2012)

Figura 47 -  Desenho selecionado com a ferramenta 3D Translation

Tem também a ferramenta Lasso Tool ou Laço , esta permite que você
faça seleções irregulares no objeto, conforme a seguinte figura.
Adobe (2012)

Figura 48 -  Desenho selecionado com a ferramenta Lasso Tool

Depois, há um grupo de ferramentas de quatro opções chamada Pen Tool ou

Caneta , que permite desenhar linhas e curvas; e adicionar, apagar e conver-
ter pontos.
 ANIMAÇÃO
94

Adobe (2012)
Figura 49 -  Ferramenta Pen Tool

O funcionamento da ferramenta caneta no Flash é igual a outras ferramen-

tas de desenho. Ela funciona como a ferramenta Bezier, ou seja, ao clicar em um
ponto, ela o marca, e depois, ao clicar em outro ponto e movimentar o mouse ele
consequentemente faz a curva conforme você move o mouse. Ao clicar em um
terceiro ponto, ele cria uma nova curva, e assim sucessivamente. Veja, a seguir,
um exemplo:

Adobe (2012)

Figura 50 -  Desenho selecionado com a ferramenta Pen Tool

Observe que, ao criar os pontos, ele gera alças que com a ferramenta subse-
lecionar podem ser trabalhadas mexendo nas curvas, conforme o desenho
desejado.
A Ferramenta Texto ou Text Tool é a próxima ferramenta e possui três op-
ções de texto, tais como: Static Text, Dinamic Text e Input Text. Para alterar essas
opções, basta ir ao painel Propriedades ou Properties e alterar a opção desejada.
A figura a seguir mostra a aba propriedades, confira!
 5 ANIMANDO NO ADOBE FLASH
95

Adobe (2012)

Figura 51 -  Aba propriedades do Texto Clássico

Conheça agora, as três opções disponíveis nesta aba e suas respectivas fun-
ções.
a) Texto Estático ou Static Text: é utilizado para textos curtos e que não pre-
cisam ser alterados ao contrário do texto dinâmico que podem ser alterados.
O texto estático não é possível ser instanciado para utilizar ActionScript. Um
texto estático é semelhante a um elemento gráfico, como um quadrado de-
senhado no palco por exemplo.
b) Texto Dinâmico ou Dinamic Text: é utilizado para textos que recebem in-
formações de uma variável, ou seja, lê o texto de um arquivo qualquer que
contenha uma variável igual a sua, como por exemplo, arquivos TXT, em tex-
tos com barra de rolagem.
c) Texto de Entrada ou Input Text: essa opção é utilizada para criar uma caixa
de texto que funcionará como um campo de formulários, permitindo ao usu-
ário inserir informações que serão repassadas por meio de variáveis.
 ANIMAÇÃO
96

Na nova versão do Flash CS5 é possível alternar para o formato de texto TLF,
permitindo mais opções de formatação de texto, como: escrita vertical sem pre-
cisar rotacionar a caixa de texto, formatação mais específica de caracteres, tabu-
lação, sobrescrito, subscrito, encadeamento de fluxo de texto, margens, endenta-
ção, entre outras. Confira, a seguir, a caixa de opções para o texto em formato TLF.

Adobe (2012)

Figura 52 -  Aba propriedades do Texto TLF

 5 ANIMANDO NO ADOBE FLASH
97

Logo abaixo você vai encontrar a ferramenta Line Tool ou Linha , que per-
mite tracejar linhas e também unir os pontos de uma linha à outra, criando outras
formas.
A próxima ferramenta é, na verdade, um grupo de ferramentas de desenho
com formas geométricas predefinidas, como: Rectangle Tool, Oval Tool, Rectan-
gle Primitive Tool, Oval Primitive Tool e PolyStar Tool. Veja, a seguir, a caixa de
ferramentas e as respectivas figuras geométricas.

Adobe (2012)

Figura 53 -  Caixa de ferramentas das figuras geométricas

Adobe (2012)

Figura 54 -  Figuras geométricas

Logo a seguir vem a ferramenta Pencil Tool ou Lápis , que é utilizada para
fazer desenhos a mão livre.
A próxima opção é a ferramenta Pincel e Pincel de Spray, ou Brush Tool e Spray
Brush Tool. Muito utilizada para fazer desenhos a mão livre também. Na aba pro-
priedades, você pode editar a espessura do traço, o tamanho do spray e a cor.
Adobe (2012)

Figura 55 -  Ferramenta Pincel

 ANIMAÇÃO
98

5 BONE A ferramenta a seguir chama-se Ferramenta de desenho Deco ou Deco Tool

. Funciona como um pincel mais definido com formas prontas para serem utili-
Ferramenta conhecida
como “Osso”, é utilizada zadas, e que podem ser editadas na aba propriedades. Veja a seguir:
no Flash e em outros
softwares para movimentar
organicamente um
personagem ou objeto.

Adobe (2012)

Figura 56 -  Ferramenta Pincel Deco

Algumas destas formas já vêm com uma animação defini-

FIQUE da como, por exemplo: efeitos de fumaça, fogo, partículas,
raios de chuva, entre outros. Esses efeitos também podem
ALERTA ser alterados na aba propriedades. Confira, a seguir, algu-
mas das formas prontas da ferramenta Deco Tool.
Adobe (2012)

Figura 57 -  Formas prontas da ferramenta Deco Tool

 5 ANIMANDO NO ADOBE FLASH
99

Outra ferramenta interessante é a Osso ou Bone5 Tool, que permite que você
crie articulações para animar um objeto de forma independente, criando um “es-
queleto” no objeto. A ferramenta vincular ou Bind tool faz parte do conjunto de
ferramentas Bone Tool, com ela você pode controlar e manipular os pontos do
esqueleto criado com a ferramenta Bone Tool.

Adobe (2012)
Figura 58 -  Ferramenta Bone Tool

Na animação com bones é possível ver o controle em uma estrutura mais rea-
lista (como o nome já diz, como um esqueleto). Esse esqueleto também pode ser
controlado pelo mouse ou pelas setas do teclado por meio de programação. Os
bones podem ser utilizados tanto em objetos vetor, objetos imagem e em símbo-
los, sendo também muito utilizados para animar personagens.
Essa ferramenta é muito utilizada em animações complexas, como o caminhar
de um personagem ou um movimento de corpo mais complexo, sem haver a
necessidade de desenvolvê-lo quadro a quadro. Esse tipo de animação é muito
comum em softwares de animação tridimensional. Veja na figura a seguir, uma
aplicação dessa ferramenta.
Adobe (2012)

Figura 59 -  Utilizando a ferramenta Bone

 ANIMAÇÃO
100

6 ALPHA
Na sequência, vêm as ferramentas Paint Bucket Tool (ou balde de tinta) e
Efeito de transparência Ink Bottle Tool (ou garrafa de tinta) . O balde de tinta permite pintar o preen-
utilizado em diversos
softwares de criação. chimento do desenho e a garrafa de tinta permite pintar o contorno dos objetos.
Basta selecionar e aplicar a cor desejada diretamente no preenchimento ou na
linha de contorno do seu objeto.

Adobe (2012)
Figura 60 -  Ferramentas Paint Bucket Tool e Ink Bottle Tool

A Ferramenta Conta-gotas ou Eyedropper Tool é muito útil para selecio-

nar a cor de um objeto e aplicar a mesma cor em outro, tanto no preenchimento
como no contorno. Basta você selecionar o conta-gotas, logo após selecionar a
cor desejada no objeto e aplicar a cor em cima de outro objeto.
A Ferramenta Eraser Tool ou Borracha , como o nome já diz, serve para
apagar o objeto, sendo que a borracha tem opções de apagar apenas as linhas ou
apenas o contorno.
Adobe (2012)

Figura 61 -  Ferramenta Eraser Tool

Como mostrado na figura anterior, a ferramenta Eraser Tool possui algumas

opções. Veja a funcionalidade de cada uma dessas opções.
a) Erase Normal: apaga qualquer parte do objeto.
b) Erase Fills: apaga o preenchimento.
c) Erase Lines: apaga as linhas.
d) Erase Selected Fills: apaga o preenchimento selecionado.
e) Erase Inside: apaga de dentro para fora do objeto selecionado.
 5 ANIMANDO NO ADOBE FLASH
101

Lembre-se de que a opção Faucet, que é o ícone que tem a aparência de uma
torneira, apaga todo o objeto que esteja com as mesmas propriedades. E a última
opção permite alterar o formato da borracha.
A Ferramenta Mão ou Hand Tool é utilizada para selecionar o palco e
movimentá-lo para todos os lados, sem precisar utilizar as barras de rolagem do
programa. É muito utilizada em animações de grande extensão no palco.
A Ferramenta Zoom Tool é utilizada para aumentar e diminuir o zoom em
qualquer área do palco do Flash.
As próximas ferramentas Stroke Color e Fill Color referem-se à cor dos
preenchimentos e contornos. Na caixa propriedades você também pode definir
como será aplicado o preenchimento, em todo o objeto. Ao clicar na cor atual, ele
abre a opção de escolha de cores, conforme figura a seguir.

Adobe (2012)

Figura 62 -  Aba amostras das cores do preenchimento e contorno

Existe uma infinidade de cores para você escolher, cores opacas e com gra-
diente. Para trabalhar com gradiente e nível de Alpha6 da cor é necessário clicar
no menu Window > Color.
Note que a opção Alpha “A: 100%”, define o grau de transparência da cor. Já
na opção Type, é definido como padrão solid. Contudo, você pode escolher as
opções solid color, linear gradient e radial gradient. Ao escolher qualquer uma
das opções, será mostrada a opção color ou cor.
Na aba “Color” você pode definir as cores de contorno e preenchimento das
seguintes formas: pela escolha da cor, códigos RGB e Hexadecimal.
 ANIMAÇÃO
102

Adobe (2012)
Figura 63 -  Aba cores sólidas de preenchimento e contorno

Adobe (2012)

Figura 64 -  Aba cores gradientes de preenchimento e contorno

 5 ANIMANDO NO ADOBE FLASH
103

Adobe (2012)

Figura 65 -  Aba de preenchimento de bitmap

Você pode observar que na opção gradiente existem várias cores, para alterar
alguma cor, basta clicar na cor desejada e mudá-la.
Há também a opção Bitmap fill, com a qual é possível inserir uma imagem em
qualquer objeto que está no palco. Todos os bitmaps importados são armazena-
dos automaticamente como textura no Flash, basta selecionar bitmap fill e esco-
lher a imagem desejada. Veremos um pouco mais sobre essa ferramenta logo a
seguir.

Que você tem como opção acrescentar novas cores na

paleta de cores? Basta colocar o cursor sobre as cores
VOCÊ que aparecerá um sinal de “mais”, aí é só dar um simples
SABIA? clique que a cor será adicionada. Para retirar uma cor,
basta apenas clicar sobre ela, manter o mouse pressio-
nado e arrastar para fora da linha.

Como tratado anteriormente, ao clicar na ferramenta Gradient Transform Tool

é possível alterar a posição do gradiente dentro do objeto. Ao selecionar o objeto
com o gradiente e clicar na ferramenta, ele vai mostrar uma alça quadrada e uma
redonda em volta do gradiente. Veja, na figura a seguir, as cores aplicadas no pre-
enchimento e no contorno de cada quadrado.
 ANIMAÇÃO
104

Adobe (2012)
Figura 66 -  Exemplos com efeito de cores

Para saber mais sobre gradiente e preenchimento de bit-

SAIBA maps acesse o link:
MAIS <http://help.adobe.com/pt_BR/flash/cs/using/WSd60f23110
762d6b883b18f10cb1fe1af6-7e2fa.html>.

Com relação ao redimensionamento do gradiente, a alça quadrada permite

aproximar e afastar as cores gradientes, e a alça em círculo permite rotacionar o
gradiente.
Na opção de preenchimento Bitmap, você pode importar imagens para dentro
do seu desenho. Essa opção permite também que você utilize o conta-gotas para
capturar o bitmap. Veja a figura a seguir, com o preenchimento de um bitmap.
Adobe (2012)

Figura 67 -  Preenchimento com bitmap

 5 ANIMANDO NO ADOBE FLASH
105

As opções Blank and White e Swap Colors permitem alternar as cores de

preenchimento e contorno e definir as cores padrão.
Agora, você é convidado a conhecer como manipular objetos no Adobe Flash.

5.7.2 MANIPULANDO OBJETOS

Com a ferramenta seta você pode manipular objetos desenhados como, por
exemplo: linhas, polígonos, retângulos e elipses, alterando suas formas com faci-
lidade. Para isso, selecione a ferramenta seta e, após, basta clicar na linha do ob-
jeto que a mesma será selecionada. Aproximando o cursor da linha, o mesmo se
transformará em uma curva. Para transformar a linha em curva basta pressionar
o botão do mouse e arrastar a linha, isso vale para todos os objetos desenhados.
No caso dos retângulos, ao aproximar a seta nas suas extremidades, uma vértice
aparece permitindo criar pontas. Veja, a seguir, um exemplo de objeto alterado.
Adobe (2012)

Figura 68 -  Objeto alterado

Os textos são criados no Flash como textos editáveis e, para poder transfor-
má-los em vetor, basta selecionar o texto desejado e, após, seguir os comandos:
Menu Modificar > Desmembrar ou Modify > Break Apart. Ou então, você pode
utilizar a tecla de atalho: Ctrl + B.
Ao desmembrar um texto, ele vai quebrar em letras e, pressionando novamen-
te Ctrl + B, ele retira o processo de desmembrar e é transformado em vetor. Veja
esse processo na figura a seguir.
 ANIMAÇÃO
106

Adobe (2012)
Figura 69 -  Processo do texto transformado em vetor

De acordo com a figura anterior, perceba que, ao desmembrar o texto, as le-

tras são quebradas e, para colocar cada letra nas camadas separadas, você deve:
selecionar todas as letras e clicar com o botão direito do mouse sobre elas e, após,
escolher Distribute to Layer (Distribuir nas camadas). Essa dica é válida também
para qualquer elemento selecionado no palco.
Depois que o texto ou objeto é convertido em vetor não é mais possível alterá-
-lo.

Para ter uma visualização melhor dessa transformação, as-

SAIBA sista ao seguinte vídeo: <http://autodidatatube.blogspot.
MAIS com/2011/06/video-aula-flash-cs5-converter-texto-em.
html>.

Outra forma de manipulação que você encontra nesse programa é a de

alinhamento de objetos, que está localizada no Menu Window > Align ou Menu
Modify Align. Essa função é muito utilizada para agilizar o alinhamento dos obje-
tos no palco.
 5 ANIMANDO NO ADOBE FLASH
107

Adobe (2012)
Figura 70 -  Ferramenta Align (alinhar) através do menu Modify
Adobe (2012)

Figura 71 -  Aba Align (alinhar)

A opção Align to Stage ou Alinhar ao palco da aba Align permite que você
alinhe e distribua os elementos de acordo com o palco.
A ferramenta Transform ou Transformar é utilizada para redefinir a escala,
a rotação ou a inclinação de objetos em vetor e/ou tridimensionais.
 ANIMAÇÃO
108

Adobe (2012)
Figura 72 -  Ferramenta Transform

A Ferramenta Library ou Biblioteca armazena todos os objetos utilizados

em uma animação. Você pode importar arquivos para a biblioteca sem utilizar no
palco.
Logo abaixo, tem a Ferramenta Predefinições de animação ou Motion Presets
, que é um tipo de biblioteca com animações predefinidas, e possibilita criar
sua animação e salvá-la, para mais tarde usar em outra.
Adobe (2012)

Figura 73 -  Ferramenta Motion Presets ou Predefinições de animação

 5 ANIMANDO NO ADOBE FLASH
109

E aqui você finaliza mais uma etapa de estudos. O que achou até agora do que
foi apresentado? Esperamos que tenha sido interessante e de valia para as suas
atividades profissionais.

5.8 SÍMBOLOS

Você sabia que no Flash você pode criar símbolos? Esses símbolos são objetos
reutilizáveis que podem ser armazenados em uma biblioteca para posterior uti-
lização.
Quer saber como fazer isso? Primeiramente, é fundamental converter os obje-
tos em símbolos. Saiba que os símbolos podem se utilizados várias vezes, dentro
do mesmo filme. Alterando um símbolo, ele automaticamente será alterado em
todos os momentos que foi utilizado. Exemplo: você fez um personagem com
uma roupa azul e ele foi utilizado em 20 momentos. Sendo que o objeto sempre
foi transformado em símbolo, ao alterar a roupa dele pra verde em um símbolo,
todos os outros 20 símbolos que se repetirem também alterarão automaticamen-
te.
Acompanhe, a seguir, os passos para criar um símbolo:
a) selecione o objeto;
b) clique no menu modify > convert to symbol (ou clique F8);
c) digite o nome do símbolo;
d) escolha o tipo de símbolo (Movie clip, Button ou Graphic);
e) clique em OK.
Adobe (2012)

Figura 74 -  Caixa Convert to Symbol

 ANIMAÇÃO
110

Para trabalhar com animações no Flash é necessário que os elementos sejam

convertidos para símbolos, pois é por meio deles que você poderá definir o tipo
do símbolo. Os três símbolos do Flash são:

GRAFFIC OU GRÁFICOS

BUTTONS OU BOTÕES

MOVIE CLIP OU CLIPES DE FILME

Quadro 5 - Símbolos do Flash

Portanto, é preciso criar o objeto e depois convertê-lo em um desses símbo-

los ou por meio do Menu > New Symbol > Create New Symbol, e após clicar na
biblioteca e adicionar ao palco. Isso porque quando o símbolo é criado, ele vai
automaticamente para a biblioteca de símbolos. Veja, a seguir, os símbolos utili-
zados no Flash.
a) Graffic: é o tipo mais básico de símbolo, é muito utilizado dentro dos outros
símbolos.
b) Buttons: é utilizado para chamar ações, recebe valores diferentes para o es-
tado do botão, como: normal, ao rolar sobre, pressionado e oculto.
c) Movie Clip: permite que se crie um filme dentro do símbolo, carregando
todo o clipe de filme e mostrando todo o filme que está sendo rodado den-
tro desse movie clip. É possível inserir vários movie clips dentro de outro
movie clip.
Ao criar um símbolo, você pode manipulá-lo na barra de propriedades e pode
também especificar seu centro de registro (Registration). Com isso, aparecerá
uma bolinha no registro que você escolher. Por exemplo: se você escolher no
centro, aparecerá uma bolinha no centro; se escolher no canto superior esquerdo,
a bolinha aparecerá neste canto. Todos os símbolos podem ser modificados para
outro tipo, por exemplo, um movie clip pode ser transformado em botão, basta
apenas selecioná-lo, teclar o F8 do teclado e e renumerá-lo.
Posteriormente, você poderá utilizar este ponto de registro para outras ferra-
mentas, como alinhamento, bones, girar, etc.
 5 ANIMANDO NO ADOBE FLASH
111

5.8.1 MOVIE CLIP

O clip de filme é chamado por muitos animadores de mc ou movie clip, em

inglês. O conteúdo dentro do movie clip é independente da linha de tempo prin-
cipal. É como se fosse um filme secundário dentro do filme principal. Por exem-
plo: um olho piscando é transformado em um movie clip e ele está inserido em
uma animação maior, onde possui um personagem conversando. O ato de piscar
é independente do ato de conversar, então são duas timelines.
Veja, na imagem a seguir, a barra de propriedades de um movie clip, onde é
possível definir a posição X e Y de um objeto, a largura e altura, e o comportamen-
to do objeto.

Adobe (2012)

Figura 75 -  Propriedades de um símbolo

 ANIMAÇÃO
112

O campo Instance Name ou Nome da Instância é utilizado para dar nome

de instância ao objeto que, posteriormente, será utilizado na linguagem action
script. A opção SWAP substitui o símbolo por outro existente na biblioteca. Já a
opção 3D Position and, permite trabalhar os eixos X, Y e Z do objeto com o ângulo
da perspectiva.
A opção Color Effect ou Efeitos de Cores modifica as propriedades de cor e
transparência do símbolo. As opções são:
a) Brightness (brilho);
b) Tint (preenchimento);
c) Alpha;
d) Advanced, que trabalha com as cores RGB e Alpha do símbolo.
Veja, na figura a seguir, a ferramenta Color Effects e suas opções.

Adobe (2012)

Figura 76 -  Ferramenta Color Effects

A opção Display Blending aplica a mistura de objetos, sendo necessário que

cada objeto esteja em sua camada.
A seguir, você aprenderá como fazer um botão com uma ação de comando.
Como por exemplo, um botão para mudar de cena, em que o espectador clica no
botão e muda automaticamente a posição da animação da cena 01 para a cena
02.
 5 ANIMANDO NO ADOBE FLASH
113

5.8.2 BUTTON

O button é utilizado para inserir a interação dentro do filme, pode criar, por
exemplo, um link para outras cenas, quadros e sites. O mouse vira uma mão quan-
do passa sobre o botão (mouse over), possibilitando o clique. O interessante do
botão é que cada estágio tem um frame, no qual se pode mudar a arte do mesmo
conforme a necessidade. Veja, a seguir, os estágios do botão:
a) Up (Normal): arte inicial;
b) Over (Sobre): quando passar o mouse aparecerá essa arte;
c) Down (Para baixo): nova arte também, para quando efetua o clique;
d) Hit (Área útil): área do clique. Normalmente maior que o tamanho do botão.
Área não visualizada pelo usuário.
Veja, a seguir, a timeline de um button.

Adobe (2012)

Figura 77 -  Timeline de um button

Saiba que, com esse símbolo, você pode: criar um menu com links, fazer bo-
tões invisíveis com áudio, entre outros tipos. A seguir, conheça um pouco mais
sobre o símbolo Graphic.
 ANIMAÇÃO
114
7 CASE SENSITIVE
Significa que o Flash
percebe a diferença entre
palavras iguais escritas em
minúsculo ou maiúsculo.
5.8.3 GRAPHIC
O símbolo graphic está vinculado à linha de tempo principal. Para aplicar al-
guns efeitos no seu objeto, como: alpha (transparência), cores, brilho e tinta, você
deve converter seu objeto neste símbolo.
Adobe (2012)
Figura 78 -  Propriedades de um graphic
Veja, a seguir, como organizar os símbolos e as ações.
5.8.4 ORGANIZAÇÃO DOS SÍMBOLOS E ACTIONS
Ao nomear um símbolo, procure dar um nome que referencie bem a sua fun-
ção. Exemplo: em um botão que serve para iniciar um vídeo, procure usar um
nome como iniciarVideo_btn ou play_btn. A sigla “bnt” é usada para botão e a
sigla “mc” para movie clip. Essas siglas servem para facilitar a identificação dos
elementos na biblioteca.
 5 ANIMANDO NO ADOBE FLASH
115

É importante lembrar que os nomes dados para símbolos só servem para

organizar sua animação no palco, o que interfere na parte da programação é a
instância do símbolo e as ligações. Portanto, quando você for nomear uma instân-
cia ou uma ligação, é preciso tomar alguns cuidados, como: evitar usar caracteres
especiais, espaços e acentos. A linguagem de programação utilizada pelo Flash é
case sensitive7, então, você deve ficar atento ao utilizar letras maiúsculas e minús-
culas.
Veja, na figura a seguir, onde é instanciado o objeto.

Adobe (2012)

Figura 79 -  Campo Instance name

Quando você utiliza o sufixo “_btn” depois do nome do botão, o programa

entende automaticamente que esse elemento é um botão. O mesmo acontece
com os clipes de filme (_mc) e gráficos (_gr).
Sabe por que os sufixos são importantes?
Porque na hora da programação o Flash já exibe códigos adequados às fun-
ções, propriedades e ações de cada tipo de símbolo. Isso facilita a visão do anima-
dor no processo de criação e edição das animações.
As actions são linhas de comando que determinam uma ação ou um compor-
tamento de um movie clip. Por meio de ações, é possível fazer um movie clip se
movimentar.
 ANIMAÇÃO
116

5.8.5 TIPOS DE ANIMAÇÕES NO ADOBE FLASH

Existem diversos tipos de animações que podem ser feitas no Flash. Veja, a
seguir, cada tipo e suas características.
a) Animação Quadro a Quadro – Sequência de imagens uma atrás da outra.
Uma por quadro. Parecida com a animação tradicional.
b) Animação Classic Tween – Animação com a utilização de símbolos. Interpo-
la o movimento fazendo o movimento automático, sem ter que fazer quadro
a quadro. Pode-se mudar a cor, forma ou a posição do objeto.
c) Animação Motion Tween – Faz a interpolação do movimento do objeto sem
o uso de quadros-chave. Será criada uma linha pontilhada que facilitará sua
edição.
d) Animação com Bones – Como falado anteriormente, nesse tipo de anima-
ção, você controla a animação com um esqueleto articulado.

Você sabia que o maior festival de animação da Améri-

VOCÊ ca Latina acontece no Brasil? O Anima Mundi acontece
todo ano no Rio de Janeiro e São Paulo. O evento pro-
SABIA? move workshops, palestras, oficinas, exposições, aulas e
concursos internacionais de animação.

Mais uma etapa de estudos foi concluída. O que achou até agora do que foi
apresentado? Esperamos que tenha sido interessante e significativo. Ainda tem
muita coisa aguardando por você. Siga em frente!

5.9 LIBRARY

A Library ou biblioteca é o local onde são armazenados todos os arquivos im-

portados, símbolos e áudios. Ela serve para auxiliar você a encontrar mais rápido
esses elementos, sem ter que ficar indo e voltando na animação, principalmente
nos casos em que a animação é extensa.
 5 ANIMANDO NO ADOBE FLASH
117

Ao clicar uma vez no símbolo que deseja, aparece uma miniatura do mesmo,
que facilita sua visualização. Clicando duas vezes no símbolo, automaticamente
você entra no mesmo, podendo alterá-lo. Contudo, se este símbolo aparecer 50
vezes na animação, ele será alterado em todas, não havendo a necessidade de
mexer na timeline. Para acessar a biblioteca, use o menu Window > Library ou por
meio da tecla de atalho CTRL + L.

Adobe (2012)

Figura 80 -  Biblioteca do Flash (com exemplos de objetos)

5.9.1 ORGANIZANDO A LIBRARY

Na Library você pode nomear os símbolos anterioremente criados de acordo

com a sua necessidade, clicando sobre o mesmo e editando. Conforme mostra na
imagem a seguir.
 ANIMAÇÃO
118

Adobe (2012)
Figura 81 -  Biblioteca botão.

Você pode organizar e gerenciar seus símbolos criando pastas. Conforme

mostrado na figura anterior o ícone da pasta no canto inferior esquerdo cria uma
nova pasta.
Veja agora um exemplo de utilização de grupos de símbolos: Você pode criar
um acervo inteiro de botões para um site. Jogue todos para a biblioteca. Confor-
me for precisando, só clique no símbolo que quiser e arraste-o para o palco.
Aqui você finaliza mais uma etapa. Explore todas as informações disponíveis.
Lembre-se de que dedicação e comprometimento são essenciais para o processo
de aprendizagem. Vamos em frente, pois o próximo assunto será Filtros.

5.10 FILTERS

Os filters podem ser aplicados aos símbolos de movie clip e textos. Para aplicar
um desses filtros, selecione o símbolo desejado e clique no botão Add Filter ou
Adicionar Filtro. As opções disponíveis são as que seguem.
O Drop Shadow ou filtro sombra que aplica uma sombra ao objeto, permitindo
também alterar as propriedades do efeito como o desfoque, a cor, etc.
Veja, a seguir, o painel das propriedades do filtro Drop Shadow aplicado.
 5 ANIMANDO NO ADOBE FLASH
119

Adobe (2012)
Figura 82 -  Ferramenta Filtros

Já o filtro Blur trabalha o sombreamento do símbolo, e o cadeado fechado faz

com que mude em X e Y e, ao clicar no cadeado, ele ficará aberto e aí será possível
alterar o Blur de forma isolada.
A opção Strenght trabalha a dispersão da sombra, podendo alterar a quali-
dade da sombra em Qualit. Também existem as opções Angle e Distance que
permitem alterar o ângulo e a distância da sombra. A opção Knockout trabalha a
máscara do símbolo. Já Inner Shadow aplica uma sombra interna. A opção Hide
Object, oculta o símbolo deixando somente o filtro mostrado. E a opção Color
permite alterar a cor da sombra.
Para memorizar bem os filters segue uma relação das principais características
de cada filter.
a) Drop Shadow: cria sombra.
b) Blur: permite desfocar o símbolo, podendo ser alterado no painel proprie-
dades.
c) Glow: aplica brilho ao símbolo.
d) Bevel: aplica chanfros e entalhes no símbolo. Na opção Type, pode ser defi-
nido como Inner, Outer e Full.
e) Gradient Glow: aplica brilho gradiente aos símbolos.
f) Gradient Bevel: aplica chanfros gradiente aos símbolos.
 ANIMAÇÃO
120

g) Adjust Color: trabalhar os ajustes de cores do símbolo como brilho, contras-

te, saturação e matiz.
Você viu, nessa etapa, como utilizar filters nos símbolos, e que esta é uma op-
ção muito utilizada para dar efeitos em pequenas animações como mouse over.
Aqui você finaliza mais essa parte de seus estudos. Veja, a seguir, os efeitos e
transições de animações.

5.10.1 EFEITOS DE TRANSIÇÃO DE ANIMAÇÃO

Alguns programas já vêm com efeitos de transições pré-estabelecidos. No

caso do Flash é preciso criar esses efeitos. Há transições como dissolver, escorre-
gar, surgir, ampliar, entre outras. No caso de uma animação de história em quadri-
nhos, pode-se aplicar efeitos de transição entre uma cena e outra.
Esses tipos de efeitos são muito utilizados para não dar uma quebra brusca
entre uma animação e outra, tornando a animação mais suave para quem está
visualizando.
Os efeitos de animação são infindáveis, você pode criar qualquer efeito, desde
que esteja na proposta inicial do roteiro.

Deve-se tomar muito cuidado, ao aplicar alguns efeitos

FIQUE de transição, principalmente quando for um site ou apre-
sentação de um projeto. O excesso de efeitos pode causar
ALERTA lentidão do arquivo, e faz com que o usuário desista de
visualizar o site ou qualquer outro tipo de mídia.

Isso acontece por estar carregado demais de efeitos, não sendo nada agradá-
vel para quem está visualizando.
O assunto não para por aqui. Vamos em frente? A seguir, você vai verificar
como utilizar as mídias.
 5 ANIMANDO NO ADOBE FLASH
121

5.11 UTILIZANDO MÍDIAS

Para deixar sua animação mais atrativa você pode inserir alguns arquivos de
mídias como: som, áudio e imagem.
É possível importar vários formatos gráficos, tais como: png, o psd, Adobe
Illustrator, bitmaps, arquivos de áudio como WAV, MP3, AU, formato de vídeo avi,
mov, mpeg, flv.
Para importar um som, vídeo, arquivos .fla ou imagem, para o Flash basta ir no
menu File Import e depois escolher umas das opções:
a) Tostage: importa para o palco.
b) ToLibrary: importa o objeto diretamente para a biblioteca. Caso tenha esco-
lhido essa opção para adicionar o som que foi importado para o palco, basta
clicar em cima do som na biblioteca e arrastá-lo para o frame em que deseja
inseri-lo. Veja, na figura a seguir, uma imagem que foi importada para o Flash
e está disponível na Library.
Adobe (2012)

Figura 83 -  Importação de imagem

 ANIMAÇÃO
122
8 FLV
Formato de arquivo usado
no Adobe Flash Player para
transmissão de vídeos por
meio do Flash.
9 SKIN
É o tipo do layout da barra
de reprodução do vídeo.
do inserido não seja compatível com o programa.
c) To External Library: importa para a biblioteca outro arquivo fla.
d) ImportVideo: para importar um vídeo, escolha a última opção e adicione
uma imagem ao filme quando for importado. Sendo assim, ele ficará no pal-
co e manterá uma instância dele na biblioteca.
Veja, a seguir, como importar um vídeo para o Flash.
Adobe (2012)
Figura 84 -  Importação de vídeo
Na maioria das vezes, para trabalhar com vídeos dentro do
FIQUE Flash é necessário convertê-lo como formato .flv, mas isso
não é uma regra, pois há formatos de vídeos que podem
ALERTA ser importados diretamente para o Flash sem a necessida-
de de transformá-lo em .flv8.
Saiba que o Flash emite uma mensagem de alerta caso o vídeo que esteja sen-
 5 ANIMANDO NO ADOBE FLASH
123

A conversão pode ser feita utilizando o programa Media Enconder, que já vem
junto com o pacote Adobe Flash. Veja, a seguir, a interface do programa Media
Enconder.

Adobe (2012)

Figura 85 -  Interface do Media Encoder

Após converter o vídeo no Media Encoder no formato .flv, volte no Flash, e

carregue novamente o vídeo convertido. Caso o vídeo seja utilizado junto com
algum elemento de animação é recomendado a escolha da opção Embed FLV is
SWF and play in timeline e depois Incorporar .flv no .swf e reproduzir na linha do
tempo. Depois clique em avançar e defina o formato do Skin9 na janela Skinning.

FIQUE Lembre-se de salvar seu arquivo, pois, se o arquivo não

estiver salvo, ele não abrirá o Media Encoder diretamente
ALERTA do Flash.
 ANIMAÇÃO
124

Adobe (2012)
Figura 86 -  Skinning

Na mesma tela, clique em Next e depois em Finish. Você verá que o vídeo foi
importado e as configurações estão definidas, conforme figura a seguir.

Adobe (2012)

Figura 87 -  Vídeo importado e as configurações

Caso seja necessário alterar alguma imagem ou vídeo fora do Flash, você deve
atualizar na biblioteca clicando com o botão direito do mouse no objeto altera-
do e escolhendo Update. E para substituir o objeto, clique com o botão direito,
depois escolha Properties, dentro de Properties escolha a opção Import e faça a
substituição. A imagem a seguir mostra as propriedades de uma imagem impor-
tada.
 5 ANIMANDO NO ADOBE FLASH
125

Adobe (2012)
Figura 88 -  Aba Properties de uma imagem importada

No Flash, é possível utilizar os sons de várias maneiras. Você pode, por exem-
plo, anexar o som a um botão e sincronizar com sua animação, aplicando este
som em uma fala de personagem sincronizado com os movimentos da boca ou
pode também deixá-lo tocando continuamente na sua linha do tempo.
O controle de som (reproduzir, pausar, aumentar volume, etc.) é feito com a
programação Action Script. O armazenamento de sons na Biblioteca é feito jun-
tamente com os bitmaps e símbolos. Assim como nos símbolos, basta uma cópia
de um arquivo de som para utilizá-lo de várias maneiras no filme. Para adicionar
o som ao seu filme, após importá-lo para dentro do Flash, arraste-o para o quadro
onde ele deverá ser iniciado, conforme figura, a seguir.
Adobe (2012)

Figura 89 -  Biblioteca do áudio

 ANIMAÇÃO
126

Ao adicionar um som à sua linha do tempo, você pode controlar a execução

pela barra de propriedades. Para isso, clique no quadro onde foi inserido o áudio
e veja as Sound Properties ou propriedades do áudio.

Adobe (2012)
Figura 90 -  Sound Properties

Para aplicar efeitos no som importado, você deve alterar as opções encontra-
das na aba propriedades com o áudio selecionado. Conforme mostra a figura, a
seguir.
Adobe (2012)

Figura 91 -  Propriedades do áudio inserido no frame

 5 ANIMANDO NO ADOBE FLASH
127

Embora se torne fácil conseguir sons na Internet e em CDs multimídia, hoje em

dia, muitas vezes você precisará editar o seu próprio som, por exemplo, uma frase,
a ser dita, ao clicar sobre um botão, ou uma parte de uma música para introdução
de seu site, é aconselhável, para isso, o uso de programas externos, deixando para
o Flash o som já pronto a ser utilizado.

CASOS E RELATOS

Inovando com o Flash

Certa vez, um professor que trabalhava com educação a distância, foi en-
carregado de entregar um conteúdo para que os profissionais da área
de design desenvolvessem. Só que o professor não tinha muito conheci-
mento na área e enviou um conteúdo com umas 50 páginas sem intera-
ção alguma com o aluno. Nisso os funcionários dessa empresa propuse-
ram desenvolver algo inovador utilizando a ferramenta Flash.
O curso era sobre Manutenção de Computadores. E o conteúdo era mui-
to específico e prático, pois era para simular uma montagem de um com-
putador. Com base nesses requisitos, foi pensado em desenvolver um
conteúdo interativo e animado e com o ponto principal de reproduzir
placas e peças do computador o mais próximo do real. Para isso foi de-
cidido que, ao invés de imagens vetoriais 2D, esses elementos iriam ser
modelados em 3D para depois ser animado no Flash.
Com os objetos já modelados foi proposto dois tipos de animações: um
jogo de clicar e arrastar em que o aluno teria que conectar algumas peças
do computador em uma placa-mãe e, depois de montado, poderia dar
um giro de 360º na placa, permitindo ver a peça de todos os ângulos. E,
no outro tipo de animação, foi usada a realidade aumentada em que é
possível simular com muito realismo uma placa de computador em de-
talhes. Nessa animação o aluno teria o marcador em mãos proporcionan-
do uma visão da placa de todos os ângulos, podendo ainda aproximar e
afastar a peça como se tivesse realmente pegando-a.
Logo os funcionários colocaram em prática todas essas idéias e depois
de finalizada foram mostrar ao professor, que ficou muito surpreso com
o resultado final. A partir daí, foi dado vazão a diversos outros cursos que
tinha pela frente.
 ANIMAÇÃO
128

Tendo como exemplo esse fato, perceba que o Flash é uma ferramenta muito
ampla. Portanto explore bem todas as funções e potencialidades desse progra-
ma, pois ele pode lhe auxiliar muito a superar expectativas e surpreender cada
vez mais o cliente.

RECAPITULANDO

No decorrer dos seus estudos você pôde perceber a grande variedade de

softwares disponíveis para criar uma animação. E, mais especificamente,
nesse capítulo foi citado o Adobe Flash, que é um dos mais utilizados
pelos designers, web designers e programadores.
Você pôde conhecer como criar camadas, frames, keyframes, aprendeu
sobre controle de animação, e como criar uma cena.
Você viu também as ferramentas básicas do Flash e conheceu ainda as
formas de manipulação dos objetos, alinhamento, símbolos, clipe de fil-
mes ou movie clip, efeitos dos filtros, efeitos de animação, transições, bi-
bliotecas, e a importação de mídias.
As ferramentas do Flash, apresentadas nesse capítulo são as mais básicas
e fundamentais para criar uma animação, e servem para ter um embasa-
mento geral de como funciona um software de criação e animação.
REFERÊNCIAS
2ADVANCED. Empresa 2Advanced. Disponível em: <www.2advanced.com>. Acesso em: 11 jan.
2012.
3DTOTAL. Imagem Nurbs. Disponível em: <http://www.3dtotal.com>. Acesso em: 09 jan. 2012.
ADOBE. Flash. Disponível em: <http://help.adobe.com>. Acesso em: 10 jan. 2012.
APOSTILANDO. Flash. Disponível em: <www.apostilando.com>. Acesso em: 9 jan. 2012.
AWAMURA, Ken. Flash – Integração Cliente/Servidor e Code Animation. [S.l.:s.n.], 2001.
BOOKS, Market. Animação Digital em 3D. Equipe Market Books, 1999.
BUGAY, Edson Luiz; BUGAY, Lígia. Animação no Flash com o Action Script. [S.l.:s.n.], 2001.
CENTRAL DO OUTDOOR. Regulamentação de Outdoor. Disponível em: <http://www.outdoor.org.
br>. Acesso em: 7 jan. 2012.
CHOCOLA DESIGN. Leis da Gestalt. Disponível em: <http://chocoladesign.com/fundamentacao-e-
leis-da-gestalt>. Acesso em: 12 jan. 2012.
CINEMATOGRAFO. Animação em Fenaquistiscópio. Disponível em: <www.cinematografo.com.
br>. Acesso em: 6 jan. 2012.
CIM, Maycon (Org.). Desenvolvimento Web. Santa Catarina: SENAI/CTAI, 2004. 245 p.
COMUNICADORES. Exemplos de realidade aumentada. Disponível em: <http://comunicadores.
info>. Acesso em: 6 jan. 2012.
ENG, Empresa. Flash CS5 Básico. São Paulo: [s.n.], 2011.
FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho. Psicodinâmica das cores em comunicação.
4. ed. São Paulo: Edgar Blücher, 1990.
GROVER, Chris; VEER, E. A. Vander. Flash CS4 – O manual que faltava. [S.l.:s.n.], 2009.
GUERRA, Otto. AnimaEdu - Curso de Desenho Animado. Rio Grande do Sul: [s.n.], 2010.
JANOTA, Dauton; PIOLOGO, Ricardo; PIOLOGO, Rodrigo. Flash animado – Técnicas Avançadas em
Design e Animações. [S.l.:s.n.], 2004.
MICROSOFT. Silverlight. Disponível em: <http://code.msdn.microsoft.com>. Acesso em: 06 jan.
2012.
MONTEIRO, Valter. Senac – Curso de Desenho Animado. Santa Catarina: Senac, 2011.
MUSBURGER, Robert B. Roteiro para Mídia Eletrônica – TV, rádio, animação e treinamento
corporativo. [S.l.:s.n.], 2008.
MUYBRIDGE, Eadweard. The Human Figure in Motion. London: Chapman & Hall, 1907.
O REI LEÃO. Produção de Walt Disney. Codirigido por Rob Minkoff, 1994. 2DVD (89 min): NTSC, son.,
color.
OLHAR DIGITAL. Exemplos de realidade aumentada. Disponível em: <http://olhardigital.uol.com.
br>. Acesso em: 5 jan. 2012.
OLIVEIRA, Uno de. Storyboard. Disponível em: <www.caligraffiti.com.br/storyboard/>. Acesso em:
11 jan. 2012.
PIXAR. Empresa Pixar. Disponível em: <www.pixar.com>. Acesso em: 09 jan. 2012.
REALIDADE AUMENTADA. Exemplo de RA. Disponível em: <http://realidadeaumentada.com.br>.
Acesso em: 9 jan. 2012.
ROYO , Javier. Design Digital – Fundamentos do Design. [S.l.:s.n.], 2008.
SCHMITZ, Luciana (Org.). Desenvolvimento Web. Santa Catarina: SENAI/CTAI, 2008. 142 p.
SESI. Curso de EaD Sesi Goiás 2. Material Didático Online. 2010.
SMELLYCAT. Animação Blender. Disponível em: <http://smellycat.com.br>. Acesso em: 8 jan. 2012.
STANCHFIELD, Walt. Dando a vida a desenhos (Gesture Drawing for Animation). [S.l.:s.n.], 2011. 1
v.
TECMUNDO. Exemplos de realidade aumentada. Disponível em: <www.tecmundo.com.br>.
Acesso em: 9 jan. 2012.
THEFREE3MODELS. Modelos em 3D. Disponível em: <http://thefree3dmodels.com/>. Acesso em:
11 jan. 2012.
TOLEDO PRODUÇÕES. Como se faz desenho animado 1, 2 e 3. São Paulo: Escala, 2008. 66 p.
MINICURRÍCULO DOS AUTORES
Daniela de Oliveira Costa é graduada em design gráfico, produto e digital pela Universidade do
Sul de Santa Catarina – UNISUL em 2010. Atua como profissional de design gráfico desde 2008,
inicialmente na UNISUL. No SENAI/SC, em Florianópolis, atua no Núcleo de Educação a Distância
como designer gráfico desde 2008 na diagramação de materiais impressos e mídia digital, bem
como no desenvolvimento de animações para Ambientes Virtuais de Aprendizagem.

D´Imitre Camargo Martins é graduado em Comunicação Social com Habilitação Publicidade e

Propaganda pela Faculdade Estácio de Sá de Santa Catarina, em 2007. Cursando especialização
em Artes Visuais Cultura e Criação pelo Serviço Nacional do Comércio – SENAC, em Florianópolis.
De 2003 a 2008 atuou como ilustrador, designer e publicidade em empresas de comunicação da
grande Florianópolis. Fez direção de arte, ilustração e arte-final para clientes como Faculdade
Estácio de Sá, Ilha Service Informática, Schincariol e Costão do Santinho Resort. A partir de 2009
atua como ilustrador no SENAI/SC de Florianópolis, no Núcleo de Educação a Distância no de-
senvolvimento de ilustração, tratamento de fotos e imagens, vetores, desenho técnico, pinturas
digitais e para mídia impressa e digital. Em 2010, dentre mais de 4000 candidatos, foi um dos 30
artistas selecionados no país para entrar no curso AnimaEdu, da Otto Desenhos Animados/RS. Em
2011 foi um dos 08 artistas do estado selecionados para a primeira revista em quadrinho colabo-
rativo de Santa Catarina, a Revista Catacomics 01.
ÍNDICE

Símbolos
2D 5, 37, 40, 60, 70, 75, 104, 127
3D 5, 6, 37, 39, 43, 44, 45, 46, 47, 48, 49, 53, 68, 73, 74, 92, 93, 112, 127, 129, 130
3DsMax 46, 47

A
Action Script 39, 48, 50, 78, 88, 92, 112 ,125, 129
Alpha 101, 112

B
Blender 5, 39, 43, 44, 73, 130

C
Camada 5, 9, 39, 40, 58, 59, 60, 61, 79, 80, 81, 82, 106, 112, 128
Case sensitive 115
Cena 5, 9, 30, 31, 33, 36, 40, 43, 46, 56, 59, 85, 86, 87, 88, 89, 112, 113, 120, 128
Cores 5, 6, 7, 9, 35, 52, 67, 69, 70, 71, 75, 83, 86, 89, 90, 101, 102, 103, 104, 105, 112, 114, 120, 129

E
Enredo 13, 56, 63
Esboço 34

F
Fill 90, 101, 103
Flash 5, 6, 7, 9, 13, 31, 36, 39, 40, 42, 48, 50, 57, 58, 68, 71, 73, 74, 77, 78, 79, 80, 82, 84, 86, 87, 89,
92, 94, 96, 101, 103, 104, 105, 110, 115, 116, 117, 120, 121, 122, 123, 124, 125, 127, 128
Flipbook 5, 79
Flv 121, 122, 123

G
Grasshopper 44

I
Interativo 127

J
Javascript 39, 50, 68
K
Keyframe 9, 59, 61, 80, 82, 84, 128

L
Learning Game 81, 85

M
Mídia 9, 5, 7, 10, 13, 17, 18, 19, 22, 23, 24, 25, 26, 27, 31, 40, 69, 75, 120, 121, 128, 129, 131
Mouse over 87, 113, 120

N
NURBS 5, 46, 47, 129

P
Photoshop 5, 39, 40, 41, 42, 59, 60, 71, 79, 80
Plug-ins 50
Polígonos 5, 45, 46, 47, 105
Projeto Web 9, 14, 66, 65, 75

R
Roteiro 33, 35, 36, 51, 54, 56, 63, 65, 66, 67, 68, 69, 75, 129

S
Silverlight 39, 42, 43, 129
Skin 7, 61, 122, 123, 124
Software Livre 43, 60, 73
Storyboard 9, 30, 33, 34, 35, 36, 51, 63, 71, 130

T
Timeline 5, 6, 39, 58, 59, 60, 61, 80, 87, 89, 111, 113, 117, 123
Trama 13, 56

V
Visual Basic 42, 44
SENAI – DEPARTAMENTO NACIONAL
UNIDADE DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA – UNIEP

Rolando Vargas Vallejos

Gerente Executivo

Felipe Esteves Morgado

Gerente Executivo Adjunto

Diana Neri
Coordenação Geral do Desenvolvimento dos Livros

SENAI – DEPARTAMENTO REGIONAL SC

Simone Moraes Raszi
Coordenação do Desenvolvimento dos Livros no Departamento Regional

Beth Schirmer
Coordenação do Núcleo de Desenvolvimento

Maristela Lourdes Alves

Coordenação do Projeto

Daniela de Oliveira Costa

D’Imitre Camargo Martins
Elaboração

Rodrigo Willemann
Revisão Técnica

Gisele Umbelino
Coordenação de Desenvolvimento de Recursos Didáticos

Michele Antunes Corrêa

Design Educacional

D’imitre Camargo Martins

Diego Fernandes
Paulo Lisboa Cordeiro
Ilustrações e tratamento de imagens

Daniela de Oliveira Costa

Diagramação
Juliana Vieira de Lima
Revisão e Fechamento de Arquivos

Luciana Effting Takiuchi

CRB 14/937
Ficha Catalográfica

DNA Tecnologia Ltda.

Sidiane Kayser dos Santos Schwinzer
Revisão Ortográfica e Gramatical

DNA Tecnologia Ltda.

Sidiane Kayser dos Santos Schwinzer
Normalização

i-Comunicação
Projeto Gráfico