Você está na página 1de 74

Todos direitos reservados.

Proibida a reproduo,
mesmo parcial, por qualquer
processo mecnico,
eletrnico, reprogrfico, etc.

FLASH 4
BSICO E AVANADO I

Rua dos Otoni, 881/9 andar - Funcionrios


PABX/FAX : (31) 3273-2822
CEP 30150-270 - Belo Horizonte - MG

FLASH 4
SUMRIO
SUMRIO................................................................................................................................................................................... 1
SHOCKWAVE FLASH .................................................................................................................................................................. 1
MENUS ...................................................................................................................................................................................... 3
BARRA DE FERRAMENTAS ......................................................................................................................................................... 4
CAIXA DE FERRAMENTAS .................................................................................................................................................... 4
FERRAMENTA LPIS ............................................................................................................................................................... 4
FERRAMENTA NANQUIM .......................................................................................................................................................... 5
FERRAMENTA BALDE DE TINTA .............................................................................................................................................. 6
FERRAMENTA SETA ................................................................................................................................................................ 6
PALETA DE CORES...................................................................................................................................................................... 9
FERRAMENTA LAO ............................................................................................................................................................. 13
FERRAMENTA BORRACHA .................................................................................................................................................... 14
FERRAMENTA TEXTO .............................................................................................................................................................. 15
FERRAMENTAS CONTAS GOTAS ............................................................................................................................................. 16
LENTE DE AUMENTO ............................................................................................................................................................. 16
FERRAMENTA MO ............................................................................................................................................................... 16
UNGROUP E BREAK APART ..................................................................................................................................................... 18
AMBIENTE DE DESENVOLVIMENTO .......................................................................................................................................... 20
TIMELINE (LINHA DO TEMPO).............................................................................................................................................. 20
MARCADORES DE ONION SKIN ................................................................................................................................................ 22
MENU DE FRAMES ................................................................................................................................................................... 22
CONSTRUINDO UMA ANIMAO .............................................................................................................................................. 23
ANIMAO QUADRO A QUADRO ............................................................................................................................................. 23
ANIMAO COM TWEENING .................................................................................................................................................... 24
CRIANDO UM TWEENING MOTION ........................................................................................................................................... 24
ACELERAO E DESACELERAO ........................................................................................................................................... 25
ROTAO ................................................................................................................................................................................ 26
CRIANDO UM TWEENING MOTION GUIDE................................................................................................................................ 26
CRIANDO UM TWEENING SHAPE .............................................................................................................................................. 28
TWEENING SHAPE COM AUXLIO DO SHAPE HINT .................................................................................................................. 29
GRAPHICS OU IMAGENS........................................................................................................................................................... 34
MOVIE CLIPS ........................................................................................................................................................................... 34
BUTTON OU BOTO ................................................................................................................................................................. 34
CRIANDO E EDITANDO SMBOLOS ............................................................................................................................................ 34
CRIANDO UM GRAPHIC............................................................................................................................................................ 34
INSTANCE PROPERTIES ............................................................................................................................................................ 36
CRIANDO UM MOVIE CLIP ........................................................................................................................................................ 37
CRIANDO UM BUTTON ............................................................................................................................................................. 38
AES EM BOTES .................................................................................................................................................................. 41
COMANDOS DO FLASH ............................................................................................................................................................. 42
TELL TARGET ........................................................................................................................................................................... 43
LOAD/UNLOAD MOVIE ............................................................................................................................................................. 43
STOP ........................................................................................................................................................................................ 45
PLAY ....................................................................................................................................................................................... 45
GO TO ...................................................................................................................................................................................... 46
GET URL .................................................................................................................................................................................. 49
FS COMMAND .......................................................................................................................................................................... 50
AES EM SCENES .................................................................................................................................................................. 51
ESCOLHENDO O MELHOR FORMATO......................................................................................................................................... 53
QUALIDADE ............................................................................................................................................................................. 53

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

FLASH 4
TRANSPARNCIA ..................................................................................................................................................................... 53
VETORIZAO ......................................................................................................................................................................... 53
ANIMAO BITMAP.................................................................................................................................................................. 54
PINTANDO COM BITMAPS ......................................................................................................................................................... 54
ESCOLHENDO O MELHOR FORMATO ......................................................................................................................................... 54
TABELA DE QUALIDADE SONORA ............................................................................................................................................. 55
EXEMPLO DA BOLA PICANDO COM EFEITO SONORO ................................................................................................................. 57
COMPACTAO DO SOM .......................................................................................................................................................... 58
TIPOS DE COMPRESSO ........................................................................................................................................................... 58
GUIA FLASH ............................................................................................................................................................................ 63
GUIA HTML ............................................................................................................................................................................. 64

SRC ........................................................................................................................................................................................ 67
MOVIE..................................................................................................................................................................................... 67
CLASSID .................................................................................................................................................................................. 67
WIDTH .................................................................................................................................................................................. 67
HEIGHT ................................................................................................................................................................................... 67
CODEBASE .............................................................................................................................................................................. 67
PLUGINSPAGE.......................................................................................................................................................................... 68
SWLIVECONNECT* .................................................................................................................................................................. 68
PLAY* ..................................................................................................................................................................................... 68
LOOP* ..................................................................................................................................................................................... 68
QUALITY* ............................................................................................................................................................................... 68
BGCOLOR*........................................................................................................................................................................... 69
SCALE* ................................................................................................................................................................................... 69
SALIGN* ............................................................................................................................................................................... 69
BASE* ..................................................................................................................................................................................... 69
MENU*.................................................................................................................................................................................... 70
WMODE*................................................................................................................................................................................. 70

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

FLASH 4
INTRODUO
Surge uma nova e poderosa ferramenta para multimdia na Web com uma interface simples.
A nica que permite a criao de portflios digitais, cartoons, pginas Web, apresentaes, ilustraes e
muito mais.
O Future Splash foi inventado pela Future Wave Technologies, empresa comprada pela
Macromedia no incio de 1997. Recebe ento o nome de Flash e ao mesmo so adicionados recursos de
multimdia, possibilidade de trabalho com udio sincronizado, alm de botes interativos e muito mais.
O Flash um programa completo de multimdia desenvolvido para Web, mas que possibilita
tambm a criao de ilustraes para diversos usos e apresentaes multimdia para mono usurio.
Designers que j trabalham com Photoshop, que j conhecem conceitos como layers (Camadas) e overlays
(Objetos) se sentiro totalmente a vontade bastando agora animar suas imagens.
As animaes so compostas por uma srie de quadros, chamados no Flash de frames, que
se sucedem a uma velocidade constante dando a impresso de animao e quando associados a efeitos
sonoros temos uma apresentao multimdia completa.
Ele trabalha com imagens e animaes vetoriais, ou seja, as formas, cor e preenchimento
so definidos por equaes matemticas, podendo ser redimensionadas sem nenhuma perda de qualidade.
Permite ainda importar vrios formatos de imagens, vetorizar automaticamente, desmembrar por cor,
editar, criar efeitos de transparncia e muito mais.
Quando um computador abre uma animao em Flash ele processa uma srie de clculos
para construir a imagem. Um arquivo contendo uma srie de informaes matemticas muito menor do
que um arquivo de Bitmap que contem todas as informaes de uma figura, pixel a pixel. Alm disto o Flash
compacta udio e Bitmap muito bem. O nico ponto desfavorvel neste caso que computadores com baixa
capacidade de processamento podem no rodar animaes complexas em Flash muito bem.
Alm disto pode importar arquivos de som nos formatos .WAV (Windows) e .AIFF
(Macintosh), e permite fade-in, fade-out, troca de canais e outros efeitos que podem ser editados no prprio
programa.
Desenhar no Flash muito simples, pois ele apresenta as ferramentas bsicas de pintura e
desenho, facilitando bastante o trabalho. possvel desenhar linhas e formas de cores, espessuras e tipos
variveis, usar vrios tipos de preenchimentos com gradientes e bitmaps, podendo variar a iluminao e
modificar o foco e ainda usar preenchimentos slidos.
Permite a criao de botes e aes para os mesmos em diferentes momentos como quando
o mouse passa sobre o mesmo, no momento do clique, quando clicamos e arrastamos e vrias outras, sem
o uso dos Applets Java. Da mesma forma que as aes em botes, o programa permite definir aes para os
frames. Assim podemos fazer a animao parar quando chega a determinado frame, carregar um URL ao
passar por um determinado frame, e muito mais.

SHOCKWAVE FLASH
O Shockwave Flash gerado pelo Flash e a sada multimdia para ferramentas internet,
extremamente compacto. O recurso de streaming potencializa seu desempenho, permitindo que uma
animao possa ser vista e baixada ao mesmo tempo.
Para entender como as coisas acontecem, o Flash uma ferramenta de para criar animaes
vetoriais. O Flash gera uma arquivo .FLA que contem toda informao de uma animao em seu formato
normal, ou seja, sem nenhuma compactao. Em seguida, ele deve ser exportado para .swf, formato
compactado que reconhecido pela internet e funciona atravs de um plugin que tem 170Kb e

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 1

FLASH 4
baixado em poucos minutos, tambm chamado Shockwave. Por isso, ao clicarmos com o boto direito do
mouse sobre uma animao em Flash vemos um item do menu falando About Shockwave Flash ,
ou seja sobre o plugin Shockave Flash. O processo de exportao extremamente simples e ser detalhado
posteriormente.
S para dar uma idia de como o Shockwave Flash compacto, um gif animado com 10
frames (quadros), ocupando a janela do Browser, tem o mesmo tamanho que um Shockwave Flash Full
Screen que ocupar a janela inteira com mais de 10 frames, alm de botes interativos, som etc.
O Shockwave Flash s pode ser vistos em windows e macintosh, mas para contornar esta
limitao, a Macromedia desenvolveu uma Applet Java que emula o plugin e faz o Flash funcionar em
qualquer Browser que d suporte a Java.
Como a aplicao mais difundida do Flash tem sido a criao de Shockwave (botes,
banners, mensagens dinmicas, cartoons) vale a pena ressaltar trs vantagens do Shockwave full screen:
1.

Toda a diagramao da pgina, incluindo textos e figuras, fica empacotados dentro de


um arquivo Shockwave Flash, o que assegura seu direito autoral.

2.

Em qualquer resoluo de vdeo o Shockwave em tela cheia apresenta a mesma


diagramao e proporo.

3.

Permite a utilizao de qualquer fonte sem a preocupao do fato do visitante da pgina


ter ou no a mesma instalada em seu micro.

CONHECENDO A FERRAMENTA
O Flash uma ferramenta de autoria bem simples e fcil de usar, ela dividida basicamente
em oito reas distintas:

3
4

5
6
1

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 2

FLASH 4
1.

rea de trabalho (stage) esta rea onde so feitos os desenhos em Flash,


funciona como uma tela de pintura. No exemplo, vemos a tela do quatro 1 da
primeira cena.

2.

Linha do tempo (Timeline) conhecer e saber utilizar a linha do tempo, o grande


segredo para fazer uma animao ou uma apresentao em Flash. Usando os recursos
da linha do tempo possvel criar e visualizar aes importantes para uma animao.

3.

Menu principal o menu principal do Flash ser detalhado mais adiante. Atravs do
menu ou hot keys possvel executar quase todo trabalho no Flash.

4.

Barra de ferramentas As barras de ferramentas superiores funcionam como um


atalho das principais funes do Flash.

5.

Caixa de ferramentas todas as ferramentas de desenho do Flash esto na caixa de


ferramentas e sero detalhadas mais adiante na apostila.

6.

Modificadores das ferramentas Para cada ferramenta selecionada na caixa de


ferramentas, um conjunto de modificadores diferentes exibido aqui.

7.

Camadas (layers) Flash permite que voc trabalhe com uma srie de camadas em
uma nica cena, facilitando a edio e criao de elementos grficos.

8.

Cenas Os marcadores aqui indicados representa as diversas cenas que voc pode
criar usando o Flash.

MENUS
Menu File (Arquivo) - O Menu arquivo contem os comandos usados para criar, abrir e
salvar animaes em Flash, ilustraes, sons e Bitmap
O Menu Edit (Editar) - O Menu editar contem os comandos que permitem alterar formas,
objetos ou cenas em uma animao
Menu View (Visualizar) - O menu visualizar controla como as cenas sero mostradas, e
quais partes do ambiente de edio sero mostradas. O Submenu goto determina especificamente qual cena
ser editada.
Menu Insert (Inserir) - O Menu inserir adiciona itens na biblioteca (library), camadas
(layers) na cena corrente, quadros (frames) para camadas e cenas, e as animaes. Alguns itens do meu
inserir esto disponveis nos menus pop up de modificao de layers e de modificao de frames na linha
do tempo.
Menu Modify (Modificar) - O menu modificar contem comandos que alteram todos os
objetos, cenas, e animaes. Este tem seis submenus: Style, que permite configurar a fonte; Kerning, que
afeta o espao entre caracteres digitados; Transform, que afeta a posio, rotao e tamanho de objetos e
formas; Arrange, que modifica a posio de objetos e smbolos em um Layer; Curves, que altera o contorno
das formas selecionadas e por fim Frames que permite organiza os frames.
Menu Control (Controle) - O Menu controle determina como a animao ir funcionar e
interagir com o usurio. Este menu funciona somente no arquivo em edio e no afeta as definies
quando exportado para Shockwave.
Menu Libraries (Biblioteca) - O Menu Libraries permite acesso aos arquivos de biblioteca
que esto no sub-diretrio Libraries.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 3

FLASH 4
Flash.

Menu Window (Janela) - O menu window permite abrir e organizar as vrias janelas do

Menu Help (Ajuda) - O Menu help d acesso a todas as formas de ajuda possveis, para se
trabalhar com o Flash.

BARRA DE FERRAMENTAS
As ferramentas da barra de ferramentas funcionam como um atalho para as principais
funes do menu do Flash.
Aciona ou
Rotacionar, alterar
desliga o
snap

Suavizar o
contorno

CAIXA DE FERRAMENTAS

tamanho e alinhar
objetos e figuras

Angular o
contorno

Ajuste do
nvel do zoom

A caixa de ferramentas do Flash possui quatorze ferramentas que permitem toda edio
grfica necessria ao desenho e diagramao da rea de trabalho. Cada ferramenta ser melhor explorada
adiante, quando falarmos de desenho.
Seta

Lao

Reta

Texto

Oval
Lpis
Nanquim
Conta
Mo

Retngulo
Pincel
Balde de Tinta
Borracha
Lupa

Para desenhar, editorar e editar figuras no Flash indispensvel saber utilizar bem as
ferramentas da caixa de ferramentas.

FERRAMENTA LPIS
A ferramenta lpis permite traar linhas de contorno de diversas formas. Quando ela
selecionada, surge a barra de modificadores abaixo, onde podemos escolher o formato do lpis, a cor da
linha, sua espessura e estilo.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 4

FLASH 4
1 FORMATO DO LPIS
2 Cor da linha
3 Espessura da linha
4 Estilo da linha

Ao clicarmos no formato do lpis (pencil mode), um menu com opes de modificadores aparece, conforme
abaixo. O desenho que aparece nesse boto mostra o modificador que est selecionado no momento.

1.

Straighten: permite traar linhas retas ou ngulos.

2.

Smooth: permite traar linhas arredondadas ou suavizadas.

3.

Ink: permite traar linhas livremente e apesar de aplicar um leve arredondamento


quando voc solta o mouse, ele menor do que o do smooth.

FERRAMENTA NANQUIM
A Ferramenta Nanquim permite modificar as linhas, sua cor e espessura. Quando ela
selecionada, surge a seguinte barra de ferramentas com seus modificadores:

1 Cor da linha
2 Espessura da linha
3 Estilo da linha

1.

Line Color (cor da linha): abre a paleta de cores, permitindo escolher a cor desejada
para a linha.

2.

Line Width (espessura da linha): abre um menu com opes de espessura da linha e
ainda personalizar uma diferente das disponveis.

3.

Line Style (estilo da linha): abre um menu com opes de estilo da linha e ainda
permite personalizar um estilo diferente dos disponveis.

Para utilizar a ferramenta nanquim, voc deve selecion-la, escolher os modificadores e


clicar na linha que deseja alterar. Observe que ao clicar no nanquim, o ponteiro do mouse passa a ser o
desenho de um frasco de tinta.
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 5

FLASH 4
FERRAMENTA BALDE DE TINTA
A ferramenta Balde de Tinta permite pintar reas fechadas do seu desenho. Quando
selecionada surge uma barra de ferramentas com seus modificadores, conforme figura a seguir:
1 Cor de preenchimento
2 Tamanho do vo

3 Trava de
Preenchimento

4 Transformao de
Preencimento

Para pintar uma figura, faa o desenho, clique na ferramenta balde, escolha o modificador
que deseja utilizar e clique no interior da figura.
1.

Fill Color (cor do preenchimento): abre a paleta de cores (falaremos dela mais
tarde), permitindo escolher a cor desejada para o preenchimento.

2.

Gap Size (tamanho do vo): abre um menu com opes de controle de tolerncia a
aberturas em objetos fechados, permitindo assim que uma figura com uma pequena
abertura seja pintada.

Dont Close Gaps: no permite pintar o interior de


figuras se as mesmas tiverem qualquer abertura, por
menor que seja.
Close Small Gaps: permite pintar o interior de
figuras com aberturas muito pequenas
Close Medium Gaps: permite pintar o interior de
figuras com aberturas mdias
Close Large Gaps: permite pintar o interior de
figuras com aberturas um pouco maiores.

3.

Lock Fill (trava de preenchimento): Trava a aplicao de cores de efeito gradiente


(degrad), fazendo com que, quando acionado, as figuras pintadas com o mesmo
gradiente se comportem com se fossem uma s, dando assim uma continuidade no
preenchimento.

4.

Transform Fill (transformao do gradiente): Permite modificar o tamanho, girar


ou distorcer o gradiente.

FERRAMENTA SETA
A ferramenta seta usada para selecionar elementos objetos, moldar e mover. O cursor
muda para indicar a operao que a ferramenta seta pode efetuar em linhas e preenchimentos dos
desenhos.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 6

FLASH 4
Uma das maneiras de selecionar com a ferramenta seta dar um clique sobre o objeto
desejado e o mesmo ficar selecionado. Por padro, se voc desejar selecionar mais de um objeto, deve
clicar no primeiro, manter a tecla Shift pressionada e ento clicar no segundo. Mas isso pode ser alterado,
voc pode configurar o Flash para que aps a seleo de um objeto, voc precise apenas clicar no prximo
para que ele tambm fique selecionado, dispensando o uso da tecla Shift. Para isso, clique no menu File/
Preferences e desmarque a opo Shift Select.
Quando a ferramenta seta est selecionada, cinco modificadores so apresentados.
1 -Im

2 - Suave
3 - Rotacionar

4 - Aresta
5 - Escala

1.

Magnet (im): liga e desliga o recurso de encaixe que faz com que as operaes de
mover, redimensionar e girar sejam feitas aos saltos. E ainda permite definir um
crculo ou um quadrado perfeito.

2.

Smooth (suave): permite suavizar curvas irregulares.

3.

Rotate (rotacionar):permite girar ou distorcer o elemento selecionado na tela.

4.

Straighten (aresta): produz efeito contrrio ao smooth, ou seja, corrige a linha


selecionada, transformando curvas em ngulos e linhas retas.

5.

Scale (escala): permite redimensionar o objeto selecionado, bastando arrastar uma


das alas criadas em torno do objeto.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 7

FLASH 4
Ao selecionar a ferramenta seta, o cursor indicar o seu estado, permitindo moldar a
extremidade de uma aresta, uma curva ou linha ou mover o objeto. Veja em seguida os formatos da
ferramenta seta e o que possvel fazer com cada formato:
Moldar a extremidade de uma
aresta:
Clique na borda do quadrado e
arraste para a direita. Observe
que o smbolo junto a seta do
mouse forma um ngulo reto.

Moldar uma curva ou linha:


Clique no centro do quadrado e
arraste para a direita. Observe
que o smbolo junto a seta do
mouse forma um arco.

Selecionar um ou mais objetos:


Clique fora do primeiro objeto

Voc pode moldar uma linha esticando-a a partir de suas extremidades, curvas ou arestas:

Exemplo1: Mova o cursor at


o ponto final da linha e arrastea na posio vertical.

Exemplo2: Arraste o centro da


linha para mold-la como uma
curva.

Exemplo3: molde a aresta de


uma caixa como ao lado.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 8

FLASH 4
OBSERVAO

O modificador im, quando acionado, controla a quebra e a conexo das linhas


durante a modelagem.

No possvel moldar uma linha caso a mesma esteja selecionada.

Mudando o tamanho, girando, esticando ou inclinando um elemento grfico com a


ferramenta seta:
1.

Escolha a ferramenta seta e selecione um objeto. Uma moldura aparecer em volta do


objeto, indicando que ele um grupo selecionado.

2.

Clique no modificador de escala. Oito alas retangulares aparecero na moldura. Arraste


um dos cantos para aumentar o diminuir o objeto. Arraste as alas do meio para esticar,
encolher, alargar ou estreitar o objeto.

3.

Com o objeto selecionado, clique no modificador de rotao. Oito alas circulares


aparecero na moldura. Arraste as alas dos cantos para rodar o objeto, ou as alas
intermedirias para inclin-lo.

Usando o reconhecimento de formato com a ferramenta Seta. Pressione vrias vezes o boto
modificador de aresta sobre um polgono desenhando a mo para torn-lo um polgono perfeito. Pressione
vrias vezes o boto modificador de suavizao e suaviza curvas desenhadas a mo.

PALETA DE CORES
A paleta de cores, presente em muitas ferramentas de desenho, apresenta cores slidas,
gradiente definido e criao de novos, alm de criao de graus variados de transparncia.
As cores dessa paleta no sero distorcidas na maioria das telas e no sofrero modificaes
nos navegadores Web. Para exibir a paleta de cores, basta clicar no cone Fill Color ou Line Color, que se
encontra na barra de modificadores para as ferramentas de desenho que permitem modificao de cores.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 9

FLASH 4

Clique no cone
para exibir a
paleta de cores

Ao clicar no boto
, localizado na parte superior da paleta de cores, ser aberta a
caixa de dilogo Color, onde podemos selecionar a guia Solid ou Gradient.

figura a seguir:

Ao clicar na guia Solid, temos a possibilidade de configuraes de cores slidas, conforme

2
3

4
5
6
7

1.

Opes de cores slidas: permite selecionar a cor slida que deseja alterar ou aplicar.

2.

Exemplo: permite visualizar a cor selecionada.

3.

Intensidade: exibe e permite alterar a intensidade da cor escolhida e que est sendo
visualizada no exemplo.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 10

FLASH 4

figura a seguir:

4.

Transparncia (Alpha): permite controlar a porcentagem de transparncia da cor.

5.

Snap to Web Safe: garante que todas as cores criadas sero para Web, ou seja, no
apresentaro problemas nos mais diversos tipos de configuraes.

6.

Menu: abre um menu suspenso de opes que permite:

Add Colors: adiciona nova paleta de cores.

Replace Colors: substitui paleta de cores.

Load Default Colors: volta a carregar a paleta de cores padro (original) do Flash.

Save Colors: salva as alteraes feitas na paleta atual.

Save as default: salva a paleta atual, com todas as alteraes como paleta default do
Flash.

Clear Colors: limpa todas as cores, menos o preto e o branco.

Web 216: chama a paleta web safe com 216 cores.

Sort by Color: classifica por cores.

7.

Nova cor (New): permite criar uma nova cor com as alteraes feitas.

8.

Delete: permite deletar a cor selecionada.

9.

Change: permite modificar a cor selecionada de acordo com as alteraes feitas.

Ao clicar na guia Gradient, temos a possibilidade de configuraes de degrad, conforme

1.

Opes disponveis de degrad: permite selecionar o degrad que deseja alterar ou


aplicar.

2.

Tipos de degrad: permite selecionar o degrad radial ou linear.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 11

FLASH 4
EDITANDO DEGRAD
Editando um degrad radial:
1.

Desenhe um quadrado com preenchimento interno da cor desejada, em degrad radial.

2.

Selecione o Balde de Tinta e ative o Transform Fill (Editar de Preenchimento)

3.

Clique no quadrado. Quatro alas aparecero no crculo de marcao do degrad: Uma


ala central, uma ala de distoro, uma ala de redimensionamento e uma ala de
rotao.

4.

Arraste a ala central para mover a parte mais brilhante do degrad.

5.

Arraste as alas de rotao, distoro e redimensionamento para girar, distorcer e


alterar o tamanho do degrad.

Ala central: altera o ponto


central
Ala de Distoro: altera a
largura

Ala de Redimensionamento:
expande efeito

Editando um degrad linear:

Ala central:
central.

Ala de
efeito

Rotao:

gira

1.

Desenhe uma esfera com preenchimento interno da cor desejada em degrad linear.

2.

Selecione o Balde de Tinta e ative o Transform Fill (Editar Preenchimento)

3.

Clique na esfera desenhada. Trs alas aparecero: uma ala de rotao, uma de
distoro e uma ala central.

4.

Arraste a ala central para mover o centro do degrad.

5.

Arraste as alas de rotao e distoro para girar, distorcer e alterar o tamanho do


degrad.

altera

ponto

Ala de
efeito.

Rotao:

gira

Ala de Distoro: altera a


largura.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 12

FLASH 4
FERRAMENTA LAO
Esta mais uma ferramenta de seleo do Flash. Com o lao voc pode efetuar selees
mo livre nos seus desenhos, independente do seu formato original ou segmentos de reta. Voc pode
apagar, alterar o tamanho, rodar, mover e moldar a rea selecionada. O lao pode ser usado para selecionar
rea de Bitmap desmembrados (Break appart) e de desenhos em Flash.

Para selecionar reas com linhas retas, basta selecionar a ferramenta


(Polygon Mode),
clicar no primeiro ponto, soltar o clique do mouse, arrastar, clicar no segundo ponto da seleo e assim por
diante, at fechar a rea de seleo.

FERRAMENTA PINCEL
A ferramenta pincel usada para pintar com pinceladas como um pincel de verdade, ou
preencher rea com efeitos de pincel. O Pincel combina recurso das ferramentas lpis e lata de tinta e
possui alguns modificadores de extrema importncia. Quando selecionado, surge a seguinte barra de
ferramentas:
1-Modo do Pincel
2- Cor do Pincel
3-Tamanho
4-Formato
5-Lock Fill

1.

Estilo do Pincel: abre um menu que permite escolher o comportamento do pincel.

2.

Cor: abre a paleta de cores, permitindo escolher a cor que ser aplicada ao pincel.

3.

Tamanho: permite escolher o tamanho da ponta do pincel.

4.

Formato: permite escolher o formato da ponta do pincel.

5.

Trava de gradiente: permite que quando ativado, todas as formas pintadas com efeito
gradiente apresentem um gradiente contnuo.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 13

FLASH 4
MODIFICADORES DA FERRAMENTA PINCEL

1.

Paint Normal: pinta normalmente, encobrindo o que estiver desenhado na tela.

2.

Paint Fills: pinta somente sobre cores que no tenham sido criadas pelo lpis ou
modificadas pela ferramenta nanquim.

3.

Paint Behind: pinta somente por trs das cores, ou seja, pinta somente reas da tela
que estiverem vazias.

4.

Paint Selection: pinta somente reas previamente selecionadas e sobre cores que no
tenham sido criadas pelo lpis ou modificadas pelo nanquim.

5.

Paint Inside: Pinta somente na rea em que a pintura foi iniciada, ou seja, se voc
comear a pitar da tela para o objeto, ele no pintar o objeto, mas se voc comear a
pintar de dentro do objeto em direo a tela, ele pintar somente o objeto e no afetar
a tela.

FERRAMENTA BORRACHA
A ferramenta Borracha permite apagar linhas e preenchimentos. Ao selecionar a ferramenta
borracha, surge a seguinte barra de modificadores:

1-Modo da borracha

3-Torneira

2-Formato

1.

Erase Mode (Modo de apagar): abre um menu suspenso que permite escolher o
comportamento da borracha.

2.

Erase Shape (Forma da Borracha): permite escolher o formato da ponta da


borracha.

3.

Faucet (Torneira): apaga reas de preenchimento fechadas ou linhas. Bastando para


isso dar um clique sobre a rea que deseja apagar.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 14

FLASH 4
MODIFICADORES DA FERRAMENTA BORRACHA

1.

Erase Normal: apaga normalmente o que estiver desenhado na tela.

2.

Erase Fills: Apaga somente sobre cores que no tenham sido criadas pelo lpis ou
modificadas pela ferramenta nanquim.

3.

EraseLines: Apaga somente linhas, deixando as cores que foram feitas com a lata de
tinta ou pincel.

4.

Paint Selected Fills: Apaga somente reas previamente selecionadas e sobre cores
que no tenham sido criadas pelo lpis ou modificadas pelo nanquim.

5.

Erase Inside: Apaga somente na rea em que voc iniciou a ao, ou seja, se voc
comear a apagar da tela para o objeto, no apagar o objeto, mas se voc comear a
apagar de dentro do objeto em direo a tela, apagar somente o objeto e no afetar a
tela.

FERRAMENTA TEXTO
A Ferramenta Texto permite digitar blocos de texto no Flash. Existem dois tipos de blocos de
texto, os de largura indefinida e os de largura fixa.
Para digitar um texto num bloco de texto de largura indefinida, basta selecionar a
ferramenta texto, clicar na rea da tela e digitar o texto onde o cursor estiver piscando.
Para digitar um texto de largura fixa, basta selecionar a ferramenta texto e em seguida clicar
sobre a tela, manter o clique do mouse pressionado e arrastar de maneira a dimensionar a largura desejada.
Quando voc seleciona a ferramenta de texto, surge a barra a seguir:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 15

FLASH 4
1-Fonte
2-Tamanho da Fonte
3-Cor da Fonte
4-Negrito
6-Alinhamento

5-Itlico
7-Pargrafo

8-Campo editvel

1.

Font: permite escolher a fonte que deseja utilizar;

2.

Font Size: permite aumentar ou diminuir a fonte;

3.

Text Color: Abre a paleta de cores e permite que voc escolha a cor que deseja usar no
seu texto;

4.

Bold: Liga e desliga a ferramenta Negrito;

5.

Italic: Liga e desliga a ferramenta Itlico;

6.

Alignment: Abre o menu com quatro opes de alinhamento (Left esquerda; Center
centralizado; Right direita; Justify justificado;

7.

Paragraph: Abre a caixa de Propriedades de Pargrafo, permitindo definir margens


esquerda e direita, recuo e espaamento entre linhas;

8.

Text Field: Permite criar campos editveis de texto para formulrios. Basta ativar a
ferramenta Text Field e clicar sobre um objeto de texto para transform-lo em um
campo editvel.

FERRAMENTAS CONTAS GOTAS


A Ferramenta Conta Gotas permite capturar informaes de cores de um desenho.
Para usar o conta-gotas, selecione a ferramenta, clique sobre o objeto que possui a cor
desejada e em seguida clique sobre o objeto que deseja colorir.

LENTE DE AUMENTO
A Ferramenta Lente de Aumento amplia ou reduz um objeto, possibilitando assim que voc
aproxime seus objetos para uma edio mais precisa ou afaste-os para uma viso geral.

FERRAMENTA MO
A Ferramenta Mo permite que voc movimente a tela com maior preciso, sem a
necessidade de usar as barras de rolagem.
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 16

FLASH 4
Para utiliz-la, basta clicar na ferramenta, em seguida na tela e arrastar.

ALINHAMENTO DOS ELEMENTOS


Para alinhar os elementos no Flash, necessrio selecion-los previamente, em seguida,
clique em Modify / Align ou clique no boto

Surgir a seguinte tela:

Alinhamentos
Ajuste de espaamento

Ajuste de tamanho

Alinha e redimensiona de
acordo com a largura e/ou
altura da tela.

GRUPOS
Quando desenhamos dois objetos no Flash e movemos um, posicionando em cima do outro,
tiramos a seleo e tentamos mover um objeto, se os dois forem da mesma cor, tero sido soldados e se
forem de cores diferentes, o objeto que est por cima ter cortado o objeto de baixo. Veja a figura:

Objetos de mesma
cor foram soldados

Objetos de cor
diferente, o de baixo foi
cortado

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 17

FLASH 4
Caso esse no seja o efeito desejado, ou seja, para que possamos mover os objetos
livremente na tela, necessrio agrup-los. Podemos agrupar individualmente ou um conjunto de objetos.
Para isso, basta selecionar o(s) objeto(s) que deseja agrupar e clicar no Menu Modify / Group.
Quando os objetos esto agrupados, cada um ocupa seu prprio nvel, no interagindo assim
uns com os outros como no caso anterior, em que no estavam agrupados.
Para editar elementos agrupados necessrio dar um duplo clique sobre o grupo e ento
editar cada elemento. Repare que nesse momento voc s pode editar elementos daquele grupo e quando
terminar, deve dar um duplo clique fora o grupo para desmarc-lo e poder voltar a trabalhar normalmente.
Aps agrupar os objetos voc pode alinh-los, distribu-los, uns em relao aos outros e
posteriormente poder desagrup-los, caso queira trat-los individualmente. Bata para isso selecionar o
grupo e clicar no Menu Modify / Ungroup.

UNGROUP E BREAK APART


Podemos separar elementos agrupados ou blocos de texto. No caso de cores ou texturas e
textos, devemos utilizar selecionar o elemento e clicar no Menu Modify / Break Apart. J no caso de
elementos agrupados, devemos clicar em Modify / Ungroup para que os elementos sejam transformados
em desenhos independentes. Para mudar a cor de um elemento e deform-lo necessrio antes separ-lo.
Veja o exemplo abaixo, onde digitamos um texto, depois separamos o bloco de texto,
alteramos as cores e deformamos as letras. Seria impossvel conseguir esse efeito sem o recurso Break
Apart:

DISPOSIO E ORGANIZAO DOS OBJETOS


Os objetos no Flash so dispostos em nveis diferentes. Cada objeto criado fica um nvel
acima do anteriormente criado. Sendo assim se voc precisar desenhar um crculo dentro de um quadrado
que por sua vez est dentro de uma esfera, caso no tenha desenhado primeiro a esfera, depois o quadrado
e por ltimo o crculo, um ir sobrepor o outro, respeitando apenas a ordem em que foram desenhados.
Nesses casos torna-se necessrio agrupar individualmente os objetos para podermos
posteriormente organiz-los. Na figura a seguir os objetos foram construdos na seguinte ordem: Crculo,
Elipse e Quadrado. Sendo assim eles se encontram nos nveis 1, 2 e 3 respectivamente.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 18

FLASH 4

Podemos alterar a ordem dos nveis, bastando para isso selecionar um dos objetos e clicar
no menu Modify / Arrange. No submenu que surge, temos as seguintes opes:
1.

Bring to Front: posiciona o elemento selecionado no ltimo nvel, fazendo com que ele
fique acima de todos. No nosso caso, posicionaria no nvel 3.

2.

Move Ahead: posiciona o elemento selecionado um nvel acima daquele em que ele se
encontra.

3.

Move Behind: posiciona o elemento selecionado um nvel abaixo daquele em que ele se
encontra.

4.

Send to Back: posiciona o elemento selecionado no primeiro nvel, no nosso caso no


nvel 1.

5.

Lock: trava o objeto na posio em que ele se encontra, impedindo assim que ele seja
selecionado ou movido. Assim voc poder movimentar livremente os outros objetos
sem afetar o que est travado.

6.

Unlock All: destrava todos os objetos travados com o lock.

Veja a figura, aps termos ordenados os nveis dos objetos:

No nosso caso foi necessrio apenas selecionar o crculo e clicar no Modify / Arrange /
Bring to Front.

ANIMAO
A animao no Flash feita mudando o contedo da tela, numa sucesso de quadros,
criando uma iluso de movimento. As mudanas so feitas a cada novo quadro da sequncia.
Existem dois tipos de animao no Flash: quadro a quadro e Tweening e voc pode usar
qualquer combinao desses dois tipos. A animao quadro a quadro criada manualmente, a cada quadro
da animao voc implementa as modificaes necessrias. J na animao Tweening, voc precisa criar o
primeiro e o ltimo quadro e o computador calcula os quadros intermedirios.
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 19

FLASH 4
Cada quadro que contm objetos, para o Flash chamado de Keyframe (quadro chave) e
esses quadros ficam localizados na Time Line. Antes de comear a desenvolver um projeto no Flash,
importante conhecer e entender melhor ser ambiente de desenvolvimento.

AMBIENTE DE DESENVOLVIMENTO
seguir:

A janela de desenvolvimento do Flash dividida em duas partes principais, conforme figura a

rea de
trabalho

Tela

rea de
trabalho

1.

Time Line, ou Linha do Tempo: atravs de suas ferramentas que fazemos todo o
trabalho de animao do filme.

2.

Tela: o local onde voc ir fazer todos os seus desenhos. Repare que essa rea
dividida em duas partes. O retngulo branco a sua tela, onde sero colocados os
desenhos que aparecero no filme e as laterais cinza, esquerda e direita da tela, a
rea de trabalho, que funciona como uma mesa onde voc coloca os elementos durante
o desenvolvimento do filme. importante ressaltar que os objetos colocados na rea de
trabalho no aparecero no filme.

TIMELINE (LINHA DO TEMPO)


A Timeline o controle principal na criao de animaes. nela que voc vai definir toda a
ao do filme do Flash.
Ela composta por uma diviso de quadros e camadas. Cada quadro deve ser entendido
como um momento do filme, e sua durao de frao de segundo, definida pela velocidade do filme. As
camadas funcionam como diversas folhas de acetato, onde cada uma contm uma animao. a utilizao
de vrias camadas sobrepostas que possibilita a criao de efeitos visuais bastante ricos. Posteriormente
estudaremos com mais detalhes as camadas do Flash.
Veja a seguir a figura que mostra a Time Line e seus itens mais importantes:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 20

FLASH 4
1

5
6

7
8
9

10
11

12

19

13

18

14

17

15

16

1.

Show all layers as outline: mostra apenas o contorno dos objetos das layers.

2.

Lock/Unlock all layers: trava ou destrava as layers.

3.

Show/Hide all layers: exibe ou esconde o contedo das layers.

4.

KeyFrame: quadro chave, que contm algum desenho ou objeto.

5.

Frame: quadro. Local onde pode ser inserido um desenho ou objeto. Se voc desejar
que o objeto inserido em um KeyFrame seja visualizado nos prximos quadros, basta
inserir frames.

6.

Blank Key Frame: quadro em branco. Se voc inserir um Blank Key Frame aps um
KeyFrame, o contedo do primeiro no ser visto no segundo.

7.

Rgua: identifica a posio de cada quadro.

8.

Time line: a linha do tempo propriamente dita, da Layer1.

9.

Layer2: camada de nome Layer2, que identifica a Time Line. Um duplo clique no nome
da camada, permite renome-la.

10. Add Layer: adiciona uma nova camada.


11. Add Layer Guide: adiciona uma linha guia acima da camada selecionada.
12. Current Layer: identifica a camada corrente; a que est selecionada.
13. Delete Layer: apaga a layer corrente.
14. Center Frame: centraliza o Frame.
15. Onion Skin: liga ou desliga a visualizao sombreada dos quadros anteriores.
16. Onion Skin Out Lines: liga ou desliga a visualizao do contorno dos quadros
anteriores.
17. Edit Multiple Frames: liga ou desliga a edio de quadros anteriores.
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 21

FLASH 4
18. Modify Onion Makers: abre um menu de opes, onde possvel modificar as
configuraes de visualizao dos Onion Skin.
19. Frames por segundo: indicador de velocidade do filme. Um duplo clique abre a janela
Movie Properties, onde voc pode configuras as propriedades do filme.

MARCADORES DE ONION SKIN


O modo Onion Skin mostra mltiplos frames da animao ao mesmo tempo na tela.
Auxiliando a saber qual a posio que o objeto estava no frame anterior ou posterior para posicion-lo
adequadamente no frame atual Os marcadores de Onion Skin delimitam a quantidade de frames exibidas
quando o modo onion skin ativado.
Para alterar o nmero de frames anteriores e posteriores exibidos no Onion Skin, basta clicar
no boto Modify Onion Markers e escolher Always Show Markers. Em seguida arrastar a marcao que
fica na seta para a direita ou esquerda. Veja a figura a seguir:
Arraste para a esquerda
ou direita

MENU DE FRAMES
As opes do menu de Frames se aplicam ao frame realado, ou a todos os frames que
estejam selecionados. s clicar com o boto direito do mouse em cima do frame selecionado para abri-lo.
Veja a figura a seguir:

1.

Properties: abre a janela Frame Properties.

2.

Create Motion Tween: aps selecionar um intervalo consecutivo de quadros, basta


clicar nessa opo para criar uma animao utilizando o Motion.

3.

Insert Frame: Insere um quadro logo aps o quadro selecionado.

4.

Delete Frame: apaga o quadro selecionado.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 22

FLASH 4
5.

Insert KeyFrame: insere um quadro com o mesmo contedo do quadro anterior.

6.

Insert Blank KeyFrame: insere um quadro em branco.

7.

Clear KeyFrame: apaga o objeto que est no quadro sem deletar o quadro.

8.

Select All: seleciona todos os quadros consecutivos do layer selecionado.

9.

Copy Frames: copia os frames selecionados.

10. Paste Frames: cola os frames anteriormente copiados.


11. Reveres Frames: inverte a ordem dos frames selecionados.
12. Sinchronize Symbols: sincroniza os smbolos.

CONSTRUINDO UMA ANIMAO


Quando voc clica em File / New, o Flash abre um filme com um layer e um frame. Para
comear uma animao, voc insere os frames que precisar. possvel adicionar ou subtrair frames sempre
que necessrio, portanto voc no precisa saber o tamanho total da animao antes de come-la.

ANIMAO QUADRO A QUADRO


Para construir a sua primeira animao quadro a quadro, siga os passos abaixo:

selecionado.

1.

Abra um novo arquivo e selecione a ferramenta crculo. Em seguida, clique na tela,


mantenha o clique pressionado e arraste fazendo um crculo. Observe se a ferramenta
m est selecionada, assim poder fazer um crculo perfeito.

2.

Selecione os frames de 2 a 15 do layer corrente, clique como boto direito do mouse


sobre a seleo e marque a opo Insert KeyFrame. O crculo ser copiado em todos
os frames.

3.

Clique no frame2 e arraste o crculo um pouco para cima e para o lado direito. Faa isso
em at o frame 7. Para facilitar o trabalho acione o boto Onion Skin ou Onion Skin
Outline.

4.

A partir do frame 8 comece a fazer o movimento decrescente do crculo.

5.

Agora selecione o frame 1 e pressione a tecla enter para visualizar o movimento.

Veja na figura a seguir o efeito do movimento quadro a quadro com o Onion Skin

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 23

FLASH 4

ANIMAO COM TWEENING


O tweening calcula automaticamente o movimento, dimenso, rotao e mudanas de cores
entre dois KeyFrames. Ele cria uma imagem para cada quadro baseado na opo de tweening que voc
escolher.
Nesse tipo de animao, voc s precisa definir o primeiro e o ltimo frame de uma
sequncia de frames.
Existem dois tipos bsicos de Tweening:

Motion: tweening de movimento.

Shape: tweening de formas.

O Tweening de movimento produz o movimento de um objeto em direo ao outro, no


alterando gradualmente sua forma. Se os dois objetos forem diferentes ele vai do primeiro em direo ao
segundo mantendo a forma do primeiro objeto e s assume a forma do segundo quando atingir o frame que
o contm.
O Tweening de formas produz a transformao de um objeto em outro. Esse efeito
conhecido como morphing. Na transformao um objeto vai assumindo gradativamente as cores, forma,
tamanho e posio do outro objeto.
No Tweening de movimentos, o Motion, os objetos devem estar individualmente agrupados.

CRIANDO UM TWEENING MOTION


Voc pode fazer o desenho de um crculo que sai da base da tela, vai at o alto e depois
volta ao local de origem. Dando a sensao de uma bola jogada para o alto e depois caindo.
1.

No Frame 1 faa o desenho de uma esfera.

2.

Selecione o Frame 20 com o boto direito do mouse e clique sobre a opo Insert
Frame.

3.

Selecione o Frame1, nele selecione o objeto. Clique com o boto direito do mouse sobre
o frame e escolha a opo Create Motion Tween. Surgir uma linha tracejada

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 24

FLASH 4
na time line, entre os frames 1 e 20, indicando que o tweening est incompleto,
conforme a figura:

4.

Clique no frame 20 e com a seta do mouse arraste o crculo at o alto da tela. Assim
que voc soltar o mouse o Flash transformar a linha pontilhada em uma seta, o
elemento ser agrupado e o frame 20 ser agora um KeyFrame.

5.

Faa o mesmo do frame 20 para o frame 40, porm movendo o objeto no ltimo frame
para a base da tela. Nesse momento voc ir perceber que a etapa 3 no ser mais
necessria.

6.

Selecione o frame 1 e pressione a tecla enter para ver o movimento que acabou de
criar. Veja a figura do movimento com o Onion Skin Outlines selecionado:

ACELERAO E DESACELERAO
Na animao da bola, ela fez o movimento mantendo a mesma velocidade em todos os
pontos, mas numa situao real, a bola perde velocidade na subida e ganha velocidade na descida.
Para desacelerar o movimento na subida e acelerar na descida, clique com o boto direito do
mouse no frame1 e selecione a opo Properties, do menu suspenso. Na caixa de dilogo Frame
Properties, clique na guia Tweening e leve o controle Easing para a posio out.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 25

FLASH 4

Em seguida faa o mesmo no frame 20, porm levando o controle para a posio in. O
movimento de desacelerao na subida e acelerao na descida est pronto. Para v-lo, basta pressionar a
tecla enter.

ROTAO
O Tweening tambm pode fazer um movimento de rotao do objeto. Voc pode utilizar o
exemplo da esfera, mas para perceber o efeito, mude a cor para gradiente radial, de maneira que o foco no
fique no centro. Lembre-se de fazer isso nos frames 1, 20 e 40. Como a esfera um smbolo, necessrio
primeiro desagrup-la. Para desagrupar um objeto, selecione-o, clique em Modify / Break Apart. Em
seguida altere a cor e clique em Modify / Group para agrup-lo novamente.
Depois de alterar a cor das trs esferas, clique com o boto direito do mouse sobre o frame
1 e selecione a opo Properties. Clique na guia Tweening e na opo Rotate, onde est none, selecione
Clockwise (movimento de rotao no sentido horrio) ou Counterclockwise (movimento de rotao no
sentido anti horrio). Na caixa Times voc dever definir o nmero de giros que o elemento deve dar no
percurso. Comece com 2, por exemplo. Em seguida faa o movimento de rotao para o frame 20, selecione
o frame 1 e pressione enter para testar.

CRIANDO UM TWEENING MOTION GUIDE


Os movimentos vistos at agora so uniformes, mas possvel tambm definir uma
trajetria irregular no Flash e depois fazer com que o objeto siga essa trajetria. o que o Flash chama de
Motion Guide ou Linha Guia.
Para definir um movimento com trajetria irregular necessrio definir uma animao e o
percurso desejado para a animao.
1.

Desenhe novamente uma esfera no frame1 e agrupe-a.

2.

Em seguida selecione os frames 20 e com o boto direito do mouse escolha a opo


Insert KeyFrame, arraste o objeto para a posio final.

3.

Clique com o boto direito do mouse sobre o Frame 1 e escolha a opo Properties, na
guia Tweening, na caixa Tweening selecione a opo Motion.

4.

Agora clique sobre o nome da layer com o boto direito do mouse e escolha a opo
Add Motion Guide, ou clique no menu Insert e escolha a opo Motion Guide e o
Flash criar uma nova layer, acima da layer selecionada. O cone antes do nome da
layer indica que ela uma layer de guia de trajeto Para que seu trabalho fique mais
organizado, vamos renomear a layer 1. Bastar dar um duplo clique sobre o nome da

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 26

FLASH 4
layer, digitar por exemplo o nome esfera e teclar enter. Repare a que automaticamente
a layer guide foi renomeada.
5.

Selecione a ferramenta lpis com a opo Ink para o trao, clique no Frame 1 da layer
Guide Esfera e faa uma linha curva. Trave esta camada

6.

Selecione o Frame 1 da layer 1, posicione o centro da esfera no incio da linha e o centro


da esfera do Frame 20 no final da linha. Caso a ferramenta m no esteja ativa, ser
necessrio selecion-la para auxili-lo a posicionar a esfera. Agora execute a animao.

OBSERVAO

Voc pode executar a animao com a tecla Enter ou Ctrl + Enter. No segundo caso
ser aberta uma nova janela somente com o movimento e o mesmo ser repetindo
infinitas vezes, at que voc feche essa janela (pode acionar as teclas Alt + F4 para
fechar a janela).

Para que o objeto percorra exatamente todas as curvas, d um clique duplo no Frame
1 da layer onde est criado o motion, ser aberta a tela das propriedades do Frame,
na guia Tweening marque a opo Orient to path direction.

Veja a figura a seguir:

A linha guia no aparece quando voc executa o projeto atravs do Ctrl + Enter, mas voc
pode escond-la tambm na tela. Para isso basta clicar no ponto da coluna olho na camada Guide Esfera.
Veja na figura a seguir:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 27

FLASH 4

CRIANDO UM TWEENING SHAPE


O Tweening Shape gera uma alterao animada de imagens, semelhante ao morphing, mas
s pode ser feita em objetos desagrupados e que estejam na mesma camada. Para fazer um shape, siga os
passos:
1.

Desenhe uma imagem no centro esquerdo da tela e no frame 1 do primeiro layer. Por
exemplo, um quadrado.

2.

Clique no frame 20 com o boto direito do mouse e selecione a opo Insert Key
Frame, para copiar a imagem do frame 1 para o 20.

3.

No frame 20, arraste o quadrado para o centro direito da tela, tire a seleo e deforme
o quadrado. Conforme a figura a seguir:

4.

D um duplo clique sobre o KeyFrame 1 e ser aberta a caixa de dilogo Frame


Properties. Selecione a guia Tweening e no menu suspenso Tweening, marque a
opo Shape e em Blend Type, selecione Distributive.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 28

FLASH 4
As formas intermedirias ficam
mais suaves e irregulares.
Determina a
acelerao da
animao.

Mantm os cantos e linhas retas


nas formas intermedirias. Mais
adequado para
com muitos
cantos e linhas retas.

5. Agora execute a animao, voc perceber que o quadrado est se transformando


gradativamente no outro objeto. Veja o resultado na figura a seguir com o Onion Skin
selecionado. Experimente mudar a cor de uma das formas e execute novamente.

TWEENING SHAPE COM AUXLIO DO SHAPE HINT


O Shape hint uma guia que pode ser acrescentada imagem para orientar a transio. Ele
se torna necessrio quando a transio no perfeita. Veja nas figuras a seguir 3 etapas da transio do
nmero 1 para o nmero 2. Repare que a transio onde utilizamos o Shape hint foi mais suave.

Shape
sem hint

Shape
com hint

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 29

FLASH 4
Como fazer a animao anterior utilizando o Shape hint:
1.

Usando a ferramenta texto, selecione a Fonte Times New Roman com tamanho 72 e
digite o nmero 1 no frame1.

2.

Insira um KeyFrame no frame 20 e ainda com a ferramenta texto clique na caixa de


texto, delete o nmero 1 e digite o nmero 2.

3.

Com a ferramenta seta, arraste o dois para a direita.

4.

Como no possvel fazer uma transio de formas em blocos de texto, ser necessrio
desagrup-lo. Selecione o texto do frame 20, e marque no menu Modify a opo Break
Apart (ou utilize as teclas de atalho Ctrl +B). Repita o procedimento para o nmero 1
que se encontra no frame 1.

5.

D um duplo clique no frame 1 e selecione a guia Tweening e na caixa Tweening


escolha a opo Shape.

6.

Ainda no frame 1 selecione no menu Modify / Transform a opo Add Shape Hint.

7.

Surge um crculo com a letra a, mova-o para a parte superior do 1, conforme a


figura.

8.

Clique novamente em Modify / Transform / Add Shape Hint. Agora mova o crculo
com a letra b para inferior do 1, conforme a figura.

9.

Clique no frame 20 e l j existem os crculos com as mesmas letras. Mova cada letra
para o local correspondente (veja a figura) e execute a animao.

LAYERS OU CAMADAS
Como dissemos anteriormente, cada camada no Flash funciona como uma folha de acetato e
contm um filme. Com a utilizao de vrias camadas possvel produzir efeitos fantsticos. Ao iniciar um
novo filme no Flash, temos apenas uma Layer e um Frame, mas voc pode criar quantos Layers precisar e o
que for criado ou editado em uma camada, no afeta os elementos das outras.
A ordem das Layers altera o resultado final da apresentao, visto que os objetos da
primeira camada aparecem em primeiro plano, os da segunda camada em segundo plano e assim por
diante.
Organizando o filme em Layers voc facilitar o trabalho futuro de alteraes ou ampliaes,
pois torna-se mais fcil entender a estrutura e localizar os elementos.
Sempre que criamos uma nova camada, ela inserida acima da camada selecionada, mas
para alterar sua ordem basta clicar no nome da camada, manter o clique pressionado e arrastar para onde
desejar.

1
2
3

importante que as camadas recebam nomes, para facilitar o trabalho. De acordo com a
figura anterior, algumas importantes ferramentas das camadas:
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 30

FLASH 4
1.

Camadas: nome das camadas.

2.

Add Guide Layer: adiciona uma camada de linha guia.

3.

Add Layer: adiciona uma camada acima da selecionada.

4.

Delete Layer: apaga a camada selecionada.

Voc j utilizou mais de uma camada quando trabalhou com a linha guia, para fazer com que
a esfera seguisse um caminho irregular. Mas naquele momento ainda no sabia o que na realidade uma
camada. Vamos entender melhor esse conceito agora, usando um exemplo. Imagina que voc queira fazer a
seguinte animao:
Uma esfera surge rolando na tela, da esquerda para a direita e por trs dela uma barra cai
do alto da tela. Quando a esfera atingir o meio da barra, deve estar exatamente acima dela, a barra deve
parar e a esfera continua rolando, at atingir o final da barra, onde ento ir parar.
Para fazer essa animao precisaremos de duas camadas. Faa primeiro o movimento da
esfera na camada que est na tela. Lembre de dar um nome para a camada, por exemplo, Esfera. Esse
movimento voc j sabe fazer, mas vamos relembrar os passos:
1.

No frame 1 desenhe uma esfera no centro esquerdo da tela com preenchimento radial e
mude o foco que est no centro para o canto esquerdo. Agrupe-a.

2.

Insira um KeyFrame no Frame 25. Arraste a esfera para o centro direito da tela.

3.

D um clique duplo no Frame 1 e na guia Tweening escolha a opo Motion. Na opo


Rotate escolha Clockwise com Time = 2. Clique em OK.

Agora vamos fazer o movimento da barra:


1.

Insira uma nova camada e d o nome barra.

2.

No frame 1 da camada barra, desenhe uma barra da cor que desejar e posicione-a
acima da tela. Agrupe-a.

3.

Insira um KeyFrame no Frame 10 e mova a barra do frame 10 de maneira que ela


fique logo abaixo da esfera.

4.

D um clique duplo no Frame 1 e na guia Tweening escolha a opo Motion. Clique


em OK.

5.

Execute a animao e voc ir perceber que a barra est passando por cima da esfera.
Isso porque ela est numa camada acima. Mova ento a camada da esfera para cima e
execute novamente.

Veja a figura a seguir com as principais etapas do movimento:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 31

FLASH 4

MASK LAYER OU MSCARA


A mscara uma camada especial do Flash que encobre o contedo da camada inferior.
Objetos como retngulos, elipses, ou qualquer outra forma desenhada na camada mscara funciona como
furos na mscara e atravs deles que vamos visualizar a camada inferior. Podemos tambm ter vrias
camadas sob uma mscara, possibilitando assim efeitos mais complexos. Alm disso, na camada mscara
podemos usar qualquer tipo de animao, exceto tweening com motion guide.
Como no efeito Motion Guide, a mscara precisa de no mnimo dois layers. Um que vai
funcionar como mscara e outro que conter o objeto.
Vamos construir uma mscara de forma elptica para o texto Curso de Flash 4.0.
Camada Texto:
1.

Abra um novo arquivo do Flash e com a ferramenta Texto digite Curso de Flash 4.0.
Escolha uma fonte que lhe agrade, mude a cor para vermelho e aumente o tamanho.

2.

Com a ferramenta seta, selecione o texto e redimensione de maneira que ele ocupe toda
a largura da tela.

3.

Coloque um fundo preto e d o nome texto camada (Modify / Movie).

Camada Mscara:
1.

Insira uma camada, que deve ficar acima da camada texto e d o nome de mscara.

2.

Faa uma elipse no centro esquerdo do frame1 dessa camada, agrupe-a. Insira um
KeyFrame no Frame 30 e mova a elipse para o centro direito da tela.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 32

FLASH 4
3.

Agora clique com o boto direito do mouse sobre a camada e selecione a opo Mask.

4.

Para o movimento ficar completo, volte camada texto, clique com o boto direito do
mouse sobre o Frame 30 e escolha a opo Insert Frame.

5.

Execute a animao.

Veja nas figuras abaixo os frames 1 e 30 com as duas camadas:

Veja nas figuras a seguir o efeito da mscara. Repare que a elipse se transformou num
buraco, permitindo visualizar o texto a medida que o movimento feito:

SMBOLOS
Os smbolos do Flash so objetos que podem ser armazenados em uma biblioteca e
utilizados vrias vezes em um mesmo filme ou exportados para outros filmes. Eles so criados utilizando os
mesmos recursos do filme que vnhamos utilizando at agora.
A grande vantagem de trabalhar com smbolos que quando ele inserido no filme, na
verdade inserida uma Instncia, uma cpia do smbolo. Essas instncias aparecem como elementos
independentes, mas ficam todas ligadas ao smbolo principal, ou mestre. Isso significa que toda alterao
feita no smbolo mestre afeta as instncias, mas voc pode modificar as propriedades das instncias que
isso no afetar o smbolo mestre. O melhor de tudo que por ser uma instncia, independente da
quantidade delas que voc utiliza no filme, internamente o Flash armazena apenas uma cpia do filme
mestre, o que significa uma grande economia de memria, principalmente quando voc utiliza essa instncia
vrias vezes em um mesmo filme.
Toda vez que for utilizar um elemento mais de uma vez em um filme, voc deve optar por
utilizar os smbolos.
Cada smbolo tem sua prpria linha do tempo, o que significa que quando voc edita um
smbolo o palco e a linha do tempo se modificam e o que v especfico para o smbolo que est sendo
editado. como se voc tivesse aberto um novo arquivo, que s contm o smbolo. Mesmo assim, alguns
parmetros do filme podem ser editados diretamente no palco.
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 33

FLASH 4
Existem trs tipos de smbolos no Flash e no momento da criao voc deve em primeiro
lugar decidir qual deles vai criar. Aps a criao de um smbolo possvel alterar seu tipo.

GRAPHICS OU IMAGENS
So smbolos que contm elementos estticos ou uma sequncia de imagens com animaes
ligadas linha do tempo. Ou seja, o filme principal dever conter a mesma linha do tempo que o smbolo.
Esse tipo de smbolo no aceita som nem controles interativos.

MOVIE CLIPS
So pequenos trechos de animao independentes da linha do tempo do filme principal.
Significa que o filme principal no precisa conter a mesma linha do tempo que o smbolo. Ele funcionar
perfeitamente no frame em que for inserido. Podem conter som, controles interativos e instncias de outros
Movie Clips. Podem tambm ser utilizados na criao de botes, para dar animao aos mesmos. Funcionam
como mini filmes.

BUTTON OU BOTO
So elementos que respondem a cliques do mouse, passagem do ponteiro do mouse sobre
eles, acionando uma ao dentro do filme. So os botes de ao. Podemos criar botes de ao para
chamar outro filme, uma nova cena, parar um movie clip, dentre diversas outras aes.

CRIANDO E EDITANDO SMBOLOS


Dependendo do smbolo que voc pretende criar, o processo pode ser um pouco diferente,
mas todos eles, mais cedo ou mais tarde acabam chegando janela Symbol Properties. Para abrir essa
janela voc deve clicar no menu Insert / New Symbol ou Insert / Convert to Symbol e nela deve
escolher o nome e o tipo do smbolo. Graphic, Button ou Movie Clip. Veja a figura a seguir da janela Sumbol
Properties:

Digite o nome
do smbolo

Selecione o tipo
do smbolo

CRIANDO UM GRAPHIC
Um graphic um smbolo simples, primeiramente vamos criar um graphic contendo uma
imagem esttica:
1.

Abra um novo arquivo e desenhe uma esfera no frame1 do layer existente.

2.

Selecione a esfera e clique no menu Insert / Convert to Symbol ou pressione a tecla


F8.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 34

FLASH 4
3.

D o nome de crculo para o smbolo e marque a opo Graphic. Depois clique em OK.
Nesse momento o Flash armazena o smbolo automaticamente na biblioteca do filme,
onde todos os smbolos do filme sero guardados. Para ver o contedo da biblioteca
clique no menu Window / Library. O smbolo j est criado. Sempre que precisar
utilizar esse smbolo no filme de agora em diante, abra a Library, clique sobre o smbolo
e o arraste at a tela. Assim estar criando uma instncia do smbolo. Veja na figura a
seguir a biblioteca com o smbolo que acabou de criar.

1
2

4 56

1. Expande a Library.
2. Retrai a Library.
3. Barra de rolagem.
4. Cria um novo smbolo.
5. Cria uma nova pasta.
6. Abre a janela Symbol Properties.
7. Deleta um smbolo ou pasta.
OBS: Quando voc deletar a instncia de um
smbolo na tela, na verdade no est deletando o
smbolo. Para isso, deve abrir a biblioteca e
delet-lo de l. S assim ele no ficar ocupando
espao desnecessrio.

Agora vamos criar um Graphic com movimento. Podemos comear a criao da biblioteca
com ela aberta.
1.

Clique no boto New Symbol (Boto 4), conforme a figura acima.

2.

Na janela Symbol Properties, d o nome crculo vertical para o smbolo, selecione a


opo Graphic e em seguida clique em OK. Repare que o Flash passou para o ambiente
de edio do smbolo e que acima da layer h o nome do smbolo. Veja a figura a
seguir:

3.

Para criar esse graphic, vamos utilizar o crculo esttico criado anteriormente. Na
biblioteca que est aberta selecione o Crculo e arraste para a tela, procurando encaixar
seu centro no centro da tela de criao. Os centros so representados por uma cruz.
Para agilizar este processo utilize o menu Modify / Align.

4.

Agora j est criado o primeiro KeyFrame na Time Line. Clique com o boto direito do
mouse sobre o Frame 20 e selecione a opo Insert KeyFrame. Assim voc estar
criando um KeyFrame na posio 20 e frames vazios entre 1 e 20.

5.

No Frame 1, d um clique duplo e na guia Tweening selecione a opo Motion na


caixa Tweening.

6.

No Frame 10, clique com o boto direito do mouse e selecione a opo Insert
KeyFrame. Voc estar criando um KeyFrame no meio da sequncia.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 35

FLASH 4
7.

Arraste o crculo para o alto da tela. Pressione a tecla enter para ver o smbolo que voc
criou.

Ainda falta levar o crculo vertical para o filme principal. Para isso, clique no menu Edit /
Edit Movie e voltar tela do filme principal. Na tela principal apague a instncia do smbolo Crculo que
voc havia criado anteriormente e arraste o Crculo Vertical para a tela. Agora pressione Enter e verifique
que o movimento no aconteceu. Isso, porque, conforme foi dito anteriormente, um graphic com animao
est preso Time Line. Para cri-la, clique com o boto direito do mouse sobre o Frame 20 (a mesma
quantidade de frames que possui o smbolo) e selecione a opo Insert Frame, para inserir frames vazios.
Agora execute o filme (CTRL+ENTER).

INSTANCE PROPERTIES
Quando voc arrastou o Crculo Vertical para a tela, criou uma instncia do smbolo. D um
duplo clique sobre ele e ser aberta a janela Instance Properties, conforme a figura a seguir:

1
2
3
4

1.

Behavior: Tipo do smbolo.

2.

Loop: Faz com que o filme se repita pela linha do tempo.

3.

First Frame: Define qual ser o frame inicial da sequncia.

4.

Play Once: Faz com que a sequncia se repita apenas uma vez, independente do
nmero de frames da Time Line do filme principal.

5.

Single Frame: Ser apresentado o contedo apenas do primeiro frame. Se o smbolo


for animado o mesmo ficar esttico.

Ainda na janela Instance Properties, temos a guia Color Effect, que possibilita a criao
de diversos efeitos especiais com as cores do smbolo. Veja a figura a seguir:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 36

FLASH 4

1.

None: Nenhum efeito.

2.

Brightness: Permite modificar a intensidade do brilho da imagem.

3.

Tint: Permite modificar a cor da imagem.

4.

Alpha: Permite determinar o grau de transparncia da cor da imagem.

5.

Special: Permite alterar a cor e a transparncia da imagem. Possui controles


independentes para os nveis de vermelho, azul e verde, alm da transparncia.

CRIANDO UM MOVIE CLIP


Um Movie Clip um pequeno trecho de animao que funciona independente da Time Line
do Movie principal. Os Movie Clips muitas vezes so construdos em camadas independentes e temos depois
o trabalho de sincronizar os movimentos dessas camadas.
Vamos criar um Movie Clip fazendo o mesmo movimento da esfera que criamos como
Graphic anteriormente:
1.

Abra um arquivo novo e clique no menu Insert / New Symbol.

2.

D o nome de Esfera Movie, selecione a opo Movie Clip e clique em OK. Observe
que ao clicar no Ok a tela de edio do Movie Clip foi aberta.

3.

Faa o desenho de uma esfera no frame 1 (lembre-se de agrup-la). Insira um


KeyFrame no Frame 10 e um outro no Frame 20.

4.

Crie um Motion de 1 para 10 com o movimento de subida e de 10 para 20 com a


descida.

5.

Agora volte para o filme principal, clique em Window / Library e arraste o Movie Clip
para o frame 1 da cena.

6.

Teste a animao usando o Ctrl + Enter e repare que no foi necessrio criar frames at
o 20 para que o movimento pudesse ser visualizado.

7.

Para implementar ainda mais o projeto, v at a tela de edio do Movie Clip (clique
sobre a instncia com o boto direito do mouse e escolha a opo Edit), selecione o
frame 10 e em seguida d um duplo clique na esfera. Pinte-a utilizando uma cor com
20% de alpha.

8.

Volte ao filme principal e execute a animao utilizando Ctrl + Enter.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 37

FLASH 4
OBSERVAO

S possvel visualizar o efeito de um movie clip inserido no filme principal


pressionando as teclas Ctrl + Enter.

CRIANDO UM BUTTON
Botes so smbolos especiais que respondem a eventos do mouse, disparando aes que
podem ir para um novo frame, ligar ou desligar uma animao ou som, ir para uma nova pgina da web,
enviar e-mail, dentre outras.
Os botes so compostos por quatro frames, onde cada um associado a uma de suas
aes. Os quadros da linha do tempo dos botes so mais largos e identificados como Up, Over, Down e Hit:
Time Line dos
Botes

Up (em cima): Aparncia do boto no seu estado natural, quando est simplesmente
posicionado na pgina.
Over (sobre): Define a aparncia do boto no momento em que o ponteiro do mouse for
colocado sobre ele.
Down (em baixo): Define a aparncia do boto no momento em que ele for acionado pelo
clique do mouse.
Hit (ativo): Define a rea que responder aos eventos do mouse, rea sensvel e ativa do
boto. Essa rea fica invisvel no filme. Normalmente essa rea definida por uma imagem em preto ou
outra cor slida.
Vamos agora criar um boto:
1.

Abra um novo arquivo e crie o desenho do boto. Crie uma esfera com preenchimento
degrad radial e o foco de luz na parte superior esquerda. Em seguida crie uma segunda
esfera um pouco menor e coloque o foco de luz na mesma posio. Agrupe as duas
esferas individualmente, posicione a esfera menor por cima da maior e centralize seus
centros. Em seguida agrupe o conjunto.

2.

Selecione o grupo, clique no menu Insert / Convert to Symbol. D o nome boto e


selecione a opo Button. Em seguida clique no OK. Clique com o boto direito em
cima da imagem e selecione Edit para passar tela de edio.

3.

Selecione o segundo, terceiro e quarto frames, clique com o boto direito do mouse e
selecione a opo Insert KeyFrame, criando KeyFrames nos quadros selecionados.

4.

Selecione o segundo frame, Over, e modifique a imagem do boto. Faa a mesma coisa
para o Down. Veja na figura a seguir, como devem ficar os botes em cada estado:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 38

FLASH 4

Up

Over

Down

5.

No frame hit, faa um crculo do mesmo tamanho ou at mesmo um pouco maior do


que boto e pinte de preto.

6.

Apesar de ainda no estar associada a nenhuma ao, o primeiro boto est pronto.
Para v-lo funcionar, volte ao filme principal. Em seguida teste o boto atravs das
teclas Ctrl+Enter. Se desejar inserir mais um boto na tela, clique no menu Window /
Library e arraste-o para a tela.

OBSERVAO

possvel fazer com que o boto fique ativo no ambiente de desenvolvimento. Clique
no menu Control / Enable Buttons. Nessa situao no possvel editar o boto,
para isso necessrio desmarcar o Enable Buttons para se fazer a edio do boto.

Posteriormente vamos associar aes ao boto que acabamos de criar.

LIBRARY
A library ou biblioteca do Flash o local onde o Flash armazena smbolos, arquivos de sons e
bitmaps. Cada filme tem sua prpria biblioteca e j trabalhamos com esse recurso quando estudamos os
smbolos. Alm disso, o Flash traz algumas bibliotecas com diversos elementos separados por categorias que
disponibiliza no menu Libraries. J a biblioteca do filme se encontra no menu Window / Library.
Voc deve manter sua biblioteca organizada para facilitar a localizao de qualquer elemento
que faa parte dela. Para isso bom criar pastas e separar suas imagens dentro dessas pastas. Com a
biblioteca do filme aberta, selecione, com o auxlio da tecla Ctrl, os elementos que devem fazer parte da
mesma pasta e mova-os para a pasta criada.
Organize a biblioteca e agora vamos salv-la de maneira que fique disponvel para os
prximos filmes do Flash:
1.

Clique no menu File / Save As.

2.

Selecione a pasta Libraries que se encontra dentro da pasta Arquivos de programas \


Macromedia \ Flash 4.0.

3.

D um nome para o arquivo e salve. Feche o arquivo.

4.

Agora v at o menu Libraries e ver que a biblioteca que voc acabou de salvar j faz
parte desse menu, estando assim disponvel para todos os arquivos do Flash.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 39

FLASH 4
SCENE
As scenes ou cenas no Flash funcionam como se fossem filmes independentes, onde cada
uma possui a sua prpria Time Line, mas todas compartilham a mesma biblioteca do filme. Quando abrimos
um arquivo novo no Flash, h apenas uma cena.
Utilizando cenas podemos organizar nosso filme logicamente, dividindo-o em introduo,
som, movimentos, cena principal, etc. O nome da cena na qual voc est trabalhando, vem logo acima ao
nome das layers. Veja a figura a seguir:

Para criar uma cena, clique no Menu Insert / Scene. bom dar nome s cenas para facilitar
a sua identificao. Para isso, clique no Menu Modify / Scene, a janela Scene Properties aberta, digite o
nome e clique em OK.
Voc ainda pode criar novas cenas, excluir, modificar as propriedades de uma cena,
bastando clicar no menu Window / Inspectors / Scene e a janela a seguir ser aberta.

1
2
3
4

As cenas aparecem no Inspector na mesma ordem em que aparecem no filme. nessa


sequncia que elas sero exibidas na execuo do filme. Para alterar a ordem, basta clicar sobre o nome da
cena e arrastar o clique do mouse, posicionando-a no local desejado. Alm dessa formas, ainda possvel
alterar a ordem das Cenas atravs da ao de botes e comandos que voc pode definir.
Veja o significado dos botes da janela Scene:
1.

Add: Adiciona uma nova Cena e o Flash alm de incluir seu nome no Inspector, passa
imediatamente para ela. Assim, quando voc editar a tela, j estar editando a nova
cena. Acrescente uma nova cena e observe o nome que aparece no Inspector e na tela.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 40

FLASH 4
2.

Delete: apaga a Cena selecionada.

3.

Properties: Abre a janela Scene Properties, permitindo mudar o nome da cena.

4.

Duplicate: Cria uma cpia da cena selecionada no inspector com o mesmo nome da
cena, seguido da palavra copy.

Para navegar entre as Cenas, podemos tambm clicar no menu View / Goto e escolher para
qual cena quer ir, bastando para isso clicar no seu nome que aparece na lista, ou ainda clicando no boto
Edit Scene, no canto superior direito da tela

e selecionando o nome da Cena desejada.

TRABALHANDO COM AS AES


As aes no Flash so o que determinam a interatividade do site com o usurio. Existem as
aes aplicadas s cenas e as aes aplicadas aos botes.

AES EM BOTES
As aes nos botes ocorrem relacionadas ao tipo de clique que o usurio utilizou ou o
evento do boto. A seguir temos uma descrio dos eventos do mouse que o Flash reconhece.

Press: ocorre quando o boto do mouse pressionado sobre o boto.

Release: ocorre quando o boto do mouse solto aps clicar sobre o boto.

Release Outside: ocorre quando o boto do mouse solto com o ponteiro do lado de
fora do boto, depois de ter sido clicado em cima dele.

Roll over: ocorre quando o ponteiro do mouse deslocado para cima do boto.

Roll out: ocorre quando o ponteiro do mouse passa por cima do boto e deslocado
para fora dele.

Drag over: ocorre quando o ponteiro do mouse pressionado e arrastado para fora
do boto e em seguida arrastado de volta para cima do boto.

Drag out: ocorre quando o mouse pressionado e arrastado para fora do boto.

Vamos fazer um exemplo para entender melhor os eventos dos botes:


1.

Insira o movie clip do peixe no frame 1 do layer 1. Para isso, clique no Menu Libraries /
Movie Clip, escolha o Fish Movie Clip e arraste at a tela.

2.

D ao layer o nome peixe.

3.

D um duplo clique no movie clip que acabou de arrastar e a janela Instance


Properties ser aberta, onde voc deve dar um Instance name para o movie clip, por
exemplo, peixe1.

4.

Insira outro layer e d a ele o nome boto.

5.

Selecione a library Buttons no menu Libraries e arraste um boto do tipo Play e outro
do tipo Stop para a tela. No exemplo selecionamos os que esto em Round Button Set.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 41

FLASH 4

controle.

6.

D um duplo clique no boto Play para que a janela Instance Properties seja aberta e
selecione a guia Actions:

7.

Clique em

1.

Clique em On e ser possvel visualizar os eventos do mouse, mas no precisa modificlo.

2.

D um duplo clique em peixe1, assim ele ir para a caixa Target.

3.

Com Begin tell target selecionado clique em

4.

Repita o processo para o boto stop, porem na etapa d, selecione a opo stop.

5.

Teste usando CTRL + ENTER.

e selecione a ao Tell target, surgir a tela abaixo:

e selecione a ao Play.

Ao testar note que voc est controlando o Movie Clip. A ao Tell target que faz tal

Para utilizar a ao Tell target, o movie clip que ser controlado dever ter um Instance
name, como fizemos no exemplo anterior.

COMANDOS DO FLASH
Ao clicar no boto
conforme a figura a seguir:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

na guia actions da instncia, vrios comandos foram mostrados,

Pg.: 42

FLASH 4

Vamos conhecer alguns destes comandos:

TELL TARGET
Comando utilizado para indicar um alvo. Normalmente utilizado com movie clips.
Ao indicar o alvo possvel controlar seu funcionamento. Como parar o movie clip,
recome-lo, ir para um determinado ponto, etc.

LOAD/UNLOAD MOVIE
Comando utilizado para abrir arquivos swf.
Quando voc est dentro de um filme do Flash e precisa que um outro filme seja carregado
dever utilizar o LOAD/UNLOAD MOVIE.
Vamos criar um exemplo para entendermos melhor:
1.

Crie um arquivo novo. Faa a animao de um avio (Libraries / Movie clip) percorrendo
um caminho (guide layer), utilize um background azul. Salve o arquivo e execute-o
(CTRL + ENTER). Assim estar gerando o swf. Feche o arquivo.

2.

Crie um arquivo novo e faa a animao de um pssaro voando (Libraries / Graphics) de


um lado para o outro da tela. Depois acrescente uma nova camada e desenhe um fundo
com nuvens e o sol (esta camada deve estar abaixo da camada do pssaro). Salve o
arquivo e execute-o. Feche o arquivo.

3.

Crie um novo arquivo. Abra a Libraries / Buttons e escolha um boto e arraste-o para a
tela. Duplique este boto (selecione-o e pressione CTRL + D). Posicione-os na parte

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 43

FLASH 4
inferior da tela. Estes botes sero utilizados para abrir o arquivo do avio e o do
pssaro.
4.

D um clique duplo sobre um dos botes para que a janela Instace Properties seja
aberta. Clique na guia Actions. No boto
movie.

selecione o comando Load/Unload

5.

Este boto ser para abrir o arquivo do pssaro. Com o comando Load movie
selecionado como na figura anterior precisamos definir qual ao ser executada. No
grupo Action deixe a opo Load movie into location.

6.

Na caixa URL digite o nome do arquivo e a extenso swf (ex.: avio.swf).

7.

Na caixa Location level precisamos definir em qual nvel da camada o arquivo ser
aberto. Neste caso 1.

8.

Voc pode notar que na opo ON est sendo utilizado o evento de mouse Release.
Vamos alter-lo para Roll over. Clique na linha de comando ON e marque do lado
direito da tela Roll over e desmarque a opo Release.

9.

Clique em OK.

10. D um clique duplo no outro boto e siga os passos de 4 a 8 alterando o nome do


arquivo na caixa URL e o nvel (Level) onde ser carregado, neste caso 2.
11. Para identificar os botes utilize a ferramenta de texto para digitar o nome do arquivo
que ser aberto. Salve o arquivo e execute-o.
12. Note que ao passar o mouse sobre o boto do avio, a animao mostrada, mas o
background no. Isto acontece porque o LOAD MOVIE traz o arquivo com background
transparente. Mas ao passar o mouse sobre o boto do pssaro isto j no acontece o
fundo mostrado, porque em vez de utilizarmos um background criamos uma camada
com a imagem de fundo.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 44

FLASH 4
13. Um problema est acontecendo quando passamos de um boto para o outro o arquivo
que foi carregado no foi descarregado. Para descarregar o arquivo, d um clique duplo
sobre um dos botes, na guia Actions, selecione a linha de comando End on, clique no
e escolha o comando Load/Unload movie. No grupo Action do lado direito
boto
da tela marque a opo Unload movie from location, e na caixa Location level digite
o nmero do nvel onde o arquivo foi carregado. Conforme a figura a seguir:

14. Selecione a linha de comando ON e marque o evento do mouse Roll out e desmarque o
evento do mouse Release.
15. Clique em OK.
16. Repita os passos 13 a 15 para o outro boto. Lembre-se de colocar o nvel onde o
arquivo foi carregado.
17. Salve o arquivo e teste-o.

STOP
Comando utilizado para parar uma animao em um determinado quadro ou parar a
execuo de um movie clip.

PLAY
Comando utilizado para iniciar a animao de um movie clip.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 45

FLASH 4
GO TO
Comando utilizado para provocar desvios na execuo de um filme.
Voc criou um movie clip com vrios momentos de animao diferentes e criou vrios botes
que devem parar em momentos especficos do movie clip, o comando GO TO que nos auxiliar nesta funo.
Vamos criar um movie clip e um boto que controla este movie clip. Este movie clip nos
indicar qual o evento do mouse estamos executando.
1.

Crie um novo arquivo. Clique no Insert / New Symbol. D o nome de Status do Mouse
e marque o Behavior Movie clip.

2.

A Time line do movie ter a seguinte aparncia:

3.

No KeyFrame 1 teremos o texto OFF. No KeyFrame 5, o texto OVER. No KeyFrame


10, o texto OUT. No Frame 15, insira um Blank KeyFrame. No KeyFrame 20, o texto
CLICK. No KeyFrame 25, o texto RELEASE. No KeyFrame 30, o texto OUTSIDE. No
Frame 35, insira um Blank KeyFrame.

Note que existem umas bandeirinhas vermelhas em cada um dos KeyFrames, e ao lado de
cada uma delas o texto que mostra o contedo do Frame. Estes so os Labels. Isso ser de grande
necessidade para definirmos aes em cenas ou controlarmos o funcionamento de um movie clip.
Para dar nome a um Frame, basta dar um duplo clique nele e a janela Frame Properties
ser aberta. Selecione a guia Label, digite o nome na caixa Name e clique em OK.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 46

FLASH 4

Para cada KeyFrame que acrescentamos no movie clip, acrescente o label com o contedo
do frame. Salve o arquivo.
Volte cena, abra a biblioteca e arraste o movie clip para a cena. Abra a biblioteca de botes
do Flash e arraste um boto para a cena. Posicione o boto ao lado do movie clip. Agora precisamos
configurar as aes do movie clip e do boto.
Se testar este arquivo, notar que o movie clip est executando a animao, ou seja, ele
passa por cada um dos keyframes e volta ao primeiro que o OFF. Como queremos indicar o evento do
mouse que est acontecendo naquele momento que o arquivo est sendo executado onde o mouse ainda
no passou pelo boto, o que deveria ser mostrado do Movie clip o quadro OFF que o primeiro.
Vamos editar o movie clip para fazermos esta alterao. Clique sobre o movie clip com o
boto direito do mouse para edit-lo.
As aes tambm podem ser acrescentadas aos Frames. D um clique duplo no Frame 1, na
janela Frame Properties clique na guia Actions. Como precisamos que o movie clip fique parado neste
quadro, clique no boto

e escolha o comando Stop. Clique em OK.

O frame OUT ser mostrado quando o ponteiro do mouse for movimentado para fora do
boto, mas aps isso acontecer o OFF dever ser mostrado novamente. Ento ser necessrio acrescentar
uma ao no Blank KeyFrame logo aps o OUT.
D um clique duplo no Frame 15 na janela Frame Properties clique na guia Actions. Como precisamos
que o movie clip volte ao quadro OFF, clique no boto

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

e escolha o comando Go To.

Pg.: 47

FLASH 4
No grupo Frame, clique na opo Label e escolha OFF. Clique em OK. O mesmo dever
acontecer quando acontecer o evento Release Outside, ento d um clique duplo no Frame 35 e configure
a ao Go To para o Label OFF. Clique em OK. O movie clip j est controlado. Volte cena. E coloque o
Instance name do movie clip de status.
Agora vamos configurar o boto para cada evento do mouse que acontecer mostrar um
ponto do movie clip.
1.

D um clique duplo sobre o boto para abrir a janela Instance Properties. Na guia
Actions vamos criar os comando para quando o ponteiro do mouse rolar sobre o boto.
e escolha o comando Tell target para podermos controlar o movie
Clique no boto
clip. Com a linha de comando Begin Tell Target selecionada, d um clique duplo sobre o
nome do movie, que est do lado direito da tela. Assim estamos indicando um alvo.

2.

Para que seja mostrada a mensagem OVER do movie clip, precisamos desviar a
execuo do movie clip para este ponto. Clique no boto
e escolha o comando Go
To, escolha a opo Frame Label e digite OVER. Modifique o ON (RELEASE) para ROLL
OVER.

3.

Selecione a linha de comando End on e clique novamente no boto


e selecione o
comando Tell target. D um clique duplo sobre o nome do movie, que est do lado
direito da tela.

4.

Para que seja mostrada a mensagem OUT do movie clip, precisamos desviar a execuo
e escolha o comando Go To, escolha
do movie clip para este ponto. Clique no boto
a opo Frame Label e digite OUT. Mas o movie clip no pode ficar parado no quadro
OUT, ele deve continuar para chegar ao Blank KeyFrame que retorna ao Frame OFF. Na
parte inferior da janela Instance Properties, marque a caixa Go to and play, que far
com que o movie clip continue a ser executado a partir do Frame OUT e chegue onde
precisamos. Modifique o ON (RELEASE) para ROLL OUT.

5.

Selecione a ltima linha de comando End on e clique novamente no boto


e
selecione o comando Tell target. D um clique duplo sobre o nome do movie, que est
do lado direito da tela.

6.

Para que seja mostrada a mensagem CLICK do movie clip, precisamos desviar a
execuo do movie clip para este ponto. Clique no boto
e escolha o comando Go
To, escolha a opo Frame Label e digite CLICK. Modifique o ON (RELEASE) para
PRESS.

7.

Selecione a ltima linha de comando End on e clique novamente no boto


e
selecione o comando Tell target. D um clique duplo sobre o nome do movie, que est
do lado direito da tela.

8.

Para que seja mostrada a mensagem RELEASE do movie clip, precisamos desviar a
execuo do movie clip para este ponto. Clique no boto
To, escolha a opo Frame Label e digite RELEASE.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

e escolha o comando Go

Pg.: 48

FLASH 4
9.

Selecione a ltima linha de comando End on e clique novamente no boto


e
selecione o comando Tell target. D um clique duplo sobre o nome do movie, que est
do lado direito da tela.

10. Para que seja mostrada a mensagem OUTSIDE do movie clip, precisamos desviar a
execuo do movie clip para este ponto. Clique no boto
e escolha o comando Go
To, escolha a opo Frame Label e digite OUTSIDE. Mas o movie clip no pode ficar
parado no quadro OUTSIDE, ele deve continuar para chegar ao Blank KeyFrame que
retorna ao Frame OFF. Na parte inferior da janela Instance Properties, marque a
caixa Go to and play, que far com que o movie clip continue a ser executado a partir
do Frame OUT e chegue onde precisamos. Modifique o ON (RELEASE) para RELEASE
OUTSIDE. O cdigo dever estar desta forma:

11. Clique em OK. Salve o arquivo e teste.

GET URL
Comando utilizado para fazer chamada a elementos externos ao Flash, como o programa
para enviar mensagem, um endereo de um site, um outro arquivo swf, um arquivo html, etc.
Este comando s pode ser testado quando o arquivo j foi publicado, ou seja, quando j
geramos o html e o swf. Para ver detalhes desta publicao consulte o captulo Publicando o Filme.
1.

Crie um arquivo novo e insira um boto da biblioteca (CTRL + L).

2.

D um clique duplo sobre o boto, clique na guia Actions.

3.

Clique no boto
e escolha o comando Get URL. Na caixa URL digite o endereo de
e-mail, por exemplo,
(Poderia ser digitado o endereo de um site externo ex.:
http://www.zargon.com.br; ou o nome de um arquivo html ou um arquivo swf).

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 49

FLASH 4

4.

Clique em OK. Salve o arquivo, clique no menu File / Publish preview / HTML e
clique no boto para testar. A janela para redigir uma nova mensagem dever ser
aberta.

FS COMMAND
Comando utilizado para controlar animaes feitas em Flash que sero executadas stand
alone, ou seja, no micro local, no estaro na Internet.
Crie toda a animao desejada, com as aes, o som e o que mais precisar.
Para que a animao seja executada em tela cheia, selecione o primeiro frame da primeira
scene. Clique com o boto direito sobre este frame e selecione a opo Properties.
Na guia Actions, clique no boto
standalone player selecione a opo Fullscreen.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

e selecione o comando FS Command. Na caixa For

Pg.: 50

FLASH 4

Ao selecion-la a caixa Command ser preenchida com fullscreen e a caixa Arguments


com true. Ento, assim que a animao for executada ela ser jogada na tela inteira. Clique em OK.
Como a animao est sendo visualizada em tela inteira precisamos dar uma opo ao
usurio para fechar a animao. Acrescente um boto, no ponto que desejar, na animao. D um clique
e selecione o comando FS Command. Na caixa
duplo sobre o boto na guia Actions , clique no boto
For standalone player selecione a opo Quit. Clique em OK.
Quando o usurio clicar no boto, ou executar o evento do mouse determinado por voc a
animao ser fechada.

AES EM SCENES
As aes determinadas s cenas, servem para desviar a execuo de uma animao para
outro ponto, ou parar a animao em determinado ponto.
1.

Abra um novo arquivo e no frame1 do layer 1 insira uma esfera com preenchimento
radial e o foco de luz no alto esquerda.

2.

D o nome de circulo ao layer que contm a esfera e agrupe o elemento (CTRL + G).

3.

Crie o KeyFrame 60 e faa um motion com clockwise = 2 de 1 para 60.

4.

Teste o movimento e verificar que ele se repete infinitamente.

5.

Insira mais um layer e d o nome ao.

6.

Insira um KeyFrame em 60.

7.

D um duplo clique no KeyFrame 60 e na guia Actions, escolha o comando Stop.

8.

Agora insira uma nova Scene (Insert/scene) com o nome quadrado.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 51

FLASH 4
9.

Insira um quadrado na frame1 com preenchimento degrad.

10. Crie o key frame 120 e mova o quadrado de posio.


11. Faa um shape de 1 para 120.
12. Teste e vai verificar que as duas cenas no acontecem, isto porque uma cena s comea
aps o trmino da outra, mas inserimos um stop na primeira, sendo assim para que as
duas ocorram, temos que tirar o stop da primeira scena e inseri-lo na segunda.
13. Insira um KeyFrame em 60 e deforme o quadrado.
14. Na camada inferior, insira um KeyFrame em 61, d um duplo clique nele e na guia
Label, d o nome de trmino.
15. Execute para ver o resultado.
16. Insira mais uma Scene (Insert / Scene) e crie nela dois botes.
17. Mova essa scene para cima, ela deve ser a primeira a ser executada (Window /
Inspectors / Scene).
18. No primeiro boto, d um duplo clique e na guia Actions, configure da seguinte forma:

19.

No segundo boto, faa o mesmo, porm em scene escolha quadrado.

20. Teste e observe que a cena que contm os botes to rpida que praticamente no
possvel v-la, muito menos clicar em um dos botes. Para resolver o problema, volte
tela de edio, d duplo clique no frame 1 dessa scena e na guia Actions, selecione a
opo Stop.
21. Agora teste novamente.
22. Veja que ao trmino das scenes no possvel voltar os botes, para que isso se torne
possvel, d um duplo clique no ltimo KeyFrame de umas das layers da cena crculo e
da cena do quadrado, e na guia Actions selecione Go to and stop para a scene boto.
23. Salve o arquivo e teste.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 52

FLASH 4
FORMATO DAS IMAGENS
ESCOLHENDO O MELHOR FORMATO
O Flash permite a importao de diversos formatos grficos, tanto vetoriais quanto Bitmaps.
Os formatos que o Flash importa so:
EExtenso

Programa Compatvel

Plataforma

Tipo

.AI .EPS

Adobe Illustrator 6.0 ou Superior

Win. Mac

Vector

.GIF

GIF 89

Win. Mac

Bitmap

Windows Bitmap

Win

Bitmap

.DXF

AutoDesk DXF

Win. Mac

Vector

.EMF

Enhanced Metafile

Win

Vector e Bitmap

.JPG

JPEG

Win. Mac

Bitmap

.PICT

Programas de desenho Machintosh

Mac

Vector ou Bitmap

Animao Shockwave Flash

Win. Mac

Vector

.WMF

Windows Metafile

Win

Vector e Bitmap

.PNG

Progressive Network Graphics

Win. Mac

Bitmap

.BMP
.DIB

.SWF
.SPL

Saber qual formato escolher que faz a diferena na hora de criar um projeto profissional e
otimizado em Flash.

QUALIDADE
O Flash quando exporta no formato shockwave Flash (. SWF) utiliza um algoritmo otimizado
de compactao JPEG, com o grau de compactao que voc define na caixa de dilogo de exportao.
Por esta razo importante selecionar bem o formato grfico a ser utilizado. Se
importarmos, por exemplo, um arquivo .JPG que j foi compactado, o resultado final na hora de exportar o
Shockwave Flash pode ser pssimo, pois estaremos aplicando novamente a compactao JPEG e a imagem
ficar distorcida.

TRANSPARNCIA
Quando o objeto a importar so imagens com transparncias o nico formato que
seguramente trar bom resultado o formato PNG. Este formato o nico multiplataforma que armazena
informaes de transparncia no formato Alpha Channel. Isto no quer dizer que o Flash no reconhea
transparncia de GIFs por exemplo, mas nem sempre isto ocorre.

VETORIZAO
Voc pode criar arquivos vetoriais em outros programas e posteriormente import-los com o
Flash. O Freehand, por exemplo, pode criar animaes usando o efeito blend e exportar arquivos no formato
.SWF, mas sem o nvel de compactao do Flash. Outro formato vetorial interessante o formato AI/. EPS
da Adobe.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 53

FLASH 4
O grande trunfo do Flash justamente o fato dele criar arquivos vetoriais, e mais
compactos. Este conceito erroneamente aplicado mdia importada. Nem sempre melhor vetorizar toda
mdia importada a melhor opo.
O melhor formato grfico para vetorizar em geral o que chamamos de Clipart, ou seja,
imagens com poucas curvas e poucas cores. Fotos e imagens complexas devem ser usadas como Bitmap
mesmo.

ANIMAO BITMAP
O Flash no possui a capacidade de importar arquivos de vdeo em geral, mas importa
corretamente GIFs animados, por exemplo, mantendo inclusive as informaes de tempo de frames. Para
importar um arquivo AVI, por exemplo, voc pode usar um programa para gerar o GIF animado e outro para
extrair a trilha sonora no formato WAV.
Os melhores formatos:

Para imagens com qualidade PNG. BMP . JPG (No comprimido)

Para transparncias - . PNG. GIF (As vezes no funciona)

Vetorial - . SWF .SPL .AI .EPS

PINTANDO COM BITMAPS


Voc pode usar imagens bitmap como tinta para produzir efeitos especiais, criar mascaras ou
at mesmo para melhorar seu aspecto.
Veja passo a passo como usar Bitmap como tinta:
Escolha a figura que vai usar como tinta, ponha-a no Stage.
Desmembre-a usando CTRL+B ou Modify / Break Apart.
Usando a ferramenta Conta Gotas, pegue a tinta.
Pronto voc pode usar esta tinta em qualquer figura, se a imagem Bitmap for pequena ele se
repete da mesma forma que imagens de background em pginas HTML, com isto pode-se criar texturas e
fundos interessantes no Flash.

SONS
ESCOLHENDO O MELHOR FORMATO
Em se tratando de som, a grande maioria escolhe erroneamente o formato stereo para
importar a mdia. Quase nunca voc utilizar som Stereo.
Um efeito sonoro que caminha de um alto falante a outro no um som stereo. Som Stereo
foi criado para dar uma sensao de tridimensionalidade ao ouvinte, para que este tivesse a impresso de
estar assistindo a msica ao vivo, com o guitarrista ao centro, bateria mais a direita, contra-baixo a
esquerda, teclado ao fundo e por ai vai.
Stereofonia no sinnimo de qualidade sonora, um som digitalizado to bom quanto
maior for a frequncia de modulao utilizada.
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 54

FLASH 4
TABELA DE QUALIDADE SONORA
Frequncia de Modulao
5 kHZ ou 5.000 kHZ
11 kHZ ou 11.000 HZ
22 kHZ ou 22.000 HZ
44 kHZ ou 44.000 HZ

Aplicao
Possui uma qualidade de udio muito
baixa, aceitvel apenas para ruidos de
fundo graves.
o formato usado para efeitos
especiais, e voz em qualidade aceitvel.
Qualidade de rdio AM.
um bom formato para msica com
uma qualidade de FM.
o som em qualidade de CD.

Para criar alguns efeitos especiais, fazendo o som passar de um auto falante para o outro,
utilizar partes dele, e at mesmo alterar o volume voc pode usar o Flash.
O Flash 4.0 traz um novo recurso de exportao de som, com compresso MP3, gerando
arquivos muito menores que na verso anterior, sem perder a qualidade do som. Mas ateno, esse um
formato para exportao, o Flash no pode importar MP3. Voc deve convert-lo antes para WAV, por
exemplo.
Podemos utilizar dois tipos de sons no Flash. Os sons ligados a eventos, que precisam ser
totalmente baixados para serem ouvidos, visto que precisam estar totalmente disponveis para os eventos e
os fluxos de sons, que podem comeam a tocar assim que uma pequena parte inicial tenha sido baixada e o
restante vai sendo baixado gradativamente, junto com o filme.
O tamanho do filme com som depende muito da qualidade do som e da durao do trecho.
Quanto melhor a qualidade e maior o trecho, maior ser o arquivo final.
Devemos criar uma camada exclusiva para inserirmos som no Flash e no caso de mais de um
som no filme conveniente criarmos uma camada para cada, mas com ateno porque sons de camadas
diferentes se sobrepe.
Voc deve ter o arquivo de som no seu winchester e import-lo para o Flash. Vamos fazer
uma bola picando no cho e associar a ela efeitos sonoros, mas antes vamos conhecer as propriedades do
som. Para isso, precisamos importar um arquivo de som:
1.

No frame 1 clique no menu File / Import e selecione o arquivo de som e clique em OK.
O arquivo importado ser armazenado na biblioteca do arquivo. Arraste o som da
biblioteca do Flash. Repare que o som arrastado para a tela, mas aparece no layer.

2.

D um duplo clique no frame 1, onde se encontra o som para abrir a janela Frame
Properties e clique na guia Sound, veja a figura a seguir:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 55

FLASH 4

Sound: permite selecionar o som.

Sync: opes de sincronizao:


*

Event: associa a apresentao a ocorrncia de algum evento Reproduzido quando


um key frame apresentado. reproduzido do incio ao fim, independente da linha
do tempo;

Start: = ao event, mas se o som j estiver sendo reproduzido ser reiniciado;

Stop: interrompe a reproduo do som;

Stream: fora a velocidade da animao de acordo com o luxo de som, podendo


inclusive ignorar alguns quadros. Depende da linha do tempo e dos quadros que ela
ocupa;

Loops: nmero de vezes que o som ser repetido.

Effect: efeito desejado:


*

Custom: permite que voc defina.

None: nenhum efeito.

Left Channel: canal esquerdo.

Right Channel: canal direito.

Fade Left to Right: Fade da Esquerda para a Direita.

Fade Rigth to Left: Fade da direita para a esquerda.

Fade in: aumentando devagar.

Fade out: diminuindo devagar.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 56

FLASH 4
*

Exemplo da bola picando com efeito sonoro

1.

Criar um movie novo.

2.

Desenhar a bola no layer 1 e agrupar.

3.

Selecionar a esfera e clicar em Modify / Transform / Edit center.

4.

Criar um KeyFrame no frame 20. Renomear o layer para esfera.

5.

Selecionar o layer e clicar no boto Add motion guide.

6.

Desenhar uma linha no layer Guide simulando o efeito de uma esfera picando.

7.

No frame 1 do layer Esfera, posicione a esfera no incio da linha e no frame 20 no final.

8.

Fazer um Motion de1 para 20 e marcar a caixa Orient to path.

9.

Inserir um novo layer acima da guide e cham-lo de som.

10. Inserir Blank KeyFrame nos quadros equivalentes aos que a esfera bate no cho.
11. Clicar no menu Libraries / Sound e arrastar o som escolhido para os Blank KeyFrames
inseridos.
12. Salve o arquivo e teste.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 57

FLASH 4
COMPACTAO DO SOM
O som importado para o Flash est no formato original wav. Este tipo de arquivo grande
para ser enviado para a Internet. Antes de publicar a animao precisamos definir o tipo de compactao do
som.

TIPOS DE COMPRESSO
ADPCM: melhor para sons pequenos, ou seja, sons de evento, queles vinculados a botes.
MP3: indicado para trilhas sonoras.

amostragem.

RAW: no compacta o som, apenas permite ressamplear o som com uma nova taxa de

Para definir qual a compactao utilizada no som, abra a biblioteca do arquivo (CTRL + L),
d um clique duplo sobre o som. Ser aberta a seguinte janela:

Na caixa Compression escolha o tipo de compactao.

Ao selecionar o formato ADPCM voc precisar definir:


*

Sample Rate: taxa de amostragem. Interfere no tamanho do arquivo, quanto


maior melhor a qualidade do som, consequentemente o tamanho ser maior.

ADPCM Bits: configura o tamanho da amostragem. Causa distoro no som.


Exemplo: se menor distorce o som, mas reduz o tamanho do arquivo.

Ao selecionar o formato MP3 voc precisar definir:


*

Bit Rate: taxa de transferncia. O nmero de bits que o codificador utiliza para 1
segundo de som. Se maior aumenta o tamanho do arquivo.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 58

FLASH 4
*

Quality: qualidade do som aps a exportao. Fast para Internet e Medium ou


Best para animao que ser distribuda em CD ou disquete.

Ao selecionar o formato RAW voc precisar definir a nova taxa de amostragem para
ressamplear.

Se fizer alteraes clique no boto Test para escutar o som e definir se outras alteraes
podero ser efetuadas. Clique em OK para gravar as alteraes.
Ser necessrio ao criar uma animao que utiliza trilha sonora, dar ao usurio a opo de
desligar ou ligar o som. Vamos construir o boto que liga e desliga o som.
1.

Crie um novo smbolo (Insert / New Synbol / Movie Clip) e chame-o de LigaDesliga.

2.

Insira um boto indicando que o som est ligado no frame 1. (Se necessrio crie o
boto).

3.

Insira um Blank KeyFrame no frame 30. Depois insira um boto indicando que o som
est desligado. (Se necessrio crie o boto).

4.

Renomeie o layer para Botes.

5.

Insira um novo layer e chame-o de som.

6.

Arraste o som desejado para o frame 1 do layer Som.

7.

Acesse as propriedades do frame e na guia Sound defina o loop em 9999. Clique em


OK.

8.

Como o som comea ligado ao clicar no boto exibido o som dever ser desligado.

9.

Acesse as propriedades do boto que est no frame 1 da camada botes. Na guia


Actions selecione a ao Go to para o frame 30. Esta ao ir mostrar o boto de som
desligado.

10. Depois selecione a ao Stop all sounds para parar o som. Selecione o evento Press e
clique em OK.
11. Se o usurio apertar o boto de desligado precisaremos mostrar o boto ligado. Como
este boto est no frame 1 e o som tambm, automaticamente o som reiniciar.
12. Acesse as propriedades do boto que est no frame 30. Na guia Actions selecione o
comando Go to para o frame 1. Selecione o evento Press e clique em OK.
13. Volte cena, insira o movie clip LigaDesliga e teste.

IF FRAME IS LOADED
O If Frame is Loaded utilizado para possibilitar que um filme seja mostrado e v
entretendo o usurio enquanto o filme principal est sendo carregado. Geralmente podemos v-lo quando
carregamos o site pela primeira vez naquele micro.
O filme que ser carregado primeiramente mais simples e mais leve, para que possa ser
carregado rapidamente.
Para fazer com que ele funcione, devemos construir trs symbols:
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 59

FLASH 4

Symbol 1: ser carregado imediatamente ao abrir o site e dever ser mostrado


enquanto o filme principal carregado.

Symbol 2: filme principal, ser a sua pgina inicial, conter toda a animao, som e
efeitos especiais desejados. Pode ser um smbolo ou uma animao na prpria cena.

Symbol 3: aquele que ficar parado na tela aps o filme principal ser carregado e nele
estaro os botes de ao que permitiro ao usurio interagir com o filme.

Primeiramente construa os 3 symbols separadamente, mas em um mesmo arquivo. Em


seguida, na linha do tempo do movie principal, crie os frames:

KeyFrame 1: insira nele o symbol1 e d o label incio.

Blank Key Frame aps o ltimo frame do symbol2: d a ele o label meio.

Key Frame x (onde x = 5 frames aps o Blank KeyFrame): insira nele o symbol 2 e d
o nome principal.
Key Frame y (onde y = x + 1): insira nele o symbol 3 e os botes e d o label fim.

Veja na Time Line abaixo como ficaro os frames:

OBSERVAO
Time Line.

Repare que apesar de ter inserido um label no ltimo frame, seu nome no fica visvel na

Voc dever agora programar o If Frame is Loaded de acordo com os seguintes passos:
1.

Em cada frame voc dever dar um duplo clique, surgir a janela Frame Properties.
Clique na guia Actions e selecione o

2.

No frame 1, no menu que surge, escolha a opo If Frame is Loaded. Sua tela ficar
conforme abaixo:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 60

FLASH 4

3.

No grupo Frame marque a opo Label e selecione Fim.

4.

e selecione Go to. Na tela que surge, marque a opo Label


Clique novamente no
e selecione Principal. Voc deve marcar tambm a opo Go to and play. Clique em
OK.

5.

No frame de label meio, d um duplo clique para acessar as propriedades do frame,


e selecione o comando Go to. Marque a
selecione a guia Action. Clique no boto
opo Label e selecione incio. Marque a opo Go to and play. Clique em OK.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 61

FLASH 4

6.

Agora d um duplo clique no frame de label Fim, na guia Actions selecione o comando
Stop. Clique em OK.

Veja a descrio do acontecer quando o filme for carregado:


Ao iniciar o filme, ser chamado o frame incio, onde feito um teste para verificar se o
frame fim est carregado. Caso tenha sido, o smbolo ou a animao no principal sero executados. Caso
no tenha sido, o filme continua passando at o frame meio.
No frame meio h um go to and play para o frame label incio, fazendo que o filme volte para
o frame incio e teste novamente se o frame label fim foi carregado, ficando nesse loop at que o fim seja
carregado.
Quando o frame label fim tiver sido carregado, comear a rodar o frame principal. Ao
chegar no frame fim o filme ficar parado, por causa do comando stop que acrescentamos neste frame.

PUBLICANDO SEU FILME


Para publicar seu filme na Web, ser necessrio exportar o filme no formato .swf. Assim voc
estar criando um arquivo que pode ser executado por qualquer computador, desde que ele tenha instalado
o Plug-In do Flash especfico.
Na grande maioria das vezes, a finalidade a publicao na Web. Nesse caso necessrio
gerar um arquivo HTML, que contenha as instrues necessrias para a apresentao do filme no browser do
usurio.
Para isso voc deve clicar no Menu File/Publish Settings e ser aberta a janela a seguir:

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 62

FLASH 4
GUIA FLASH

Load Order: Determina a ordem em que as camadas do primeiro quadro sero


carregadas durante a transferncia do filme pela internet.
*

Bottom Up: De baixo para cima.

Top down: de cima para baixo.

Generate Size Report: gera um arquivo .txt com o mesmo nome do filme,
contendo informaes sobre o tamanho em bytes do filme e de cada parte dele.

Protect from Import: impede que o filme seja carregado novamente no Flash caso
seja importado da Web.

Omit Trece Actions: Est relacionado a tarefa de depurao de programas,


apresentando valores de variveis durante o processamento.

JPEG Quality: define o grau de compresso dos arquivos bitmaps utilizados no Flash.
Quanto maior o grau de compresso, menor o arquivo gerado e pior a qualidade.
Imagens com qualidade de fotografia, no devem ser exportadas com nveis abaixo de
50%.

Audio Stream e Audio Event: define a taxa de amostragem e compresso do fluxo


de udio e udio de eventos. No produzem efeito caso voc tenha j os tenha
definido na janela Sound Properties para cada som exportado, a menos que voc
marque a caixa que fica logo abaixo, Override Sound Settings.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 63

FLASH 4

Override Sound Settings: Faz com que os parmetros definidos em Audio Stream e
Audio Event substituam os que foram definidos individualmente em Sound Properties.
Version: Permite escolher a verso na qual deseja exportar o filme.

GUIA HTML

Template: escolhe um dos modelos HTML para apresentar o filme:


*
*

*
*

*
*

Flash only (default): usa tags para apresentar contedo em Flash.


Play with FSCommand: usa tags para apresentar contedo em Flash e incluir
compatibilidade com FSCommand e JavaScript.
Image Map: insere uma tag para mapa de imagens.
Java Player: utiliza o Flash Java Player. Os arquivos .class devem ser colocados
na mesma pasta em que se encontra o arquivo HTML.
Quick Time: insere uma tag para apresentar um filme QuickTime.
User Choice: detecta se o Flash Player 4 est instalado e permite que o usurio
opte pelo player ou por uma imagem.

Dimensions: define o tamanho da janela do filme ao ser apresentado no navegador.


*

Match Movie: Filme apresentado no tamanho definido no Movie Properties.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 64

FLASH 4

Pixels: permite definir o tamanho em pixels da altura e largura da tela do filme.

Percent: permite definir o tamanho percentual da altura e largura da tela do filme


em relao janela do navegador.

Playback: atribui valores para os seguintes parmentros:


*

Loop: repete o filme sempre que atingir o ltimo quadro da time line.

Display Menu: permite que o usurio tenha acesso ao menu de controle do filme.

Device Fonte: substitui as fontes que no estiverem instaladas no micro do


usurio por fontes anti-aliasing.

Quality: determina o nvel de anti-aliasing aplicado na apresentao do filme.


*

Low: baixo (no utilizar o recurso anti-aliasing).

Auto Low: desliga o anti-aliasing ao ser iniciada uma apresentao.

*
*

Auto High: d prioridade a qualidade, mas no em detrimento a velocidade da


apresentao.
High: o anti aliasing sempre utilizado.
Best: desconsidera a velocidade, sempre exibe a apresentao com alto grau de
qualidade.

Window Mode:
transparentes.
*

Paused at start: para a execuo do filme at que o usurio clique em algum


boto para continuar. Se esta opo for marcada, o filme no ser apresentado ao
carregar.

define

parmetros

que

permitem

utilizao

de

filmes

Window: o filme apresentado em sua prpria janela da pgina da Web.

Opaque Windowless: permite movimentar elementos por trs do filme (com


DHTML) sem que eles fiquem visveis.

Transparent Windowless: deixa visvel o fundo da pgina, pois coloca o filme


transparente.

Alignment: define alinhamento do filme no browser.


*

Default: centraliza na janela.

Left: alinha do lado esquerdo.

Right: alinha no lado direito.

Top: Alinha no alto da janela.

Bottom: alinha na parte inferior da janela.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 65

FLASH 4
*

Scale: determina como o filme ser colocado dentro do espao definido em Width
e Hight. S funciona se voc definir tamanho diferente do tamanho do filme.

Default: todo o filme fica definido fica visvel dentro da rea definida, ao mesmo
tempo mantendo a sua aparncia geral. Caso haja disproporo entre a rea definida
e o tamanho do filme, podem surgir bordas dos lados.

No border: apresenta o filme ocupando toda a rea definida, sem distores, mas
podendo cortar as bordas.

Exact fit: apresenta o filme dentro da rea definida, mas se houver diferenas
pode haver distores.

Flash Alignment: determina o posicionamento do filme dentro da sua prpria janela


e a maneira com ser cortado caso necessrio.

Show Warning Messages: faz com que o Flash apresente mensagens de erro ou
conflitos entre parmetros de tags.

TABELA DE TAGS <EMBED> <OBJECT>


Publicar um Shockwave em uma pgina HTML corretamente tarefa fcil, mas entender
cada tag abre um novo leque de opes. Ao clicar na opo publish o arquivo shockwave Flash
acrescentado em documentos HTML usando as tags EMBED e OBJECT. Como padro, todas as definies
(como HEIGHT,WIDTH, QUALITY, e LOOP) so atributos que aparecem entre chaves usadas na abertura da
EMBED tag. Por exemplo:
<EMBED SRC=moviename.swf WIDTH=100 HEIGHT=100
play=True LOOP =true QUALITY =autohigh
PLUGINSPAGE=http://WWW.macromedia.com/shockwave/download/index.cgi?P1_Prod_Vers
ion=ShockwaveFlash></EMBED>
Posteriormente, quatro opes (HEIGHT,WIDTH, CLASSID e CODEBASE) so atributos que
aparecem com a tag OBJECT; todas os outros atributos devem aparecer separadamente, em tags como
PARAM NAME. Por exemplo:
<OBJECT CLASSID=clside:D27CDB6E-AE6D-11cf-96B8-444553540000
WIDTH=100 HEIGHT=100
CODEBASE=http://active.macromedia.com/flash3/cabs/swflash.cab#version=3,0,0,0>
<PARAM NAME=MOVIEvalue=moviename.swf><PARAM NAME=Play value=true>
<PARAM NAME=Loop value=true><PARAM NAME = Quality value =autohigh>
</OBJECT>
Para usar as duas tags juntas, voc deve posicionar a tag EMBED antes de fechar a tag
OBJECT, como a seguir:
<OBJECT CLASSID=Clsid:D27CDB6E-AE6D-11cf-96B8444553540000
WIDTH=100
HEIGHT=100
CODEBASE =http://active.macromedia.com/flash3/cabs/swflash.cab#version=3,0,0,0>
<PARAM NAME=MOVIE value =moviename.swf><PARAM NAME =PLAY value =true>
<PARAM NAME=LOOP value =true><PARAM NAME=QUALITY value =autohigh>
<EMBED SRC=moviename.swf WIDTH=100 HEIGHT= 100PLAY = true
LOOP =trueQUALITY=autohigh
PLUGINSPAGE=http://www.macromedia.com/shockwave/download/index.cgi?PL_Prod_Versi
on=ShockwaveFlash></EMBED></OBJECT>
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 66

FLASH 4
Se voc estiver usando ambas as tags OBJECT e EMBED, use valores idnticos para cada
atributo ou parmetro para Ter certeza de que iro funcionar perfeitamente em diversos
browsers. O trecho, swflash.cab#version=3,0,0,0 opcional, se voc no usa-lo, no ser
checada a verso do plugin. Cada atributo ou parmetro ser explicado separadamente nos
tpicos seguir. Estes tpicos o ajudaro a entender os HTMLs que o Aftershock cria, e a
construir suas prprias opes. As opes se aplicam nas tags OBJECT e EMBED, exceto
quando informado o contrrio.

SRC
Valor: movieName.swf
Descrio: Especifica o nome da animao que ser carregada. Somente na tag EMBED.

MOVIE
Valor: movieName.Swf
Descrio: Especifica o nome da animao que ser carregada. Somente na tag OBJECT.

CLASSID
Valor: clasid:D27CDB6E-AE6D-11cf-96B8-444553540000
Descrio: um cdigo que identifica um controle Active-X ao Browser. Voc deve usar
exatamente o valor acima. Somente na tag OBJECT.

WIDTH
Valor: N or N%
Descrio: Especifica a largura do seu Shockwave, tanto em pixel como em porcentagem da
janela do browser. Shockwave Flash so escalveis, e sua qualidade no degrada em diferentes tamanhos,
desde que voc mantenha uma proporo. (por exemplo, todos estes tamanhos tem uma proporo de 4:3,
640 pixels por 480 pixels, 320 Pixels por 240 pixels, e 240 pixels por 180 pixes).

HEIGHT
Valor: N or N%
Descrio: Especifica a altura de seu Shockwave, tanto em pixel como em porcentagem da
janela do browser. Shockwave Flash so escalveis, e sua qualidade no degrada em diferentes tamanhos,
desde que voc mantenha uma proporo. (por exemplo, todos estes tamanhos tem uma proporo de 4:3,
640 pixels por 480 pixels, 320 pixels por 240 pixels, e 240 pixels por 180 pixels).

CODEBASE
Valor: http://active.macromedia.com/flash3/cabs/swflash.cab#version=3,0,0,0
Descrio: Identifica a URL onde o Browser pode baixar automaticamente o controle
ActiveX do Shockwave Flash, se ainda no estiver instalado. O valor deve ser digitado exatamente como
mostrado. Somente para tag OBJECT.
Rua dos Otoni, 881 - 9 Andar
Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 67

FLASH 4
PLUGINSPAGE
Valor:
shockwaveFlash

http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=

Descrio: Identifica a URL onde o Browser pode baixar o plugin do Shockwave Flash, se
ainda no estiver instalado. O valor deve ser digitado exatamente como mostrado. Somente para tag
EMBED.

SWLIVECONNECT*
Valor: true | false
Descrio: Especifica se o Browser deve iniciar a Java quando estiver carregando o
Shockwave Flash pela primeira vez. O valor padro false, se o atributo for omitido. Voc s deve usar True
nesta opo se estiver usando Javascript integrado no seu Flash. Java deve estar rodando para que
FSComands possam funcionar. Se voc s usa JavaScript para deteco de Browser e instalao do plugin,
deixe esta opo como false. Somente na tag EMBED.
*Este atributo opcional.

PLAY*
Valor: true | false
Descrio: Determine que a animao Shockwave Flash ser executada imediatamente
aps carregada pelo Browser. O valor padro true se o atributo for omitido.
*Este atributo opcional.

LOOP*
Valor: true | false
Descrio: Determine que a animao Shockwave Flash ser executa repetidamente aps
carregada pelo Browser. O valor padro true se o atributo for omitido.
*Este atributo opcional.

QUALITY*
Valor: low | high | autolow | autohigh
Descrio: Especifica o nvel de antialiasing que deve ser usada durante a exibio do
Shocwave Flash. Use Low quando a velocidade for mais importante que antialising. Use High quando a
velocidade quiser que seu trabalho seja exibido sempre com antialising. Use Autohigh para iniciar com
antialiasing e automaticamente passar para Low se o processamento for crtico para continuar exibindo com
antialiasing. Use Autolow para iniciar sem antialising e automaticamente passar para antialiasing se o
processador Comportar. O valor padro autohigh se o atributo for omitido.
*Este atributo opcional.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 68

FLASH 4
BGCOLOR*
Valor: #rbegbb ( Valor Hexadecimal RGB)
Descrio: Especifica a cor de background para o Shochwave Flash. Use este atributo para
sobrepor a cor usada na criao do Shockwave Flash.
*Este atributo opcional.

SCALE*
Valor: showall | noborder | exactfit
Descrio: Define como a animao ser colocada em relao a janela do Browser quando
os valores de WIDTH and HEIGHT forem percentuais. Use Showall para tornar a animao totalmente visvel
na rea especificada. A proporo do arquivo mantida e no existe distoro. Use Noborder para forcar a
animao a preencher a rea especificada. A proporo do arquivo mantida e no existe distoro mas
parte da animao pode ser cortada. Use Exactfit para forar a animao preencher toda a rea
especificada. A proporo no ser mantida e podem ocorrer distores. O valor padro Showall se o
atributo for omitido (e os valores de WIDTH e HEIGHT forem percentuais).
*Este atributo opcional.

SALIGN*
Valor: L | R | T| B | TL | TR | BL | BR
Descrio: Determina como o Shockwave Flash redimensionado ir se posicionar em
relao janela do Browser, e em qual borda existir o corte. Use L para alinhar a animao no lado
esquerdo da janela do Browser e cortar os demais se necessrio. Use R para alinhar a animao no lado
direito da janela do Browser e cortar os demais se necessrio. Use T para alinhar a animao no lado
superior da janela do Browser e cortar os demais se necessrio. Use B para alinhar a animao no lado
inferior da janela do Browser e cortar os demais se necessrio. Use TL para alinhar a animao no lado
esquerdo superior da janela do Browser e cortar os lados inferiores e direito se necessrio. Use TR para
alinhar a animao no lado direito superior da janela do Browser e cortar os lados inferiores e esquerdo se
necessrio. Use BL para alinhar a animao no lado esquerdo inferior da janela do Browser e cortar os lados
superior e direito se necessrio. Use BR para alinhar a animao no lado direito inferior da janela do Browser
e cortar os lados superior e esquerdo se necessrio. Se o atributo for omitido, a animao ser centralizada
na janela do Browser, cortes podem ocorrer em qualquer borda.
*Este atributo opcional.

BASE*
Valor: base directory or URL
Descrio: Tal como no HTML, determina o diretrio base para todas as URLs relativas
usadas no Shockwave Flash.
*Este atributo opcional.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 69

FLASH 4
MENU*
Valor: true | false
Descrio: Determine se voc quer ou no exibir o menu do Shockwave Flash. O valor
padro true se o atributo for omitido.
*Este atributo opcional.

WMODE*
Valor: window | opaque | transparente
Descrio: Permite tirar vantagem dos recursos de transparncia, posicionamento absoluto
e layering disponvel no Internet Explorer 4.0 . Use Window para executar a animao na janela da pgina
Web. Use Opaque se voc no quer que seja mostrado nada por trs do Shockwave Flash. Use Transparent
para fazer o Background da pgina HTML ser mostrado atravs do Shockwave Flash. A performace da
animao decai nesta opo. O valor padro Window se o atributo for omitido. Somente na tag OBJECT.
*Este atributo opcional.

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 70

FLASH 4

CONCLUSO

Esperamos que o contedo desta apostila tenha servido de suporte para as suas aulas.
Lembre-se que nada substitui uma boa aula de seu professor.
A informtica sofre mudanas bruscas muito rapidamente, procure no futuro uma
biblioteca auxiliar e fique atento ao lanamento de novos aplicativos e verses.

necessrio.

A Zargon Computao estar sempre ao seu dispor para solucionar dvidas quando

Atenciosamente,

Diretoria de Treinamento
Zargon Tecnologia em Informtica

Rua dos Otoni, 881 - 9 Andar


Belo Horizonte - MG - 30150-270
www.zargon.com.br
(31) 3273-2822

Pg.: 71

Você também pode gostar