Livro animacao by Daniela de Oliveira Costa

Série tecnologia da informação (TI)

Animação

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 Aprendizagem Industrial Departamento Nacional

Setor Bancário Norte • Quadra 1 • Bloco C • Edifício Roberto Simonsen • 70040-903 • Brasília – DF • Tel.: (0xx61) 33179001 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

1 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á entender 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 princí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.

ANIMAÇÃO

Desenhista de Produtos Gráficos – Web Design Módulos

Denominação

Básico

Específico

Unidades curriculares • Fundamentos para o

Carga horária 30h

design • Projeto Web

30h

• Identidade visual

40h

• Animação

40h

• Desenvolvimento Web

40h

Web Design

Carga horária do módulo 30h

150h

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

Anotações:

Mídias

2 Neste capítulo, você vai conhecer algumas mídias integradas e também poderá acompanhar 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

2.1 Tipos de mídias Os meios de comunicação social são compostos por mídias, ou media na traduçã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 utilizados 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

RBS (2012)

Anúncio no Jornal Catarinense

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 intervaladas 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

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 manual 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--?), Istockphoto (2012), (20--?)

e) Rádio – O rádio foi inventado em 1894, no início foi utilizado para fins militares 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.

Istockphoto (2012)

2 Mídias

Photodisc ([20--?]), Istockphoto ([20--?]), Istockphoto ([20--?]), Creatas ([20--?])

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ústria cinematográfica cresceu em grandes proporções e, atualmente, rende bilhões por ano.

ANIMAÇÃO

g) TV (televisão) – É um sistema eletrônico de reprodução de imagens e sons transmitidos por meio de um aparelho (televisor). Recebe, atualmente, mensagens 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, possui imagens em alta definição que interagem com a Internet e o celular e só foi popularizada há pouco tempo.

Istockphoto ([20--?])

FIQUE ALERTA

Para ser um bom animador, você deve buscar sempre referências e estar em constante aperfeiçoamento. As mídias mudam, o público muda, enfim, tudo na comunicação 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 Guerra Fria 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

Que em 2010 foi constatado, por meio de pesquisas, que um terço da população mundial possui acesso à Internet?

Istockphoto ([20--?])

VOCÊ SABIA?

Agora que você já viu alguns exemplos e especificações das mídias eletrônicas, 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: romance, suspense, terror, comédia, fábulas, novela, contos, poesias e ficção científica.

ANIMAÇÃO

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 branco 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Ê SABIA?

Esse meio de comunicação deu o nome ao ‘papel jornal’, um tipo de papel mais poroso e barato, tipicamente utilizado 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, é encadernada 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. Confira, 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 promocionais impressos em pequenas tiragens e formatos. Panfletos são mídias impressas, normalmente feitas em papel mais simples e impressão mais barata. Já os Folders, são flyers (em português, voador) com papéis e acabamentos especiais e muito utilizados com dobra, grampo, faca, formatos e cortes diferenciados. Os Cartazes são meios impressos em tamanhos maiores, 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.

VOCÊ SABIA?

Que o termo flyer originou-se na 2ª Guerra Mundial, quando os aviões jogavam panfletos nas cidades para informar às pessoas sobre a Guerra? Por este motivo, tinham que ser leves e pequenos para voar, se espalhar e cair até as pessoas.

2 Mídias

e) Outdoor (Busdoor, Backlight, Frontlight) – Muitos profissionais chamam todos 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 metros (altura), regulamentadas pela Central do Outdoor.

SAIBA MAIS

Conheça as leis, regras, cobertura e padrões utilizados em Outdoors em nosso país. Acesse o site da Central do Outdoor: <http://www.outdoor.org.br/site/>.

Istockphoto ([20--?]),

Peter Ilustra([20--?])

f) Histórias em Quadrinhos – Meio impresso formado, principalmente, por imagens. 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 ficando 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.

Figura 2 - Mídias impressas

ANIMAÇÃO

1 Layoutista É o profissional que monta o layout do jornal.

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», 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. Nasceu no final da 1ª Guerra Mundial. Quando era menino, enquanto desenhava, 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 jornal 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 mandava 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 cartas 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 folhetim 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 começ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 revistas 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

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 necessidades 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 terminologias, visualizar a evolução dos meios de comunicação em escala temporal, 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 caracterí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, livros 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 qualidade das mensagens que você recebe a todo instante.

Animação

3 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 perceber porque se deve enxergar a animação em movimento. Todos esses itens serão contemplados 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 estudo, lembrando que motivação e comprometimento são fundamentais para sua aprendizagem. Faça desse processo uma construção significativa e prazerosa.

ANIMAÇÃO

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 animaçã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 tempo, 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 transformaçõ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 forma de storyboards, e aí sabemos como será cada tomada individual, 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

Muitas empresas de animação criadoras de sites, com o tempo, se tornam estú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 MAIS

VOCÊ SABIA?

Para explorar mais informações sobre a 2Advanced, acesse: < http://www.2advanced.com/>

Que no início dos anos 2000 o site EYE4U foi a primeira empresa do mundo a se popularizar na Internet, por utilizar 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

CTAV (2012)

Muito utilizada em desenhos animados, onde a câmera fica na posição vertical 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.

Figura 3 - Máquina de trucagem

ANIMAÇÃO

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).

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

Desenho rápido com poucos traços, também chamado de rafe.

Stop motion É uma técnica de animação que consiste na filmagem quadro a quadro de objetos, 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 humano para refletir. São conhecidas também como ‘sombras chinesas’.

Plim Plim ([20--?])

2 Esboço

A animação quadro a quadro é um dos processos básicos da animação. Consiste 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.

Figura 4 - Teatro de sombras

3 Animação

SAIBA MAIS

Para você saber um pouco mais sobre esse tipo de animação, assista ao vídeo disponibilizado no seguinte endereço: <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ê conhecerá os fundamentos do storyboard.

3.2 Fundamentos do Storyboard Quer saber o que é um storyboard? Uno de Oliveira (2012), em seu site Caligraffiti, 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 encantar com o estilo dos traços, quase sempre rabiscados, traduzindo 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 storyboards extremamente refinados, muitas vezes quase iguais ao produto final. A seguir, confira como analisar e criar um storyboard, e quais suas características 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, é importante, inicialmente, criar muitas figuras, decidir a ordem delas, o enquadramento, o áudio, etc.

ANIMAÇÃO

3 Timecode É um código de oito dígitos que permite a localização precisa de pontos de áudio e vídeo durante a edição.

A seguir, acompanhe um exemplo mais detalhado do que é um storyboard: O primeiro esboço exibe uma ideia inicial – Senhor Comatoso 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 Caffeina e colocando no criado mudo do lado do Senhor Comatoso.

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 sorriso no rosto, enquanto um “balão de pensamento” diz aos espectadores: “Ah, por isso vale a pena acordar!”.

No mundo da animação, essa série de esboços rápidos é chamada de storyboard. (GROVER; VEER, 2009). Veja agora outro exemplo de storyboard.

Pixar ([20--?])

3 Animação

Figura 5 - Exemplo de storyboard

É importante que você saiba que existem dois tipos de storyboard. Veja, a seguir, 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.

FIQUE ALERTA

Utilizar o tempo rascunhando um storyboard permite que você monte sua ideia do começo ao fim. Não se importe o 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 desenhados 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 widescreen 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 movimentos e, se necessário, a organização do fundo, assim como o áudio correspondente. (MUSBURGUER, 2008, p. 162).

ANIMAÇÃO

4 2D

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

Desenho em duas dimensões.

a) visualizar o filme, definir a sequência das cenas, ritmo, ângulos, atitudes e expressões dos personagens; b) apresentar o roteiro para os responsáveis pela aprovação e liberação de verbas;

5 3D Desenho em três dimensões.

c) orientar a produção do filme, sempre seguindo o que foi aprovado pelo cliente.

FIQUE ALERTA

É importante que você pense de forma visual. Você precisa pensar em como os quadros deverão aparecer, o que as imagens contarão ao público, o que acontecerá na ação 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 comprometimento são essenciais para o processo de aprendizagem. Vamos em frente!

3.3 Tipos e Técnicas de Animação Você sabia que combinando técnicas de programação juntamente com técnicas 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 animado, 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

Istockphoto ([20--?])

Saiba que existem diversos tipos e formatos de animações, contudo as duas mais utilizadas são: a 2D4 e a 3D5.

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 famoso 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

6 Action Script Em português, significa ação no roteiro. É o tipo de programação utilizada no programa Adobe Flash. Muito comum ser citado apenas como: ação ou action.

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 Computação Gráfica (CG), como por exemplo, no filme “O Senhor dos Anéis”, no qual o personagem Golum/Smeagol foi desenvolvido utilizando a captura de movimento. Já estão desenvolvendo tecnologias parecidas e mais sofisticadas, 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?

Você sabia que o primeiro longa-metragem, em formato de stop motion, da America Latina, dentre os oitenta primeiros do mundo, está em produção aqui no Brasil? O projeto se chama “Minhocas” e está sendo produzido pela Animaking, em Florianópolis, Santa Catarina.

Old Black Gallery ([20--?]), Essas Coisas e tal ([20--?]), Animaking ([20--?])

3 Animação

Figura 7 - Making of do projeto da empresa Animaking – Minhocas, o Filme

Para criar uma animação computadorizada, podem-se utilizar diversos softwares, tais como: Adobe Flash, Adobe Captivate, Adobe Photoshop, Silverlight, Microsoft Power Point, Blender, Rhinoceros, Unity, 3DsMax, dentre outros.

FIQUE ALERTA

A maioria desses softwares tem mais ou menos a mesma lógica de construção da animação: trabalham com layers (camadas), linha da timeline (tempo) e frames (quadro a 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

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.

Design Row ([20--?])

A seguir, veja alguns exemplos de animações feitas em Flash.

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 utilizaremos 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, verdadeiro ou falso, entre outras) muito utilizado na educação a distância para gravações de captura de telas e para o desenvolvimento de tutoriais que servem, por exemplo, para demonstração de softwares, e como utilizar determinados programas. 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 depois 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

A nova versão do Adobe Captivate 5.5 exporta o vídeo diretamente em formato .wmf para o Youtube.

Adobe (2012)

SAIBA MAIS

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

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

8 Software livre

Adaptado de Eliezer (2012)

Código aberto.

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 incorporaçã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 qualidade 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

Para baixar o software e conhecer mais sobre o Silverlight na prática, acesse um dos links a seguir e faça o download.

SAIBA MAIS

<http://www.silverlight.net/content/samples/1.0/ink-tattoo-studio/default.html> <http://www.silverlight.net/content/samples/1.0/grand-piano/default.html> <http://code.msdn.microsoft.com/Silverlight> <http://www.silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html>

Microsoft PowerPoint É um programa utilizado para criar e editar apresentações interativas, que podem 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 é multiplataforma, e por essa característica, pode ser rodado em diversos sistemas operacionais. 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.

SAIBA MAIS

Para conhecer uma animação feita no Blender, acesse o seguinte link: <http://smellycat.com.br/big-buck-bunny-o-filme/>.

ANIMAÇÃO

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

Blender (2012)

É 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 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 ALERTA

RENDER em Software 3D: é o ato de gerar uma imagem, para simular um objeto em três dimensões, podendo visualizá-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 permitem ler e gravar arquivos diretamente no software. Veja, a seguir, um Render feito no Rhinoceros.

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

3 Animação

Figura 12 - Render feito no Rhinoceros

O Rhinoceros suporta malhas de polígonos e nuvens de ponto. Tem alta precisã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 aplicaçã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

11 Polígonos

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

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

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 comerciais, cenas, animações, renderizações e jogos.

Autodesk ([20--?])

A modelagem no 3DsMax é por polígonos11, porém existe a técnica NURBS12, que substitui os polígonos, suavizando melhor o modelo.

Figura 14 - Exemplo de tela 3DsMax

3 Animação

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.

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

No entanto, a técnica NURBS não foi bem desenvolvida no 3DsMax, e o método 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 feita em 3D.

Falem de Tudo ([20--?])

Figura 15 - Malha de polígonos e técnica NURBS Fonte: 3D Total (2012)

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

ANIMAÇÃO

A seguir, veja mais detalhadamente algumas linguagens.

Realidade Virtual Conhecida hoje em dia como Realidade Aumentada é uma forma de interaçã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 programaçã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 aumentada é 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.

Kuca Moraes ([20--?])

3 Animação

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

Confira, nos sites a seguir, mais alguns exemplos de realidade aumentada: <http://realidadeaumentada.com.br/home/ index.php?option=com_content&task=view&id=25&Item id=43>;

SAIBA MAIS

<http://olhardigital.uol.com.br/produtos/central_de_videos/ crie-sua-propria-realidade-aumentada>; <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 ambientes 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

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.

a) Action Script 3.0 - é uma linguagem de programação da Adobe Flash Player13 e do Adobe AIR14 (Adobe Integrated Runtime). Essa linguagem é usada, 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 linguagem 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 facilitam 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 possui 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 interatividade ao usuário. É importante ressaltar, ainda, que as páginas são carregadas rapidamente.

FIQUE ALERTA

O javascript ainda tem problemas de compatibilidade, pois precisa do plug-in do navegador para ser executado corretamente.

Esse tipo de linguagem é mais utilizada para sites que contenham pequenas 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.

3 Animação

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 anteriormente, 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?

Hemera ([20--?])

O briefing é um tipo de pesquisa realizada com o cliente, na qual serão feitas algumas 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.

ANIMAÇÃO

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, possibilitando à 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 produto 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 intuito é consensar ideias que venham a contribuir de forma qualitativa para o projeto.

Comstock ([20--?])

3 Animação

Após listadas todas as ideias dos componentes, é necessário que a equipe analise 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 diferentes ideias, sempre de acordo com o projeto proposto. Essa etapa é realizada 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 alguns momentos - como abertura ou encerramento, que utilizam animações mais demoradas.

VOCÊ SABIA?

Toy Story, lançado em 1995, foi o primeiro longa-metragem dos estúdios Pixar e também o primeiro do mundo totalmente feito por computação gráfica 3D.

ANIMAÇÃO

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 adequando 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 abreviaturas para as principais unidades de tempo. Unidade

Símbolos de

Abreviatura

1 hora

1 minuto

1´

1min

1 segundo

1´´

Quadro 3 - Unidades de tempo

Ao rever a história, percebe-se que a preocupação com o tempo sempre acompanhou a evolução dos processos de animação. No século XIX, Eadweard Muybridge estudou diversos tipos de ação ao fotografar pessoas e animais em movimento. Criou técnicas e máquinas para fotografar 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.

Kino Dinamico ([20--?])

3 Animação

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 a animação que esse brinquedo gera, acesse o seguinte site desse tipo de animação: <http://www.cinematografo.com. br/o-fenaquistiscopio/>.

Hugo Leandro ([20--?])

SAIBA MAIS

Figura 20 - Foto de um Fenaquistiscópio

ANIMAÇÃO

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 acontecer. 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 tropeç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 elaborar 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

Fan Pop ([20--?])

Contudo, veja a seguir, alguns exemplos de timing trocados que fizeram sucesso. 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).

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

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 escala 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--?])

17 Animatic

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

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 retâ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

Adobe (2012)

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, acrescente mais uma layer (camada) e a janela aparecerá na parte inferior da tela.

Figura 24 - Modo timeline do programa Adobe Photoshop

ANIMAÇÃO

18 Dropdown É o nome da seta apontada para baixo, que geralmente serve para indicar que há um menu oculto. Quando se clica ou passa o mouse sobre ela, aparece, na mesma, um menu. É muito utilizada em programas e sites.

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, você encontra o painel de controle da animação que, assim como em aparelhos de som, possui as opções: play, pause, passar adiante, retroceder, som, além de uma barra de zoom (com ela você pode fazer aparecer mais ou menos frames). No canto inferior direito há também um ícone que você pode utilizar para mudar o modo de visualização (modo timeline ou modo frames). Veja, a seguir, o modo frames do programa Adobe Photoshop.

19 Artefato interativo

Adobe (2012)

São meios de comunicação interpessoal.

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 quadro. 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 ALERTA

Lembre-se de que essa layer não aparecerá na barra de ferramentas de camadas.

Timeline no programa Pencil 2D

Pencil 2D ([20--?])

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.

Figura 26 - Timeline do programa Pencil 2D

3 Animação

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 acrescentar 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 bitmap. f) Na parte inferior direita temos a linha do tempo. O que está em azul é bitmap, 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 demonstrasse 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 interatividade 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 acessando o produto.

ANIMAÇÃO

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 pessoa 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 diretamente com o usuário, é muito relevante, pois dessa forma é possível visualizar 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 MAIS

Para conhecer mais sobre técnicas de animação acesse: <http://artefatosinterativos.blogspot.com/search/label/ 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

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 animaçõ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 unidades 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 premiadas 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 persistência retiniana e como é interessante o estudo da visão, além da importâ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ência, o convite será para aprender sobre web. Vamos em frente!

WEB

4 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 sempre 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

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). Contudo, 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?

Você sabia que um dos caminhos que vem sendo pesquisado atualmente é a interface com o reconhecimento 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 senã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 explicar 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 informativas sempre que necessário ou quando for uma boa ajuda para esclarecer um conceito. (ROYO, 2008, p. 109).

FIQUE ALERTA

Evite que o usuário perca o tempo dele buscando opções e caminhos muito óbvios, o importante é conhecer as expectativas e a reação do usuário.

De acordo com Muybridger (2008), os envolvidos pelo projeto devem certificar-se de:

4 WEB

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 alternativas 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 produçã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 utilizado por designers. Ela serve de apoio para analisar e dar forma a uma imagem e/ ou à unificação de várias imagens.

SAIBA MAIS

Veja um pouco sobre as leis da Gestalt nesse site: <http:// chocoladesign.com/fundamentacao-e-leis-da-gestalt>.

ANIMAÇÃO

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 animação em um ambiente virtual precisam deixar os arquivos leves, para não causarem 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 conceito que deseja no roteiro. Um amplo conhecimento de técnicas 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 entanto, 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 desenvolvida 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 javascript, 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).

VOCÊ SABIA?

O Flash está expandido bastante na área de programação, e é o responsável pelo carregamento de tutoriais, vídeos, objetos em 3D e realidade aumentada, como citado anteriormente. Podendo ser utilizado na parte de atividades, demonstrações e simulações, tendo sempre como contrapartida não utilizar apenas um tipo de programação na construção para web.

4 WEB

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 animaçã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

Adaptado de Wikipedia ([20--?]), Corel ([20--?])

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.

Figura 27 - Matiz e paleta de cores RGB e CMYK

CMYK (Cyan, Magenta, Yellow e Black)

Vermelho, verde e azul

Ciano, Magenta, Amarelo e Preto

Soma de todas as cores = Branco

Soma de todas as cores = Preto intenso

Tela: Luz

Impresso: Pigmento

iStockphoto ([20--?])

É uma composição de computação gráfica que mostra a ilustração, animação, música e vozes, dando uma noção do projeto final. É muito parecido com o storyboard.

RGB (Red, Green e Blue)

Midia Publicitária ([20--?]),

1 Animatic

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

Free Great Picture ([20--?])

ANIMAÇÃO

BPI Inc. ([20--?])

Quadro 4 - Tipos de Cores (CMYK e RGB)

SAIBA MAIS

Procure na Internet artigos sobre o tema ou leia o livro: FARINA, Modesto; PEREZ, Clotilde; BASTOS, Dorinho. Psicodinâ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, criatividade 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 impresso. 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 cores, obtendo assim, uma maior definição na hora da impressão.

4 WEB

É 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 respectivos 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 vetorizadas, personagens para animação, cenários e afins. d) .psd (Photoshop) – É usado com muita frequência para tratamento e montagem 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 fornecedor 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 fornecedor 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 deixar uma imagem com fundo transparente. i) .gif – Extensão utilizada normalmente quando uma imagem requer transparência no fundo. Bastante utilizado para animatics1. Pode ser feito no Adobe Photoshop. j) .ai (Adobe Ilustrator) - Utilizado para vetorizar as imagens. Seu uso é bastante comum para fazer capas e anúncios publicitários. k) .fla (Adobe Flash) – Arquivo de animação do Adobe Flash. Utilizado em vetores, 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

2 Animatic

Adobe (2012)

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

Figura 28 - Tela do programa Dreamweaver

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

Adobe (2012)

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

Figura 29 - Tela do programa Captivate

4 WEB

p) .max – Extensão para animação em 3D, no programa 3DMAX. Um dos programas mais conhecidos e utilizados para animação 3D.

Blender ([20--?])

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.

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 definidos no projeto gráfico.

VOCÊ SABIA?

Você sabia que a empresa Macromedia, famosa por ter uma linha com mais de 30 programas (dentre eles, o Macromedia Flash), foi comprada pela empresa Adobe 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 planejamento 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

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 quando 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 capacitaçã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 época e acabaram aplicando este tipo de linguagem em todo o material que estava 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, estes 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 designer 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 jogos interativos em Flash, que são, ao mesmo tempo, mais interativos e de melhor usabilidade, e se encaixavam melhor com a proposta inicial do projeto. Os ajustes foram providenciados pela equipe que, após este acontecimento, 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

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 usabilidade e na interface gráfica, verificando o que é viável fazer ou não. Você aprendeu ainda, que é preciso apresentar algo inovador ao cliente, deixando 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 envolvidos e trazendo bons resultados. Você viu também a importância do roteiro, do projeto gráfico e suas utilizações. Além disto, foram abordadas as leis da Gestalt, grande norteadora 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

5 Neste capítulo, você irá conhecer alguns programas que irão lhe auxiliar na criação de animações. Verá também os princípios básicos para o desenvolvimento de uma animação utilizando 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

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 ALERTA

A melhor forma de você se certificar que a animação ficará com o tamanho correto é configurando o stage logo no 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

VOCÊ SABIA?

Que o arquivo do Flash possui extensão .fla? Portanto, ao finalizar seu trabalho no Flash, o arquivo será salvo com essa extensão. Clicando na aba arquivo, configurações de publicação ou a tecla de atalho ctrl+shift+f12 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

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?

Você sabia que o flipbook foi o primeiro dispositivo de animação linear, criado em 1868, chamado também de Kineógrafo, Thumb Book (livro de polegar) ou filme de bolso?

Adobe (2012)

Veja na figura a seguir, um exemplo de flipbook.

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 organizar os objetos da animação sem que um interfira no outro. Com isso, você pode criar animações mais complexas.

ANIMAÇÃO

1 Learning Game O significado literal, em português, é jogo de aprendizagem. É um jogo ou minijogo utilizado como método educativo, um tipo de material didático pedagógico.

No Adobe Photoshop, na barra de ferramentas das layers, você pode acrescentar efeitos à camada, como: opacidade, bloqueá-la, ocultá-la, aplicar máscara, grupo, pasta, nova camada e excluí-la. Saiba que as layers são muito utilizadas para fazer fotomontagens com vários objetos, onde um pode ser terminado pelo outro, misturando-se um ao outro. Além disso, as layers podem ser usadas para desenhar. Por exemplo: em uma camada 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 é fundamental. 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.

Adobe (2012)

5 ANIMANDO NO ADOBE FLASH

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 Ensino a Distância.

Adobe (2012)

Neste caso, o animador procurou organizar as camadas da seguinte maneira:

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

ANIMAÇÃO

2 gotoAndPlay Número do frame ou nome do objeto.

No Adobe Flash, no ícone de um olho , você pode mostrar ou ocultar determi, você pode bloquear nada camada, quando precisar. Já no ícone do cadeado determinada camada. A camada que você estiver no momento fica com um ícone , simbolizando que está sendo editada. No quadrado ao lado do de lápis cadeado, você pode selecionar uma camada e deixá-la em outline, ou seja, invisí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 ALERTA

Tente sempre deixar os nomes das camadas com números, letras minúsculas e evite caracteres especiais (acentos, espaços, barras...).

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

inserir uma camada nova;

criar uma nova pasta;

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 acompanhar 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 comando stop() que é utilizado para parar a animação. Esse comando pode ser inserido 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

Por volta de 1870, Joseph Plateau provou que o olho humano conserva a impressã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 objeto 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?

Você sabia que o olho humano vê, em média, 24 frames por segundo? 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ércia Ocular”?

Adobe (2012)

É 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.

Figura 35 - Objeto inserido no primeiro frame

ANIMAÇÃO

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Ê SABIA?

Que para um banner são utilizados até 50 frames, e que um tutorial ou demonstração de algum produto requer 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

5.5 Controle da animação Para desenvolver um controle para o usuário monitorar uma animação e poder, 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 movimentam um determinado objeto ou personagem, como por exemplo, a movimentaçã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.

Adobe (2012)

A seguir, acompanhe um exemplo no qual foi utilizado controle no personagem 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 ampliada internamente. Veja, a seguir, a figura da cena geral, onde o personagem se locomove pela escola.

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

ANIMAÇÃO

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, amarelo 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ê consegue 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 Cenas.

5.6 Scene (Cena) Uma cena pode conter alguns elementos, como cenários e personagens animados. 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 separados, 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

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 novas 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 desenvolvido 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 ícone da claquete4. Ela abrirá um menu com uma lista de todas as cenas. Basta escolher a que você quiser, e pronto, a cena será mudada. Conforme figura a seguir.

Adobe (2012)

ANIMAÇÃO

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

Você notará que, quando a última cena acabar, automaticamente a primeira cena roda novamente. Para evitar que isto aconteça, você pode usar a programaçã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?

Você sabia que Steven Spielberg foi um dos pioneiros a criar um gráfico de emoção? 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, rotacionar, dimensionar e distorcer objetos do palco. A barra de ferramentas é dividida em seis áreas, ferramentas de seleção, ferramentas 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 ferramentas 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 utilizá-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

Adobe (2012)

Figura 41 - Aba propriedades com desenho selecionado

FIQUE ALERTA

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

Para criar uma forma, você pode definir a posição X e Y, e também as dimensõ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 cores, 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 arredondar 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.

Adobe (2012)

5 ANIMANDO NO ADOBE FLASH

Figura 42 - Tipos de linhas

Adobe (2012)

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.

Figura 43 - Aba propriedades com desenho selecionado

Adobe (2012)

A flecha branca se chama subselecionar, essa ferramenta permite trabalhar com os nós da sua imagem. Veja, na figura a seguir, como fica um desenho selecionado com essa ferramenta.

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.

Adobe (2012)

ANIMAÇÃO

Figura 45 - Ferramenta Free Transform

A Ferramenta Free Transform Tool ou Transformação livre serve para dimensionar, rotacionar e inclinar o objeto. Pressionando a tecla ALT ao dimensionar um lado do desenho, o outro lado fará a mesma dimensão. A segunda opção é a Ferramenta de Gradient Transform Tool, ou transforma, que permite dimensionar, rotacionar ou inclinar o gradienção de gradiente te aplicado no objeto. , que só funLogo abaixo tem a Ferramenta de Rotation Tool, rotação 3D cionará se você abrir um arquivo no Flash como Action Script 3.0 e o próprio estiver convertido em símbolo. Essa ferramenta rotaciona sua imagem em perspectiva. 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

Adobe (2012)

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

Figura 47 - Desenho selecionado com a ferramenta 3D Translation

Adobe (2012)

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.

Figura 48 - Desenho selecionado com a ferramenta Lasso Tool

Depois, há um grupo de ferramentas de quatro opções chamada Pen Tool ou , que permite desenhar linhas e curvas; e adicionar, apagar e converCaneta ter pontos.

Adobe (2012)

ANIMAÇÃO

Figura 49 - Ferramenta Pen Tool

O funcionamento da ferramenta caneta no Flash é igual a outras ferramentas 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 subsepodem ser trabalhadas mexendo nas curvas, conforme o desenho lecionar desejado. é a próxima ferramenta e possui três opA Ferramenta Texto ou Text Tool çõ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!

Adobe (2012)

5 ANIMANDO NO ADOBE FLASH

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 precisam 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 desenhado no palco por exemplo. b) Texto Dinâmico ou Dinamic Text: é utilizado para textos que recebem informaçõ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 textos 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

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 precisar rotacionar a caixa de texto, formatação mais específica de caracteres, tabulaçã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

Logo abaixo você vai encontrar a ferramenta Line Tool ou Linha , que permite tracejar linhas e também unir os pontos de uma linha à outra, criando outras formas.

Adobe (2012)

A próxima ferramenta é, na verdade, um grupo de ferramentas de desenho com formas geométricas predefinidas, como: Rectangle Tool, Oval Tool, Rectangle 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

Figura 54 - Figuras geométricas

Logo a seguir vem a ferramenta Pencil Tool ou Lápis fazer desenhos a mão livre.

, que é utilizada para

Adobe (2012)

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 propriedades, você pode editar a espessura do traço, o tamanho do spray e a cor.

Figura 55 - Ferramenta Pincel

ANIMAÇÃO

Ferramenta conhecida como “Osso”, é utilizada no Flash e em outros softwares para movimentar organicamente um personagem ou objeto.

A ferramenta a seguir chama-se Ferramenta de desenho Deco ou Deco Tool . Funciona como um pincel mais definido com formas prontas para serem utilizadas, e que podem ser editadas na aba propriedades. Veja a seguir:

Figura 56 - Ferramenta Pincel Deco

FIQUE ALERTA

Algumas destas formas já vêm com uma animação definida como, por exemplo: efeitos de fumaça, fogo, partículas, raios de chuva, entre outros. Esses efeitos também podem ser alterados na aba propriedades. Confira, a seguir, algumas das formas prontas da ferramenta Deco Tool.

Adobe (2012)

5 Bone

Adobe (2012)

Figura 57 - Formas prontas da ferramenta Deco Tool

5 ANIMANDO NO ADOBE FLASH

Adobe (2012)

Outra ferramenta interessante é a Osso ou Bone5 Tool, que permite que você crie articulações para animar um objeto de forma independente, criando um “esqueleto” 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.

Figura 58 - Ferramenta Bone Tool

Na animação com bones é possível ver o controle em uma estrutura mais realista (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ímbolos, sendo também muito utilizados para animar personagens.

Adobe (2012)

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.

Figura 59 - Utilizando a ferramenta Bone

ANIMAÇÃO

Efeito de transparência utilizado em diversos softwares de criação.

Na sequência, vêm as ferramentas Paint Bucket Tool (ou balde de tinta) e . O balde de tinta permite pintar o preenInk Bottle Tool (ou garrafa de tinta) 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)

6 Alpha

Figura 60 - Ferramentas Paint Bucket Tool e Ink Bottle Tool

A Ferramenta Conta-gotas ou Eyedropper Tool é muito útil para selecionar 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. , como o nome já diz, serve para A Ferramenta Eraser Tool ou Borracha apagar o objeto, sendo que a borracha tem opções de apagar apenas as linhas ou apenas o contorno.

Adobe (2012)

100

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

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. é utilizada para selecionar o palco e A Ferramenta Mão ou Hand Tool 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. é utilizada para aumentar e diminuir o zoom em A Ferramenta Zoom Tool qualquer área do palco do Flash.

Adobe (2012)

e Fill Color referem-se à cor dos As próximas ferramentas Stroke Color 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.

Figura 62 - Aba amostras das cores do preenchimento e contorno

Existe uma infinidade de cores para você escolher, cores opacas e com gradiente. 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.

101

Adobe (2012)

ANIMAÇÃO

Figura 63 - Aba cores sólidas de preenchimento e contorno

Adobe (2012)

102

Figura 64 - Aba cores gradientes de preenchimento e contorno

Adobe (2012)

5 ANIMANDO NO ADOBE FLASH

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 armazenados automaticamente como textura no Flash, basta selecionar bitmap fill e escolher a imagem desejada. Veremos um pouco mais sobre essa ferramenta logo a seguir.

VOCÊ SABIA?

Que você tem como opção acrescentar novas cores na paleta de cores? Basta colocar o cursor sobre as cores que aparecerá um sinal de “mais”, aí é só dar um simples clique que a cor será adicionada. Para retirar uma cor, basta apenas clicar sobre ela, manter o mouse pressionado 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 preenchimento e no contorno de cada quadrado.

103

Adobe (2012)

ANIMAÇÃO

Figura 66 - Exemplos com efeito de cores

SAIBA MAIS

Para saber mais sobre gradiente e preenchimento de bitmaps acesse o link: <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)

104

Figura 67 - Preenchimento com bitmap

5 ANIMANDO NO ADOBE FLASH

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

Adobe (2012)

Com a ferramenta seta você pode manipular objetos desenhados como, por exemplo: linhas, polígonos, retângulos e elipses, alterando suas formas com facilidade. Para isso, selecione a ferramenta seta e, após, basta clicar na linha do objeto 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.

Figura 68 - Objeto alterado

Os textos são criados no Flash como textos editáveis e, para poder transformá-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 novamente Ctrl + B, ele retira o processo de desmembrar e é transformado em vetor. Veja esse processo na figura a seguir.

105

ANIMAÇÃO

Adobe (2012)

106

Figura 69 - Processo do texto transformado em vetor

De acordo com a figura anterior, perceba que, ao desmembrar o texto, as letras 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.

SAIBA MAIS

Para ter uma visualização melhor dessa transformação, assista ao seguinte vídeo: <http://autodidatatube.blogspot. 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 objetos no palco.

Adobe (2012)

5 ANIMANDO NO ADOBE FLASH

Adobe (2012)

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

Figura 71 - Aba Align (alinhar)

A opção Align to Stage ou Alinhar ao palco da aba Align alinhe e distribua os elementos de acordo com o palco.

permite que você

é utilizada para redefinir a escala, A ferramenta Transform ou Transformar a rotação ou a inclinação de objetos em vetor e/ou tridimensionais.

107

Adobe (2012)

ANIMAÇÃO

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)

108

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

5 ANIMANDO NO ADOBE FLASH

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 utilização. Quer saber como fazer isso? Primeiramente, é fundamental converter os objetos 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 automaticamente. 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);

Adobe (2012)

e) clique em OK.

Figura 74 - Caixa Convert to Symbol

109

110

ANIMAÇÃO

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ímbolos 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 utilizados 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 estado 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 dentro 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 ferramentas, como alinhamento, bones, girar, etc.

5 ANIMANDO NO ADOBE FLASH

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 principal. É como se fosse um filme secundário dentro do filme principal. Por exemplo: 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.

Adobe (2012)

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 comportamento do objeto.

Figura 75 - Propriedades de um símbolo

111

ANIMAÇÃO

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)

112

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

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 quando 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.

Adobe (2012)

Veja, a seguir, a timeline de um button.

Figura 77 - Timeline de um button

Saiba que, com esse símbolo, você pode: criar um menu com links, fazer botões invisíveis com áudio, entre outros tipos. A seguir, conheça um pouco mais sobre o símbolo Graphic.

113

ANIMAÇÃO

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 alguns efeitos no seu objeto, como: alpha (transparência), cores, brilho e tinta, você deve converter seu objeto neste símbolo.

Adobe (2012)

114

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

É 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ância 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úsculas.

Adobe (2012)

Veja, na figura a seguir, onde é instanciado o objeto.

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 animador 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 comportamento de um movie clip. Por meio de ações, é possível fazer um movie clip se movimentar.

115

116

ANIMAÇÃO

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. Interpola 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?

Você sabia que o maior festival de animação da América Latina acontece no Brasil? O Anima Mundi acontece todo ano no Rio de Janeiro e São Paulo. O evento promove 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 importados, 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

Adobe (2012)

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.

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.

117

ANIMAÇÃO

Adobe (2012)

118

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. Conforme 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.

Adobe (2012)

5 ANIMANDO NO ADOBE FLASH

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 qualidade 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 propriedades. c) Glow: aplica brilho ao símbolo. d) Bevel: aplica chanfros e entalhes no símbolo. Na opção Type, pode ser definido como Inner, Outer e Full. e) Gradient Glow: aplica brilho gradiente aos símbolos. f) Gradient Bevel: aplica chanfros gradiente aos símbolos.

119

120

ANIMAÇÃO

g) Adjust Color: trabalhar os ajustes de cores do símbolo como brilho, contraste, 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, escorregar, surgir, ampliar, entre outras. No caso de uma animação de história em quadrinhos, 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.

FIQUE ALERTA

Deve-se tomar muito cuidado, ao aplicar alguns efeitos de transição, principalmente quando for um site ou apresentação de um projeto. O excesso de efeitos pode causar 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

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.

Adobe (2012)

b) ToLibrary: importa o objeto diretamente para a biblioteca. Caso tenha escolhido 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.

Figura 83 - Importação de imagem

121

122

ANIMAÇÃO

8 flv

c) To External Library: importa para a biblioteca outro arquivo fla.

Formato de arquivo usado no Adobe Flash Player para transmissão de vídeos por meio do Flash.

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 palco e manterá uma instância dele na biblioteca. Veja, a seguir, como importar um vídeo para o Flash.

9 Skin

Adobe (2012)

É o tipo do layout da barra de reprodução do vídeo.

Figura 84 - Importação de vídeo

FIQUE ALERTA

Na maioria das vezes, para trabalhar com vídeos dentro do Flash é necessário convertê-lo como formato .flv, mas isso não é uma regra, pois há formatos de vídeos que podem ser importados diretamente para o Flash sem a necessidade de transformá-lo em .flv8.

Saiba que o Flash emite uma mensagem de alerta caso o vídeo que esteja sendo inserido não seja compatível com o programa.

5 ANIMANDO NO ADOBE FLASH

Adobe (2012)

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.

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 ALERTA

Lembre-se de salvar seu arquivo, pois, se o arquivo não estiver salvo, ele não abrirá o Media Encoder diretamente do Flash.

123

ANIMAÇÃO

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)

124

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 alterado 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 importada.

Adobe (2012)

5 ANIMANDO NO ADOBE FLASH

Figura 88 - Aba Properties de uma imagem importada

No Flash, é possível utilizar os sons de várias maneiras. Você pode, por exemplo, 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.

Adobe (2012)

O controle de som (reproduzir, pausar, aumentar volume, etc.) é feito com a programação Action Script. O armazenamento de sons na Biblioteca é feito juntamente 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.

Figura 89 - Biblioteca do áudio

125

ANIMAÇÃO

Adobe (2012)

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.

Figura 90 - Sound Properties

Para aplicar efeitos no som importado, você deve alterar as opções encontradas na aba propriedades com o áudio selecionado. Conforme mostra a figura, a seguir.

Adobe (2012)

126

Figura 91 - Propriedades do áudio inserido no frame

5 ANIMANDO NO ADOBE FLASH

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 encarregado de entregar um conteúdo para que os profissionais da área de design desenvolvessem. Só que o professor não tinha muito conhecimento 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 propuseram desenvolver algo inovador utilizando a ferramenta Flash. O curso era sobre Manutenção de Computadores. E o conteúdo era muito específico e prático, pois era para simular uma montagem de um computador. 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 decidido 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 detalhes. Nessa animação o aluno teria o marcador em mãos proporcionando 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.

127

128

ANIMAÇÃO

Tendo como exemplo esse fato, perceba que o Flash é uma ferramenta muito ampla. Portanto explore bem todas as funções e potencialidades desse programa, 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 filmes ou movie clip, efeitos dos filtros, efeitos de animação, transições, bibliotecas, 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 embasamento 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-eleis-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 desenvolvimento 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 colaborativo 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 Selma Kovalski 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