DESENVOLVIMENTO DE ANIMAÇÃO PARA WEB 14/09/2012 Professor: Lucas Grassano Lattari lucas.lattari@ifsudestemg.edu.br
Sumário Conceitos Básicos... 3 Mídia... 3 Multimídia... 4 Aplicações para Comunicação Interpessoal... 5 Aplicações interativas sobre a Internet... 6 Aplicações de Entretenimento Multimídia... 6 Exercícios... 7 Conceitos Básicos de Computação Gráfica... 8 Introdução ao Flash CS5... 11 Primeiras impressões Área de Trabalho... 11 Criando um arquivo FLA... 14 Desenhando um círculo no painel principal... 17 Criando um símbolo... 20 Animando um Símbolo... 22 Usando uma ação de interrupção de animação... 26 2
Conceitos Básicos Mídia A palavra mídia é oriunda do termo em inglês media, plural da palavra medium em latim. É um substantivo que significa meio, centro, significando meio ou forma de distribuir e representar informação. Logo, qualquer mecanismo existente para se codificar e transmitir informação para outros indivíduos é exemplo de mídia. Naturalmente, nesse curso, estamos interessados apenas em mídias digitais, que são desenvolvidas em sistemas computacionais. Existem diversos tipos de mídias para uma série de finalidades, tais como: mídias de percepção, mídias de representação, mídias de apresentação, mídias de armazenamento e mídias de transmissão. Mídia de percepção: interessada em compreender como os seres humanos entendem informação a partir de seus sentidos, como olfato, paladar, tato, visão e audição; Mídia de representação: codifica uma determinada mídia no computador por meio de textos, imagens gráficas, áudio e vídeo; Mídia de apresentação: meio de visualizar conteúdo digital, seja por monitores, projetores, caixas de som ou para obter conteúdo digital, com microfone, teclado, câmera etc; Mídia de armazenamento: possui interesse em guardar informação da maneira mais compacta e acessível possível, por discos magnéticos, pen-drives dentre outros; Mídia de transmissão: objetiva transmitir dados por meios físicos como a Internet e tem como principais exemplos: cabos metálicos, fibras óticas, ondas de rádio etc. É possível visualizar exemplos desses tipos de mídias na Figura 1. 3
Mídia de Percepção Mídia de Representação Mídia de Apresentação Mídia de Armazenamento Figura 1 Exemplos de mídias de diversos tipos. Mídia de Transmissão Naturalmente, estamos interessados em mídias de representação para esse curso, como por exemplo: textos, imagens gráficas vetoriais e matriciais, áudio, vídeo etc. As mídias de representação, por sua vez, podem ser estáticas ou dinâmicas. A diferença entre elas está relacionada com o tempo: mídias estáticas não sofrem qualquer influência temporal para representar sua informação, ou seja, textos, imagens, gráficos etc. Já as mídias dinâmicas possuem sua semântica totalmente dependente do tempo, tais como áudio, vídeo e animações. Multimídia É possível generalizar o conceito de mídias quando se considera multimídia. A multimídia é uma área interessada na integração controlada por computador de textos, gráficos, imagens, vídeos, animações, sons e qualquer outro meio onde todo tipo de informação pode ser representado, armazenado, transmitido e processado 4
computacionalmente. Logo, a partir do momento que estamos trabalhando com mais de uma mídia simultaneamente sobre uma rede, estamos lidando com multimídia. Geralmente, a multimídia possui, no mínimo, uma mídia de representação estática e outra dinâmica. A multimídia é de interesse das indústrias de informática, telecomunicações, publicidade, consumidores de dispositivos de áudio e vídeo, indústria de televisão e cinema, jogos etc. Finalmente, em se tratando de aplicação multimídia, temos como sua definição uma função ou conjunto de funções que disponibilizam um serviço multimídia específico para o usuário final. Geralmente, as aplicações multimídia envolvem comunicação entre pessoas ou entre pessoas e um sistema computacional. Existem vários tipos de aplicações que envolvem múltiplas mídias. Comumente, eles se adequam nas seguintes categorias: Comunicação Interpessoal Aplicações interativas sobre a Internet Aplicações de Entretenimento Entretanto, antes de discutir exemplos para cada categoria, as redes de telecomunicações foram construídas tendo como base o suporte para aplicações com um único tipo de mídia. Com o tempo, elas não só deveriam suportar a aplicação básica para a qual foram construídas, mas também executar aplicações multimídia com eficiência, o que nem sempre é uma tarefa simples. Aplicações para Comunicação Interpessoal Usualmente, comunicação interpessoal envolve fala, imagem, texto e vídeo. Em alguns casos uma única mídia pode ser empregada, enquanto em outros duas ou mais podem ser utilizadas. Por exemplo: Apenas voz o Telefonia o Voice-mail o Teleconferência o VoIP Apenas imagem o Fax 5
Apenas texto o E-mail Imagem e Texto o Trabalho corporativo suportado por computador Voz e vídeo o Videotelefonia Aplicações interativas sobre a Internet Além das aplicações para comunicação interpessoal, a Internet também suporta um grande número de aplicações interativas. Na World Wide Web, ou apenas Web, existe um grande conjunto de servidores de informação multimídia que estão conectadas, apesar de distribuídas em diferentes regiões geográficas. Cada documento armazena um conjunto de páginas linkadas (interligadas) por hyperlinks. Os hyperlinks são referências a outras páginas de um mesmo documento ou a qualquer outro texto da Web. Por meio deles, o usuário tem a opção, em determinados trechos de uma mídia como texto, ser direcionado para outro conteúdo. Por exemplo, ao ler um conteúdo de um filme, seria possível selecionar o nome de um ator e assim ser direcionado para todos os trabalhos desse ator em específico. Os documentos que compreendem apenas texto são chamados de hipertexto, enquanto os que possuem informação multimídia em geral são denominados hipermídia. Geralmente, o hiperlink para hipertexto é uma palavra ou frase sublinhada, enquanto para a hipermídia é um ícone de um alto-falante (para o caso de áudio) ou uma câmera (no caso de vídeo). Um formato padrão para se escrever documentos baseados em hipertexto e hipermídia é o HTML, que em português significa Linguagem de Marcação de Hipertexto. Todo o conteúdo e suas ligações (hiperlinks) são construídos tomando por base essa linguagem. Essas informações, por sua vez, são interpretadas por um software denominado navegador de Internet (Internet Explorer, Mozilla Firefox, Google Chrome). Aplicações de Entretenimento Multimídia Existem principalmente três tipos de aplicações nessa categoria: 6
Vídeo sob demanda Televisão interativa Jogos eletrônicos As aplicações de vídeo sob demanda são oferecidas na forma de um servidor com uma coleção de vídeos ou filmes digitais acessíveis. O cliente utiliza um terminal digital, como um computador ou televisão conectado a Internet, para realizar uma requisição e assim assistir a um determinado filme, a qualquer hora do dia e da noite. Esse modelo é comum em alguns sites, como o Youtube e o Netflix. Entretanto, como é possível se deduzir, os recursos necessários para a execução de servidor de filmes sob demanda são elevados, já que dezenas de filmes devem ser transmitidos simultaneamente, mesmo cópias de um mesmo filme. Uma maneira de amenizar esse problema seria disponibilizar o filme apenas quando um número de usuários fizer a requisição de um filme. Outro típico exemplo de aplicação multimídia voltada ao entretenimento é a televisão interativa. Além da típica difusão da programação de maneira analógica e digital, ela introduz o conceito de canal de retorno, que nada mais é um mecanismo que, via Internet, permite a transmissão de dados entre o aparelho e a emissora. Por exemplo, durante a transmissão de um jogo de futebol, a emissora pode transmitir uma enquete para que os usuários, em tempo real, respondam a algum questionamento. Esse tipo de interação é esperada com a introdução da TV digital no Brasil. Finalmente, os jogos eletrônicos também podem ser considerados exemplos de aplicações multimídia por utilizarem texto, áudio e vídeo simultaneamente, com a intenção principal de trazer entretenimento. Exercícios 1. Utilizando suas próprias palavras, conceitue mídia e multimídia. 2. Pesquise a respeito de cada tipo de mídia (mídia de percepção, representação, apresentação, transmissão e armazenamento), explicando o que é cada uma delas e citando dois exemplos para cada (não se limite ao que foi dito na apostila). 7
3. Complete a coluna de exemplos da tabela abaixo (não se limite ao que foi dito na apostila): Categoria Mídia Exemplos Comunicação Interpessoal Voz Telefonia, email por voz, teleconferência Imagem Texto Texto e Imagem Texto e Voz Texto, Imagem, Áudio e Vídeo Aplicações interativas sob a Internet Texto, Imagem, Áudio e Vídeo Serviços de Entretenimento Áudio e Vídeo Conceitos Básicos de Computação Gráfica A Computação Gráfica é área da computação ou informática destinada à geração de imagens digitais. Toda imagem digital é uma representação computacional de uma cena do mundo real ou de um grupo de dados. As cores das imagens digitais podem ser binárias (apenas cores preto-e-branco), monocromáticas (tons de cinza) ou coloridas. Exemplos dessas categorias são apresentados em Figura 2. Imagem Binária Imagem Monocromática Imagem Colorida Figura 2 Imagens com conjuntos de cores distintos. As imagens digitais, quanto ao seu formato de descrição, podem ser classificadas como vetoriais ou matriciais. As imagens matriciais, muito conhecidas como imagens bitmap, são definidas por um conjunto de quadrados chamados pixel (picture element), que juntos formam 8
toda a imagem. Cada pixel possui uma única cor bem definida. Um exemplo desse tipo de imagem com zoom é visível na Figura 3. Figura 3 Imagem matricial com uma região em destaque. As imagens vetoriais são geradas a partir de descrições geométricas de formas. Normalmente são compostas por curvas, elipses, polígonos, texto entre outros elementos. Figura 4 Exemplo de duas imagens descritas pelo formato matricial e vetorial. As principais diferenças entre as imagens matriciais e vetoriais são apresentadas em Tabela 1. 9
Tabela 1 Principais diferenças entre imagens matriciais e vetoriais. Imagem Matricial Baseada em mapeamento de cores diretamente em cada pixel. Geralmente mais pesadas para armazenamento. Qualidade pode ser distorcida quando ampliada. Imagem Vetorial Baseada em descrições geométricas. Geralmente mais leves para armazenamento. Não perdem qualidade ao serem ampliadas. É possível construir uma imagem pela composição de elementos vetoriais e matriciais. Um exemplo é visível em Figura 5. Figura 5 Composição de elementos vetoriais e matriciais em uma mesma imagem. Os formatos de arquivo mais comuns para as imagens matriciais são: JPG, GIF, PSD, PNG, TIFF, BMP etc. Os programas mais conhecidos que manipulam arquivos do gênero são: Adobe Photoshop, Corel Photopaint, Corel Painter, Paint Shop Pro dentre outros. 10
Introdução ao Flash CS5 O Adobe Flash Professional CS5 é uma ferramenta autoral multimídia que pode ser utilizada para criar apresentações, aplicações e outros conteúdos que respondem a interação do usuário. Os projetos em Flash podem incluir animações simples, conteúdos de video, interfaces de usuário complexas, aplicações e qualquer outra coisa equivalente. Em geral, projetos individuais criados no Flash são chamados de aplicações, ainda que contenham apenas uma animação básica. É possível construir animações multimídia ao acrescentar imagens, sons, videos e efeitos especiais. As animações para a Web, tempos atrás, eram feitas principalmente com GIFs animados. A principal dificuldade para os desenvolvedores do Flash era a necessidade de instalar um plugin para o seu funcionamento, coisa que hoje em dia se tornou plenamente comum. O Flash se tornou então o mecanismo mais comum para a produção de animações para a Web por meio de banners, sites, menus elaborados ou mesmo dispositivos móveis. O formato SWF, utilizado no Flash, tornou-se bastante adequado para a Internet já que utiliza pouco espaço de armazenamento e necessita de pouco tempo para ser baixado via download e executado. Os projetos desenvolvidos em Flash fazem uso significativo de gráficos vetoriais. Os gráficos vetoriais necessitam de pouca memória para armazenamento se comparados com os gráficos matriciais, já que utilizam apenas equações matemáticas para computar seus pontos. Usar gráficos matriciais em projetos Flash acaba resultando em alta utilização de espaço de memória para armazenamento. Isso ocorre já que cada pixel individual precisa ser armazenado e representado. Além disso, o Flash permite que os elementos gráficos de seu projeto sejam convertidos em símbolos tornando-os mais simples para serem reutilizados, diminuindo o armazenamento necessário e tornando o SWF mais rápido para ser carregado e apresentado online. Primeiras impressões Área de Trabalho Para construir uma aplicação no Flash CS5, você deve utilizar gráficos vetoriais além de outros elementos usando as ferramentas nativas ou importando elementos de mídia adicionais, como áudio, vídeo e imagens em seu documento. Feito isso, você deverá usar os controles de Painel de Cena e de Linha do Tempo para posicionar os elementos e definir quando ou como eles deverão aparecer. Além disso, ainda há a linguagem de script ActionScript, utilizada para criar funções que especificam como os objetos da aplicação deverão se comportar. 11
Ao desenvolver um novo projeto no Flash (escolhendo a opção File > New no menu superior) você trabalhará com o documento mestre, denominado arquivo FLA. Ele tem esse nome pois a extensão do seu arquivo é.fla. Logo, todo projeto sempre será desenvolvido no arquivo FLA. Quanto à área de trabalho, a interface de usuário é dividida em cinco partes: O Painel de Cena (Stage) é a área que determina a área visível executada na aplicação; todos os gráficos, vídeos, botões e outros elementos do seu projeto devem estar organizados nessa região. Os controles de Linha de Tempo (Timeline) ditam o instante de tempo em que os elementos devem ocorrer ou executar certas funções no painel principal. A linha do tempo sempre inicia do primeiro quadro da animação e é movida da esquerda para a direita à medida que o vídeo é executado. É possível organizar as camadas da Linha do Tempo para definir a ordem que os gráficos serão exibidos no painel principal. Os gráficos das camadas superiores são exibidos acima dos gráficos das camadas inferiores. O Painel de Ferramentas (Tools) contém as ferramentas usadas para selecionar objetos no painel principal, como criar elementos de texto ou desenhar gráficos vetoriais. O Inspetor de Propriedades (Properties) apresenta informação contextual sobre os atributos de um objeto qualquer. É possível ajustar certas configurações dos objetos. O Painel de Biblioteca (Library) contém elementos de mídia e símbolos utilizados no projeto. Esse painel é utilizado para gerenciar e organizar elementos relevantes do arquivo FLA, principalmente símbolos. Ao publicar um arquivo SWF, somente os itens da biblioteca utilizados no projeto são incluídos no arquivo publicado, o que reduz o tamanho do arquivo sem interferência do usuário. Entretanto, é importante enfatizar que elementos desse painel aumentam o tamanho do arquivo FLA. 12
Figura 6 Área de trabalho do Flash CS5. Os Códigos ActionScript permitem ao desenvolvedor Flash adicionar interatividade aos elementos do seu projeto. Por exemplo, você pode criar um código que faça uma nova imagem aparecer ao clique de um botão. Você pode utilizar o ActionScript para adicionar lógica às suas aplicações. A lógica permite que sua aplicação funcione de diferentes formas dependendo de algumas condições ou ações dos usuários. Existem diferentes versões de ActionScript. O Flash Profissional usa ActionScript 3 quando um projeto ActionScript 3 ou Adobe AIR é criado e ActionScript 1 ou 2 é usado quando um arquivo ActionScript 2 é criado. O Flash inclui muitas características que o tornam muito robusto e simples de usar, como componentes pré-construídos em sua interface de usuário que são adicionados arrastando-os com o mouse, efeitos de animação a serem utilizados na Linha de Tempo, trechos de códigos pré-escritos e efeitos especiais a serem adicionados em objetos de mídia etc. Ao terminar de desenvolver o projeto em seu arquivo FLA, para publicá-lo basta selecionar File > Publish (ou pressionar Shift+F12). A operação de publicar gera uma versão comprimida do seu arquivo com a extensão.swf. O Player é usado para executar o arquivo SWF em um navegador de Internet ou numa aplicação qualquer. Ainda que não faça sentido colocar em um site ou distribuir o arquivo mestre FLA, é importante manter uma cópia dele 13
em seu sistema. Isso é importante pois, se você quiser gerar uma nova versão do arquivo SWF com modificações, será necessário abrir o arquivo FLA, editá-lo e publicar um novo arquivo SWF. Criando um arquivo FLA Esse tutorial guiará o processo de criar um document FLA básico. Esse procedimento sempre será realizado ao desenvolver projetos no Flash Profissional. Comece pelos seguintes passos: 1. Escolha File > New. 2. Na caixa de diálogo Novo Documento, selecione ActionScript 3.0 (provavelmente ela já estará selecionada por padrão). Figura 7 Caixa de diálogo de Novo Documento. 3. Use o menu de opções de Área de Trabalho, localizado no canto superior direito da tela, para selecionar a Área de Trabalho Essentials. Esse passo garante que a interface gráfica dos painéis utilizados por você será compatível com os apresentados nessa apostila. 14
Figura 8 Painel de Área de Trabalho. 4. Clique na Aba de Propriedades (Properties) no canto superior direito da interface de usuário para visualizar o Inspetor de Propriedades. Este apresenta as propriedades do Painel de Cena para o arquivo quando não há objetos selecionados. 5. Por padrão, o Inspetor de Propriedades está alinhado verticalmente ao longo do lado direito da Área de Trabalho. A seção de tamanho (size) apresenta o tamanho do Painel de Cena, setado por padrão em 550 400 pixels. A cor de fundo do Painel de Cena é definida naturalmente como branco, mas é possível escolher outra, clicando no quadradinho de cor branca, como na Figura 9. Para esse tutorial, escolha um tom vermelho, como visto nessa mesma figura. 15
Figura 9 Inspetor de Propriedades. Dica: Você pode definir a cor do Painel de Cena em um filme do Flash ao selecionar Modify > Document ou selecionando o Inspetor de Propriedades e alterando a opção de cor de fundo. Não é correto desenhar um retângulo de uma cor pra definir o fundo. Ao publicar seu filme, o Flash seta a cor de fundo da página HTML publicada com a mesma cor definida no Inspetor de Propriedades (se você preferir gerar um arquivo HTML). 6. Escolha File > Save. 7. Selecione um local para salvar o arquivo FLA no computador. Nomeie-o de FlashSimples.fla e clique em salvar. Anote o local em que você salvou seu arquivo FLA porque será necessário encontrar esse diretório para os próximos passos desse tutorial. 16
Desenhando um círculo no painel principal Após criar seu projeto no Flash, você está pronto para adicionar algum tipo de desenho no projeto. Desenhar formas geométricas é uma tarefa comum no Flash. Ao usar as ferramentas de desenho do Painel de Ferramentas, o gráfico vetorial desenhado pode ser editado a qualquer momento. Os próximos passos descrevem como criar um círculo. Feito isso, o círculo será utilizado para a sua primeira animação. Siga os seguintes passos: 1. Selecione a ferramenta oval (Oval Tool) no Painel de Ferramentas. Figura 10 Ferramenta Oval selecionada no Painel de Ferramentas. Ícones com um triângulo escuro no canto inferior direito contém mais de uma opção; clique e segure o botão esquerdo do mouse no ícone de formas para disponibilizar o menu de primitivas e selecionar a Ferramenta Oval dessa lista de opções. 2. Para selecionar uma cor que preencha esse círculo no Inspetor de Propriedades, basta clicar no retângulo colorido ao lado do desenho de um 17
balde de tinta, em Fill And Stroke. O retângulo da cor ao lado do ícone do lápis determina a cor da borda do cícrculo. Para sua forma oval não possuir cor, basta clicar no quadrado com uma tira vermelha diagonal. Isso é melhor detalhado na Figura 11. Figura 11 Seleção de cores para as formas geométricas, destacando a cor que preenche o círculo ao lado do ícone do Balde de Tinta. Selecionando o retângulo branco com uma tira vermelha diagonal, seu círculo não terá cor interna. 3. No mesmo menu de seleção de cores, escolha uma cor que crie um contraste com o fundo do Painel de Cena. Para esse tutorial, uma forma oval preenchida com uma cor azul será interessante, devido ao contraste com o fundo vermelho. 4. Sempre que for fazer um desenho de alguma forma vetorial, você possui a opção de selecionar dois modos de desenho: o modo de desenho de união (Merge Drawing Mode) e o modo de desenho de objetos (Object Drawing Mode). Para os propósitos desse tutorial, clique no modo de desenho de objetos (veja Figura 12). Futuramente será falado sobre esses dois modos em maiores detalhes. Note que ao selecionar uma opção, o botão aparecerá em um tom mais escuro. 18
Figura 12 Modo de desenho de objetos selecionado. 5. Enquanto a Ferramenta Oval estiver selecionada, aperte e segure a tecla Shift do teclado quando for desenhar o círculo com o mouse. Desenhe um círculo no Painel de Cena segurando o Shift. A tecla Shift nesse contexto será uma tecla modificadora, pois enquanto uma forma é desenhada com ela pressionada, o Flash restringe o funcionamento da Ferramenta Oval para apenas círculos. Em outros contextos, a tecla Shift também será importante para modificarmos formas a serem desenhadas, como por exemplo, se a ferramenta selecionada for a retangular (Rectangle Tool), apenas quadrados são desenhados. 6. Se você realizou todos os procedimentos corretamente, o seu projeto deverá estar semelhante ao descrito na Figura 13. 19
Figura 13 Projeto desenvolvido até aqui. Dica: Se você, ao desenhar um círculo, notar que ele está transparente, ou seja, sem qualquer cor interna, verifique se a cor de traço (stroke, cor ao lado do ícone do lápis) e a cor de preenchimento interno (fill, cor ao lado do ícone de balde de tinta) foi corretamente selecionada no Inspetor de Propriedades no momento que a ferramenta oval foi escolhida para desenho. Se a cor de preenchimento (fill) azul foi escolhida e a de tracejado (stroke) não possui qualquer cor (foi escolhido como cor o retângulo branco com a fita diagonal vermelha), então o tutorial foi seguido corretamente. Criando um símbolo Após desenhar o círculo, você pode torná-lo um objeto reutilizável ao convertê-lo em um símbolo. Um símbolo é um objeto de mídia que pode ser reutilizado em qualquer lugar de um documento sem a necessidade de criá-lo novamente. Símbolos podem ser imagens matriciais (bitmaps), imagens vetoriais, animações, além de outros tipos de conteúdo. Certas técnicas do Flash, como por exemplo a criação de animações, dependem do objeto ser um símbolo para funcionar. 20
É comum utilizar símbolos ao criar animações interpoladas. Os símbolos também podem ser utilizados para armazenar um conteúdo gráfico qualquer. À medida que você se familiarizar com o Flash, você utilizará símbolos para estruturar aplicações de forma interativa usando diversas Linhas de Tempo. Símbolos são úteis em diversas partes do projeto, tornandoo mais fácil de editar algumas seções específicas. Para criar um símbolo: 1. Clique na Ferramenta de Seleção do Painel de Ferramentas (Figura 13). Figura 13 Ferramenta de Seleção. 2. Clique no círculo desenhado na etapa anterior. Note que ele será envolvido por uma caixa de seleção. 3. Enquanto o círculo estiver selecionado, escolha a opção Modify > Convert to Symbol, ou de forma mais simples, pressione F8 para acessar a caixa de diálogo de conversão de símbolos, similar a apresentada em Figura 14. Digite um nome qualquer no espaço referente ao nome, por exemplo, meucirculo. Na opção tipo (Type), selecione Movie Clip. Pressione OK. Figura 14 Caixa de Diálogo de Conversão de Símbolos. 4. Note que após esse procedimento, uma caixa de seleção quadrada envolve o objeto, que agora se tornou um símbolo. Mais especificamente, foi criado um símbolo para clipe de filme animado chamado meucirculo. Para visualizar o Painel de Biblioteca de símbolos, selecione Window > Library. Note que o símbolo que acabou se ser criado está listado no Painel de Biblioteca. Além disso, 21
sempre que você arrastar a cópia de um símbolo do Painel de Biblioteca para o Painel de Cena, você estará criando uma instância de um símbolo. Animando um Símbolo Nessa seção, será utilizado o símbolo criado para desenvolver uma animação básica que se move pelo Painel de Cena. Para isso: 1. Selecione o círculo que está no Painel de Cena e o arraste para fora do cenário, na região cinza, como na Figura 15. Figura 15 Círculo no lado de fora do Painel de Cena. 2. Clique com o botão direito do mouse no círculo e escolha a opção Create Motion Tween no menu que irá aparecer. Veja que a Linha do Tempo é automaticamente estendida até o quadro 24 e uma marca vermelha (denominado Indicador de Reprodução) demarcará o quadro 24 (veja a Figura 16). Isso indica que a Linha do Tempo foi editada com a criação de uma animação de 1 segundo assumindo que as animações possuem 24 quadros 22
por segundo no Inspetor de Propriedades. Cada conjunto de 24 quadros equivale a uma animação de 1 segundo nas configurações atuais do Flash. Figura 16 Animação de 1 segundo criada automaticamente. 3. Sem modificar a posição do Indicador de Reprodução (a linha vermelha na Linha do Tempo) no quadro 24, selecione o círculo e o arraste para a direita, também fora do Painel de Cena, como na Figura 17. Esse estágio de modificar a localização do círculo cria uma animação interpolada. Note que na Linha do Tempo, no quadro 24, surge um símbolo em formato de losango (que nesse contexto será denominado Quadro-Chave). No Painel de Cena, também aparecerá uma linha de animação que indica o caminho em que o circulo irá se movimentar do quadro inicial (1) ao quadro final (24). 23
Figura 17 Animação interpolada construída, uma vez que a posição inicial e final da animação foi estipulada. 4. Agora, na Linha do Tempo, arraste o marcador vermelho para frente e para trás, do quadro 1 ao quadro 24, para pré-visualizar a animação. 5. É possível também modificar a direção do círculo durante a animação. Para testar essa propriedade, arraste o marcador vermelho no quadro 10 da Linha do Tempo. Feito isso, selecione o círculo e movimente-o para outra localização, por exemplo, abaixo do Painel de Cena, como na Figura 18. Veja que a mudança se reflete ao longo de toda a linha de movimento da animação e um novo ponto (ou quadro-chave) é criado no quadro 10 da Linha do Tempo. Tudo isso está descrito na Figura 18. Os quadros-chave da Linha de Tempo marcam o momento que a animação se altera, guardando as propriedades do objeto nesse instante de tempo. Nesse exemplo, a localização do círculo na 24
cena se altera à medida que o Indicador de Reprodução se move ao longo da Linha de Tempo. Figura 18 Criação de um Quadro-Chave no quadro 10 da animação, determinando uma posição da cena em que o objeto deverá estar. Toda a animação é então suavizada e calculada automaticamente para todos os quadros restantes. 6. Experimente editar novamente o trajeto da animação, mas ao invés de mover o círculo, tente alterar a posição da linha de movimento. Para isso, selecione a Ferramenta de Seleção no Painel de Ferramentas e clique em uma seção qualquer da linha de movimento. Tente movimentá-la manualmente em um formato similar ao da Figura 19. Ao modificar a direção da linha de movimento, e não do objeto, você cria uma animação que se movimenta ao longo de uma curva suave, ao invés de uma linha reta, tornando a movimentação mais natural e interessante. 25
Figura 19 Animação se movimentando ao longo de duas curvas. 7. Para testar a animação em execução, clique em Control > Test Movie para testar o arquivo FLA e visualizar a animação no Flash Player. 8. Note que a animação repete continuamente, de tal forma que o círculo se movimenta sem parar. Assim que a animação é encerrada, ela imediatamente recomeça. Encerre a execução da animação fechando a janela de teste. Usando uma ação de interrupção de animação Quando testar seu pequeno clipe de vídeo, a animação é executada repetidamente por padrão, enquanto o clipe estiver sendo executado no Player do Flash. Isso ocorre automaticamente porque, no Flash Profissional, a Linha do Tempo é programada para recomeçar a animação quando o último quadro da animação (que no exemplo é o quadro 24) for executado a não ser que você defina alguma instrução clara para determinar um 26
comportamento diferente. Quando você quiser adicionar um comando que altere o comportamento do símbolo, você adicionará um código ActionScript para um quadro-chave (indicado por um símbolo de um ponto) na Linha do Tempo. Isso é conhecido como construir um Quadro com Script. Dica: quadros-chave são usados para colocar certos elementos, como ActionScript, em quadros específicos da Linha de Tempo. Ao editar a Linha de Tempo de um arquivo FLA, você poderá localizar um ActionScript, dentre outro conteúdo qualquer, buscando os quadros com pontos. Quadros-chave com ActionScript são apresentados com um símbolo baseado na letra a. Siga os passos abaixo para adicionar um primeiro código ActionScript simples em seu arquivo FLA. Adicionaremos um dos comandos mais comuns usados em Linha de Tempo, que é o comando de interrupção (stop): stop(); 1. É sempre uma boa ideia nomear suas camadas, se você tiver mais do que uma em seu projeto. Um grande projeto pode se tornar muito difícil de gerenciar se houver mais do que uma camada. Dê um duplo-clique com o botão esquerdo do mouse para renomear a camada 1, atualmente chamada Layer 1. Chame-a de animacao. 2. Clique no botão de Nova Camada (ícone de uma folha) no lado esquerdo inferior do Painel de Linha de Tempo. Num projeto baseado no ActionScript3, o código ActionScript deve ser adicionado a Linha de Tempo. É considerada uma boa prática criar uma camada nomeada acoes no topo da pilha de camadas, dedicada apenas a execução de código ActionScript. Renomeie então essa nova camada criada para acoes. Tenha certeza que ela se localiza acima da camada animacao. Após criar a camada acoes, você pode adicionar quadros-chave para associar código ActionScript com quadros específicos. 3. Mova o Indicador de Reprodução para o quadro 24. Clique na camada acoes no quadro 24. Insira um quadro-chave no quadro 24 da camada acoes selecionando Insert > Timeline > Keyframe (ou pressionando F6). Note que um novo quadro-chave nulo aparece. 4. Selecione o novo quadro-chave com a Ferramenta de Seleção. Abra o painel de Ações (Window > Actions ou pressione F9). O Painel de Ações contém a janela de código ActionScript, que é um campo de texto que você utilizará para escrever ou colar código ActionScript diretamente para seu arquivo FLA. Posicione o cursor do mouse na área de texto próximo a primeira linha e escreva a seguinte ação: 27