Post on 19-Nov-2018
DESENVOLVIMENTO DE ANIMAÇÃO PARA WEB – 14/09/2012
Professor: Lucas Grassano Lattari
lucas.lattari@ifsudestemg.edu.br
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
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
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.
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
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
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
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
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
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:
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
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).
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
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
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
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.
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
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.
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
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.
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
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.
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
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
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
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.
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
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.
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
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.
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
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
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
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.
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
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.
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
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.
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
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,
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
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
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
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).
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
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
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
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.
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
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
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
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();
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
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.