DESENVOLVIMENTO DE ANIMAÇÃO PARA WEB 14/09/2012 … · DISCIPLINA: DESENVOLVIMENTO DE ANIMAÇÃO...

DESENVOLVIMENTO DE ANIMAÇÃO PARA WEB – 14/09/2012

Professor: Lucas Grassano Lattari

[email protected]

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO SUDESTE DE MINAS GERAIS – CAMPUS RIO POMBA CURSO TÉCNICO EM INFORMÁTICA (CONCOMITANTE) DISCIPLINA: DESENVOLVIMENTO DE ANIMAÇÃO PARA WEB PROFESSOR: LUCAS LATTARI

2

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


3

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.


4

Mídia de Percepção

Mídia de Representação

Mídia de Apresentação

Mídia de Armazenamento

Mídia de Transmissão

Figura 1 – Exemplos de mídias de diversos tipos.

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


5

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


6

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:


7

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).


8

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


9

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.


10

Tabela 1 – Principais diferenças entre imagens matriciais e vetoriais.

Imagem Matricial Imagem Vetorial

Baseada em mapeamento de cores diretamente em cada pixel.

Baseada em descrições geométricas.

Geralmente mais pesadas para armazenamento.

Geralmente mais leves para armazenamento.

Qualidade pode ser distorcida quando ampliada.

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.


11

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.


12

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.


13

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


14

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.


15

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.


16

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.


17

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


18

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.


19

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.


20

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.


21

É 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, tornando-

o 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,


22

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


23

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).


24

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


25

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.


26

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


27

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):

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:

stop();


28

Dica: Esse passo assume que você está utilizando o modo padrão do Painel de Ações. Se o

Painel de Ações estiver no modo de assistência, ele não permitirá que você digite código

diretamente no campo de texto. Para voltar ao modo padrão, desmarque o ícone de varinha

mágica no canto superior direito do Painel de Ações.

5. Após escrever um trecho de código na janela de Script, você notará que um

pequeno ícone com a letra “a” irá aparecer acima do quadro-chave na camada

acoes da Linha do Tempo. Isso indica que o quadro-chave contém um Quadro

com Script (também denominada ação). A partir desse ponto, sua Linha do

Tempo deverá ser parecida com a da Figura 20. Feche então o Painel de Ações.

Se for necessário editar o código desse quadro no futuro, você poderá sempre

selecionar o quadro-chave na Linha do Tempo e abrir o Painel de Ações

novamente.

Figura 20 – Linha do Tempo após a inserção de ActionScript.

6. Escolha Control > Test Movie para testar o arquivo FLA e visualizar seu

funcionamento no Flash Player. Veja que dessa vez a animação não se repete

indefinidamente, ele roda uma vez e é interrompida. Você poderá retornar ao

Flash para testar o clipe de filme novamente para tocar o filme de novo.

7. Ao terminar de pré-visualizar a animação, feche a janela de Teste de Filme.

8. Voltando ao Flash, salve o arquivo FLA.

DESENVOLVIMENTO DE ANIMAÇÃO PARA WEB 14/09/2012 … · DISCIPLINA: DESENVOLVIMENTO DE ANIMAÇÃO...

Documents

Transcript of DESENVOLVIMENTO DE ANIMAÇÃO PARA WEB 14/09/2012 … · DISCIPLINA: DESENVOLVIMENTO DE ANIMAÇÃO...