1 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

ANIMAO BREVE INTRODUO Animao refere-se ao processo segundo o qual cada fotograma de um filme produzido individualmente, podendo ser gerado quer por computao grfica quer fotografando uma imagem desenhada quer repetidamente fazendo-se pequenas mudanas a um modelo (ver claymation e stop motion), fotografando o resultado. Quando os fotogramas so ligados entre si e o filme resultante visto a uma velocidade de 16 ou mais imagens por segundo, h uma iluso de movimento contnuo (por causa da persistncia de viso). A construo de um filme torna-se assim um trabalho muito intensivo e por vezes entediante. O desenvolvimento da animao digital aumentou muito a velocidade do processo, eliminando tarefas mecnicas e repetitivas. Podero visualizar uma apresentao multimedia, no qual feito um breve enquadramento historico e so apresentados alguns videos explicativos e demonstratives de animao mais tradicional. http://prezi.com/uidcxswpka6r/flipbook/

A ANIMAO COMO LINGUAGEM INTRODUO AO CONCEITO DE ANIMAO: FILME LINEAR E INTERATIVO. A partir do uso da internet grfica, isto , da internet com imagens, a evoluo para animao era o prximo passo esperado. Algumas tentativas de implementar um formato que fosse compatvel com todos os navegadores foram feitas (como o formato de GIF animado, que permite uma sucesso de quadros, como num filme mudo antigo) mas no eram flexveis o bastante. Para atender a esta demanda, surgiu o programa Flash, da Macromedia, que trabalha a partir de vetores e que permite a interpolao de movimento, livrando o autor do tremendo trabalho de ter que definir a animao quadro a quadro. As aplicaes das animaes so muitas.

2 UFCD: Animao 2D MACROMEDIA/ADOBE FLASH O programa Flash trabalha com animao 2D (em duas dimenses) e permite o uso de som. Assim como as animaes vistas em cinema e em TV, as animaes feitas em Flash tambm trabalham com os seguintes conceitos: palco: a rea de trabalho, a rea em que a animao visvel para o usurio final. personagens: so elementos grficos que atuam, isto , se movem, mudam de cor, ou sofrem algum outro tipo de alterao durante uma cena. Os personagens atuam sobre o palco, cada um em sua camada. Personagens diferentes no devem ocupar a mesma camada simultaneamente. Os personagens, no Flash, so chamados de smbolos. cena (scene): o "tempo-espao" onde a ao se desenrola. O tempo medido pela linha do tempo. O espao de um personagem o palco, numa certa cena, numa certa camada. A cena divida espacialmente em camadas e temporalmente em quadros. camada (layer): corresponde a cada folha de acetato, nas animaes antigas, feitas quadro a quadro. filme (movie): o encadeamento de cenas. linha do tempo (timeline): dividida em quadros, a escala temporal da cena. quadro (frame): cada instante da linha do tempo. A interface grfica do Adobe Flash tem uma estrutura semelhante aos outros softwares da Adobe usados na produo de aplicaes multimdia. 12/08/2013 a 11/09/2013
Cludia Saraiva | claudiasaraiva.design@gmail.com

Est dividida em: 1. menus, 2. barra de ferramentas, 3. Linha do Tempo (timeline).

3 UFCD: Animao 2D 4. painis, 5. barras de propriedades 6. Stage (palco), onde decorre a aco. Note-se que a interface pode ser personalizada de acordo com as necessidades de utilizador, os painis laterais podem-se mover, agrupar e desagregar, podem estar visveis ou invisveis. E, obviamente, podemos guardar a interface, de forma a manter a estrutura escolhida. Isto pode ser realizado clicando em Window Workspace Save Current. TOOLBARS BARRA DE FERRAMENTAS 12/08/2013 a 11/09/2013
Cludia Saraiva | claudiasaraiva.design@gmail.com

A Tools Bar (barra de ferramentas), elemento nuclear para desenho e animao com o Flash, pode ser organizada de acordo com a necessidade do utilizador. Para tal basta aceder a Flash Customize Tools Pannel.

4 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

VISIBILIDADE DOS PAINIS A visibilidade de todos os painis pode ser controlada a partir do menu Window. Os painis so ajustveis ao utilizador, sendo possvel agrup-los ou separ-los, minimiz-los ou maximiz-los.

PAINEL PROPERTIES O painel Properties (propriedades) situa-se na parte inferior da interface, estando agrupado com o painel Filters, o painel Parameters e, tambm o painel Actions. neste painel que definimos as propriedades dos elementos do projecto.

Este painel toma configuraes diferentes, consoante o tipo de objecto seleccionado:

5 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

Para mostrar ou ocultar a o painel Properties usamos cmd+F3.

TIMELINE LINHA DO TEMPO Um dos componentes principais do interface a Timeline ( linha de tempo), onde se pode controlar a estrutura, organizar o espao e o tempo de um projecto. Permite criar as estruturas complexas de um projecto, atravs da manipulao das frames e das layers. Nestas podem-se organizar vrios tipos de media: grficos vectoriais, imagens bitmap, udio, vdeo, texto, voz e animaes.

Para mostrar ou ocultar a timeline usmos cmd+alt+T. Tal como j foi referido o Flash pode trabalhar com vrios tipos de media, mas as suas ferramentas so de desenho vectorial. STAGE PALCO No Stage onde posicionamos os nossos objectos, organizmo-los no espao definido e onde decorre a aco.

6 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

A TIMELINE A Timeline (linha de tempo) um dos componentes principais do Flash. na timeline que definimos a animao e a organizamos no espao e no tempo com as Layers que so como folhas transparentes sobrepostas. A primeira est por baixo e as superiores sucessivamente acima. Cada Layer independente e pode ter os seus prprios elementos e a sua prpria animao, sons, vdeos, texto, ou actionScript.

Ao lidar com a linha do tempo, voc ver alguns tipos de quadros: o quadro simples, o quadro-chave, o quadro-chave em branco e o quadro em branco. Cada um tem uma caracterstica e uma representao. Veja a tabela.

7 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

aparncia
quadro em branco quadro-chave em branco quadro normal quadro normal quadro-chave branco branco, com ponto vazado cinza azul ou verde ponto preto F7

criar

apagar

significado
no h objeto em cena

Shift+F6

no h objeto em cena (quadro de controle)

F5 F5 F6

Shift+F5 Shift+F5 Shift+F6

h objeto na cena, parado h objeto em cena, em transio h objeto em cena (quadro de controle)

Cada filme de flash organizado e animado com, pelo menos, uma Timeline. Normalmente existem mltiplas timelines num projecto: a timeline principal ou root (raiz) e as secundrias, onde existem osMovie Clips os botes ou os grficos. Podem existir, igualmente, mais do que uma timeline principal, caso usemos swf externos, que podem ser carregados na root ou substituir a root, tornando-se, eles prprios, a timeline principal. Em cada Layer podem existir Frames, Keyframes e keyframes vazias. As Frames indicam que uma dada sequncia da animao contnua e sem alteraes ao longo do tempo. As keyframes (frames chaves) so os pontos onde existem a alterao na animao, logo mostram uma animao com alteraes. As Blank keyframes, so frames ainda sem contedo.

Exemplo de uma timeline organizada Podem existir labels, rtulos ou nomes que podemos aplicar s Frames/quadros, que nos ajudam a estruturar a animao e actionscript, para interagirmos com a interface, de outra forma o filme corre ininterruptamente todas as frames, da primeira ltima.

8 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

A parte superior da Timeline tem uma rgua com numeraes a cada cinco espaos. Estas indicam a posio de uma animao e a sua durao, os nmeros indicam em que ponto da animao estamos, estando presentes enquanto indicao de referncia.

MANIPULAO DA TIMELINE Visibilidade Quando observamos a parte esquerda da Timelime podemos observar uma srie de botes. Em cima temos um olho, um cadeado e um quadrado.

O olho representa a visibilidade da layer. Podemos, por convenincia, tornar invisvel uma ou mais layers, bastando clicar no olho. Para tornar, novamente, visveis as Layers clicmos outra vez no boto. O cadeado serve para bloquear as Layers, desta forma protegemos o seu contedo de uma mudana no intencional. Muito til para projectos maiores. O quadrado serve par vermos apenas a linha de contorno dos objectos grficos contidos no Stage. , bastante, til nas animaes complexas, com grande quantidade de elementos grficos. um visionamento simplificado do Stage, o que torna o processamento mais leve. ORGANIZAO

9 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

Na parte inferior do mesmo lado esquerdo, temos mais quatro botes: Insert Layer, Add Motion Guide, Insert Layer Folder e Delete Layer.

O boto Insert Layer, serve para criar uma nova Layer, que ficar posicionada imediatamente acima daLayer que estiver seleccionada. O boto Insert Layer Guide, serva para criar uma linha guia para, desta forma, guiarmos uma animao ou parte dela. A linha guia ficar posicionada imediatamente por cima da layer seleccionada. Com a primeira frame seleccionada linha guia podemos desenhar uma guia com a Pencil tool que servir de referncia para o objecto da Layer de baixo. Na Layer ou Layers guiadas podemos criar Motion Tweens, posicionando o objecto na primeira frame no incio da linha guia e na ltima frame no fim da linha guia. Se pretendermos mais do que uma layer guiada clicmos na Layer (boto direito), acedemos s propriedades da Layer e optamos por Guided. O boto Delete Layer, serve para eliminarmos a ou as layers que por algum motivo no queremos. POSICIONAMENTO No canto superior da Timeline temos um boto que nos permite mudar o posicionamento da Timeline e diminuir ou aumentar o tamanho das frames. Existe uma opo muito til (Preview in Context) para sincronizao da animao com udio.

VISIONAMENTO Na barra inferior da Timeline podemos observar 6 botes: Scroll To Playhead; Onion Skin; Onion Skin Outlines; Edite Multiple Frames; Modify Onion Markers e um grupo com Current Frame; Frame Rate e Elapsed Time.

10 UFCD: Animao 2D 12/08/2013 a 11/09/2013

Cludia Saraiva | claudiasaraiva.design@gmail.com

O boto Scroll To Play Head, permite-nos ir directamente para a cabea de leitura. Muito til em Timelines extensas. O boto Onion Skin, fundamental na animao porque, assim, podemos ver o conjunto dos movimentos que estamos a realizar/editar. O boto Onion Skin Outlines, faz o mesmo que o boto anterior mas mostra s o contorno das formas. O boto Edite Multiple Frames vrias frames em simultneo. A quantidade de frames a editar definido pelos Markers que, depois do boto clicado, ladeia a Playhead. Podemos arrast-los para definirmos a quantidade de frames a editar em simultneo. O boto Modify Onion Markers serve para determinar o nmero de frames a editar quando clicmos emEdite Multiple Frames. TEMPO O grupo seguinte d-nos informao sobre o posicionamento relativo da frame seleccionada na Timeline (Currente Frame), sobre a velocidade do filme (Frame Rate) e sobre o tempo que passou do incio frame seleccionada (Elapsed Time).

Para alterarmos o Frame Rate podemos dar um duplo clique sobre a indicao do Frame Rate ou aceder ao painel das propriedades do Filme (parte inferior da interface). No menu das propriedades do documento podemos escrever o ttulo, fazer uma descrio do projecto, determinar as opes de impresso, as dimenses do palco, a cor de fundo, a velocidade do filme, as unidades de medida. Por ltimo podemos tornar as nossas opes definitivas clicando em pr-definio.