Você está na página 1de 84

Sumário

INTRODUÇÃO _________________________________ 3
TELA DE APRESENTAÇÃO __________________________________ 4
BARRAS DE FERRAMENTAS _________________________________ 4
PALCO (STAGE) _________________________________________ 5
LINHA DE TEMPO _______________________________________ 5
CAIXA DE FERRAMENTAS __________________________________ 6
EDITAR CENA E EDITAR SÍMBOLOS __________________________ 7

UTILIZANDO AS FERRAMENTAS ________________ 7


LINHA ________________________________________________ 7
TEXTO ________________________________________________ 9
OVAL E RETÂNGULO _____________________________________ 9
LÁPIS E PINCEL _________________________________________ 11
TINTEIRO _____________________________________________ 13
BALDE DE TINTA _______________________________________ 13
SOMBREADOR E APAGADOR _______________________________ 14
MÃO E ZOOM _________________________________________ 14
SETA ________________________________________________ 14
LAÇO ________________________________________________ 18

EDITANDO OBJETOS DO FLASH _______________ 19


TRANSFORMAR _________________________________________ 20
ORGANIZAR ___________________________________________ 22
ALINHAR _____________________________________________ 22
DESMEMBRAR _________________________________________ 23
INFORMAÇÕES E TRANSFORMAR ____________________________ 23
CORES _______________________________________________ 24
CAMADAS ____________________________________ 28
PROPRIEDADES _________________________________________ 30
COLANDO OBJETOS ENTRE CAMADAS _______________________ 31

TRABALHANDO COM OBJETOS _______________ 33


IMPORTANDO ARQUIVOS __________________________________ 36

ANIMAÇÃO ___________________________________ 40
QUADROS-CHAVE _______________________________________ 40
ANIMAÇÃO QUADRO A QUADRO ____________________________ 41
ANIMAÇÃO COM INTERPOLAÇÃO ___________________________ 48
CAMADA GUIA _________________________________________ 56
INTERPOLAÇÃO DE FORMA ________________________________ 61

AVANÇANDO NO FLASH _______________________ 66


CENAS _______________________________________________ 66
IMPORTANDO SONS ______________________________________ 68
CLIPE DE FILME _______________________________________ 69
BOTÕES ______________________________________________ 72
INTERATIVIDADE _______________________________________ 74

PUBLICANDO _________________________________ 80

EXERCÍCIOS __________________________________ 82
Flash 5

INTRODUÇÃO

O Flash é uma ótima ferramenta para Internet, porque inclui em um úni-


co aplicativo, ferramentas para criar e animar imagens gráficas, elemen-
tos de interatividade e construir a página HTML que permitirá a exibição
dessas imagens na Internet e total interface de elementos no navegador.

O Flash trabalha com imagens vetoriais, ao invés de Bitmaps. No forma-


to bitmap, os gráficos são 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 definição. Já no formato vetorial,
as imagens são lidas como linhas e arcos, que podem ser preenchidas e
redimensionadas sem perder definição, pois toda vez que o tamanho da
imagem é alterado os cálculos dos vetores são refeitos.

Além de melhor definidas, as imagens em formato vetorial são mais le-


ves, tornando o carregamento das páginas mais rápido, o que dá uma
enorme vantagem para o Flash, já que velocidade é o que conta na
Internet, e ninguém ficará esperando muito tempo para um site ser car-
regado.

Os filmes do Flash são gráficos vetoriais compactos; assim, o download


é rápido e os filmes são rapidamente adaptados ao tamanho da tela do
usuário.

O Flash é muito utilizado para criar logotipos animados, controles de


navegação, grandes animações com som sincronizado e sites da Internet
ainda mais chamativos.

Celta Informática - F: (11) 4331-1586 Página: 3


Flash 5
TELA DE APRESENTAÇÃO

Ao abrir o Flash, aparecerá a janela abaixo.

BARRAS DE FERRAMENTAS

Principal

Celta Informática - F: (11) 4331-1586 Página: 4


Flash 5
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 através do menu Modificar na opção Filme ou dando duplo-clique
no número de quadros por segundo da Linha de tempo

LINHA DE TEMPO

É através da Linha de tempo que controlamos as animações. Ele é divi-


dida em camadas e quadros onde você editará as animações do Flash.

As camadas em que a Linha de tempo se divide, tem cada uma a sua


particularidade em relação às outras. A ordem das camadas é a ordem
de sua sobreposição, mais adiante entraremos com maiores detalhes
em relação às camadas.

Celta Informática - F: (11) 4331-1586 Página: 5


Flash 5
CAIXA DE FERRAMENTAS

Contém todas as ferramentas do Flash para desenhar e manipular objetos.

Na caixa de Opções encontramos os vários modos de se trabalhar com


algumas ferramentas. Logo mais, trabalharemos com todas as ferramen-
tas e suas opções.

Na caixa Cores temos os controles de Traço e Prenchimento que defi-


nem como será a pintura dos objetos criados com as ferramentas de
desenho e de pintura.

Celta Informática - F: (11) 4331-1586 Página: 6


Flash 5

EDITAR CENA E EDITAR SÍMBOLOS

Este dois botões permitem navegar facilmente entre as diferentes cenas


e nos símbolos da Biblioteca.

UTILIZANDO AS FERRAMENTAS

Antes de começarmos a construir animações no Flash, vamos utilizar as


ferramentas para criação de desenhos simples. Para isso daremos um
explicação de cada ferramenta.

LINHA

A função da ferramenta linha é relativamente simples, ela cria segmentos


de linha reta, parecida com a ferramenta linha da maioria dos programas.

Celta Informática - F: (11) 4331-1586 Página: 7


Flash 5
Definimos os atributos da linha através do painel Traço. Nele podemos
escolher o estilo, cor e espessura da linha que vamos desenhar. Para
exibir o painel Traço, escolha no menu Janelas > Painéis > Traço.

Faça desenhos utilizando linhas, com diferentes cores e estilos.

Celta Informática - F: (11) 4331-1586 Página: 8


Flash 5
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 seleção 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á, através dos painéis Caracter, Parágrafo e Opções de Texto
modificamos a aparência do texto escrito.

OVAL E RETÂNGULO

Com a ferramenta Oval você consegue desenhar círculos e elipses de


qualquer largura e altura. Eles podem ser desenhados como contorno,
como preenchimento, ou ambos.

A ferramenta Retângulo é utilizada para desenhar retângulos e quadra-


dos que podem ter seus cantos vivos ou arredondados.

Celta Informática - F: (11) 4331-1586 Página: 9


Flash 5
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 traço na caixa cores da barra de


ferramentas, caso queira somente preenchimento ou somente traço,
clique no botão Sem cor da mesma caixa cores para a opção seleciona-
da - Cor do traço ou Cor do preenchimento.

Para desenhar retângulos com cantos arredondados, selecione a ferra-


menta Retângulo e clique no botão Raio do Retângulo Arredondado
que está na caixa de opções da ferramenta, e digite o valor do raio.

Celta Informática - F: (11) 4331-1586 Página: 10


Flash 5

LÁPIS E PINCEL

Com a ferramenta Lápis você consegue desenhar linhas a mão livre,


como se você estivesse usando um lápis de verdade. Nas opções do
lápis tem um botão chamado Formato do lápis, ele possui três outros
botões que permitem a você alterar o modo como o Flash irá endireitar
as linhas desenhadas.

Com Acertar você desenha linhas retas e converte aproximações. Esco-


lha Suavizar para desenhar curvas suaves. E utilize Tinta quando não
quiser aplicar nenhuma modificação.

Celta Informática - F: (11) 4331-1586 Página: 11


Flash 5

A ferramenta Pincel é utilizada para pintar desenhos e objetos a mão


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 relação aos outros
objetos desenhados no palco.

Os modos de pintura são:


Normal - pinta sobre linhas e preenchimentos.
Preenchimento - pinta somente preenchimentos e áreas vazias.
Atrás - pinta as áreas vazias do palco.
Seleção - 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,


Atrás, Seleção e Dentro, respectivamente.

Celta Informática - F: (11) 4331-1586 Página: 12


Flash 5

TINTEIRO

Modifica a cor, estilo e espessura de um traço, que pode ser o contorno


de um objeto ou não, tendo as suas características determinadas no
painel Traço, visto anteriormente na ferramenta Linha.

Para modificar um traço, basta selecionar a ferramenta Tinteiro, esco-


lher as novas propriedades (cor,estilo e espessura) do traço e clicar so-
bre o objeto que será modificado. Ou então selecione vários traços, clique
no Tinteiro e modifique os atributos.

Use a ferramenta Tinteiro para alterar os atributos de vários objetos ao


mesmo tempo ao invés de selecionar linhas individuais.

BALDE DE TINTA

O Balde de Tinta preenche áreas fechadas ou não com uma cores sólidas,
gradiente ou bitmaps. Ela pode preencher com outra cor áreas já pintadas
ou áreas vazias. Para preencher áreas não totalmente fechadas, escolha
um dos Tamanhos de Lacuna disponíveis na caixa opções.

Celta Informática - F: (11) 4331-1586 Página: 13


Flash 5
SOMBREADOR E APAGADOR

A ferramenta Sombreador copia atributos preenchimentos e traços 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 também o seu tamanho. Para remover segmentos de traço ou
preenchimentos clique no modificador Torneira.

MÃO E ZOOM

A ferramenta Mão permite a você arrastar a janela, possibilitando al-


cançar outras partes da imagem, sendo é muito útil quando a imagem
está ampliada, também não possui modificador.

Com a Zoom é possível aumentar ou reduzir a visualização da área de


trabalho, nas opções da ferramenta aparecem o botões Aumentar e
Reduzir.

SETA

A ferramenta Seta é usada para selecionar, mover e modificar os obje-


tos, o modificador desta ferramenta possui cinco opções: Encaixar, Sua-
vizar, Acertar, Redimensionar e Girar.

Celta Informática - F: (11) 4331-1586 Página: 14


Flash 5

Dimensionando um retângulo:

Separando o preenchimento do contorno de um retângulo:

Com a ferramenta seta você consegue alterar os cantos e as curvas de


uma forma, distorcendo o desenho para o formato que quiser.

Celta Informática - F: (11) 4331-1586 Página: 15


Flash 5

Trabalhando com a seta

Celta Informática - F: (11) 4331-1586 Página: 16


Flash 5

Celta Informática - F: (11) 4331-1586 Página: 17


Flash 5

LAÇO

Esta ferramenta seleciona áreas irregulares no palco envolvendo um ou


mais objetos, o modificador apresenta dois modos de operação: Varinha
Mágica e Tipo de Polígono. Clique no modificador Tipo de Polígono quando
desejar criar uma seleção com bordas retas.

Você pode apagar, alterar o tamanho, girar, mover e moldar os objetos


da área selecionada.

Celta Informática - F: (11) 4331-1586 Página: 18


Flash 5

Com o modificador Vara Mágica é usado para alterar o preenchimento


das áreas selecionadas de um bitmap.

EDITANDO OBJETOS DO FLASH

Agora vamos tratar da manipulação dos objetos do Flash, como alterar


contorno, cores, agrupamento, transformação e alinhamento.

A maioria das alterações 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 opção Agrupar.

Os objetos no Flash podem ser formas livres ou símbolos, as formas livres


são desenhos compostos por uma linha e por um preenchimento, já os
símbolos são normalmente mais complexos, formados por agrupamento
de imagens. Há três tipos de símbolos: Gráfico, Botão e Clipe de Vídeo.

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 opção 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.

Celta Informática - F: (11) 4331-1586 Página: 19


Flash 5

Para selecionar objetos dentro de uma área retangular, basta englobar


estes objetos com um retângulo de seleção que aparece quando você
clica fora de um objeto e segura o botão do mouse, mas se preferir sele-
cionar a mão livre, basta utilizar a ferramenta Laço.

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 < S h i 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 < C t r l > + < D > com o objeto selecio-
nado, se preferir você pode duplicá-lo segurando a tecla < C t r l > en-
quanto move o objeto de lugar, que será removida apenas uma cópia.

Para apagar o objeto basta selecioná-lo e em seguida apertar a tecla


<Delete>.

TRANSFORMAR

Através do menu Modificar, opção 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.

Celta Informática - F: (11) 4331-1586 Página: 20


Flash 5

Celta Informática - F: (11) 4331-1586 Página: 21


Flash 5
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
opção Organizar do menu Modificar e escolher em qual posição você
quer colocar o seu objeto, mais à frente mis à atrás de outros, ou bloqueá-
lo. Para que uma forma possa ser mandada para trás, 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


opção de alinhar todos eles, basta ir até o painel Alinhar e escolher suas
opções de alinhamento.

Celta Informática - F: (11) 4331-1586 Página: 22


Flash 5
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 página)
como base deste alinhamento. Através desta caixa de diálogo, você tam-
bém consegue Distribuir e Redimensionar os objetos selecionados.

DESMEMBRAR

Esta opção permite que você desagrupe objetos agrupados, tranforme


símbolos em objetos de forma livre, só não transforma forma livre, que já
estão separados em linha e preenchimento.

INFORMAÇÕES E TRANSFORMAR

Estes painéis nos permite transformar qualquer objeto utilizando valores


matemáticos precisos ao invés de ser desenhado à mão livre. Para abri-
los vá ao menu Janela >> Paineis. Utilize estes paineis sempre que
você quiser dar um tamanho ou posição para o objeto sendo que X indi-
ca a posição na horizontal e Y na vertical, essa posição tem como base
o canto superior esquerdo da página. 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, opção Filme.

Celta Informática - F: (11) 4331-1586 Página: 23


Flash 5
CORES

Para criar ou alterar uma cor você terá que abrir os painéis 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


botão Transformar Preenchimento do modificador da ferramenta Bal-
de de Tinta.

Celta Informática - F: (11) 4331-1586 Página: 24


Flash 5

Exemplo 1 – Barco.fla

Agora vamos fazer um desenho de um barco utilizando ao máximo as


funções do Flash aprendidas até agora.

1. Altere o tamanho do Palco para 400 x 300 pixels.

2. Desenhe um retângulo com preenchimento amarelo e traço preto com


altura de 2 pontos. Dê a esse retângulo um tamanho de 230 x 115
pixels, utilize o painel informações sempre que quiser dar um tama-
nho ou uma posição precisos para o objeto.

3. Mova o canto superior direito do retângulo para o lado direito, como


mostra a figura a seguir.

Celta Informática - F: (11) 4331-1586 Página: 25


Flash 5

4. Altere o tamanho do desenho para 150 x 40 pixels.

5. Duplique o desenho (Ctrl+D) e inverta horizontalmente a cópia, atra-


vés 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 união perfeita entre elas.

7. Duplique o casco do barco e transforme a parte duplicada em um


triângulo, conforme os quatro passos a seguir.

Celta Informática - F: (11) 4331-1586 Página: 26


Flash 5
8. Para endireitar o lado do triângulo que apresenta um vértice, selecione
a ferramenta Caneta (P). Esta ferramenta irá eliminar o ponto que for-
ma o vértice. Dê três cliques sobre o vértice 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 triângulo para


150x130.
10. Faça um retângulo de 6 x 165 pixels com cantos arredondados em 5
pontos, ele será o mastro do nosso barco.

11. A partir dos elementos construídos, faça a seguinte figura:

Celta Informática - F: (11) 4331-1586 Página: 27


Flash 5
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, além de serem colocados na posição que você


deseja no Palco, podem também ser empilhados ou divididos em cama-
das, de forma que o que você faz em uma camada não 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-
rão impedidos de interagirem entre si sem que você deseje.

Na barco por exemplo, poderíamos criar camadas para o barco, o mar, o


céu e outra para uma gaivota voando neste céu, a divisão 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 criação e manipulação destas camadas.

Celta Informática - F: (11) 4331-1586 Página: 28


Flash 5

As camadas são empilhadas horizontalmente na Linha de Tempo, a ca-


mada na parte inferior do Palco normalmente é utilizada como fundo da
animação e a primeira camada que é a de primeiro plano no Palco, fican-
do sobre todas as outras.

As camadas do Flash oferecem vários recursos de manipulação que faci-


litam o nosso trabalho; a opção Bloquear camada evita que você edite
acidentalmente uma camada, ou Ocultar uma camada que você não 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 opção Camada ou se preferir clique
no botão adicionar camada da Linha de Tempo, a nova camada será
colocada acima da camada selecionada e com um nome padrão baseiado
no número de camadas já criadas, por exemplo: Camada 4, Camada 5,
e assim por diante. Você também pode inserir uma camada através do
menu rápido, com o botão direito do mouse sobre a camada e depois
clicar na opção Inserir camada.
Celta Informática - F: (11) 4331-1586 Página: 29
Flash 5
Para excluir uma camada basta selecioná-la e clicar no botão Excluir ca-
mada da Linha de Tempo, se preferir você pode excluir via menu rápido,
clicando com botão 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

Também podemos alterar as propriedades da camada. Elas são padrões


que definem a aparência e a função da camada. Para serem acessadas
basta clicar com o botão direito em cima da camada e escolher a opção
Propriedades..., se preferir pelo menu Modificar escolha a opção 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 três opções já estarem na Linha de Tempo
mais acessíveis na forma de botão.

Celta Informática - F: (11) 4331-1586 Página: 30


Flash 5
COLANDO OBJETOS ENTRE CAMADAS

Para fazer cópias de objetos na mesma camada, como já vimos, basta


mover o objeto a ser copiado enquanto pressiona a tecla C t r l , agora
veremos como copiar objetos entre camadas.

Esta opção funciona exatamente como em qualquer outro programa,


primeiro selecione o objeto ou a parte dele que deseja copiar, depois é
só utilizar um dos seguintes métodos: menu Editar > Copiar, clique no
Botão Copiar ( ) da Barra de Ferramentas ou pressionando as teclas
Ctrl+C do teclado.

Para colar o objeto em outra camada, basta selecionar a camada onde a


cópia do objeto será colocada e colar através do menu Editar > Colar,
clique no Botão Colar ( ),ou pressionando as teclas C t r l + V .

Quando você cola um objeto, ele é colocado automaticamente no centro


do Palco, se você quiser que ele apareça nesta nova camada exatamen-
te na mesma posição, escolha a opção 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 três camadas neste arquivo.
3. Na Camada 1 faça uma elipse com 110 pixels de largura por 50 de
altura, com, preenchimento e contorno igual à figura.

4. Na Camada 2 faça um retângulo de 110x150 pixels, com preenchi-


mento e contorno igual a elipse.

Celta Informática - F: (11) 4331-1586 Página: 31


Flash 5

5. Na Camada 3 copie a elipse da camada 1.


6. Na Camada 4 faça faça um coração a partir de quatro retas, de tal
modo que ele caiba dentro do retângulo 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 retângulo, dando mais realismo à peça.

Celta Informática - F: (11) 4331-1586 Página: 32


Flash 5

TRABALHANDO COM OBJETOS

Até o momento nós vimos como desenhar no Flash, agora vamos traba-
lhar com desenhos já feitos no próprio Flash ou em outros programas.

O Flash oferece um espaço que armazena os desenhos, para que possa-


mos utilizá-los várias vezes no mesmo filme ou em vários outros filmes,
este espaço chama-se Biblioteca.

Cada arquivo do Flash tem a sua própria Biblioteca, nela você pode
armazenar textos, sons, objetos gráficos, animações, botões e imagens
bitmap ou vetoriais. Os itens armazenados na biblioteca são chamados
de Símbolos.

A utilizar um Símbolo, estamos na verdade utilizando uma Instância des-


te Símbolo. A Instância representa o Símbolo na animação e quando
existem várias instâncias do mesmo símbolo, o espaço em bytes ocupa-
do no arquivo será do tamanho do Símbolo, independente do número de
instâncias utilizadas.

Instância é como um clone do símbolo, e será alterada sempre que o


Símbolo original sofrer alguma modificação. Os Símbolos são como
um personagem de um filme ou desenho, apesar de aparecer em várias
cenas, ele representa a mesma pessoa.

Celta Informática - F: (11) 4331-1586 Página: 33


Flash 5
Se você quiser que uma Instância transforme-se em um objeto inde-
pendente, basta utilizar a opção Desmembrar do menu Modificar.

Para criar um Símbolo, primeiro selecione o objeto que você deseja


transformar em símbolo, e no menu Inserir >> Converter em Símbolo,
aparecerá uma caixa de Diálogo Propriedades do Símbolo, onde são
definidos o nome do símbolo e o comportamento desejado para ele.

Os símbolos da biblioteca tanto podem ser objetos complexos e anima-


dos como formas simples. Há três tipos de comportamentos de símbolo:
Clipe de Filme, Botão e Gráfico.

Para a Biblioteca ser visualizada, clique no menu Janela >> Biblioteca


ou pressione as teclas C t r l + L . E para abrir o biblioteca de outro arqui-
vo do Flash você utiliza o menu Arquivo >> Abrir como Biblioteca...

Celta Informática - F: (11) 4331-1586 Página: 34


Flash 5
Caso deseje criar diretamente um símbolo ao invés de transformar um
objeto já existente, basta ir no menu Inserir >> Novo Símbolo, definir
um nome e comportamento para este novo símbolo e desenhá-lo na tela
em branco aberta pelo Flash. Para você saber se está no filme principal
ou editando o símbolo, basta olhar no canto superior esquerdo da janela
e observar o nome do símbolo que você está editando, se quiser voltar
para o filme principal basta clicar na Cena que você pretende ir.

Se você clicar com botão direito sobre o nome da símbolo da biblioteca


de símbolos, surgirá várias opções um menu rápido com algumas op-
ções que alteram o símbolo.

O símbolo pode ser renomeado, duplicado, apagado e até atualizado, já


que qualquer desenho colado no Flash, automaticamente se transforma
em um símbolo.

O Flash fornece vários exemplos de Gráfi-


cos, Sons, Clipes de filme e Botões. 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 estão divididos em
pastas que se abrem com o duplo-clique so-
bre elas. Os exemplos de animação ainda vão
ficar estáticos quando você arrastá-los para
o Palco, mais isso será por pouco tempo,
daqui alguns tópicos, já estaremos animan-
do estes e outros exemplos, mais se você
quiser ter uma prévia de como será a anima-
ção ou o som, clique no botão Play que apa-
rece na área de visualização do item.

Celta Informática - F: (11) 4331-1586 Página: 35


Flash 5
IMPORTANDO ARQUIVOS

Até agora só utilizamos o próprio 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 são fiel-
mente traduzidos por ele.

Você pode importar os arquivos no Flash tanto pela área de transferên-


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 C t 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 símbolo 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.

Celta Informática - F: (11) 4331-1586 Página: 36


Flash 5
Se preferir, você pode usar a área de transferência para colar uma ima-
gem vetorial ou bitmap. Pelo menu Editar >> Colar você traz um dese-
nho da área de transferência para o seu trabalho, se preferir use a opção
Colar Especial onde é possível escolher um formato diferente para a
imagem a ser colada.

Os imagens do tipo BITMAP importadas para o Flash podem servir tam-


bém 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ê faça ou pinte com o Balde de Tinta terá com
esse preenchimento.

Exemplo 3 – Verão.fla

1. Altere tamanho do Palco para 600 x 250 pixels.


2. Crie três mais camadas.
3. Dê os seguintes nomes para as camadas: Céu, Mar, Barco e Avião,
sendo que a camada Céu será a camada de fundo seguida pela Ca-
mada Mar.

Celta Informática - F: (11) 4331-1586 Página: 37


Flash 5

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
posição 0,0.
6. Bloqueie a camada Céu.
7. Na camada Mar faça um retângulo de 600 x 50, com preenchimento
em gradiente de azul claro para o escuro sem contorno.
8. Alinhe este retângulo pela base e centro da página.

9. Bloqueie a Camada Mar.


10. Abra o arquivo Barco.fla gravado anteriormente exercício.
11. Selecione todo o barco (Ctrl+A) e converta-o em símbolo (F8) com o
nome barco.
12. Feche o arquivo Barco.fla salvando as alterações.

Celta Informática - F: (11) 4331-1586 Página: 38


Flash 5
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 Avião. E arraste para o palco o clipe de filme
Biplane, através do menu Janela >> Bibliotecas Comuns >> Clipes
de Filmes.
17. Altere o tamanho do avião para 110 x 50.

18. Salve o filme como Verão.fla


Celta Informática - F: (11) 4331-1586 Página: 39
Flash 5
ANIMAÇÃO

O efeito da animação é criado quando um objeto se move ou é modifica-


do ao longo do tempo. No Flash, como num filme tradicional, este efeito
é criado guando são realizadas modificações no objeto quadro a quadro.

As animações em Flash podem ser desenvolvidas de duas maneiras:


animação quadro a quadro e animação interpolada. Na animação qua-
dro a quadro, o conteúdo do palco é modificado em cada quadro do
filme. Na animação intepolada, cria-se o quadro inicial e final e o Flash
se encarrega de criar os quadros intermediários.

QUADROS-CHAVE

A Linha de Tempo além de mostrar a divisão das camadas, exibe tam-


bém a divisão de quadros. Ela representa a seqüência dos quadros da
animação para todas as camadas.

O quadro-chave é o quadro que contém as modificações da animação.


Na animação quadro-a-quadro, todo quadro é um quadro-chave, já na
animação por interpolação estes quadros são colocados em pontos im-
portantes do filme.

Você pode inserir quadros-chave e quadros-chave em branco no seu


filme, para as duas opções 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.
Celta Informática - F: (11) 4331-1586 Página: 40
Flash 5
ANIMAÇÃO QUADRO A QUADRO

A primeiro forma de animação que vamos utilizar é a animação quadro a


quadro, está forma é semelhante ao processo de criação utilizado pelos
desenhos animados, são criadas diversos quadros seqüenciais, que em
alta velocidade, mostram determinada ação.

Vamos iniciar criando uma animação quadro-a-quadro bem simples.

Exemplo 4 – Elástico.fla

1. Vamos fazer um exemplo da utilização 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 elástico e pedra nestas ca-
madas.
2. Na Linha de Tempo, clique com o botão direito sobre o quadro 10 da
camada elástico e escolha a opção Inserir Quadro. Este comando
insere no filme uma série de quadros vazios desde o início.

3. Repare que a Reprodução está sobre o quadro 10, clique com o mouse
sobre ela e mova até o primeiro quadro.

Celta Informática - F: (11) 4331-1586 Página: 41


Flash 5

4. Selecione a ferramenta Linha (N) e faça 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 indicação de final de seqüência, chamada alça, que poderá
ser arrastada para aumentar ou diminuir a quantidade de quadros.

5. Mova a Reprodução com o ponteiro do mouse para a direita e esquer-


da, e repare que nada aconteceu com a linha. Deixe a Reprodução
posicionada no quadro 2.
6. Insira neste quadro um quadro-chave. Clique com o botão direito
sobre e ele e selecione a opção Inserir Quadros-chave.
7. Transforme a linha em um pequeno arco. Agora mova a Reprodução
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 após um quadro-chave são iguais a ele.

Celta Informática - F: (11) 4331-1586 Página: 42


Flash 5

8. Mova a Reprodução para o quadro 3 e pressione F6 par inserir um


quadro-chave, e no palco aumente o arco. Vá para o quadro seguinte
e faça o mesmo até o quadro 10.

9. Mova a Reprodução com as teclas < e > (menor e maior) do teclado.


Para reproduzir automaticamente, pressione a tecla Enter.
10. Salve com o nome de Elástico.fla.

Exemplo 5 – Verão Animado.fla

1. Abra o arquivo Verão.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 botão direito escolha Inserir Quadro.

Celta Informática - F: (11) 4331-1586 Página: 43


Flash 5

3. Selecione a camada Avião e no quadro 3 adicione um quadro-chave e


mude o avião de posição. Adicione mais quadros-chave de dois em
dois até o final e a cada quadro, mude a posição do avião.

4. Faça 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 animação no Flash Player através do menu Arquivo >>
Visualizar Publicação.
6. Note que a hélice do avião está se movendo, isto ocorre porque nós
pegamos o avião da biblioteca de gráficos animados.
7. A avião está passando na frente do barco, isto porque ele está na
camada de primeiro plano, faça o barco ficar na frente. Clique no
nome da camada Barco e arraste para cima.
Celta Informática - F: (11) 4331-1586 Página: 44
Flash 5

8. Salve como Verão Animado.fla.

Papel de Transparência

Utilizando o recurso chamado Papel de Transparência podemos ver os


quadros anteriores e posteriores ao quadro atualmente selecionado como
se estivéssemos utilizando várias folhas transparentes umas sobre as
outras.

Na Linha de Tempo podemos ver três botões que controlam a transpa-


rência. São eles:

Papel de Transparência - Faz com que os quadros próximos ao quadro


ativo aparecem na tela com uma cor mais fraca.
Estruturas Seqüênciais - Mostra somente os contornos das imagens
nos outros quadros.

Celta Informática - F: (11) 4331-1586 Página: 45


Flash 5
Editar Vários Quadros - Permite a edição de vários quadros ao mesmo
tempo.

A quantidade de quadros mostrados antes ou depois, durante o uso do


Papel de Tranparência, depende da posição dos marcadores de trans-
parência. Arraste as alças Iniciar e Terminar para aumentar ou diminuir o
número de quadros exibidos no Papel de Transparência. Todos os qua-
dros que estiverem dentro da faixa definida pelas duas alças serão exibi-
dos e editados ao mesmo tempo caso o botão Editar Vários Quadros
esteja selecionado.

Abra o arquivo Elástico.fla e observe vários quadros ao mesmo tempo


utilizando o Papel de Transparência.

Celta Informática - F: (11) 4331-1586 Página: 46


Flash 5
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 Gráficos e insira no filme a figura do
rato.

3. Desmembre e desagrupe todos os objetos, para permitir a edição dos


olhos e do rabo do rato.
4. Clique com o botão direito sobre o quadro 7 e insira mais quadros.
5. Mova o Reprodução 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 Reprodução.
6. Amplie a região do rabo.

Celta Informática - F: (11) 4331-1586 Página: 47


Flash 5
7. Ative o Papel de Transparência e mova a ponta do rabo, estando no
quadro 2.
8. Mova o Reprodução para o quadro 3 e insira mais um quadro-chave.
9. Mude a posição da ponta do rabo mais uma vez.
10. Continue com o mesmo processo até o quadro 7.

11. Adicione mais quadros ao filme e faça o rabo retornar à posição inicial.
12. Além da animação de movimento, podemos também alterar a cor dos
objetos durante o filme.
13. Vá até o quadro 3, selecione os olhos e mude sua cor. Mude a cor
também no quadro 4, para não gerar uma piscada muito rápida.
14. Salve o filme e visualize a publicação.

ANIMAÇÃO COM INTERPOLAÇÃO

Há duas grandes desvantagens na animação quadro a quadro: ela é


muito trabalhosa e deixa o arquivo grande demais.

O Flash tem uma função que resolve os dois problemas, esta solução é
a Interpolação. Interpolar quer dizer alternar, você fornece apenas os
objetos inicial e final de uma seqüência colocando os objetos em qua-
dros-chave que o Flash completará o caminho do primeiro ao segundo.

Há dois tipos de interpolação: Interpolação de Movimento e Interpolação


de Forma.

No painel Quadro, menu Janela > Painéis > Quadro, na lista Interpol.
escolhemos o tipo de Interpolação utilizada, se de forma, de movimento
ou nenhuma. Este painel pode ser visto também dando-se um clique
com o botão direito no quadro e escolhendo Painéis > Quadros.

Celta Informática - F: (11) 4331-1586 Página: 48


Flash 5

Interpolação de Movimento

Para criar uma interpolação de movimento no filme, clique com o botão


direito em um dos quadros pertencentes a uma seqüência e escolha a
opção Criar Interpolação Movimento, ou via menu Inserir > Criar
Interpolação de Movimento.

Quando uma seqüência de quadros tem interpolação 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.

Celta Informática - F: (11) 4331-1586 Página: 49


Flash 5

Para efetuar alguma mudança na Interpolação de Movimento, basta ir


ao painel Quadro e alterar sua propriedades.

Dim. – Se ativo, a interpolação fará as mudanças nas dimensões do


objeto durante a animação. Desde que no quadro-chave final exista uma
modificação na dimensão do objeto.
Girar – Gira o objeto durante a interpolação no sentido escolhido. A op-
ção Auto gira o objeto uma vez na direção que requer menor movimento.
As opções Sentido Horário e Sentido Anti-horário giram o objeto confor-
me indicado e permitem especificar o número
de rotações.
Atenuação – Ajusta a aceleração e desaceleração do movimento, se o
número for maior que zero, o movimento será mais rápido no início e
lento no final e se for menor que zero, mais lento no começo e rápido no
final.
Orientar à trajetória – Muda a orientação do objeto durante a trajetória
Sincronizar - Certifica se as instâncias do objeto vão se repetir devida-
mente.
Encaixar – Ativa o caminho desenhado para a movimentação do objeto.

Celta Informática - F: (11) 4331-1586 Página: 50


Flash 5

Vamos fazer alguns exemplos utilizando a interpolação de Movimento.

Exemplo 7 – Voando.fla

1. Abra o arquivo Verão.fla.


2. Exclua a camada Barco.
3. Remova todos os quadros-chave selecionando o quadro e através do
menu Inserir > Limpar Quadro-Chave ou pressione Shift+F6. E dei-
xe apenas o quadro inicial do filme.
4. Mova o avião para X = -120 e Y = 20.
5. Insira quadros até a posição 85 em todas camadas.
6. Adicione interpolação de Movimento na camada Avião. Os quadros
ficam pontilhados, mostrando que não houve movimento e a
interpolação está incompleta.
7. Mova o Reprodução para o último quadro e arraste o avião para o
lado direto do palco. Note que ao soltar o botão do mouse, o Flash
cria um quadro-chave na posição 85, informando que houve uma
mudança no objeto.

Celta Informática - F: (11) 4331-1586 Página: 51


Flash 5

8. Visualize a animação e altere a velocidade de quadros por segundo.


9. Vamos modificar o movimento do avião para que ele caia na água.
Primeiro insira um quadro-chave na posição 40.
10. Vá até o quadro 85 e mova o avião para cima da água e gire-o 90o no
sentido horário. Verifique se no painel Quadro a opção Girar = Auto.
11. Mova a camada Mar para cima da camada Avião.
12. Visualize a animação.

13. Salve o exemplo como Voando.fla

Celta Informática - F: (11) 4331-1586 Página: 52


Flash 5
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 círculo de 20x20 na posição
X=20 e Y=20, com um gradiente radial para dar impressão de esfera.
2. Adicione quadros até a posição 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 posição inicial.
6. Teste a animação no seu navegador.
7. Insira mais duas camadas com outras duas esferas, e faça com que
as três fiquem se batendo e rebatendo pelo palco.

8. Salve o arquivo com o nome de Esferas.fla

Celta Informática - F: (11) 4331-1586 Página: 53


Flash 5
Exemplo 9 – Girar.fla

1. Vamos construir um filme com dois objetos girando um dentro do


outro.
2. Inicie construindo um círculo 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 opção Encaixar em Objetos do menu Exibir está
ativa.
5. Selecione a ferramenta Subselecionar (A) e modifique o círculo de tal
forma que as suas tangentes encostem nos vértices do quadrado.

6. Faça um pequeno círculo em uma das “pontas” do círculo modificado.


7. Modifique o retângulo para ficar semelhante a uma oval com cantos
vivos.
8. Acrescente quadros até a posição 30 e crie interpolação de movimen-
to nas duas camadas.

Celta Informática - F: (11) 4331-1586 Página: 54


Flash 5
9. Posicione o Reprodução no quadro 30 e pressione o botão do mouse
sobre o retângulo até que apareça um quadro-chave nesta posição.
Faça o mesmo para o círculo.

10. Abra o painel Quadro e nele defina as rotações para os dois objetos.
Digite também um Rótulo para cada uma das interpolações.

11. Note que o Rótulo das interpolações aparece escrito na Linha de


Tempo.

12. Visualize e salve o filme como Girar.fla.

Celta Informática - F: (11) 4331-1586 Página: 55


Flash 5

Camada Guia

Quando aprendemos sobre camadas, vimos que existe uma camada


chamada Camada Guia. Ela é utilizada para guiar objetos que possuem
interpolação de movimento, guiando-os através de uma rota definida por
linhas desenhadas nesta camada.

No próximo exemplo faremos com que um avião siga um caminho


preestabalecido, utilizando uma camada guia.

Exemplo 10 - Caminho.fla

1. Abra um novo arquivo e insira quadros até a posição 80.


2. Importe da biblioteca o clipe de filme do avião, colocando-o no canto
superior direito do palco e com um tamanho bem pequeno.
3. Clique no botão Adicionar Camada Guia na Linha de Tempo para
adicionar uma camada de terá o desenho do caminho que o avião
percorrerá.

Celta Informática - F: (11) 4331-1586 Página: 56


Flash 5
4. Faça 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 avião neste caminho. Verifique se a opção Encaixar em


Objetos está ativa.
6. Crie uma interpolação de movimento para a camada avião.
7. Vá até a posição 20 e arraste o avião até o final da linha superior.
8. Na posição 40 desloque o avião para o canto inferior esquerdo, de-
pois em 60 no canto inferior direito e na 80 para a posição inicial. Com
o avião sempre encaixado na linha guia.
9. Visualize o filme e repare como o avião se comporta diferente do es-
perado para esse tipo de caminho. Se a opção Orientar à trajetória
do painel Quadro estiver marcada, o avião terá um giro caótico duran-
te seu trajeto porque este comando manda seguir a trajetória, porém
não indica que lado o objeto deve girar.
10. Antes de corrigir a rotação, aumente a curvatura do caminho utilizan-
do a ferramenta Subselecionar.

Celta Informática - F: (11) 4331-1586 Página: 57


Flash 5

11. Verifique se no painel Quadro a opção Girar=Auto.


12. Nos quadros 40 e 60 gire o avião para ficar de cabeça para baixo,
paralelo à rota.
13. Visualize novamente o filme e salve-o como Caminho.fla.

Celta Informática - F: (11) 4331-1586 Página: 58


Flash 5
Exemplo 11 – Bola.fla

1. Abra o filme Elástico.fla.


2. Desenhe uma bola com três cores em sua camada.
3. Adicione mais uma camada e desenhe nela uma espécie de rampa
com a ferramenta caneta e modificando posteriormente.

4. Agora vamos criar o movimento de volta do elástico. Insira quadros


até a posição 15 para todas as camadas.
5. Crie um quadro-chave nesta posição para a camada elástico e modi-
fique o elástico de forma a ficar reto.
6. Acrescente uma interpolação de Forma para este objeto. Observe a
figura.

7. Adicione um quadro-chave na posição 15 para a camada bola.

Celta Informática - F: (11) 4331-1586 Página: 59


Flash 5
8. Insira quadros até a posição 40 para todas as camadas.
9. Crie uma interpolação de movimento para a bola entre as posições 15
e 40.
10. Vá para a posição 25 e movimente a bola até o início da rampa,
criando um quadro-chave nessa posição.

11. Adicione uma camada guia que controle a bola. Crie um quadro-
cheve na posição 25 e desenhe nela uma curva paralela à rampa até
a posição 35. Para eliminar os quadros posteriores ao 35, basta inse-
rir um quadro-chave em branco na posição 36.
12. No quadro 35, mova e gire a bola até o final da rampa.

13. Na posição 40, mova a bola para cima e a partir daí crie um caminho
para a bola retornar ao início.
14. Execute e salve seu filme.

Celta Informática - F: (11) 4331-1586 Página: 60


Flash 5

Interpolação de Forma

Neste tipo de Interpolação você também tem que definir o início e o fim
da animação através de quadros-chave.

Na interpolação de forma você consegue alterar as propriedades dos


objetos, desde que não sejam símbolos e nem estarem agrupados.

Com a interpolação de forma você consegue também dar a impressão


de movimento, como faremos no próximo exemplo.

Dar a impressão de movimento não é a principal característica deste tipo


de animação, e sim transformar um objeto em outro.

Celta Informática - F: (11) 4331-1586 Página: 61


Flash 5
No painel Quadro temos as seguintes opções para a Interpolação de
Forma.

Mistura – Você escolhe Distributiva quando os desenhos inicial e final


são mais suaves e curvados e Angular quando possuem mais cantos e
linhas retas.

Atenuação – Ajusta a aceleração e desaceleração do movimento, se o


número escolhido for maior que zero animação será mais rápida no
início e lenta no final e se for menor que zero, mais lenta no começo e
rápida no final.

Para criar interpolação 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 interpolação Forma.

Os nossos próximos exemplos serão sobre este tipo de interpolação.

Celta Informática - F: (11) 4331-1586 Página: 62


Flash 5
Exemplo 12 – Esfera Pulando.fla

1. Desenhe uma elipse com dimensões 100x50 no quadro 1 de um novo


arquivo, com gradiente radial dando a impressão de esfera e centrali-
zada no topo do palco.
2. No quadro 10 um círculo de 100pixels de diâmetro da mesma cor com
o centro da esfera alterado, e alinhado ao centro da página.
3. No quadro 20 outra elipse igual à primeira, centralizada na base da
página.
4. No quadro 30 um círculo do mesmo tamanho e posição do quadro 10.
5. No quadro 40 uma elipse do mesmo tamanho e posição do quadro 1.
6. Aplique interpolação de forma e visualize a animação.
7. Abaixo vemos uma amostra de toda seqüência com o botão Papel de
Transparência da Linha de Tempo ativo.

Celta Informática - F: (11) 4331-1586 Página: 63


Flash 5
Exemplo 13 – Transformação.fla

1. Em um novo arquivo, importe as figuras mulher1 e mulher2 em qua-


dros-chave diferentes, um após o outro.
2. Alinhe ambas ao centro e na base do palco. Para que possamos ani-
mar estas figuras com interpolação de forma, vamos ter que tornar o
gráfico um desenho editável. Desmembre até que o gráfico se torne
editável, quando então ficará completamente selecionado.
3. Insira um quadros (F5) até o segundo quadro-chave chegar na posi-
ção 30.
4. Aplique interpolação de forma entre estes quadros e visualize a ani-
mação.
5. O uma mulher se transformará em outra.

6. Salve como Mutação.fla.

Exemplo 14 – Fogo.fla

Vamos agora fazer uma animação com interpolação de forma que utiliza
várias camadas:

1. Em um novo arquivo insira duas camadas.

Celta Informática - F: (11) 4331-1586 Página: 64


Flash 5
2. Renomeie a Camada 1 para Chama Grande, a Camada 2 para Cha-
ma Média e a Camada 3 para Chama Pequena.
3. Na camada Chama Grande desenhe uma elipse 100x200, na Média
de 60x200 e na Pequena de 20x200. Todas somente preenchimento.
4. Selecione os três preenchimentos e alinhe-os pelo centro horizontal-
mente e margem inferior.
5. A elipse grande terá a cor amarela, a média 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 página.
7. De 10 em dez quadros vá distorcendo as formas e alternando as cores
entre tons de vermelho e amarelo para que se pareça com uma chama.

8. Anime os quadros com interpolação de forma e visualize a animação.


9. Salve-a como Fogo.fla

Celta Informática - F: (11) 4331-1586 Página: 65


Flash 5
AVANÇANDO NO FLASH

Nós já aprendemos a trabalhar com vários objetos e várias camadas,


agora veremos no Flash, como trabalhar com várias cenas e clipes de
filme e sons.

CENAS

As cenas são como capítulos de um livro, onde podemos juntar várias


animações diferentes em um mesmo filme dividido em cenas.

Os filmes que nós 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 animações, o Flash vai apresentando as cenas após


a outra na mesma ordem em que estão listadas no painel Cena.

Utilize o menu Janela > Painéis > 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. Além deste painel, você poderá
utilizar o menu Inserir > Cena para adicionar uma nova cena diretamen-
te na Linha de Tempo.

Celta Informática - F: (11) 4331-1586 Página: 66


Flash 5
Vamos agora colocar uma cena em uma animação.

Exemplo 15 – Cena.fla

1. Abra o arquivo Caminho.fla


2. Insira uma cena.
3. O Flash adiciona uma cena em branco. Ao invés de montar outra
seqüência, vamos utilizar o arquivo Esferas.fla.
4. Abra este arquivo e selecione todos os quadros.
5. Copie os quadros, no menu Editar existe a opção Copiar Quadros,
se você utilizar simplesmente a opção Copiar, não dará certo.
6. Feche o arquivo Esferas.fla, não necessitando salvar as alterações.
7. Clique no primeiro quadro da Cena 2 ,e cole os quadros copiados
anteriormente utilizando a opção Colar Quadros do menu Editar ou
pelo botão 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 animação.
11. Altere a ordem das cenas arrastando a cena de baixo para cima e
visualize novamente.

Celta Informática - F: (11) 4331-1586 Página: 67


Flash 5
IMPORTANDO SONS

Você pode importar sons através do opção importar do menu arquivo ou


utilizar um dos exemplos da biblioteca de sons. Os sons importados são
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 animação, clique no botão Play


da Biblioteca.

Para inserir um som, primeiro devemos criar uma nova camada e arras-
tar o som desejado para o palco com o Reprodução sobre o quadro
desejado para iniciar sua execução.

Exemplo 16 – Sons.fla

1. Abra o arquivo Esferas.fla.


2. Crie uma nova camada.
3. Na posição 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.
Celta Informática - F: (11) 4331-1586 Página: 68
Flash 5
5. Visualize a animação e salve como Sons.fla.

6. Crie uma nova camada chamada Fundo musical e importe o arquivo


Bridge.wav. Após a importação, 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 animação do Flash em um clipe de filme


para ser utilizado em outros filmes.

O processo é parecido com o que nós 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... Símbolo, atribua um nome para
o seu símbolo e define o comportamento como Clipe de Filme para ele.

Basta colar os quadros copiados nesse novo Clipe.


Celta Informática - F: (11) 4331-1586 Página: 69
Flash 5
Exemplo 17 – Meteoros.fla

1. Abra o arquivo Fogo.fla e copie todos os quadros que formam a cha-


ma a partir das opções Selecionar Tudo e Copiar Quadros do menu
Editar.
2. Crie um novo símbolo (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 edição 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 posição 30 e arraste o clipe Chama para
um ponto antes do início do palco no canto superior esquerdo.
10. Diminua e gire o clipe.

Celta Informática - F: (11) 4331-1586 Página: 70


Flash 5

11. Crie uma interpolação de Movimento na camada Meteoro.


12. Vá para a posição 40 e mova a Chama até encontrar com o avião.
Isto dará a impressão que foi ela quem derrubou o avião.
13. Coloque outros Chamas no filme em uma mesma camada.
14. Agrupe as duas novas Chamas e crie uma interpolação 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

Celta Informática - F: (11) 4331-1586 Página: 71


Flash 5
BOTÕES

É muito fácil criar botões através do Flash, basta criar um novo símbolo
dando a ele um comportamento de botão.

Quando um objeto tem comportamento de botão, ele é dividido em qua-


tro quadros-chave: Normal, Sobre, Pressionado e Área

O quadro Normal mostra como o botão ficará em seu estado normal,


sem ser clicado nem apontado; o quadro Sobre é o formato do botão
quando o ponteiro do mouse estiver sobre ele; o quadro Pressionado é
a forma que o botão vai adquirir quando for clicado, e o quadro Área
indica a área ativa do botão.

Os botões que são criado no Flash podem ser completamente animados.

Primeiro veremos a criação e um botão simples, logo após um botão


animado.

Exemplo 18 – Botões.fla

1. Em um novo arquivo, crie um novo símbolo com o nome de “Botão


Simples” e comportamento de botão.
2. No quadro Normal, crie um um botão a partir de dois círculos e um
retângulo, alinhado no centro do palco.
3. Para indicarmos em que formato está o botão, digite a palavra “Nor-
mal” com fonte Arial Black tamanho 30 em uma outra camada.

Celta Informática - F: (11) 4331-1586 Página: 72


Flash 5
4. Pronto está feito o estado normal do botão.
5. Selecione a posição Sobre e insira um quadro-chave para copiar o
contorno do botão.
6. Na camada Texto insira também um quadro-chave e digite a palavra
“Sobre”.
7. Altere as cores do quadrado e da letra.
8. O estado Sobre do botão está feito.

9. Repita o mesmo processo para os estados Pressionado e Área.

10. Se você preferir uma melhor impressão de botão, pinte as linhas de


cima e da esquerda do quadrado no estado Sobre de cinza claro e
faça a mesma coisa com a linha debaixo e da direita do estado Pres-
sionado.
11. Volte para a edição do filme e arraste o Botão Simples da biblioteca
para o palco.
12. Visualize a animação e repare que o botão muda para o estado So-
bre somente quando o ponteiro está sobre ele.
13. Aumente as dimensões do contorno da posição Área e observe na
visualização, que o botão muda para o estado Sobre assim que o
ponteiro atinge sua área ativa.
14. Repita os passos anteriores e mude o contorno do botão para cada
um dos estados.

15. Salve o arquivo como Botões.fla

Celta Informática - F: (11) 4331-1586 Página: 73


Flash 5
16. Experimente inserir clipe de filme em cada um dos estados do botão.

INTERATIVIDADE

Normalmente o Flash reproduz as animações seguindo a seqüência de


quadros e cenas do filme. Nos filmes interativos esta seqüência é “que-
brada” pelas ações do usuário, que usa o teclado ou o mouse para deter-
minar qual parte do filme será executada, inserir informações ou mover
objetos e outras operações interativas.

Um filme interativo é criado quando se usa Ações. Ação é um conjunto


de instruções escritos no ActionScript e executadas quando ocorrer al-
gum evento específico.
Um evento pode ocorrer quando o usuário clica em um botão ou o filme
atinge um determinado ponto durante a execução.

As ações são configuradas no painel Ações no Modo Normal. Neste


curso veremos como inserir ações sem a necessidade de escrever li-
nhas de código em ActionScript, utilizando apenas as opções listadas no
painel Ações.

Celta Informática - F: (11) 4331-1586 Página: 74


Flash 5

As ações podem ser definidas para um quadro, um botão ou um clipe de


filme. Quando selecionamos um destes elementos, o painel Ações é ati-
vado, alterando seu título para Ações do Quadro ou Ações do Objeto
conforme o que for selecionado.

Quando um quadro possuir uma ação ele será marcado com uma pe-
quena letra a na Linha de Tempo.

Celta Informática - F: (11) 4331-1586 Página: 75


Flash 5
Exemplo 19 – Ações.fla

1. Monte um novo arquivo como no exemplo abaixo, criando um cami-


nho para o círculo se movimentar sobre ele num intervalo de trinta
quadros.

2. Insira um botão oval a partir da biblioteca. Edite o botão. Adicione


mais uma camada e escreva o texto “Esferas” nela.

Celta Informática - F: (11) 4331-1586 Página: 76


Flash 5
3. Na biblioteca, clique com o botão direito sobre o nome do botão e
escolha a opção Duplicar. É necessário duplicar este botão para po-
dermos alterar o que está escrito nele e criarmos outra instância.
4. Arraste a cópia para o palco e muda o texto dela para “Girar”.

5. Crie outro botão com o texto “Voando”.


6. Insira três 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 Ações.fla e visualize a animação. Repare que o
Flash exibe uma cena após a outra sem nenhum controle. Nos próxi-
mos passos criaremos ações que irão controlar a exibição deste filme.
8. Vá para o último quadro da primeira cena e insira um quadro-chave.
9. Abra o painel Ações do Quadro e dê um clique-duplo na Ação Básica
Go To, para associá-la ao quadro. Esta ação direciona o fluxo de
execução 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.

Celta Informática - F: (11) 4331-1586 Página: 77


Flash 5

10. Insira em todas as outras cenas a mesma ação feita anteriormente


no último quadro de cada uma delas.
11. Na cena principal, selecione o um botão, dê um clique-duplo na Ação
Básica Go To e na propriedade Cena digite o nome da cena perten-
cente a ele.

Celta Informática - F: (11) 4331-1586 Página: 78


Flash 5
12. Faça o mesmo para outros dois botões. Na lista de ações notamos
que antes da ação goto temos o evento que ira disparar esta ação,
que no caso é on (release), ou seja quando o botão do mouse for
solto. Selecione este evento e observe no campo de parâmetros todos
os eventos possíveis de serem escolhidos para executar esta ação.
13. Visualize a animação e note que ao entrar em uma das cenas, não
é possível mais sair. Vamos corrigir este problema inserindo em cada
cena, um botão que volte para a cena principal.
14. Insira dois botões em cada cena. Um botão com a ação GoTo,
Cena principal e Quadro 1. E o outro com a ação Stop.

15. Salve e visualize seu filme.

Celta Informática - F: (11) 4331-1586 Página: 79


Flash 5
PUBLICANDO

Para definir como seu filme será publicado você deve ir ao menu Arqui-
vo > Configurações de Publicação..., surge uma caixa de dialogo com
três guias: Formatos, Flash e HTML.

Celta Informática - F: (11) 4331-1586 Página: 80


Flash 5

Nesta caixa de diálogo você escolhe todos as definições para o seu filme.

Agora é só publicar o filme pela opção Publicar do menu Arquivo, ou


pelas teclas < S h i f t > + < F 1 2 > .

Com o arquivo publicado basta abrir através de seu navegador, ou se


preferir você poderá pressionar a tecla < F 1 2 > q u e a animação será
atualizada e visualizada ao mesmo tempo, automaticamente.

Celta Informática - F: (11) 4331-1586 Página: 81


Flash 5
EXERCÍCIOS

1. Crie uma transformação envolvendo dois gráficos biblioteca de gráfi-


cos. Salvando o arquivo como Metamorfose.fla.
2. Crie um animação em que o avião 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 semáforo alternando entre o verde, amarelo e vermelho. Salve
como Semáfaro.fla
5. Crie um animação onde o dia comece ensolarado, e transforma-se
em uma noite com o céu estrelado e lua cheia. Salve como Dia
Perfeito.fla
6. Desenhe um carro que atravessa o palco com as rodas girando. Se
for possível, importe um carro de algum Clip-Art.
7. No palco do exercício anterior terão dois botões, 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 animação onde um avião decole, dê algumas voltas e de-
pois pouse, o avião pode ser de qualquer Clip-Art, ou do própria bibli-
oteca do Flash. Não esquecendo que o objeto tem que ser vetorial.
9. Crie uma animação com a frase “VAMOS DETONAR COM O FLASH”,
utilize o máximo de recursos possíveis para esta animação. Salve
como detonar.fla.
10. Duplique a Clipe de Filme do avião biplano e personalize, colocando
um piloto na cabine que pode ser uma foto sua escaneada ou um
Clip-Art de sua escolha.

Celta Informática - F: (11) 4331-1586 Página: 82


Flash 5
11. Faça uma animação com este clipe. Salve como Meu avião.fla.
12. Crie a animação de um foguete ou avião a jato utilizando o Clipe da
Chama para sair da turbina adicione um som de jato se possível.
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 é possível fazer muitas animações com esse programa.
15. Procure por sites que utilizem o Flash e tente repetir as animações
encontradas.

Celta Informática - F: (11) 4331-1586 Página: 83


Celta Informática
http://www.celtainformatica.com.br

Você também pode gostar