Animação 2D Desenvolvido por Helder Oliveira.1
.01 Ambiente de Trabalho.02 Conceitos básicos de.03 Animações Palco (stage) 4 Propriedades do filme 8 Frame-by-frame 18 Timeline 4 Timeline 8 Tween 18 Caixa de ferramentas 5 Layers/Camadas 10 Painel Properties Frames, Keyframes e 6 BlankKeyframes 12 Símbolos e Biblioteca 13.II ENA Escola de Negócios e Administração
.01 Ambiente de Trabalho Nome Animação do Manual 2D.3
Ambiente de Trabalho 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)..4 ENA Escola de Negócios e Administração
Ambiente de Trabalho Caixa de Ferramentas (tools).01 Selection Tool Line Tool Pen Tool Oval Tool Pencil Tool Free Transform Tool Ink Bottle Tool Eyedropper Tool Hand Tool Black and White Button No Color Button Subselection Tool Lasso Tool Text Tool Rectangle Tool Brush Tool Fill Transform Tool Paint Bucket Tool Eraser Tool Zoom Tool Line Color Tool Fill Color Tool Swap Colors Button 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. Nome Animação do Manual 2D.5
Ambiente de Trabalho 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..6 ENA Escola de Negócios e Administração
.02 Conceitos básicos de Nome Animação do Manual 2D.7
Conceitos básicos de 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..8 ENA Escola de Negócios e Administração
Conceitos básicos de.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 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. Start Onion Skin End Onion Skin Onion Skin Outlines este é igual ao comando anterior, só que o conteúdo dos restantes frames é exibido através de linhas de contorno. Nome Animação do Manual 2D.9
Conceitos básicos de 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..10 ENA Escola de Negócios e Administração
Conceitos básicos de Layer Folder Show/Hide Lock/Unlock Show as Outlines.02 Motion Guide Layer Mask Layer Camada seleccionada 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. Nome Animação do Manual 2D.11
Conceitos básicos de 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 ou então não conter qualquer tipo de conteúdo. Keyframe vazio keyframe 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..12 ENA Escola de Negócios e Administração
Conceitos básicos de 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..02 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. Nome Animação do Manual 2D.13
Conceitos básicos de 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.14 ENA Escola de Negócios e Administração
Conceitos básicos de.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. 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. Nome Animação do Manual 2D.15
Conceitos básicos de 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. Criar uma nova pasta Objectos da biblioteca Criar um novo símbolo Propriedades do objecto Eliminar objecto.16 ENA Escola de Negócios e Administração
.03 Animações Nome Animação do Manual 2D.17
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 é 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. 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..18 ENA Escola de Negócios e Administração
Animações Classic Tween Na 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..03 Tween Shape Esta técnica de 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. 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 está incompleta ou quebrada, por exemplo pode faltar um keyframe. Nome Animação do Manual 2D.19
.20 ENA Escola de Negócios e Administração