Animação 2D - hpso.files.wordpress.com · Nome do Manual.5 1 Ambiente de Trabalho Animação 2D Caixa de Ferramentas (tools)! Selection Tool–utilizada para seleccionar e mover

.1

Animação 2D

Desenvolvido por Helder Oliveira

.II ENA – Escola de Negócios e Administração

.01 Ambiente de Trabalho

.02 Conceitos básicos de animação

.03 Animações

Palco (stage) 4 Propriedades do filme 8 Frame-by-frame 18Timeline 4 Timeline 8 Tween 18Caixa de ferramentas 5 Layers/Camadas 10

Painel Properties6

Frames, Keyframes e BlankKeyframes 12Símbolos e Biblioteca 13

Nome do Manual

.3 Animação 2D

Ambiente de Trabalho

.01

.4 ENA – Escola de Negócios e Administração


O ambiente de trabalho do Flash consiste num palco (Stage) no qual inserimos conteúdo e por um conjunto de painéis integrados numa única janela, que podem ser activados a partir do menu Window, que disponibilizam diversos comandos e ferramentas.

Palco (Stage)

É uma área com 550 x 400 pixels com fundo branco que aparece no centro do ambiente de trabalho onde podemos inserir conteúdo desde imagens bitmap, desenho vectorial, texto, botões, vídeo, som…

Timeline

A timeline organiza e controla todo o conteúdo de um filme ao longo do tempo distribuído por camadas (layers) e frames.

Os frames, como em filmes de vídeo, representam a forma como o tempo está

dividido e qual o conteúdo das camadas que se encontra visível no palco. FPS - taxa de reprodução do filme (fps – frames per second).

Nome do Manual

.5

.01 Ambiente de Trabalho

Animação 2D

Caixa de Ferramentas (tools)

§ Selection Tool –utilizada para seleccionar e mover objectos. § Subselection Tool – selecciona um objecto vectorial para posterior edição dos seus pontos

vectoriais. § Line Tool – utilizada para desenhar linhas. § Lasso Tool – permite criar selecções livres. § Pen Tool – permite criar objectos vectoriais através de pontos âncora que são utilizados para

desenhar curvas ou linhas rectas. § Text Tool – permite criar texto. § Oval Tool – utilizada para desenhar objectos vectoriais ovais e circulares. § Rectangle Tool – utilizada para desenhar objectos vectoriais quadrados e rectangulares. Ao fazer

clique e pressionar esta ferramenta, é possível obter um menu que permite aceder à ferramenta PolyStar Tool para criar objectos vectoriais personalizados.

§ Pencil Tool – permite desenhar linhas rectas ou de forma livre. § Brush Tool – simula o desenho com um pincel. § Free Transform Tool – permite modificar as propriedades dos objectos, como escalonamento,

rotação e distorção. § Fill Transform Tool – utilizada para modificar o tamanho e a direcção do gradiente de um objecto

cujo preenchimento é um gradiente. § Ink Bottle Tool – utilizada para aplicar uma cor previamente definida como contorno de um objecto. § Paint Bucket Tool – utilizada para aplicar uma cor previamente definida como preenchimento de um

objecto. § Eyedropper Tool –faz a amostragem de cores. § Eraser Tool – permite apagar partes de objectos. § Hand Tool – utilizada para mover o palco para que possa visualizar determinada

área do filme. § Zoom Tool – amplia ou reduz a área do palco.

Subselection Tool Lasso Tool Text Tool

Rectangle Tool

Brush Tool

Selection Tool

Line Tool

Pen Tool

Oval Tool

Pencil Tool

Free Transform Tool

Fill Transform Tool

Ink Bottle Tool

Paint Bucket Tool

Eyedropper Tool

Eraser Tool

Zoom Tool

Hand Tool Line Color Tool

Fill Color Tool

Black and White Button

Swap Colors Button

No Color Button



§ Line Color Tool – permite definir a cor do contorno de um objecto. § Fill Color Tool – permite definir a cor de preenchimento de um objecto. § Black and White Button – permite definir as cores por defeito do contorno e do preenchimento: preto

para o contorno e branco para o preenchimento. § No Color Button – não aplica cor a um dos itens seleccionados: o contorno ou o preenchimento. § Swap Colors Button – permite trocar as cores do contorno e do preenchimento.

Painel Properties

Através deste painel podemos visualizar as propriedades de um objecto seleccionado, assim como as propriedades de cada ferramenta aquando da sua selecção na caixa de ferramentas.

Quando nenhuma destas situações ocorre, o painel Properties exibe as propriedades do filme.

Nome do Manual

.7 Animação 2D

Conceitos básicos de animação

.02



Propriedades do filme

Antes de iniciarmos a fase de desenvolvimento, devemos definir as dimensões do filme, a cor de fundo e a velocidade (frame rate). Todas estas propriedades podem ser visualizadas e configuradas directamente no painel Properties. Podemos ainda fazer clique no botão de edição para aceder a mais propriedades do filme.

Quando fazemos clique no botão do tamanho do filme, podemos visualizar a seguinte janela:

Timeline

A timeline é uma ferramenta de extrema importância para a criação de animações no Flash. Ora vejamos os elementos que a constituem e as suas funções.

Nome do Manual

.9 Animação 2D


.02

§ Layers – as layers ou camadas dividem um documento em planos discretos, dando a ilusão de que os objectos foram desenhados em folhas de acetato separadas. Um documento pode ser constituído por várias camadas e cada camada pode conter vários objectos. Para além das layers normais podemos criar camadas guia (guide layers), pastas de camadas (layers folders) e camadas máscara (mask layers). Podemos ainda atribuir nomes às camadas.

§ Center frame – permite centrar a timeline com base no frame actualmente seleccionado. § Current frame – exibe o número do frame actualmente visível no stage. § Frame rate – exibe a velocidade do filme aquando da sua visualização. § Elapsed Time – mostra o número de segundos em que a animação foi reproduzida. § Frames – os frames de uma layer aparecem do lado direito da layer. Cada frame contém conteúdo

estático e a visualização desse conteúdo em sequência dá a ilusão de movimento. § Frame View – permite modificar a forma de visualizar os frames na timeline. § Onion Skin – ao pressionar este botão, aparece um marcador de início (Start Onion Skin) e outro de fim

(End Onion Skin) junto ao playhead da timeline. Esta função permite visualizar mais do que um frame ao mesmo tempo no stage. Apenas os conteúdos do frame actual irão aparecer normalmente e poderão ser editados e os restantes ficarão com um aspecto semitransparente e não editável.

§ Onion Skin Outlines – este é igual ao comando anterior, só que o conteúdo dos restantes frames é exibido através de linhas de contorno.

End Onion Skin

Start Onion Skin



§ Edit Multiple Frames – quando estamos a utilizar o comando Onion Skin, apenas podemos utilizar seleccionar o objecto do frame actual. No entanto, com esta opção activada, é possível seleccionar e editar os objectos dos restantes frames.

§ Modify Onion Markers – permite modificar os marcadores do Onion Skin de acordo com as seguintes

opções disponíveis:

§ Always Show Markers – exibe sempre os marcadores mesmo se o Onion Skin estiver desactivado.

§ Anchor Onion – bloqueia os marcadores nas suas posições actuais para que não se movam com o playhead.

§ Onion 2 – exibe apenas dois frames em ambos os lados do frame actual. § Onion 5 – exibe apenas cinco frames em ambos os lados do frame actual. § Onion All – mostra todos os frames.

§ Playhead – indica o frame que actualmente está a ser visualizado no stage.

Layers/Camadas

As layers ou camadas dividem um documento em planos discretos, dando a ilusão de que os objectos foram desenhados em folhas de acetato separadas. Um documento pode ser constituído por várias camadas e cada camada pode conter vários objectos.

Vejamos agora a combinação de todo o tipo de camadas que podemos criar na timeline.

Nome do Manual

.11 Animação 2D


.02

§ Layer Folder – pastas de camadas que ajudam a organizar todo o trabalho, permitindo colocar camadas numa estrutura em forma de árvore. Estas pastas podem conter camadas e mesmo pastas de camadas.

§ Motion Guide Layer – com a ferramenta Pen Tool, podemos desenhar um percurso no stage ao longo do qual os objectos se moverão. Este percurso tem de ser desenhado numa motion guide layer.

§ Mask Layer – camadas que mostram apenas determinadas partes dos objectos. Primeiro é necessário definir qual a área do objecto que deve ser visualizada e depois fazer a ligação à mask layer.

§ Show/Hide – mostra ou oculta o conteúdo das camadas. § Lock/Unlock – permite bloquear ou desbloquear as camadas. § Show as Outlines – exibe apenas as linhas de contorno dos objectos.

Inserir Camadas

Sempre que criamos um novo documento em Flash este contém apenas uma camada com um único frame. No entanto, é possível criar novas camadas através do comando Insert > Timeline > Layer. Podemos ainda fazer clique no botão , que se encontra no painel Timeline, para criar novas camadas. As novas camadas ficam sempre posicionadas acima da camada seleccionada. Podemos alterar o nome das camadas através de um duplo clique sobre a camada.

Mover Camadas

Para mover uma camada basta arrastar a camada pretendida para a nova posição.

Layer Folder

Motion Guide Layer Mask Layer

Camada

seleccionada

Show/Hide

Lock/Unlock

Show as Outlines



Eliminar Camadas

Para eliminar uma camada, basta seleccioná-la e depois fazer clique no botão de eliminação que se encontra no painel Timeline.

Distribuir objectos por Camadas

Se tivermos desenhado mais do que um objecto na mesma camada e pretendermos posteriormente distribuir esses objectos por camadas individuais, podemos utilizar o comando Modify > Timeline > Distribute to Layers.

Frames, Keyframes e Blankkeyframes

Quando criamos um novo documento em Flash, podemos visualizar uma camada com um único frame marcado com um círculo na timeline. À direita deste frame, encontram-se pequenas células. Para utilizar uma destas células temos de a transformar em frame, keyframe ou num keyframe vazio. Existe duas categorias de frames: § Keyframes – quando adicionamos conteúdo num frame, automaticamente converte-se num keyframe.

Podemos distinguir os keyframes na timeline através de um pequeno círculo preto. Os keyframes são editáveis. Para além dos keyframes com conteúdo, podemos ter keyframes vazios (Blank Keyframe) sem conteúdo. Estes são representados na timeline por um pequeno círculo vazio.

§ Frames – os frames podem estar no meio de dois keyframes com conteúdo interpolado a partir dos keyframes para criar animação ou então não conter qualquer tipo de conteúdo.

Adicionar frames ou keyframes

É necessário primeiro seleccionar o local onde pretendemos inserir o frame e, de seguida, efectuar o comando Insert > Timeline > Frame. No caso de pretendermos inserir um novo keyframe efectuar o comando Insert > Timeline > keyframe.

keyframe

Keyframe vazio

Nome do Manual

.13 Animação 2D


.02

Eliminar frames ou keyframes

Para eliminar frames, é necessário primeiro seleccioná-los e depois executar o comando Edit > Timeline > Remove Frames. Quando estamos a eliminar um frame, todo o frame é eliminado. No entanto, quando executamos o comando Modify > Timeline > Clear Keyframe estamos apenas a eliminar a propriedade de keyframe tornando-se num frame normal e o número de frames na timeline fica intacto. Se executarmos o comando Edit > Timeline > Clear Frames para eliminar um frame, o resultado obtido é um keyframe vazio.

Mover frames ou keyframes

Mover frames e keyframes na timeline do Flash é muito fácil. Basta seleccionar os frames ou keyframes pretendidos e depois arrastar para a nova posição.

Copiar frames ou keyframes

Um dos métodos mais simples de copiar frames e keyframes no Flash é a utilização da tecla Alt pressionada sobre o frame ou keyframe que pretendemos copiar e arrastar para o novo local para fazer uma cópia.

Em alternativa pode fazer clique no frame ou keyframe que pretende copiar e executar o comando Edit > Timeline > Copy Frames. De seguida, fazer clique no local para onde pretende copiar e executar o comando Edit > Timeline > Paste Frames.

Simbolos e Biblioteca (library)

Os símbolos são objectos que podemos criar em Flash, tais como uma imagem, um botão ou um movie clip. Os símbolos apenas são criados uma vez, podendo ser reutilizados no documento onde foi criado. Cada símbolo tem a sua própria timeline e stage. Podemos adicionar frames, keyframes e camadas à timeline de um símbolo tal como fazemos na timeline principal.

Quando inserimos um símbolo no stage, na realidade estamos a inserir uma instância desse mesmo símbolo. Uma instância é uma cópia de um símbolo que inserimos no stage ou então dentro de um outro símbolo e que pode ter cor, tamanho e função diferentes do seu símbolo. Quando editamos um símbolo, todas as suas instâncias são actualizadas automaticamente.



Todos os símbolos do documento ficam armazenados na biblioteca. Para os utilizar basta simplesmente seleccionar e arrastar para o stage e assim criamos uma instância. Para aceder à biblioteca do documento, basta executar o comando Window > Library.

Ora vejamos qual a diferença entre os três tipos de símbolos do Flash:

Graphic Symbols

Utilizado para imagens estáticas que pretendemos inserir no documento mais do que uma vez. Os símbolos gráficos trabalham em sincronismo com a timeline principal.

Button Symbols São utilizados para criar botões interactivos que respondem aos cliques do rato, rollovers ou outro tipo de acções. Quando criamos botões, podemos definir as imagens associadas a cada um dos diferentes estados do botão e atribuir acções a uma instância de um botão.

Movie Clip Symbols Através deste símbolos podemos criar pequenas animações, pois possuem a sua própria timeline independente da timeline principal. Estes símbolos podem ter controlos interactivos, sons e até mesmo instâncias de outros símbolos. Podemos ainda inserir instâncias de símbolos movie clip dentro de botões (button symbols) para criar botões animados.

Criar um novo símbolo

Para criar um novo símbolo, executamos o comando Insert > New Symbol.

Nome

Tipo de simbolo

Nome do Manual

.15 Animação 2D


.02

Converter uma imagem existente em símbolo

Na eventualidade de termos uma imagem no stage, podemos convertê-la num símbolo. Para tal, basta seleccionar a imagem e executar o comando Modify > Convert to Symbol.

§ Registration – permite definir o ponto a partir do qual o objecto está posicionado para ser transformado durante uma animação.

Editar um símbolo

Existem pelo menos duas formas de editar símbolos no Flash: § Seleccionamos uma instância do objecto, fazemos clique com o botão direito do rato e escolhemos a opção Edit in Place do menu de contexto. § Fazemos duplo clique sobre o símbolo na biblioteca. Depois de efectuada uma destas operações o símbolo fica no modo de edição, ficando no stage apenas o conteúdo do símbolo e o seu nome aparece no topo na barra de edição por cima do stage e à direita do nome actual da cena.

Após termos terminado a edição do símbolo, fazemos clique no nome da cena para voltar ao stage principal.

Instâncias

Sempre que adicionamos uma instância de um símbolo no stage, podemos aplicar alguns efeitos de cor e transparência, nomeadamente brightness, tint e alpha. Estes efeitos podemos encontrá-los na caixa de combinação Color do painel Properties quando uma instância estiver seleccionada.



§ Brigthness – permite regular o nível de luminosidade do objecto. Se escolhermos 0 % o objecto fica

totalmente escuro, enquanto com valor 100 % fica branco. § Tint – adiciona uma cor RGB personalizada à cor original do objecto, sendo possível definir o nível de

aplicação entre 0 % e 100 %. § Alpha – utilizado para aplicar transparência ao objecto. Se escolhermos um nível de 0 % o objecto fica

totalmente transparente, enquanto com 100 % fica visível. § Advanced – combina todos os efeitos anteriores, isto é, de luminosidade, aplicação de uma cor e

transparência. Assim que seleccionarmos esta opção, fazemos clique no botão Settings.

Biblioteca (Library)

A biblioteca contém todos os símbolos que foram criados no documento actual. Pode ainda conter som, vídeo e imagens. Os objectos da biblioteca podem estar organizados por pastas. Para activar a biblioteca do documento actual, é necessário executar o comando Window > Library.

Objectos da biblioteca

Criar um novo

símbolo

Criar uma nova pasta

Eliminar objecto

Propriedades do objecto

Nome do Manual

.17 Animação 2D

Animações .03


Animações

Frame-By-Frame

Definimos cada frame como um keyframe e criamos uma imagem diferente para cada frame. Inicialmente quando criamos um novo keyframe o conteúdo fica o mesmo do keyframe anterior. Esta técnica de animação é bastante utilizada para criar animações com um nível de detalhe elevado, dando um controlo mais criativo.

Tween

Apenas definimos um keyframe de início e um keyframe final da animação. O Flash automaticamente cria os frames entre os dois keyframes com base nos conteúdos desses mesmos keyframes. No Flash podemos encontrar três tipos de animações tween: Tween Motion, Classic Tween e Tween Shape.

Tween Motion

Este tipo de animac ̧ão do Flash baseia-se em objectos e não em keyframes. Isto significa que basta criar um símbolo do tipo movie clip e, em seguida, atribuir ao objecto um Tween Motion. Aplicada a animac ̧ão, basta mudar as propriedades do objecto, como arrastá-lo pelo stage ou mudar o seu tamanho e transparência. Isto porque o Flash detecta automaticamente a(s) alterac ̧ão(ões) e cria os keyframes para gerar a animac ̧ão. Para criar este tipo de animac ̧ão, é necessário que o filme de Flash utilize ActionScript 3.0 e seja publicado em Flash Player 10. Estas animac ̧ões são representadas na timeline por um ponto preto nos keyframes inicial e final. Entre os dois keyframes, os frames são representados por um fundo azul claro.

Nome do Manual

.19 Animação 2D

Animações

.03

Classic Tween

Na animação Classic Tween, podemos definir diversas propriedades tais como a posição, o tamanho e a rotação de uma instância, o grupo de objectos ou o bloco de texto num determinado ponto da timeline e depois alterar estas mesmas propriedades num outro ponto da timeline. Podemos também animar um objecto seguindo um determinado percurso através do desenho de um segmento. São representadas na timeline por um ponto preto nos keyframes inicial e final. Entre os dois keyframes os frames são representados por uma seta preta e fundo azul claro.

Tween Shape

Esta técnica de animação com objectos vectoriais é semelhante ao efeito de morphing. Desenhamos um objecto vectorial num determinado ponto da timeline e depois alteramo-lo num outro ponto da timeline ou desenhamos outro objecto. O Flash automaticamente vai interpolar os valores ou os objectos entre os keyframes e criar a animação. São representadas na timeline por um ponto preto no keyframe inicial e final. Entre os dois keyframes os frames são representados por uma seta preta e fundo verde claro.

IMPORTANTE: Quando aparecer uma linha a tracejado na timeline indica que a animação está incompleta ou quebrada, por exemplo pode faltar um keyframe.


Documents

Animação 2D - hpso.files.wordpress.com · Nome do Manual.5 1 Ambiente de Trabalho Animação 2D Caixa de Ferramentas (tools)! Selection Tool–utilizada para seleccionar e mover