Federação das Indústrias do Estado do Espírito Santo Findes. Senai Departamento Regional do Espírito Santo. Equipe técnica. Marcos Guerra Presidente

Transcrição

1 Animação

2 Federação das Indústrias do Estado do Espírito Santo Findes Marcos Guerra Presidente Senai Departamento Regional do Espírito Santo Flávio Sérgio Andrade Bertollo Diretor-gestor para Assuntos de Educação Solange Maria Nunes Siqueira Diretora Regional Yvana Miriam Pimentel Moreira Gerente do Departamento de Gestão Operacional Lúcia Helena Cunha Gerente do Departamento de Educação Zilka Sulamita Teixeira de Aguillar Pacheco Gerente da Divisão de Educação Profissional Equipe técnica Fabrício Elias de Oliveira Alves Conteudista Tatyana Ferreira Coordenação Samia Gomes Marques Cavalcante Revisão Pedagógica Antônio Alves dos Santos Diagramação

3 Tecnologia da Informação Animação Versão 0 Vitória 2013

4 2013. Senai - Departamento Regional do Espírito Santo Todos os direitos reservados e protegidos pela Lei nº 9.610, de 19/02/1998. É proibida a reprodução total ou parcial desta publicação, por quaisquer meios, sem autorização prévia do SENAI/ES. Senai/ES DEP - Departamento de Educação Profissional Ficha catalográfica elaborada pela Biblioteca do Senai-ES - Unidade Serra Dados Internacionais de Catalogação na publicação (CIP) SENAI. Departamento Regional do Espírito Santo. S492d Animação / Serviço Nacional de Aprendizagem Industrial, Departamento Regional do Espírito Santo. - Vitória : SENAI, p. : il. Inclui bibliografia 1. Fundamentos para o Design. 2. Projeto Web. 3. Identidade Visual. 4. Animação. 5. Desenvolvimento. Web. I. Título. CDU: Senai-ES - Serviço Nacional de Aprendizagem Industrial Departamento Regional do Espírito Santo Av. Nossa Senhora da Penha, 2053 Ed. Findes - 7º andar CEP: Vitória - ES Tel: (27)

5 Apresentação A busca por especialização profissional é constante. Você, assim como a maioria das pessoas que deseja agregar valor ao currículo, acredita nessa idéia. Por isso, para apoiá-lo na permanente tarefa de se manter atualizado, o Senai-ES apresenta este material, visando oferecer as informações que você precisa para ser um profissional competitivo. Todo o conteúdo foi elaborado por especialistas da área e pensado a partir de critérios que levam em conta textos com linguagem leve, gráficos e ilustrações que facilitam o entendimento das informações, além de uma diagramação que privilegia a apresentação agradável ao olhar. Como instituição parceira da indústria na formação de trabalhadores qualificados, o Senai-ES está atento às demandas do setor. A expectativa é tornar acessíveis, por meio deste material, conceitos e informações necessárias ao desenvolvimento dos profissionais, cada vez mais conscientes dos padrões de produtividade e qualidade exigidos pelo mercado. 5

6

7 Sumário 1. Apresentação do Software Linha do Tempo, Camadas e Frames Organização dos Tipos de Símbolos Tipos de Símbolos: Gráfico, Clip de Filme, Botão Importação de Mídias e Bibliotecas Conceitos de Animação Tipos e Formatos de Animações Tempo da Animação Fundamentos de Storyboard Efeitos e Transições de Animação Cenas Controle da Animação Conversão de Arquivos Mmultimídia Formatos de Arquivos Multimídia Tipos de Mídias Impressas Fluxo de Trabalho Geral do Flash Tutorial - Transição de Imagens em Xadrez

8

9 Introdução Este material didático foi elaborado para ser um instrumento de consulta. O conteúdo é aplicável de forma prática no dia-a-dia do profissional, possui uma linguagem simples e de fácil assimilação. Possibilita ao profissional da área de Tecnologia da Informação a obtenção de conhecimentos técnicos, normativos e práticos, contribuindo para a sua formação profissional. 9

10 10

11 Apresentação do Software Ao iniciarmos o Flash, ele vai apresentar uma tela com as opções com que podemos trabalhar. Para quem já utiliza ou utilizou alguma versão anterior do programa, a primeira mudança que pode ser observada é a distribuição de sua workspace. A timeline (linha do tempo) agora está embaixo por padrão como na maioria dos programas de animação. A janela central mostra um menu inicial. À direita, temos algumas paletas como Properties e Library e a caixa de ferramentas. É possível mudar a Workspace, para isso basta clicar no menu Window, Workspace e escolher uma das opções que o Flash disponibiliza, ou, de maneira direta, no menu no topo ao lado direito. Você pode também modificar seu workspace e salvá-lo. Basta definir a posição de seus painéis, timeline, entre outros, e depois clicar no menu Window, Workspace, New Workspace. Área de Trabalho, Painéis e Menus A interface gráfica do Adobe Flash tem uma estrutura semelhante à dos outros softwares da Adobe usados na produção de aplicações multimídia. Menu Está dividida em menus, barra de ferramentas, painéis, barras de propriedades e o stage (ou palco), em que decorre a ação. Note-se que a interface pode ser personalizada de acordo com as necessidades do usuário. Os painéis laterais podem se mover, agrupar e desagregar, estar visíveis ou invisíveis. E, obviamente, podemos guardar a interface, de forma a manter a estrutura escolhida. Isso pode ser realizado clicando em Window Workspace SaveCurrent. Window A visibilidade de todos os painéis pode ser controlada a partir do menu Window. Os painéis são ajustáveis ao utilizador, sendo possível agrupá- -los ou separá-los, minimizá-los ou maximizá-los. 11

12 O painel Properties (propriedades) situa-se na parte inferior da interface, agrupado com o painel Filters, o painel Parameters e também o painel Actions. É neste painel que definimos as propriedades dos elementos do 2.Gesso e suas Propriedades Mecânicas e Físico-químicas. projeto. Properties Para mostrar ou ocultar o painel Properties usamos as teclas Ctrl+F3. Um dos componentes principais da interface é a timeline (linha de tempo), na qual se pode controlar a estrutura, organizar o espaço e o tempo de um projeto. Permite, ainda, criar as estruturas complexas de um projeto por meio da manipulação dos frames e das layers. Nestas pode-se organizar vários tipos de mídia, gráficos vetoriais, imagens bitmap, áudio, vídeo, texto, voz e animações. Timeline Para mostrar ou ocultar a timeline pressionamos as teclas Ctrl+alt+T. O Flash pode trabalhar com vários tipos de mídia, mas as suas ferramentas são de desenho vetorial. Stage No Stage posicionamos nossos objetos e os organizamos no espaço definido em que ocorre a ação. Observe que, nas figuras a seguir, a timeline foi movida para o topo, para ficar parecida com versões anteriores do Flash. 12

13 13

14 Painel de Ferramentas do Flash Podemos dividir a Tools Bar nas seguintes seções: ferramentas, visionamento, cores e opções. Para mostrar ou ocultar a barra de ferramentas usamos o atalho: Ctrl+ F2. Ferramentas A Selection Tool (V), como o próprio nome diz, serve para indicar, selecionar, mover e manipular os objetos no stage. Com ela, podemos selecionar partes, o contorno de uma forma ou seu interior, por exemplo. Podemos alterar a forma ou simplesmente mover o objeto. 14

15 Com o atalho Ctrl+A selecionamos todos os objetos do Stage. Se pressionarmos a tecla shift enquanto arrastamos, moveremos o objeto segundo uma linha vertical ou horizontal. Para duplicar objetos, basta pressionar a tecla alt enquanto os arrastamos. Para modificar a forma do objeto, devemos aproximar o cursor das suas extremidades. Quando o ícone do cursor mudar, poderemos clicar e arrastar para alterar a forma do objeto. Note que ele não deve estar selecionado para fazer esta operação. Snap-to-objects: com esta opção ativa podemos facilmente ligar segmentos de linha entre si. A Sub Selection Tool (A) permite selecionar as âncoras dos objetos e, assim, ter um controle mais preciso de seus contornos. Com um clique sobre o contorno o selecionamos e temos acesso às âncoras. Com um clique sobre as âncoras selecionadas podemos mudar a forma do objeto. A Free Transform Tool (F) permite aplicar transformações ao objeto como: aumentar o tamanho, fazer flips horizontais ou verticais e criar distorção na forma. Com essa ferramenta selecionada, temos acesso, também, na parte inferior da barra, às opções: Rotate&Skew Scale Distort Envelop 15

16 A Gradient Tool permite controlar o gradiente de um objeto. Com essa ferramenta selecionada, podemos controlar: o ponto de focagem, o centro, a largura, o tamanho e a rotação do gradiente. A Lasso Tool (H) permite realizar seleções à mão livre; A Lasso tool permite selecionar um objeto ou partes de um objeto desenhado no stage. Existem quatro opções de configuração dessa ferramenta: Magic Hand permite selecionar preenchimentos de um bitmap, depois de ter sido aplicado o Break Apart. Magic Hand Settings permite acessar as opções de configuração da ferramenta Magic Hand. PolygonMode permite realizar seleções clique a clique. A Pen Tool tem um conjunto de ferramentas associadas: Pen Tool Anchor Point Tool Delete Anchor Point Tool ConvertAnchor Point Tool 16

17 Com a Pen Tool (P), desenhamos as linhas resultantes da introdução dos pontos de âncora. Um clique para novos pontos, dois cliques para parar. Com a Anchor Point Tool (=), inserimos mais âncoras nas linhas desenhadas. Com a Delete Anchor Point Tool (-), eliminamos âncoras. Com a Convert Anchor Point Tool (C), alteramos a forma dos contornos. A Line Tool (N) é usada para desenhar linhas retas no stage. Com a opção snap to objects ativada (painel properties) podemos unir as linhas com mais facilidade. Pressionando a tecla shift, torna-se mais fácil criar linhas retas horizontais, verticais ou oblíquas. A Rectangle Tool está agrupada com a: Oval Tool Rectangle Primitive Tool Oval Primitive Tool PolyStar Tool Com a Rectangle Tool (R), desenhamos retângulos ou quadrados (mantendo pressionada a tecla shift). É, também, possível desenhar retângulos com cantos arredondados utilizando a opção do painel de propriedades. Podemos, igualmente, definir o tipo de linha, a cor e a espessura do contorno, além da cor do preenchimento. Com a Rectangle Primitive Tool (R), desenhamos, igualmente, retângulos ou quadrados, mas podemos arredondar os cantos posteriormente. 17

18 Com a Oval Tool (O), desenhamos elipses ou círculos desde que tenhamos a tecla shift pressionada. No painel properties temos as mesmas opções referentes à rectangle tool. Com a Oval Primitive Tool (O), podemos definir ovais e círculos, além do raio e dos ângulos no objeto. A PolyStar Tool permite desenhar polígonos ou estrelas. No painel properties, podemos definir se será feito um polígono ou uma estrela e determinar o seu número de lados, assim como as propriedades comuns às ferramentas desse grupo. A Pencil Tool (Y) é usada para desenhar diretamente no stage. Possui as seguintes opções de ajuste: Straighten - ajusta as linhas desenhadas de modo a que sejam sempre retilíneas Smooth - suaviza as linhas desenhadas, dando-lhes uma forma curva Ink - não suaviza as linhas nem as torna retas A Brush Tool (B) serve para criar preenchimentos e não linhas de contorno. É uma ferramenta configurável, sendo possível escolher o tamanho e a forma do pincel. Podemos, igualmente, definir a suavidade da pincelada no painel Properties. Na barra de ferramentas podemos determinar os modos de utilização: 18

19 Paint Normal - pinta sem diferenciação entre linhas de contorno ou preenchimento. Paint Fills - pinta sobre o preenchimento, não afetando as linhas de contorno, que ficam sempre por cima. Paint Behind - pinta por trás os objetos desenhados no Stage. Paint Inside - pinta o interior das formas sem afetar o seu contorno. A Ink Bottle Tool (S) permite acrescentar ou alterar a cor do contorno de um objeto no Stage. O objeto deve estar selecionado para poder aplicar o contorno. A Paint Bucket Tool (K) permite atribuir cor a um contorno fechado ou mudar a cor de um existente. Possui um grupo de opções que permite controlar a forma como o preenchimento é realizado: Don t Close Gaps - o preenchimento só é realizado se o contorno do objeto estiver totalmente fechado. Close Small Gaps - o preenchimento é realizado mesmo que existam pequenas falhas nos contornos. Close Medium Gaps - o preenchimento é calculado mesmo que haja aberturas de pequena e média dimensão. Close Large Gaps - o preenchimento é realizado mesmo que existam grandes falhas no contorno. A Eyedropper Tool (I) permite selecionar qualquer cor presente no Stage. Depois de selecionada a cor, a ferramenta transforma-se na Paint Bucket Tool, o que permite a aplicação imediata da cor. 19

20 A Eraser Tool (E) apaga os elementos do Stage e pode ser configurada da mesma forma que a ferramenta Brush Tool: Erase Normal - apaga as linhas e o preenchimento dos objetos do stage. Erase Fills - apaga os preenchimentos do objeto. Erase Lines - apaga os contornos sem afetar o preenchimento do objeto. Opção Object Drawing, pertence às ferramentas Line, Rectangle, Oval, Pencil, Brush e Pen Tool. Com esta opção ativada, cada elemento desenhado no Stage é convertido numa forma agrupada para evitar a interseção com os outros objetos desenhados. Para editar o objeto, clicamos duas vezes sobre ele com Object Drawing ativo. A Text Tool (T) permite inserir texto. Para isso, basta selecionar a ferramenta e clicar na área em que o texto será inserido. Quando selecionamos essa ferramenta temos acesso, na barra de propriedades às opções: Static Text (texto estático). Dynamic Text (texto dinâmico, para manipular com action script). Input Text (campos de texto, usados principalmente em formulários). Podemos controlar o posicionamento e o tamanho do texto por meio dos campos Width of Instance (W) e Height of Instance (H), assim como o seu posicionamento relativo aos eixos X (horizontal) e Y (vertical). 20

21 Para configurar fontes e parágrafos, temos as seguintes opções: Texto estático textos para animação. Texto dinâmico textos para atualização via actionscript. Campo de texto textos para uso principalmente em preenchimento de formulários em flash. Visualização A Hand Tool (H) permite mover o stage. Pode ser ativada temporariamente pressionando-se a tecla barra de espaço. Enquanto permanecer pressionada, a ferramenta ficará ativa. Ao soltá-la, será desativada. A Zoom Tool (M, Z) permite variar a dimensão do Stage entre 8 e 2000%. Também usa-se Ctrl+ + e Ctrl + - para aplicar níveis de zoom. Cores Stroke Color permite definir as cores de contorno. Fill Color permite definir as cores de preenchimento. Swap Colors permite mudar as cores entre o contorno e o preenchimento. No Color permite não atribuir ou retirar a cor de um objeto. 21

22 Barra de Propriedades A barra de propriedades é contextual. Isso significa que de cada ferramenta ela exibirá somente suas propriedades, as do objeto selecionado ou as do documento, se nenhum objeto ou ferramenta estiverem selecionados. 22

23 Cores, Transparência e Preenchimentos As cores dos objetos no Stage (contorno e preenchimento) podem ser editadas usando o menu associado às ferramentas Stroke Color e Fill Color ou os painéis Color e Swatches. 23

24 Nos menus associados ao Stroke Color e ao Fill Color, da Tools Bar, como se pode ver pela imagem podemos determinar a cor, sua porcentagem de transparência e sua definição pormenorizada, clicando no ícone do canto superior direito. No painel Color (normalmente, o primeiro dos painéis), para além da cor e da transparência, podemos definir o tipo de preenchimento: Solid, Linear, Radial ou Bitmap. Qualquer um desses pode ser editado. Podemos, também, escolher o tipo de Overflow: Extend, Reflect ou Repeat. 24 Preenchimento sólido

25 Preenchimento Linear com Overflow Extend. Preenchimento Radial com Overflow Repeat. Preenchimento com Bitmap e Overflow Repeat. 25

26 Linha do Tempo, Camadas e Frames Linha do Tempo As partes da linha do tempo são: A. Indicador de reprodução B. Quadro-chave vazio C. Cabeçalho da linha do tempo D. Ícone da camada de guia E. Menu pop-up exibição de quadros F. Animação quadro a quadro G. Animação interpolada H. Botão rolar até o indicador de reprodução I. Botões de papel de transparência J. Indicador de quadro atual K. Indicador de taxa de quadros L. Indicador de tempo decorrido 26

27 Organização dos Tipos de Símbolos. Os elementos desenhados no Flash correspondem a formas vetoriais. Entretanto, convém notar que esses desenhos não suportam certos tipos de animação. Para tornar o elemento compatível com uma série de finalidades, é necessário convertê-lo em símbolo. Ao transformarmos um desenho ou objeto em símbolo, aplicamos um comportamento a ele, indicando agora que deve receber ações e comportar-se de forma específica. Todo símbolo criado é armazenado na Library (Biblioteca) e pode ser reutilizado diversas vezes, sem aumentar muito o tamanho do arquivo final ( swf ). Tipos de Símbolos Cada símbolo possui uma Linha do Tempo e um Stage exclusivo e completo. Podem-se adicionar quadros, quadros-chave e camadas à Linha do Tempo de um símbolo, da mesma forma que é feito na Linha do Tempo da cena principal. 27

28 Tipos de Símbolos: Gráfico, Clip de Filme e Botão No Flash podemos converter os objetos em três tipos de símbolos: Graphic, Button e MovieClip. Podemos converter um objeto no Stage em símbolo ou criar um símbolo de raiz a partir da Library. Para converter um objeto selecionado no Stage em símbolo, clique no menu Modify Convert to Symbol, ou, use a tecla de atalho F8. Temos três opções: Graphic Symbol (símbolo gráfico), Button (botão) e Movie Clip (clip de filme). O Graphic Symbol serve principalmente para backgrounds e elementos estáticos. Não suportam action script nem consegue integrar som. Tem sua própria Timeline, mas é completamente dependente da Timeline principal do filme. Ou seja, se tivermos uma animação de 17 frames e a Timeline principal só tiver um, só veremos um frame da animação do Graphic Symbol. O Movie Clip Symbol tem uma Timeline independente da principal. Por isso, podemos ver a animação de um Movie Clip na Timeline principal, mesmo que o número de frames não seja coincidente. Pode ter nomes de instâncias diferentes. Logo, pode ser trabalhado com Actionscript e integrar som. Os Button Symbol são usados para criar botões interativos. Têm a sua própria Timeline e são compostos por quatro estados: Up, Over, Down e Hit. 28

29 O primeiro representa a forma normal do botão. Over, quando o utilizador passa o cursor por cima. Down, quando o utilizador clica sobre o botão. Hit define a área clicável. Não é visível, apenas define a área de interação. Veja os exemplos: Botão Gráfico / Clipe de Filme: 29

30 Como criar um símbolo? Desenhe uma forma qualquer (por exemplo, uma lua). Com essa forma selecionada, clique no menu Principal em Modify > Convert to Symbol ou tecle F8. Na tela Convert to Symbol, atribua um nome qualquer (ex: Lua) e defina que ele será um Movie Clip. Não se preocupe com a opção Registration, que será útil quando utilizarmos programação via ActionScript. Clique em Ok. 30

31 Importação de Mídias e Biblioteca Os símbolos criados sempre estarão disponíveis na Biblioteca. Para abri-la, busque por Window > Library no menu Principal ou pressione CTRL + L. 31

32 Ao arrastar um símbolo para o Stage, será criada uma instância dele. Apesar de ser único, pode ter várias instâncias. Pense no símbolo como uma forma, que pode criar diversos bolos (instâncias). Se ela (o símbolo) se modificar, isso se refletirá em todo o bolo criado (as instâncias). Veja o exemplo: Crie uma estrela usando a Ferramenta Polystar. Transforme-a em um símbolo do tipo Movie Clip, pressionando F8. Arraste várias estrelas à cena principal. Dê um duplo clique no símbolo da estrela dentro da biblioteca e faça alguma alteração (por exemplo, mude a cor). O que acontece? A mudança se reflete em todas as estrelas? 32

33 Conceitos de Animação Animação é o processo pelo qual cada fotograma de um filme é produzido individualmente. Pode ser criada por computação gráfica, pela fotografia de uma imagem desenhada, ou repetidamente fazendo pequenas mudanças de movimento em um modelo e fotografando o resultado. Quando os fotogramas são ligados entre si e o filme resultante é visto a uma velocidade de 16 ou mais imagens por segundo, há uma ilusão de movimento contínuo (por causa da persistência de visão humana). O desenvolvimento da animação digital aumentou muito a velocidade do processo, eliminando tarefas mecânicas e repetitivas. Animação na Web Junto com a popularização da Web, animações para esse formato também se popularizaram. GIF, sigla em inglês para Graphics Interchange Format (ou Formato de Intercâmbio de Gráficos), é um tipo de arquivo de imagem que permite ver animações em um navegador da web. Era o formato mais popular para animações na Web até pouco tempo atrás. Porém, é um formato limitado, porque permite apenas 256 cores simultâneas e, muitas vezes, gera arquivos grandes para animações mais complexas. Com o surgimento de outros formatos, como o Flash, criado pela Macromedia e atualmente mantido pela Adobe, o GIF passou a ser utilizado apenas para pequenas animações. O Flash também tem a vantagem de permitir o uso de efeitos sonoros e de criar animações interativas, entre outras. A nova versão do Flash tem ferramentas para animação em 3D, que permitem criar mais efeitos nas animações. 33

34 Tipos e Formatos de Animações Assim como nos filmes, os documentos em Flash dividem intervalos de tempo em quadros. Na linha do tempo, trabalhamos com quadros para organizar e controlar o conteúdo de um documento. Existem dois tipos de quadros-chave: Comum De propriedade Elementos da linha do tempo Quadros-Chave Quadro-Chave Comum Quadro em que aparece um símbolo ou objeto na linha do tempo que irá ser animado. É representado por um círculo preto no interior do quadro. 34

35 Quadro-Chave de Propriedade Quadro em que é definida uma mudança nas propriedades de um objeto para animação. Não utiliza animação quadro a quadro. É representado por um losango escuro. Interpolação O Flash utiliza conceitos matemáticos, como o da interpolação, para criar animações. A ideia básica desse conceito é construir um conjunto de dados completo a partir de amostras. Por exemplo, a partir de uma amostra de pontos, o objetivo é encontrar a função completa. O Flash faz algo parecido para animar a partir de um conjunto de quadros-chave. A animação completa é criada (interpolada). O Flash permite criar três tipos de animações: Animação quadro a quadro Interpolação de movimento Interpolação de formas a) Animação quadro a quadro Nesse tipo de animação, é criado um quadro chave para cada etapa da animação. Quanto mais quadros mais sutil a animação será. 35

36 36

37 b) Animação com interpolação de formas (Shape Tween) Nesse tipo de animação, uma forma vetorial é desenhada em um quadro específico da linha do tempo e alterada em outro quadro específico. O Flash, então, interpola as formas intermediárias entre os quadros. Por exemplo: Desenhe um objeto qualquer, como uma estrela ou um círculo. Selecione o quadro 30 (por exemplo) e adicione um quadro-chave em branco, pressionando F7. Desenhe no quadro 30 a forma na qual o elemento se transformará. Clique em qualquer quadro da animação e selecione a opção Create Shape Tween. 37

38 38

39 c) Animação com interpolação clássica (Classic Tween) O animador apenas determina as posições inicial e final da animação e o Flash automaticamente interpola (movimenta a animação do início ao fim, de maneira fluida). Para evitar falhas e erros, após criar o objeto a ser animado é conveniente convertê-lo em Movieclip e duplicá-lo, pressionando F6 no quadro em que se deseja o fim da animação. Após, selecione qualquer parte da repetição da primeira instância do objeto com o botão direito e escolha Classic Tween. 39

40 d) Animação com interpolação de movimento (Motion Tween) Para compreender melhor, veja o exemplo. Desenhe um objeto qualquer, como uma estrela ou círculo. Clique com o botão direito do mouse no objeto e selecione a opção Create Motion Tween. 40

41 Se o objeto desenhado não tiver sido convertido em símbolo, a janela a seguir vai aparecer. Pressione OK. Feito isso, será construído um quadro-chave com a posição inicial definida, que é onde o objeto está. Arraste-o para a posição final, em que será construído um quadro-chave de propriedade. Pressione Enter e note que o Flash automaticamente criou os quadros entre as posições inicial e final da animação (interpolação). É possível modificar o trajeto da animação em qualquer quadro, apenas arrastando para a posição desejada. Também é possível selecionar o quadro a ser editado pelo indicador de reprodução e arrastá-lo até a posição desejada. Painel Motion Editor Oferece ferramentas para adicionar precisão e detalhes às interpolações. Fica disponível após selecionar a interpolação de movimento na seguinte opção, conforme a imagem a seguir: Existem cinco possibilidades para se modificar uma interpolação: movimentação básica, transformação, efeito de cor, filtros e atenuações. 41

42 42

43 43

44 44

45 45

46 Tempo da Animação O tempo da animação estimado aparece logo abaixo da Timeline. É possivel calculá-lo dividindo o número de quadros pelo FPS (frame per second = quadros por segundo) da animação. Esse tempo é o desta Timeline, conforme a imagem a seguir. Os tempos das Timelines de gráficos e movieclips não são contabilizados. 46

47 Fundamentos de Storyboard Storyboard Storyboard são organizadores gráficos, como uma série de ilustrações ou imagens arranjadas em sequência. O propósito é pré-visualizar um filme, animação ou gráfico animado, incluindo elementos interativos em Websites. (fonte: Wikipédia) Por que se usa Storyboard para animação em Flash? Porque sem uma noção do que deve ser feito, certamente o animador perderá muito tempo inventando algo. O projeto deve sair do papel e, após isso, ir para o desenvolvimento no Software. As ideias devem ou, ao menos, deveriam ser concebidas antes de serem introduzidas no Software. Storyboard feito para um desenho animado de 8 minuto 47

48 Efeitos e Transições de Animação Um efeito de animação muito interessante em Flash é o da transição entre imagens, que dá a falsa sensação de que a mesma figura se transforma em outra. Conseguimos isso transformando as figuras em símbolos gráficos e alternando a transparência entre elas. Veja como no passo-a-passo a seguir: 1) Insira a primeira figura a ser mostrada na layer1 (por exemplo) e transforme-a em símbolo, tipo gráfico. 2) Abra o painel Effect e selecione Alpha 100%. 3) Insira um Keyframe no frame 10 (por exemplo) e coloque Alpha 0%. 4) Volte ao Keyframe1 e coloque-o com uma animação tipo Motion (não precisa configurar mais nada). 5) Insira uma nova Layer e coloque a segunda figura nela. Para efeito de transição, faça com que o Keyframe inicial dessa segunda Layer comece no frame 8 (por exemplo). 6) Transforme essa segunda figura em um símbolo tipo gráfico. 7) Abra o painel Effect e clique em Alpha 0%. Insira um Keyframe no frame 20 (por exemplo) e coloque o Alpha em 100%. 8) No Keyframe inicial dessa segunda Layer (que deve estar no Frame 8 da animação), coloque uma animação tipo Classic Tween. 9) Dessa maneira, a primeira imagem começará visível, desaparecendo aos poucos, enquanto a segunda imagem irá aparecer, dando um efeito de transição. Se preferir, posicione as duas imagens uma sobre a outra (em Layers diferentes) e veja o interessante efeito de transição. Além dos efeitos, há filtros para usar nos quadros chaves da animação, nos movieclips apenas. 48

49 Exemplo do filtro Glow E seu aspecto no movieclip. 49

50 Cenas Um documento Flash pode ter uma ou mais cenas, usadas para simplificar o trabalho de criação de animações ou Sites muito grandes. Imagine criar um Site com preloader, introdução e conteúdo em uma única linha de tempo? Ficaria confuso e poderia criar falhas no projeto. Para resolver esse problema, especificamente, poderíamos ter uma cena para o Preloader, outra para a introdução e uma última para o conteúdo do Site. Cada cena com sua linha de tempo sem que uma interferisse na outra. 50

51 No painel de gerenciamento de cenas podemos apenas criar nova cena, duplicá-la, exclui-la ou renomea-la dando um duplo clique em seu nome. Para alternar entre as cenas criadas, utilize o botão do lado direito do Stage. 51

52 Controle da Animação A animação pode requerer uma pausa ou reação à passagem do mouse para chegar à outra etapa ou cena. Normalmente, aplicamos esse controle sobre botões de ação, associando ActionScript. Essa associação pode ser feita pressionando a tecla F9, que abrirá a janela a seguir: Para atribuir a um botão alguma programação, pressione F9. Na janela Actions, podemos digitar ou selecionar as ações que desejamos. No exemplo a seguir colocamos três ações no mesmo botão apenas para demonstrar as opções mais comuns. a. Play() b. Stop() c. GotoAndPlay(N) ou GotoAndStop(N) Dando um duplo clique em uma dessas opções do painel esquerdo, automaticamente ela será adicionada no painel de códigos. As ações específicas relativas aos botões se concentram no evento: ON ( Tipo de evento ){ // ação desejada quando o evento ocorrer } 52

53 Como no exemplo da figura a seguir: Os tipos possíveis de eventos são simplesmente selecionados à escolha do usuário. Em uma animação simples, sem repetição, normalmente colocaremos uma ação no último quadro para parar a animação naquele instante. O comando será sempre t;. Quando colocarmos alguma ação diretamente em algum quadro da linha do tempo, nesse quadro, independente de haver ou não desenhos, aparecerá a letra A minúscula acima do ponto do círculo cheio/vazio do quadro chave. 53

54 Em caso de banners para veículos de propaganda Web (sites de jornais, entre outros) podem-se utilizar dois estados, como aberto e fechado, para utilizar programação Javascript no lado do navegador (Browser) cliente e expandir a tela. (ex.: Site Folha Vitória br) Um exemplo da Timeline, nesse caso, é mostrado a seguir. No caso de botões para acionamentos, como banners clicáveis, podemos em alguns casos deixar o botão ser transparente, inserindo objeto de desenho apenas na etapa Hit dele e vazio nas outras. A programação específica dos botões deverá ser fornecida pelo Site veículo, para não haver problemas de interface e compatibilidade. 54