Vous êtes sur la page 1sur 84

Sumrio

INTRODUO _________________________________ 3
TELA DE APRESENTAO __________________________________ 4
BARRAS DE FERRAMENTAS _________________________________ 4
PALCO (STAGE) _________________________________________ 5
LINHA DE TEMPO _______________________________________ 5
CAIXA DE FERRAMENTAS __________________________________ 6
EDITAR CENA E EDITAR SMBOLOS __________________________ 7
UTILIZANDO AS FERRAMENTAS________________ 7
LINHA ________________________________________________ 7
TEXTO ________________________________________________ 9
OVAL E RETNGULO _____________________________________ 9
LPIS E PINCEL _________________________________________11
TINTEIRO_____________________________________________ 13
BALDE DE TINTA _______________________________________ 13
SOMBREADOR E APAGADOR _______________________________ 14
MO E ZOOM _________________________________________ 14
SETA ________________________________________________ 14
LAO________________________________________________ 18
EDITANDO OBJETOS DO FLASH _______________ 19
TRANSFORMAR_________________________________________ 20
ORGANIZAR ___________________________________________ 22
ALINHAR _____________________________________________ 22
DESMEMBRAR _________________________________________ 23
INFORMAES E TRANSFORMAR ____________________________ 23
CORES _______________________________________________ 24
CAMADAS ____________________________________ 28
PROPRIEDADES_________________________________________ 30
COLANDO OBJETOS ENTRE CAMADAS _______________________ 31
TRABALHANDO COM OBJETOS _______________ 33
IMPORTANDO ARQUIVOS __________________________________ 36
ANIMAO ___________________________________ 40
QUADROS-CHAVE_______________________________________ 40
ANIMAO QUADRO A QUADRO____________________________ 41
ANIMAO COM INTERPOLAO ___________________________ 48
CAMADA GUIA_________________________________________ 56
INTERPOLAO DE FORMA ________________________________ 61
AVANANDO NO FLASH _______________________ 66
CENAS _______________________________________________ 66
IMPORTANDO SONS______________________________________ 68
CLIPE DE FILME _______________________________________ 69
BOTES ______________________________________________ 72
INTERATIVIDADE _______________________________________ 74
PUBLICANDO _________________________________ 80
EXERCCIOS__________________________________ 82
Pgina: 3
Flash 5

Celta Informtica - F: (11) 4331-1586
INTRODUO
O Flash uma tima ferramenta para Internet, porque inclui em um ni-
co aplicativo, ferramentas para criar e animar imagens grficas, elemen-
tos de interatividade e construir a pgina HTML que permitir a exibio
dessas imagens na Internet e total interface de elementos no navegador.
O Flash trabalha com imagens vetoriais, ao invs de Bitmaps. No forma-
to bitmap, os grficos so criados como se fossem pontilhados, onde
cada ponto, ou bit, significa uma cor, que quando aumentado ou diminu-
do, acaba fazendo o desenho perder a definio. J no formato vetorial,
as imagens so lidas como linhas e arcos, que podem ser preenchidas e
redimensionadas sem perder definio, pois toda vez que o tamanho da
imagem alterado os clculos dos vetores so refeitos.
Alm de melhor definidas, as imagens em formato vetorial so mais le-
ves, tornando o carregamento das pginas mais rpido, o que d uma
enorme vantagem para o Flash, j que velocidade o que conta na
Internet, e ningum ficar esperando muito tempo para um site ser car-
regado.
Os filmes do Flash so grficos vetoriais compactos; assim, o download
rpido e os filmes so rapidamente adaptados ao tamanho da tela do
usurio.
O Flash muito utilizado para criar logotipos animados, controles de
navegao, grandes animaes com som sincronizado e sites da Internet
ainda mais chamativos.
Pgina: 4
Flash 5

Celta Informtica - F: (11) 4331-1586
TELA DE APRESENTAO
Ao abrir o Flash, aparecer a janela abaixo.
BARRAS DE FERRAMENTAS
Principal
Pgina: 5
Flash 5

Celta Informtica - F: (11) 4331-1586
Controlador
PALCO (STAGE)
nesta rea que montamos os nossos desenhos no Flash, a rea de
Trabalho do Programa. Voc pode dar a cor e tamanho que preferir para
ele atravs do menu Modificar na opo Filme ou dando duplo-clique
no nmero de quadros por segundo da Linha de tempo
LINHA DE TEMPO
atravs da Linha de tempo que controlamos as animaes. Ele divi-
dida em camadas e quadros onde voc editar as animaes do Flash.
As camadas em que a Linha de tempo se divide, tem cada uma a sua
particularidade em relao s outras. A ordem das camadas a ordem
de sua sobreposio, mais adiante entraremos com maiores detalhes
em relao s camadas.
Pgina: 6
Flash 5

Celta Informtica - F: (11) 4331-1586
CAIXA DE FERRAMENTAS
Contm todas as ferramentas do Flash para desenhar e manipular objetos.
Na caixa de Opes encontramos os vrios modos de se trabalhar com
algumas ferramentas. Logo mais, trabalharemos com todas as ferramen-
tas e suas opes.
Na caixa Cores temos os controles de Trao e Prenchimento que defi-
nem como ser a pintura dos objetos criados com as ferramentas de
desenho e de pintura.
Pgina: 7
Flash 5

Celta Informtica - F: (11) 4331-1586
EDITAR CENA E EDITAR SMBOLOS
Este dois botes permitem navegar facilmente entre as diferentes cenas
e nos smbolos da Biblioteca.
UTILIZANDO AS FERRAMENTAS
Antes de comearmos a construir animaes no Flash, vamos utilizar as
ferramentas para criao de desenhos simples. Para isso daremos um
explicao de cada ferramenta.
LINHA
A funo da ferramenta linha relativamente simples, ela cria segmentos
de linha reta, parecida com a ferramenta linha da maioria dos programas.
Pgina: 8
Flash 5

Celta Informtica - F: (11) 4331-1586
Definimos os atributos da linha atravs do painel Trao. Nele podemos
escolher o estilo, cor e espessura da linha que vamos desenhar. Para
exibir o painel Trao, escolha no menu Janelas > Painis > Trao.
Faa desenhos utilizando linhas, com diferentes cores e estilos.
Pgina: 9
Flash 5

Celta Informtica - F: (11) 4331-1586
Apague o desenho pressionando as teclas Ctrl+A para selecionar todos
os objetos e tecle Delete, ou selecione a ferramenta Seta (V), arraste-a
pelo palco criando uma rea de seleo e Delete.
TEXTO
Para adicionar um texto, basta selecionar a ferramenta Texto e clicar no
Palco do Flash e digitar a mensagem que deseja na caixa de texto que
aparecer, atravs dos painis Caracter, Pargrafo e Opes de Texto
modificamos a aparncia do texto escrito.
OVAL E RETNGULO
Com a ferramenta Oval voc consegue desenhar crculos e elipses de
qualquer largura e altura. Eles podem ser desenhados como contorno,
como preenchimento, ou ambos.
A ferramenta Retngulo utilizada para desenhar retngulos e quadra-
dos que podem ter seus cantos vivos ou arredondados.
Pgina: 10
Flash 5

Celta Informtica - F: (11) 4331-1586
Para desenhar uma dessas figuras, basta selecionar a ferramenta ade-
quada na barra de ferramentas e arrastar o ponteiro do mouse sobre o
palco.
Escolha as cores de preenchimento e trao na caixa cores da barra de
ferramentas, caso queira somente preenchimento ou somente trao,
clique no boto Sem cor da mesma caixa cores para a opo seleciona-
da - Cor do trao ou Cor do preenchimento.
Para desenhar retngulos com cantos arredondados, selecione a ferra-
menta Retngulo e clique no boto Raio do Retngulo Arredondado
que est na caixa de opes da ferramenta, e digite o valor do raio.
Pgina: 11
Flash 5

Celta Informtica - F: (11) 4331-1586
LPIS E PINCEL
Com a ferramenta Lpis voc consegue desenhar linhas a mo livre,
como se voc estivesse usando um lpis de verdade. Nas opes do
lpis tem um boto chamado Formato do lpis, ele possui trs outros
botes que permitem a voc alterar o modo como o Flash ir endireitar
as linhas desenhadas.
Com Acertar voc desenha linhas retas e converte aproximaes. Esco-
lha Suavizar para desenhar curvas suaves. E utilize Tinta quando no
quiser aplicar nenhuma modificao.
Pgina: 12
Flash 5

Celta Informtica - F: (11) 4331-1586
A ferramenta Pincel utilizada para pintar desenhos e objetos a mo
livre podendo alterar a cor, formato da ponta do pincel e o tipo de pintura
que define o modo como o pincel ir se comportar em relao aos outros
objetos desenhados no palco.
Os modos de pintura so:
Normal - pinta sobre linhas e preenchimentos.
Preenchimento - pinta somente preenchimentos e reas vazias.
Atrs - pinta as reas vazias do palco.
Seleo - pinta a rea previamente selecionada.
Dentro - pinta o preenchimento onde iniciou-se o uso do pincel, deixan-
do as linhas intactas.
A figura a seguir mostra o uso dos tipos de pincel: Normal, Prenchimento,
Atrs, Seleo e Dentro, respectivamente.
Pgina: 13
Flash 5

Celta Informtica - F: (11) 4331-1586
TINTEIRO
Modifica a cor, estilo e espessura de um trao, que pode ser o contorno
de um objeto ou no, tendo as suas caractersticas determinadas no
painel Trao, visto anteriormente na ferramenta Linha.
Para modificar um trao, basta selecionar a ferramenta Tinteiro, esco-
lher as novas propriedades (cor,estilo e espessura) do trao e clicar so-
bre o objeto que ser modificado. Ou ento selecione vrios traos, clique
no Tinteiro e modifique os atributos.
Use a ferramenta Tinteiro para alterar os atributos de vrios objetos ao
mesmo tempo ao invs de selecionar linhas individuais.
BALDE DE TINTA
O Balde de Tinta preenche reas fechadas ou no com uma cores slidas,
gradiente ou bitmaps. Ela pode preencher com outra cor reas j pintadas
ou reas vazias. Para preencher reas no totalmente fechadas, escolha
um dos Tamanhos de Lacuna disponveis na caixa opes.
Pgina: 14
Flash 5

Celta Informtica - F: (11) 4331-1586
SOMBREADOR E APAGADOR
A ferramenta Sombreador copia atributos preenchimentos e traos de
objetos par serem aplicados imediatamente em outros.
A ferramenta Apagador apaga um objeto inteiro ou parte dele, de acor-
do com o modificador Formato de borracha selecionado e podemos
alterar tambm o seu tamanho. Para remover segmentos de trao ou
preenchimentos clique no modificador Torneira.
MO E ZOOM
A ferramenta Mo permite a voc arrastar a janela, possibilitando al-
canar outras partes da imagem, sendo muito til quando a imagem
est ampliada, tambm no possui modificador.
Com a Zoom possvel aumentar ou reduzir a visualizao da rea de
trabalho, nas opes da ferramenta aparecem o botes Aumentar e
Reduzir.
SETA
A ferramenta Seta usada para selecionar, mover e modificar os obje-
tos, o modificador desta ferramenta possui cinco opes: Encaixar, Sua-
vizar, Acertar, Redimensionar e Girar.
Pgina: 15
Flash 5

Celta Informtica - F: (11) 4331-1586
Dimensionando um retngulo:
Separando o preenchimento do contorno de um retngulo:
Com a ferramenta seta voc consegue alterar os cantos e as curvas de
uma forma, distorcendo o desenho para o formato que quiser.
Pgina: 16
Flash 5

Celta Informtica - F: (11) 4331-1586
Trabalhando com a seta
Pgina: 17
Flash 5

Celta Informtica - F: (11) 4331-1586
Pgina: 18
Flash 5

Celta Informtica - F: (11) 4331-1586
LAO
Esta ferramenta seleciona reas irregulares no palco envolvendo um ou
mais objetos, o modificador apresenta dois modos de operao: Varinha
Mgica e Tipo de Polgono. Clique no modificador Tipo de Polgono quando
desejar criar uma seleo com bordas retas.
Voc pode apagar, alterar o tamanho, girar, mover e moldar os objetos
da rea selecionada.
Pgina: 19
Flash 5

Celta Informtica - F: (11) 4331-1586
Com o modificador Vara Mgica usado para alterar o preenchimento
das reas selecionadas de um bitmap.
EDITANDO OBJETOS DO FLASH
Agora vamos tratar da manipulao dos objetos do Flash, como alterar
contorno, cores, agrupamento, transformao e alinhamento.
A maioria das alteraes requer que voc selecione o objeto ou parte dele.
O Flash permite que voc selecione linhas, preenchimentos ou grupos
de objetos. Para agrupar objetos, basta seleciona-los e ir no menu Modi-
ficar e na opo Agrupar.
Os objetos no Flash podem ser formas livres ou smbolos, as formas livres
so desenhos compostos por uma linha e por um preenchimento, j os
smbolos so normalmente mais complexos, formados por agrupamento
de imagens. H trs tipos de smbolos: Grfico, Boto e Clipe de Vdeo.
Para selecionar mais de um objeto, voc tem que clicar nos objetos com a
tecla <Shift> pressionada, para selecionar todos os objetos voc pode ir
no menu Editar, na opo Selecionar tudo ou simplesmente <Ctrl> +
<A>, para deselecionar basta clicar numa rea sem nenhum objeto.
Para selecionar um segmento de linha d um nico clique sobre ela;
selecione todo o contorno de uma forma com um duplo-clique sobre a
linha da forma; para selecionar o preenchimento de uma forma, d um
nico clique sobre o preenchimento; toda a forma e o seu contorno, d
um duplo-clique sobre o preenchimento.
Pgina: 20
Flash 5

Celta Informtica - F: (11) 4331-1586
Para selecionar objetos dentro de uma rea retangular, basta englobar
estes objetos com um retngulo de seleo que aparece quando voc
clica fora de um objeto e segura o boto do mouse, mas se preferir sele-
cionar a mo livre, basta utilizar a ferramenta Lao.
Todos os tipos de objetos podem ser apagados, movidos ou copiados do
Palco.
Para mover um objeto basta selecion-lo e arrast-lo para a nova posi-
o, se a tecla <Shi f t > for pressionada enquanto o objeto removido,
o Flash permitir que o objeto se desloque apenas em um eixo - vertical
ou horizontal.
Para duplicar o objeto basta dar <Ct r l > + <D> com o objeto selecio-
nado, se preferir voc pode duplic-lo segurando a tecla <Ct r l > en-
quanto move o objeto de lugar, que ser removida apenas uma cpia.
Para apagar o objeto basta selecion-lo e em seguida apertar a tecla
<Del et e>.
TRANSFORMAR
Atravs do menu Modificar, opo Transformar, voc pode Girar, In-
clinar, Redimensionar e Espelhar um desenho, basta que o desenho
esteja selecionado. Se preferir voc pode utilizar o modificador da ferra-
menta Seta.
Pgina: 21
Flash 5

Celta Informtica - F: (11) 4331-1586
Pgina: 22
Flash 5

Celta Informtica - F: (11) 4331-1586
ORGANIZAR
Para mudar a ordem dos objetos em um Quadro, (definiremos o que
Quadro mais a frente) basta selecionar um ou mais objetos e ir e na
opo Organizar do menu Modificar e escolher em qual posio voc
quer colocar o seu objeto, mais frente mis atrs de outros, ou bloque-
lo. Para que uma forma possa ser mandada para trs, ela primeiro tem
que ser agrupada para que o contorno e o preenchimento se juntem em
um s objeto.
ALINHAR
Para arrumar os objetos no Palco de forma correta, o Flash oferece a
opo de alinhar todos eles, basta ir at o painel Alinhar e escolher suas
opes de alinhamento.
Pgina: 23
Flash 5

Celta Informtica - F: (11) 4331-1586
O objeto pode ser alinhado horizontalmente pela direita, pelo centro ou
pela esquerda, ou verticalmente pelo topo, pelo centro ou pela base,
utilizando o ltimo objeto selecionado ou o Palco (alinhar pela pgina)
como base deste alinhamento. Atravs desta caixa de dilogo, voc tam-
bm consegue Distribuir e Redimensionar os objetos selecionados.
DESMEMBRAR
Esta opo permite que voc desagrupe objetos agrupados, tranforme
smbolos em objetos de forma livre, s no transforma forma livre, que j
esto separados em linha e preenchimento.
INFORMAES E TRANSFORMAR
Estes painis nos permite transformar qualquer objeto utilizando valores
matemticos precisos ao invs de ser desenhado mo livre. Para abri-
los v ao menu Janela >> Paineis. Utilize estes paineis sempre que
voc quiser dar um tamanho ou posio para o objeto sendo que X indi-
ca a posio na horizontal e Y na vertical, essa posio tem como base
o canto superior esquerdo da pgina. O L se refere a largura do objeto e
o H a altura, a unidade de medida normalmente o pixel, mais voc
pode alterar para outra unidade no menu Modificar, opo Filme.
Pgina: 24
Flash 5

Celta Informtica - F: (11) 4331-1586
CORES
Para criar ou alterar uma cor voc ter que abrir os painis Misturador e
Amostras.
Se a cor de preenchimento que voc deseja criar for Gradiente. V at o
painel Gradiente, escolha o tipo e edite.
Caso deseje modificar o gradiente ainda mais, voc poder utilizar o
boto Transformar Preenchimento do modificador da ferramenta Bal-
de de Tinta.
Pgina: 25
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 1 Barco.fla
Agora vamos fazer um desenho de um barco utilizando ao mximo as
funes do Flash aprendidas at agora.
1. Altere o tamanho do Palco para 400 x 300 pixels.
2. Desenhe um retngulo com preenchimento amarelo e trao preto com
altura de 2 pontos. D a esse retngulo um tamanho de 230 x 115
pixels, utilize o painel informaes sempre que quiser dar um tama-
nho ou uma posio precisos para o objeto.
3. Mova o canto superior direito do retngulo para o lado direito, como
mostra a figura a seguir.
Pgina: 26
Flash 5

Celta Informtica - F: (11) 4331-1586
4. Altere o tamanho do desenho para 150 x 40 pixels.
5. Duplique o desenho (Ctrl+D) e inverta horizontalmente a cpia, atra-
vs do menu Modificar >> Transformar >> Inverter Horizontalmente.
6. Una as duas figuras e apague a linha do meio do objeto. Utilize a
ferramenta Zoom para fazer uma unio perfeita entre elas.
7. Duplique o casco do barco e transforme a parte duplicada em um
tringulo, conforme os quatro passos a seguir.
Pgina: 27
Flash 5

Celta Informtica - F: (11) 4331-1586
8. Para endireitar o lado do tringulo que apresenta um vrtice, selecione
a ferramenta Caneta (P). Esta ferramenta ir eliminar o ponto que for-
ma o vrtice. D trs cliques sobre o vrtice para selecionar os seg-
mentos, ajustar as extremidades e endireitar a reta, respectivamente.
9. Altere o tamanho do casco do barco para 270x40 e do tringulo para
150x130.
10. Faa um retngulo de 6 x 165 pixels com cantos arredondados em 5
pontos, ele ser o mastro do nosso barco.
11. A partir dos elementos construdos, faa a seguinte figura:
Pgina: 28
Flash 5

Celta Informtica - F: (11) 4331-1586
12. Transforme as linhas da vela e do barco para que elas fiquem mais
curvadas.
13. O barco ficar da seguinte forma:
14. Salve o arquivo como Barco.fla.
CAMADAS
Os objetos no Flash, alm de serem colocados na posio que voc
deseja no Palco, podem tambm ser empilhados ou divididos em cama-
das, de forma que o que voc faz em uma camada no altere a outra.
As camadas criadas no Flash nos ajudam a controlar este empilhamento
de objetos, se os objetos pertencerem a camadas diferentes, eles esta-
ro impedidos de interagirem entre si sem que voc deseje.
Na barco por exemplo, poderamos criar camadas para o barco, o mar, o
cu e outra para uma gaivota voando neste cu, a diviso em camadas
permite movimentar a gaivota sem alterar as outras camadas.
Para podermos aprender melhor sobre as camadas, vamos entender
melhor o funcionamento da Linha do Tempo, ferramenta fundamental
para criao e manipulao destas camadas.
Pgina: 29
Flash 5

Celta Informtica - F: (11) 4331-1586
As camadas so empilhadas horizontalmente na Linha de Tempo, a ca-
mada na parte inferior do Palco normalmente utilizada como fundo da
animao e a primeira camada que a de primeiro plano no Palco, fican-
do sobre todas as outras.
As camadas do Flash oferecem vrios recursos de manipulao que faci-
litam o nosso trabalho; a opo Bloquear camada evita que voc edite
acidentalmente uma camada, ou Ocultar uma camada que voc no queira
ver, Camadas guia ajudam no posicionamento dos objetos e a Camada
mascarada permite alguns efeitos de aparecer e revelar outras camadas.
Para inserir uma camada voc primeiro deve selecionar uma camada na
Linha de Tempo, no menu Inserir opo Camada ou se preferir clique
no boto adicionar camada da Linha de Tempo, a nova camada ser
colocada acima da camada selecionada e com um nome padro baseiado
no nmero de camadas j criadas, por exemplo: Camada 4, Camada 5,
e assim por diante. Voc tambm pode inserir uma camada atravs do
menu rpido, com o boto direito do mouse sobre a camada e depois
clicar na opo Inserir camada.
Pgina: 30
Flash 5

Celta Informtica - F: (11) 4331-1586
Para excluir uma camada basta selecion-la e clicar no boto Excluir ca-
mada da Linha de Tempo, se preferir voc pode excluir via menu rpido,
clicando com boto direito em cima da camada que voc quer excluir.
Para Renomear uma camada, voc pode dar duplo-clique no nome da
camada e depois digitar o novo nome.
PROPRIEDADES
Tambm podemos alterar as propriedades da camada. Elas so padres
que definem a aparncia e a funo da camada. Para serem acessadas
basta clicar com o boto direito em cima da camada e escolher a opo
Propriedades..., se preferir pelo menu Modificar escolha a opo Ca-
mada. Pelas propriedades voc pode atribuir um nome para a camada,
ocultar ou mostrar, bloquear uma camada ou visualizar na forma de
contornos, apesar destas trs opes j estarem na Linha de Tempo
mais acessveis na forma de boto.
Pgina: 31
Flash 5

Celta Informtica - F: (11) 4331-1586
COLANDO OBJETOS ENTRE CAMADAS
Para fazer cpias de objetos na mesma camada, como j vimos, basta
mover o objeto a ser copiado enquanto pressiona a tecla Ct r l , agora
veremos como copiar objetos entre camadas.
Esta opo funciona exatamente como em qualquer outro programa,
primeiro selecione o objeto ou a parte dele que deseja copiar, depois
s utilizar um dos seguintes mtodos: menu Editar > Copiar, clique no
Boto Copiar ( ) da Barra de Ferramentas ou pressionando as teclas
Ct r l +C do t ec l ado.
Para colar o objeto em outra camada, basta selecionar a camada onde a
cpia do objeto ser colocada e colar atravs do menu Editar > Colar,
clique no Boto Colar ( ),ou pressionando as teclas Ct r l +V.
Quando voc cola um objeto, ele colocado automaticamente no centro
do Palco, se voc quiser que ele aparea nesta nova camada exatamen-
te na mesma posio, escolha a opo Colar no Local do menu Editar
no momento de colar o objeto.
Exemplo 2 Camadas.fla
1. Em um novo arquivo, d ao Palco o tamanho de 400 x 300 pixels.
2. Insira mais trs camadas neste arquivo.
3. Na Camada 1 faa uma elipse com 110 pixels de largura por 50 de
altura, com, preenchimento e contorno igual figura.
4. Na Camada 2 faa um retngulo de 110x150 pixels, com preenchi-
mento e contorno igual a elipse.
Pgina: 32
Flash 5

Celta Informtica - F: (11) 4331-1586
5. Na Camada 3 copie a elipse da camada 1.
6. Na Camada 4 faa faa um corao a partir de quatro retas, de tal
modo que ele caiba dentro do retngulo da camada 2. Terminado,
aplique uma cor de preenchimento.
7. Agora renomeie e altere a ordem das camadas, de acordo com os
modelos:
8. Mova as figuras para elas formarem um cilindro decorado. Exclua o
contorno inferior do retngulo, dando mais realismo pea.
Pgina: 33
Flash 5

Celta Informtica - F: (11) 4331-1586
TRABALHANDO COM OBJETOS
At o momento ns vimos como desenhar no Flash, agora vamos traba-
lhar com desenhos j feitos no prprio Flash ou em outros programas.
O Flash oferece um espao que armazena os desenhos, para que possa-
mos utiliz-los vrias vezes no mesmo filme ou em vrios outros filmes,
este espao chama-se Biblioteca.
Cada arquivo do Flash tem a sua prpria Biblioteca, nela voc pode
armazenar textos, sons, objetos grficos, animaes, botes e imagens
bitmap ou vetoriais. Os itens armazenados na biblioteca so chamados
de Smbolos.
A utilizar um Smbolo, estamos na verdade utilizando uma Instncia des-
te Smbolo. A Instncia representa o Smbolo na animao e quando
existem vrias instncias do mesmo smbolo, o espao em bytes ocupa-
do no arquivo ser do tamanho do Smbolo, independente do nmero de
instncias utilizadas.
Instncia como um clone do smbolo, e ser alterada sempre que o
Smbolo original sofrer alguma modificao. Os Smbolos so como
um personagem de um filme ou desenho, apesar de aparecer em vrias
cenas, ele representa a mesma pessoa.
Pgina: 34
Flash 5

Celta Informtica - F: (11) 4331-1586
Se voc quiser que uma Instncia transforme-se em um objeto inde-
pendente, basta utilizar a opo Desmembrar do menu Modificar.
Para criar um Smbolo, primeiro selecione o objeto que voc deseja
transformar em smbolo, e no menu Inserir >> Converter em Smbolo,
aparecer uma caixa de Dilogo Propriedades do Smbolo, onde so
definidos o nome do smbolo e o comportamento desejado para ele.
Os smbolos da biblioteca tanto podem ser objetos complexos e anima-
dos como formas simples. H trs tipos de comportamentos de smbolo:
Clipe de Filme, Boto e Grfico.
Para a Biblioteca ser visualizada, clique no menu Janela >> Biblioteca
ou pressione as teclas Ct r l +L. E para abrir o biblioteca de outro arqui-
vo do Flash voc utiliza o menu Arquivo >> Abrir como Biblioteca...
Pgina: 35
Flash 5

Celta Informtica - F: (11) 4331-1586
Caso deseje criar diretamente um smbolo ao invs de transformar um
objeto j existente, basta ir no menu Inserir >> Novo Smbolo, definir
um nome e comportamento para este novo smbolo e desenh-lo na tela
em branco aberta pelo Flash. Para voc saber se est no filme principal
ou editando o smbolo, basta olhar no canto superior esquerdo da janela
e observar o nome do smbolo que voc est editando, se quiser voltar
para o filme principal basta clicar na Cena que voc pretende ir.
Se voc clicar com boto direito sobre o nome da smbolo da biblioteca
de smbolos, surgir vrias opes um menu rpido com algumas op-
es que alteram o smbolo.
O smbolo pode ser renomeado, duplicado, apagado e at atualizado, j
que qualquer desenho colado no Flash, automaticamente se transforma
em um smbolo.
O Flash fornece vrios exemplos de Grfi-
cos, Sons, Clipes de filme e Botes. Para
acess-los basta ir ao menu Janela >> Bi-
bliotecas Comuns, escolher o tipo deseja-
do e arrast-lo para o palco.
Escolha alguns exemplo e arraste-os para o
Palco do Flash, alguns esto divididos em
pastas que se abrem com o duplo-clique so-
bre elas. Os exemplos de animao ainda vo
ficar estticos quando voc arrast-los para
o Palco, mais isso ser por pouco tempo,
daqui alguns tpicos, j estaremos animan-
do estes e outros exemplos, mais se voc
quiser ter uma prvia de como ser a anima-
o ou o som, clique no boto Play que apa-
rece na rea de visualizao do item.
Pgina: 36
Flash 5

Celta Informtica - F: (11) 4331-1586
IMPORTANDO ARQUIVOS
At agora s utilizamos o prprio Flash para criar desenhos, agora vere-
mos como importar arquivos de outro programas para serem utilizados
no Flash.
Com o Flash voc pode importar tanto arquivos em formato Bitmap como
Vetorial, mais nem todos os recursos originais destes arquivos so fiel-
mente traduzidos por ele.
Voc pode importar os arquivos no Flash tanto pela rea de transfern-
cia quanto pelo comando Importar do menu Arquivo.
Para importar uma imagem para o Flash voc pode ir ao menu Arquivo
>> Importar ou se preferir Ct r l +R, na janela importar, procure pelo
arquivo desejado.
Importe o arquivo C:\WINDOWS\Bolhas.bmp. E observe que a figura
colocada no Palco e automaticamente virou um smbolo da biblioteca
deste filme. Caso o arquivo original seja alterado e mantido o mesmo
nome, utilize o comando Atualizar da biblioteca para modificara a figura
importada.
Pgina: 37
Flash 5

Celta Informtica - F: (11) 4331-1586
Se preferir, voc pode usar a rea de transferncia para colar uma ima-
gem vetorial ou bitmap. Pelo menu Editar >> Colar voc traz um dese-
nho da rea de transferncia para o seu trabalho, se preferir use a opo
Colar Especial onde possvel escolher um formato diferente para a
imagem a ser colada.
Os imagens do tipo BITMAP importadas para o Flash podem servir tam-
bm como preenchimento de formas, para isso basta voc Desmembrar
a imagem pelo menu Modificar e depois copiar o preenchimento com o
a ferramenta Seleciona Cor, fazendo isso a cor ficar copiada e qual-
quer desenho que voc faa ou pinte com o Balde de Tinta ter com
esse preenchimento.
Exemplo 3 Vero.fla
1. Altere tamanho do Palco para 600 x 250 pixels.
2. Crie trs mais camadas.
3. D os seguintes nomes para as camadas: Cu, Mar, Barco e Avio,
sendo que a camada Cu ser a camada de fundo seguida pela Ca-
mada Mar.
Pgina: 38
Flash 5

Celta Informtica - F: (11) 4331-1586
4. Selecione a camada do fundo e importe a imagem Nuvens.bmp.
5. Redimensione a figura para ela ter o mesmo tamanho do Palco e na
posio 0,0.
6. Bloqueie a camada Cu.
7. Na camada Mar faa um retngulo de 600 x 50, com preenchimento
em gradiente de azul claro para o escuro sem contorno.
8. Alinhe este retngulo pela base e centro da pgina.
9. Bloqueie a Camada Mar.
10. Abra o arquivo Barco.fla gravado anteriormente exerccio.
11. Selecione todo o barco (Ctrl+A) e converta-o em smbolo (F8) com o
nome barco.
12. Feche o arquivo Barco.fla salvando as alteraes.
Pgina: 39
Flash 5

Celta Informtica - F: (11) 4331-1586
13. Selecione a camada Barco.
14. Abra o arquivo Barco.fla como biblioteca.
15. Arraste o barco da biblioteca para o Palco de forma que ele fique
sobre a camada Mar.
16. Selecione a camada Avio. E arraste para o palco o clipe de filme
Biplane, atravs do menu Janela >> Bibliotecas Comuns >> Clipes
de Filmes.
17. Altere o tamanho do avio para 110 x 50.
18. Salve o filme como Vero.fla
Pgina: 40
Flash 5

Celta Informtica - F: (11) 4331-1586
ANIMAO
O efeito da animao criado quando um objeto se move ou modifica-
do ao longo do tempo. No Flash, como num filme tradicional, este efeito
criado guando so realizadas modificaes no objeto quadro a quadro.
As animaes em Flash podem ser desenvolvidas de duas maneiras:
animao quadro a quadro e animao interpolada. Na animao qua-
dro a quadro, o contedo do palco modificado em cada quadro do
filme. Na animao intepolada, cria-se o quadro inicial e final e o Flash
se encarrega de criar os quadros intermedirios.
QUADROS-CHAVE
A Linha de Tempo alm de mostrar a diviso das camadas, exibe tam-
bm a diviso de quadros. Ela representa a seqncia dos quadros da
animao para todas as camadas.
O quadro-chave o quadro que contm as modificaes da animao.
Na animao quadro-a-quadro, todo quadro um quadro-chave, j na
animao por interpolao estes quadros so colocados em pontos im-
portantes do filme.
Voc pode inserir quadros-chave e quadros-chave em branco no seu
filme, para as duas opes basta selecionar o quadro vazio onde voc
queira inserir estes quadros, e no menu Inserir, escolha se deseja inse-
rir um Quadro, um Quadro-chave, um Quadro-chave em branco,
Excluir Quadro ou Limpar Quadro-chave.
Pgina: 41
Flash 5

Celta Informtica - F: (11) 4331-1586
ANIMAO QUADRO A QUADRO
A primeiro forma de animao que vamos utilizar a animao quadro a
quadro, est forma semelhante ao processo de criao utilizado pelos
desenhos animados, so criadas diversos quadros seqenciais, que em
alta velocidade, mostram determinada ao.
Vamos iniciar criando uma animao quadro-a-quadro bem simples.
Exemplo 4 Elstico.fla
1. Vamos fazer um exemplo da utilizao de quadros, quadros-chave e
quadros em branco, para isso vamos criar um novo arquivo. O palco
ter o tamanho de 300 x 200, com duas camadas - a segunda usare-
mos mais tarde. Coloque os nomes de elstico e pedra nestas ca-
madas.
2. Na Linha de Tempo, clique com o boto direito sobre o quadro 10 da
camada elstico e escolha a opo Inserir Quadro. Este comando
insere no filme uma srie de quadros vazios desde o incio.
3. Repare que a Reproduo est sobre o quadro 10, clique com o mouse
sobre ela e mova at o primeiro quadro.
Pgina: 42
Flash 5

Celta Informtica - F: (11) 4331-1586
4. Selecione a ferramenta Linha (N) e faa uma linha vertical no palco,
ocupando quase toda sua altura. Note que na Linha de Tempo temos
um ponto preto no primeiro quadro, este ponto indica que este quadro
um quadro-chave e que h algo desenhado nele. No quadro 10 apa-
rece uma indicao de final de seqncia, chamada ala, que poder
ser arrastada para aumentar ou diminuir a quantidade de quadros.
5. Mova a Reproduo com o ponteiro do mouse para a direita e esquer-
da, e repare que nada aconteceu com a linha. Deixe a Reproduo
posicionada no quadro 2.
6. Insira neste quadro um quadro-chave. Clique com o boto direito
sobre e ele e selecione a opo Inserir Quadros-chave.
7. Transforme a linha em um pequeno arco. Agora mova a Reproduo
entre todos quadros, e veja que a figura s se modifica entre o 1 e 2,
sendo os outros quadros iguais ao 2. Isto acontece porque todos os
quadros aps um quadro-chave so iguais a ele.
Pgina: 43
Flash 5

Celta Informtica - F: (11) 4331-1586
8. Mova a Reproduo para o quadro 3 e pressione F6 par inserir um
quadro-chave, e no palco aumente o arco. V para o quadro seguinte
e faa o mesmo at o quadro 10.
9. Mova a Reproduo com as teclas < e > (menor e maior) do teclado.
Para reproduzir automaticamente, pressione a tecla Enter.
10. Salve com o nome de Elstico.fla.
Exemplo 5 Vero Animado.fla
1. Abra o arquivo Vero.fla
2. Adicione no quadros at o quadro 40 de todas as camadas. Arraste o
ponteiro do mouse para selecionar todos os quadros ao mesmo tem-
po e com o boto direito escolha Inserir Quadro.
Pgina: 44
Flash 5

Celta Informtica - F: (11) 4331-1586
3. Selecione a camada Avio e no quadro 3 adicione um quadro-chave e
mude o avio de posio. Adicione mais quadros-chave de dois em
dois at o final e a cada quadro, mude a posio do avio.
4. Faa o mesmo para o barco. Movimentando ele sobre o mar. Caso
queira um movimento linear, segure a tecla <Shift> enquanto o movi-
menta com o mouse.
5. Visualize animao no Flash Player atravs do menu Arquivo >>
Visualizar Publicao.
6. Note que a hlice do avio est se movendo, isto ocorre porque ns
pegamos o avio da biblioteca de grficos animados.
7. A avio est passando na frente do barco, isto porque ele est na
camada de primeiro plano, faa o barco ficar na frente. Clique no
nome da camada Barco e arraste para cima.
Pgina: 45
Flash 5

Celta Informtica - F: (11) 4331-1586
8. Salve como Vero Animado.fla.
Papel de Transparncia
Utilizando o recurso chamado Papel de Transparncia podemos ver os
quadros anteriores e posteriores ao quadro atualmente selecionado como
se estivssemos utilizando vrias folhas transparentes umas sobre as
outras.
Na Linha de Tempo podemos ver trs botes que controlam a transpa-
rncia. So eles:
Papel de Transparncia - Faz com que os quadros prximos ao quadro
ativo aparecem na tela com uma cor mais fraca.
Estruturas Seqnciais - Mostra somente os contornos das imagens
nos outros quadros.
Pgina: 46
Flash 5

Celta Informtica - F: (11) 4331-1586
Editar Vrios Quadros - Permite a edio de vrios quadros ao mesmo
tempo.
A quantidade de quadros mostrados antes ou depois, durante o uso do
Papel de Tranparncia, depende da posio dos marcadores de trans-
parncia. Arraste as alas Iniciar e Terminar para aumentar ou diminuir o
nmero de quadros exibidos no Papel de Transparncia. Todos os qua-
dros que estiverem dentro da faixa definida pelas duas alas sero exibi-
dos e editados ao mesmo tempo caso o boto Editar Vrios Quadros
esteja selecionado.
Abra o arquivo Elstico.fla e observe vrios quadros ao mesmo tempo
utilizando o Papel de Transparncia.
Pgina: 47
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 6 Rato.fla
1. Abra um novo filme e modifique para 8 quadros por segundo e tama-
nho 160px x 180px.
2. Em Bibliotecas comuns, escolha Grficos e insira no filme a figura do
rato.
3. Desmembre e desagrupe todos os objetos, para permitir a edio dos
olhos e do rabo do rato.
4. Clique com o boto direito sobre o quadro 7 e insira mais quadros.
5. Mova o Reproduo para o quadro 2 e insira um quadro-chave (F6).
Se voc der um clique no quadro 2, toda a figura ser selecionada,
para evitar isso, apenas posicione o Reproduo.
6. Amplie a regio do rabo.
Pgina: 48
Flash 5

Celta Informtica - F: (11) 4331-1586
7. Ative o Papel de Transparncia e mova a ponta do rabo, estando no
quadro 2.
8. Mova o Reproduo para o quadro 3 e insira mais um quadro-chave.
9. Mude a posio da ponta do rabo mais uma vez.
10. Continue com o mesmo processo at o quadro 7.
11. Adicione mais quadros ao filme e faa o rabo retornar posio inicial.
12. Alm da animao de movimento, podemos tambm alterar a cor dos
objetos durante o filme.
13. V at o quadro 3, selecione os olhos e mude sua cor. Mude a cor
tambm no quadro 4, para no gerar uma piscada muito rpida.
14. Salve o filme e visualize a publicao.
ANIMAO COM INTERPOLAO
H duas grandes desvantagens na animao quadro a quadro: ela
muito trabalhosa e deixa o arquivo grande demais.
O Flash tem uma funo que resolve os dois problemas, esta soluo
a Interpolao. Interpolar quer dizer alternar, voc fornece apenas os
objetos inicial e final de uma seqncia colocando os objetos em qua-
dros-chave que o Flash completar o caminho do primeiro ao segundo.
H dois tipos de interpolao: Interpolao de Movimento e Interpolao
de Forma.
No painel Quadro, menu Janela > Painis > Quadro, na lista Interpol.
escolhemos o tipo de Interpolao utilizada, se de forma, de movimento
ou nenhuma. Este painel pode ser visto tambm dando-se um clique
com o boto direito no quadro e escolhendo Painis > Quadros.
Pgina: 49
Flash 5

Celta Informtica - F: (11) 4331-1586
Interpolao de Movimento
Para criar uma interpolao de movimento no filme, clique com o boto
direito em um dos quadros pertencentes a uma seqncia e escolha a
opo Criar Interpolao Movimento, ou via menu Inserir > Criar
Interpolao de Movimento.
Quando uma seqncia de quadros tem interpolao de movimento ela
fica azul claro e representada por uma linha pontilhada caso esteja
incompleta, ou seja, sem um quadro-chave em seu final, ou por uma
seta cheia caso esteja completa.
Pgina: 50
Flash 5

Celta Informtica - F: (11) 4331-1586
Para efetuar alguma mudana na Interpolao de Movimento, basta ir
ao painel Quadro e alterar sua propriedades.
Dim. Se ativo, a interpolao far as mudanas nas dimenses do
objeto durante a animao. Desde que no quadro-chave final exista uma
modificao na dimenso do objeto.
Girar Gira o objeto durante a interpolao no sentido escolhido. A op-
o Auto gira o objeto uma vez na direo que requer menor movimento.
As opes Sentido Horrio e Sentido Anti-horrio giram o objeto confor-
me indicado e permitem especificar o nmero
de rotaes.
Atenuao Ajusta a acelerao e desacelerao do movimento, se o
nmero for maior que zero, o movimento ser mais rpido no incio e
lento no final e se for menor que zero, mais lento no comeo e rpido no
final.
Orientar trajetria Muda a orientao do objeto durante a trajetria
Sincronizar - Certifica se as instncias do objeto vo se repetir devida-
mente.
Encaixar Ativa o caminho desenhado para a movimentao do objeto.
Pgina: 51
Flash 5

Celta Informtica - F: (11) 4331-1586
Vamos fazer alguns exemplos utilizando a interpolao de Movimento.
Exemplo 7 Voando.fla
1. Abra o arquivo Vero.fla.
2. Exclua a camada Barco.
3. Remova todos os quadros-chave selecionando o quadro e atravs do
menu Inserir > Limpar Quadro-Chave ou pressione Shift+F6. E dei-
xe apenas o quadro inicial do filme.
4. Mova o avio para X = -120 e Y = 20.
5. Insira quadros at a posio 85 em todas camadas.
6. Adicione interpolao de Movimento na camada Avio. Os quadros
ficam pontilhados, mostrando que no houve movimento e a
interpolao est incompleta.
7. Mova o Reproduo para o ltimo quadro e arraste o avio para o
lado direto do palco. Note que ao soltar o boto do mouse, o Flash
cria um quadro-chave na posio 85, informando que houve uma
mudana no objeto.
Pgina: 52
Flash 5

Celta Informtica - F: (11) 4331-1586
8. Visualize a animao e altere a velocidade de quadros por segundo.
9. Vamos modificar o movimento do avio para que ele caia na gua.
Primeiro insira um quadro-chave na posio 40.
10. V at o quadro 85 e mova o avio para cima da gua e gire-o 90
o
no
sentido horrio. Verifique se no painel Quadro a opo Girar = Auto.
11. Mova a camada Mar para cima da camada Avio.
12. Visualize a animao.
13. Salve o exemplo como Voando.fla
Pgina: 53
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 8 Esferas.fla
1. Em um novo arquivo, mude a cor do palco para um verde bem claro e
o tamanho para 300x200 e desenhe um crculo de 20x20 na posio
X=20 e Y=20, com um gradiente radial para dar impresso de esfera.
2. Adicione quadros at a posio 10 e mova a esfera para 20,150 neste
quadro.
3. No quadro 20 mova para 90,60.
4. No quadro 30 mova para 250,150.
5. No quadro 40 mova para a posio inicial.
6. Teste a animao no seu navegador.
7. Insira mais duas camadas com outras duas esferas, e faa com que
as trs fiquem se batendo e rebatendo pelo palco.
8. Salve o arquivo com o nome de Esferas.fla
Pgina: 54
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 9 Girar.fla
1. Vamos construir um filme com dois objetos girando um dentro do
outro.
2. Inicie construindo um crculo e um quadrado, com cores
contrastantes e em camadas diferentes, conforme o esquema
abaixo.
3. Selecione os dois objetos e alinhe-os pelo centro verticalmente e
horizontalmente.
4. Verifique se a opo Encaixar em Objetos do menu Exibir est
ativa.
5. Selecione a ferramenta Subselecionar (A) e modifique o crculo de tal
forma que as suas tangentes encostem nos vrtices do quadrado.
6. Faa um pequeno crculo em uma das pontas do crculo modificado.
7. Modifique o retngulo para ficar semelhante a uma oval com cantos
vivos.
8. Acrescente quadros at a posio 30 e crie interpolao de movimen-
to nas duas camadas.
Pgina: 55
Flash 5

Celta Informtica - F: (11) 4331-1586
9. Posicione o Reproduo no quadro 30 e pressione o boto do mouse
sobre o retngulo at que aparea um quadro-chave nesta posio.
Faa o mesmo para o crculo.
10. Abra o painel Quadro e nele defina as rotaes para os dois objetos.
Digite tambm um Rtulo para cada uma das interpolaes.
11. Note que o Rtulo das interpolaes aparece escrito na Linha de
Tempo.
12. Visualize e salve o filme como Girar.fla.
Pgina: 56
Flash 5

Celta Informtica - F: (11) 4331-1586
Camada Guia
Quando aprendemos sobre camadas, vimos que existe uma camada
chamada Camada Guia. Ela utilizada para guiar objetos que possuem
interpolao de movimento, guiando-os atravs de uma rota definida por
linhas desenhadas nesta camada.
No prximo exemplo faremos com que um avio siga um caminho
preestabalecido, utilizando uma camada guia.
Exemplo 10 - Caminho.fla
1. Abra um novo arquivo e insira quadros at a posio 80.
2. Importe da biblioteca o clipe de filme do avio, colocando-o no canto
superior direito do palco e com um tamanho bem pequeno.
3. Clique no boto Adicionar Camada Guia na Linha de Tempo para
adicionar uma camada de ter o desenho do caminho que o avio
percorrer.
Pgina: 57
Flash 5

Celta Informtica - F: (11) 4331-1586
4. Faa um desenho na camada guia com a ferramenta Caneta seme-
lhante ao da figura abaixo, com todos os segmentos sendo segmen-
tos de curva.
5. Encaixe o avio neste caminho. Verifique se a opo Encaixar em
Objetos est ativa.
6. Crie uma interpolao de movimento para a camada avio.
7. V at a posio 20 e arraste o avio at o final da linha superior.
8. Na posio 40 desloque o avio para o canto inferior esquerdo, de-
pois em 60 no canto inferior direito e na 80 para a posio inicial. Com
o avio sempre encaixado na linha guia.
9. Visualize o filme e repare como o avio se comporta diferente do es-
perado para esse tipo de caminho. Se a opo Orientar trajetria
do painel Quadro estiver marcada, o avio ter um giro catico duran-
te seu trajeto porque este comando manda seguir a trajetria, porm
no indica que lado o objeto deve girar.
10. Antes de corrigir a rotao, aumente a curvatura do caminho utilizan-
do a ferramenta Subselecionar.
Pgina: 58
Flash 5

Celta Informtica - F: (11) 4331-1586
11. Verifique se no painel Quadro a opo Girar=Auto.
12. Nos quadros 40 e 60 gire o avio para ficar de cabea para baixo,
paralelo rota.
13. Visualize novamente o filme e salve-o como Caminho.fla.
Pgina: 59
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 11 Bola.fla
1. Abra o filme Elstico.fla.
2. Desenhe uma bola com trs cores em sua camada.
3. Adicione mais uma camada e desenhe nela uma espcie de rampa
com a ferramenta caneta e modificando posteriormente.
4. Agora vamos criar o movimento de volta do elstico. Insira quadros
at a posio 15 para todas as camadas.
5. Crie um quadro-chave nesta posio para a camada elstico e modi-
fique o elstico de forma a ficar reto.
6. Acrescente uma interpolao de Forma para este objeto. Observe a
figura.
7. Adicione um quadro-chave na posio 15 para a camada bola.
Pgina: 60
Flash 5

Celta Informtica - F: (11) 4331-1586
8. Insira quadros at a posio 40 para todas as camadas.
9. Crie uma interpolao de movimento para a bola entre as posies 15
e 40.
10. V para a posio 25 e movimente a bola at o incio da rampa,
criando um quadro-chave nessa posio.
11. Adicione uma camada guia que controle a bola. Crie um quadro-
cheve na posio 25 e desenhe nela uma curva paralela rampa at
a posio 35. Para eliminar os quadros posteriores ao 35, basta inse-
rir um quadro-chave em branco na posio 36.
12. No quadro 35, mova e gire a bola at o final da rampa.
13. Na posio 40, mova a bola para cima e a partir da crie um caminho
para a bola retornar ao incio.
14. Execute e salve seu filme.
Pgina: 61
Flash 5

Celta Informtica - F: (11) 4331-1586
Interpolao de Forma
Neste tipo de Interpolao voc tambm tem que definir o incio e o fim
da animao atravs de quadros-chave.
Na interpolao de forma voc consegue alterar as propriedades dos
objetos, desde que no sejam smbolos e nem estarem agrupados.
Com a interpolao de forma voc consegue tambm dar a impresso
de movimento, como faremos no prximo exemplo.
Dar a impresso de movimento no a principal caracterstica deste tipo
de animao, e sim transformar um objeto em outro.
Pgina: 62
Flash 5

Celta Informtica - F: (11) 4331-1586
No painel Quadro temos as seguintes opes para a Interpolao de
Forma.
Mistura Voc escolhe Distributiva quando os desenhos inicial e final
so mais suaves e curvados e Angular quando possuem mais cantos e
linhas retas.
Atenuao Ajusta a acelerao e desacelerao do movimento, se o
nmero escolhido for maior que zero animao ser mais rpida no
incio e lenta no final e se for menor que zero, mais lenta no comeo e
rpida no final.
Para criar interpolao de forma, voc cria dois quadros-chave, no pri-
meiro desenha o objeto em seu estado inicial e no ltimo no seu estado
final.
Pela painel Quadro voc define o tipo de interpolao Forma.
Os nossos prximos exemplos sero sobre este tipo de interpolao.
Pgina: 63
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 12 Esfera Pulando.fla
1. Desenhe uma elipse com dimenses 100x50 no quadro 1 de um novo
arquivo, com gradiente radial dando a impresso de esfera e centrali-
zada no topo do palco.
2. No quadro 10 um crculo de 100pixels de dimetro da mesma cor com
o centro da esfera alterado, e alinhado ao centro da pgina.
3. No quadro 20 outra elipse igual primeira, centralizada na base da
pgina.
4. No quadro 30 um crculo do mesmo tamanho e posio do quadro 10.
5. No quadro 40 uma elipse do mesmo tamanho e posio do quadro 1.
6. Aplique interpolao de forma e visualize a animao.
7. Abaixo vemos uma amostra de toda seqncia com o boto Papel de
Transparncia da Linha de Tempo ativo.
Pgina: 64
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 13 Transformao.fla
1. Em um novo arquivo, importe as figuras mulher1 e mulher2 em qua-
dros-chave diferentes, um aps o outro.
2. Alinhe ambas ao centro e na base do palco. Para que possamos ani-
mar estas figuras com interpolao de forma, vamos ter que tornar o
grfico um desenho editvel. Desmembre at que o grfico se torne
editvel, quando ento ficar completamente selecionado.
3. Insira um quadros (F5) at o segundo quadro-chave chegar na posi-
o 30.
4. Aplique interpolao de forma entre estes quadros e visualize a ani-
mao.
5. O uma mulher se transformar em outra.
6. Salve como Mutao.fla.
Exemplo 14 Fogo.fla
Vamos agora fazer uma animao com interpolao de forma que utiliza
vrias camadas:
1. Em um novo arquivo insira duas camadas.
Pgina: 65
Flash 5

Celta Informtica - F: (11) 4331-1586
2. Renomeie a Camada 1 para Chama Grande, a Camada 2 para Cha-
ma Mdia e a Camada 3 para Chama Pequena.
3. Na camada Chama Grande desenhe uma elipse 100x200, na Mdia
de 60x200 e na Pequena de 20x200. Todas somente preenchimento.
4. Selecione os trs preenchimentos e alinhe-os pelo centro horizontal-
mente e margem inferior.
5. A elipse grande ter a cor amarela, a mdia ser laranja e a pequena
vermelha, se voc quiser utilizar cores gradiente nelas, o desenho
ficar mais interessante.
6. Alinhe todas as formas para o centro e base da pgina.
7. De 10 em dez quadros v distorcendo as formas e alternando as cores
entre tons de vermelho e amarelo para que se parea com uma chama.
8. Anime os quadros com interpolao de forma e visualize a animao.
9. Salve-a como Fogo.fla
Pgina: 66
Flash 5

Celta Informtica - F: (11) 4331-1586
AVANANDO NO FLASH
Ns j aprendemos a trabalhar com vrios objetos e vrias camadas,
agora veremos no Flash, como trabalhar com vrias cenas e clipes de
filme e sons.
CENAS
As cenas so como captulos de um livro, onde podemos juntar vrias
animaes diferentes em um mesmo filme dividido em cenas.
Os filmes que ns montamos at agora possuem poucos quadros, mas
no futuro voc poder precisar trabalhar com muito mais quadros e se
cansar rolar para c e para l a Linha de Tempo.
Na hora de exibir as animaes, o Flash vai apresentando as cenas aps
a outra na mesma ordem em que esto listadas no painel Cena.
Utilize o menu Janela > Painis > Cena para exibir o painel Cena.
Este painel lista as cenas existentes no seu documento e permite adicio-
nar, excluir alterar e duplicar uma Cena. Alm deste painel, voc poder
utilizar o menu Inserir > Cena para adicionar uma nova cena diretamen-
te na Linha de Tempo.
Pgina: 67
Flash 5

Celta Informtica - F: (11) 4331-1586
Vamos agora colocar uma cena em uma animao.
Exemplo 15 Cena.fla
1. Abra o arquivo Caminho.fla
2. Insira uma cena.
3. O Flash adiciona uma cena em branco. Ao invs de montar outra
seqncia, vamos utilizar o arquivo Esferas.fla.
4. Abra este arquivo e selecione todos os quadros.
5. Copie os quadros, no menu Editar existe a opo Copiar Quadros,
se voc utilizar simplesmente a opo Copiar, no dar certo.
6. Feche o arquivo Esferas.fla, no necessitando salvar as alteraes.
7. Clique no primeiro quadro da Cena 2 ,e cole os quadros copiados
anteriormente utilizando a opo Colar Quadros do menu Editar ou
pelo boto direito do mouse sobre o quadro 1.
8. Pronto j temos um cena adicionada a este Arquivo.
9. Volte na Cena 1 e salve o arquivo como Cena.fla.
10. Visualize a animao.
11. Altere a ordem das cenas arrastando a cena de baixo para cima e
visualize novamente.
Pgina: 68
Flash 5

Celta Informtica - F: (11) 4331-1586
IMPORTANDO SONS
Voc pode importar sons atravs do opo importar do menu arquivo ou
utilizar um dos exemplos da biblioteca de sons. Os sons importados so
colocados na biblioteca da mesma forma que qualquer outro arquivo,
podendo ser utilizado mais de uma vez no mesmo filme.
Para ouvir o som antes de coloc-lo na animao, clique no boto Play
da Biblioteca.
Para inserir um som, primeiro devemos criar uma nova camada e arras-
tar o som desejado para o palco com o Reproduo sobre o quadro
desejado para iniciar sua execuo.
Exemplo 16 Sons.fla
1. Abra o arquivo Esferas.fla.
2. Crie uma nova camada.
3. Na posio onde duas esferas se chocam, insira um quadro-chave e
importe o som preferido da biblioteca de sons.
4. Importe o mesmo som para os demais quadros, sempre inserindo
quadros-chave antes de arrastar o som.
Pgina: 69
Flash 5

Celta Informtica - F: (11) 4331-1586
5. Visualize a animao e salve como Sons.fla.
6. Crie uma nova camada chamada Fundo musical e importe o arquivo
Bridge.wav. Aps a importao, o arquivo de som vai para a biblioteca e
para utiliz-lo, arraste-o para o palco com a camada Fundo musical ativa.
CLIPE DE FILME
Voc poder transformar uma animao do Flash em um clipe de filme
para ser utilizado em outros filmes.
O processo parecido com o que ns usamos para copiar uma cena,
voc seleciona os quadros e a camada que deseja tornar um clipe de
filme, e no menu Inserir, escolha Novo... Smbolo, atribua um nome para
o seu smbolo e define o comportamento como Clipe de Filme para ele.
Basta colar os quadros copiados nesse novo Clipe.
Pgina: 70
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 17 Meteoros.fla
1. Abra o arquivo Fogo.fla e copie todos os quadros que formam a cha-
ma a partir das opes Selecionar Tudo e Copiar Quadros do menu
Editar.
2. Crie um novo smbolo (Ctrl+F8) com o nome de Chama e comporta-
mento Clipe de Filme.
3. Cole os quadros da chama no quadro 1 da camada do clipe de filme
utilizando a menu Editar > Colar Quadros.
4. Volte ao modo de edio da cena salve o arquivo.
5. Se voc abrir a biblioteca deste arquivo, ver o clipe chama.
6. Feche o arquivo e abra o arquivo Voando.flap
7. Insira uma nova camada com o nome Meteoro.
8. Abra o arquivo Fogo.fla como biblioteca.
9. Insira um quadro-chave na posio 30 e arraste o clipe Chama para
um ponto antes do incio do palco no canto superior esquerdo.
10. Diminua e gire o clipe.
Pgina: 71
Flash 5

Celta Informtica - F: (11) 4331-1586
11. Crie uma interpolao de Movimento na camada Meteoro.
12. V para a posio 40 e mova a Chama at encontrar com o avio.
Isto dar a impresso que foi ela quem derrubou o avio.
13. Coloque outros Chamas no filme em uma mesma camada.
14. Agrupe as duas novas Chamas e crie uma interpolao de movimen-
to para elas.
15. V para o ltimo quadro do filme e mova o grupo para o Mar.
16. Salve como Meteoros.fla
Pgina: 72
Flash 5

Celta Informtica - F: (11) 4331-1586
BOTES
muito fcil criar botes atravs do Flash, basta criar um novo smbolo
dando a ele um comportamento de boto.
Quando um objeto tem comportamento de boto, ele dividido em qua-
tro quadros-chave: Normal, Sobre, Pressionado e rea
O quadro Normal mostra como o boto ficar em seu estado normal,
sem ser clicado nem apontado; o quadro Sobre o formato do boto
quando o ponteiro do mouse estiver sobre ele; o quadro Pressionado
a forma que o boto vai adquirir quando for clicado, e o quadro rea
indica a rea ativa do boto.
Os botes que so criado no Flash podem ser completamente animados.
Primeiro veremos a criao e um boto simples, logo aps um boto
animado.
Exemplo 18 Botes.fla
1. Em um novo arquivo, crie um novo smbolo com o nome de Boto
Simples e comportamento de boto.
2. No quadro Normal, crie um um boto a partir de dois crculos e um
retngulo, alinhado no centro do palco.
3. Para indicarmos em que formato est o boto, digite a palavra Nor-
mal com fonte Arial Black tamanho 30 em uma outra camada.
Pgina: 73
Flash 5

Celta Informtica - F: (11) 4331-1586
4. Pronto est feito o estado normal do boto.
5. Selecione a posio Sobre e insira um quadro-chave para copiar o
contorno do boto.
6. Na camada Texto insira tambm um quadro-chave e digite a palavra
Sobre.
7. Altere as cores do quadrado e da letra.
8. O estado Sobre do boto est feito.
9. Repita o mesmo processo para os estados Pressionado e rea.
10. Se voc preferir uma melhor impresso de boto, pinte as linhas de
cima e da esquerda do quadrado no estado Sobre de cinza claro e
faa a mesma coisa com a linha debaixo e da direita do estado Pres-
sionado.
11. Volte para a edio do filme e arraste o Boto Simples da biblioteca
para o palco.
12. Visualize a animao e repare que o boto muda para o estado So-
bre somente quando o ponteiro est sobre ele.
13. Aumente as dimenses do contorno da posio rea e observe na
visualizao, que o boto muda para o estado Sobre assim que o
ponteiro atinge sua rea ativa.
14. Repita os passos anteriores e mude o contorno do boto para cada
um dos estados.
15. Salve o arquivo como Botes.fla
Pgina: 74
Flash 5

Celta Informtica - F: (11) 4331-1586
16. Experimente inserir clipe de filme em cada um dos estados do boto.
INTERATIVIDADE
Normalmente o Flash reproduz as animaes seguindo a seqncia de
quadros e cenas do filme. Nos filmes interativos esta seqncia que-
brada pelas aes do usurio, que usa o teclado ou o mouse para deter-
minar qual parte do filme ser executada, inserir informaes ou mover
objetos e outras operaes interativas.
Um filme interativo criado quando se usa Aes. Ao um conjunto
de instrues escritos no ActionScript e executadas quando ocorrer al-
gum evento especfico.
Um evento pode ocorrer quando o usurio clica em um boto ou o filme
atinge um determinado ponto durante a execuo.
As aes so configuradas no painel Aes no Modo Normal. Neste
curso veremos como inserir aes sem a necessidade de escrever li-
nhas de cdigo em ActionScript, utilizando apenas as opes listadas no
painel Aes.
Pgina: 75
Flash 5

Celta Informtica - F: (11) 4331-1586
As aes podem ser definidas para um quadro, um boto ou um clipe de
filme. Quando selecionamos um destes elementos, o painel Aes ati-
vado, alterando seu ttulo para Aes do Quadro ou Aes do Objeto
conforme o que for selecionado.
Quando um quadro possuir uma ao ele ser marcado com uma pe-
quena letra a na Linha de Tempo.
Pgina: 76
Flash 5

Celta Informtica - F: (11) 4331-1586
Exemplo 19 Aes.fla
1. Monte um novo arquivo como no exemplo abaixo, criando um cami-
nho para o crculo se movimentar sobre ele num intervalo de trinta
quadros.
2. Insira um boto oval a partir da biblioteca. Edite o boto. Adicione
mais uma camada e escreva o texto Esferas nela.
Pgina: 77
Flash 5

Celta Informtica - F: (11) 4331-1586
3. Na biblioteca, clique com o boto direito sobre o nome do boto e
escolha a opo Duplicar. necessrio duplicar este boto para po-
dermos alterar o que est escrito nele e criarmos outra instncia.
4. Arraste a cpia para o palco e muda o texto dela para Girar.
5. Crie outro boto com o texto Voando.
6. Insira trs cenas com os seguintes arquivos: Esferas.fla, Girar.fla e
Voando.fla. Selecionando todos os quadros, copiando estes quadros
e colando-os no primeiro quadro de cada cena. D para elas o nome
de cada arquivo, e a primeira chame de principal.
7. Salve o filme como Aes.fla e visualize a animao. Repare que o
Flash exibe uma cena aps a outra sem nenhum controle. Nos prxi-
mos passos criaremos aes que iro controlar a exibio deste filme.
8. V para o ltimo quadro da primeira cena e insira um quadro-chave.
9. Abra o painel Aes do Quadro e d um clique-duplo na Ao Bsica
Go To, para associ-la ao quadro. Esta ao direciona o fluxo de
execuo do filme para o quadro indicado na propriedade Quadro,
que no nosso caso o quadro 1. Isto faz com que o filme fique sendo
executado somente na cena 1.
Pgina: 78
Flash 5

Celta Informtica - F: (11) 4331-1586
10. Insira em todas as outras cenas a mesma ao feita anteriormente
no ltimo quadro de cada uma delas.
11. Na cena principal, selecione o um boto, d um clique-duplo na Ao
Bsica Go To e na propriedade Cena digite o nome da cena perten-
cente a ele.
Pgina: 79
Flash 5

Celta Informtica - F: (11) 4331-1586
12. Faa o mesmo para outros dois botes. Na lista de aes notamos
que antes da ao goto temos o evento que ira disparar esta ao,
que no caso on (release), ou seja quando o boto do mouse for
solto. Selecione este evento e observe no campo de parmetros todos
os eventos possveis de serem escolhidos para executar esta ao.
13. Visualize a animao e note que ao entrar em uma das cenas, no
possvel mais sair. Vamos corrigir este problema inserindo em cada
cena, um boto que volte para a cena principal.
14. Insira dois botes em cada cena. Um boto com a ao GoTo,
Cena principal e Quadro 1. E o outro com a ao Stop.
15. Salve e visualize seu filme.
Pgina: 80
Flash 5

Celta Informtica - F: (11) 4331-1586
PUBLICANDO
Para definir como seu filme ser publicado voc deve ir ao menu Arqui-
vo > Configuraes de Publicao..., surge uma caixa de dialogo com
trs guias: Formatos, Flash e HTML.
Pgina: 81
Flash 5

Celta Informtica - F: (11) 4331-1586
Nesta caixa de dilogo voc escolhe todos as definies para o seu filme.
Agora s publicar o filme pela opo Publicar do menu Arquivo, ou
pelas teclas <Shi f t >+<F12>.
Com o arquivo publicado basta abrir atravs de seu navegador, ou se
preferir voc poder pressionar a tecla <F12> que a animao ser
atualizada e visualizada ao mesmo tempo, automaticamente.
Pgina: 82
Flash 5

Celta Informtica - F: (11) 4331-1586
EXERCCIOS
1. Crie uma transformao envolvendo dois grficos biblioteca de grfi-
cos. Salvando o arquivo como Metamorfose.fla.
2. Crie um animao em que o avio d piruetas no ar. Salvando como
Piruetas.fla.
3. Utilize o clipe da chama para criar a imagem de uma vela acesa.
Salve como Vela.fla.
4. Crie um semforo alternando entre o verde, amarelo e vermelho. Salve
como Semfaro.fla
5. Crie um animao onde o dia comece ensolarado, e transforma-se
em uma noite com o cu estrelado e lua cheia. Salve como Dia
Perfeito.fla
6. Desenhe um carro que atravessa o palco com as rodas girando. Se
for possvel, importe um carro de algum Clip-Art.
7. No palco do exerccio anterior tero dois botes, um chamado PA-
RAR e o outro chamado SEGUIR, adicione um som de freada quan-
do o carro parar. Salve como Carro.fla
8. Crie uma animao onde um avio decole, d algumas voltas e de-
pois pouse, o avio pode ser de qualquer Clip-Art, ou do prpria bibli-
oteca do Flash. No esquecendo que o objeto tem que ser vetorial.
9. Crie uma animao com a frase VAMOS DETONAR COM O FLASH,
utilize o mximo de recursos possveis para esta animao. Salve
como detonar.fla.
10. Duplique a Clipe de Filme do avio biplano e personalize, colocando
um piloto na cabine que pode ser uma foto sua escaneada ou um
Clip-Art de sua escolha.
Pgina: 83
Flash 5

Celta Informtica - F: (11) 4331-1586
11. Faa uma animao com este clipe. Salve como Meu avio.fla.
12. Crie a animao de um foguete ou avio a jato utilizando o Clipe da
Chama para sair da turbina adicione um som de jato se possvel.
Salve com jato.fla.
13. Monte um site com o Flash que venda algum produto, utilize os dese-
nhos do Flash ou de outro programa com Clip-Art. Salve com Meu
Site.fla
14. No menu Janela voc encontra alguns Exemplos do Flash, abra-os e
veja que possvel fazer muitas animaes com esse programa.
15. Procure por sites que utilizem o Flash e tente repetir as animaes
encontradas.
Celta Informtica
http://www.celtainformatica.com.br

Vous aimerez peut-être aussi