Você está na página 1de 58

1

ndice

NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 4
O que Shockwave Flash .............................................................................. 4
O AMBIENTE DO FLASH ............................................................................... 4
Barra de ferramentas ...................................................................................... 6
Caixa de Ferramentas .................................................................................... 7
Linha do Tempo .............................................................................................. 7
Bibliotecas ...................................................................................................... 8
Painis ............................................................................................................ 9
rea de Trabalho ............................................................................................ 9
Ferramentas de Desenho e suas propriedades ............................................ 10
Manipulando Objetos .................................................................................... 17
Trabalhando com objetos externos ............................................................... 19
SMBOLOS ................................................................................................................................. 20
Os tipos de Smbolos: ................................................................................... 20
Filtros ........................................................................................................ 24
ANIMAO ................................................................................................................................. 25
Animao Quadro a Quadro ......................................................................... 25
Animao com Interpolao de Movimento .................................................. 25
Onion Skin .................................................................................................... 27
Propriedades da barra de ferramentas do quadro .................................... 28
Camadas ...................................................................................................... 29
Camadas Guia .............................................................................................. 29
Mscaras ...................................................................................................... 34
Interpolao de Forma .................................................................................. 35
Trabalhando com imagens importadas ..................................................... 35
BOTES ..................................................................................................................................... 37
CLIPES DE FILME ...................................................................................................................... 38
SONS .......................................................................................................................................... 39
VDEOS ....................................................................................................................................... 42
AES ........................................................................................................................................ 46
O painel Aes ............................................................................................. 46
PRE-CARREGADORES ............................................................................................................. 51
Criando um carregador simples .................................................................... 52
APLICAO STAND ALONE .................................................................................................... 53
Abaixo seguem os comandos do FS Command ....................................... 54
CENAS ........................................................................................................................................ 55
PUBLICAO DO FILME .......................................................................................................... 55
CONCLUSO ............................................................................................................................. 58

2
3
INTRODUO
A tecnologia Shockwave Flash, da Macromedia, j esta presente na WEB h
alguns anos, e no ltimo ano ganhou um forte impulso com a incluso do plug-
in necessrio nos navegadores mais recentes. Cada vez mais utilizado, o
Shockwave Flash j est sendo empregado em sites de grandes empresas.
O grande sucesso do Flash se deve ao seu poder de processamento
multimdia, limitado somente pela criatividade de designers e criadores de
contedo, tudo isto aliado a uma caracterstica muito importante: os arquivos
transferidos pela Internet so pequenos.

O que Shockwave Flash


uma ferramenta de autoria e edio de imagens vetoriais com animao,
som e interatividade. Baseada em imagens vetoriais, possibilita a criao de
efeitos avanados em arquivos bastante pequenos.
Alm de imagens vetoriais, ao contedo Flash pode ser acrescentado arquivos
bitmaps, sons no formato.au e .wav, e at mesmos GIFS animados.
O que so Imagens vetoriais: As imagens vetoriais no so geradas por meio
da combinao de pontos de imagem, e sim criadas a partir de clculos
matemticos executados pelo computador. Isto significa que os arquivos que
contm essas imagens armazenam somente as frmulas matemticas que
representam formas, curvas e cores, e, portanto so muito pequenos. Assim,
um arquivo que contenha o desenho de um crculo com 1 centmetro de
dimetro ter exatamente o mesmo tamanho se o crculo tiver 20 centmetros.
Outra vantagem que, ao serem ampliadas, no perdem absolutamente nada
em qualidade. A desvantagem das imagens vetoriais a impossibilidade de
representar imagens mais complexas e realistas com qualidade fotogrfica.
O que podemos criar com o Flash
Desde simples faixas animadas com anncios para pginas da WEB, menus
interativos, desenhos animados, arquivos executveis, gifs animados, etc...

O AMBIENTE DO FLASH
Ao iniciarmos o Flash ele vai apresentar uma tela com as opes que podemos

4
trabalhar com o Flash.

Na coluna da esquerda podemos abrir um projeto existente, os projetos mais


recentes vo aparecer logo abaixo do boto Open.
Na coluna do meio podemos iniciar nossos projetos. A verso 8 do Flash
permite alm da opo que vamos trabalhar em nosso curso Flash Document,
temos tambm as opes:
Flash Slide Presentation
Flash Slide Application
Flash Form Application
ActionScript File
Flash JavaScript File
Flash Project
Na coluna da direita temos as opes de modelos de aplicaes Flash.
Ao clicar em Flash Document ele mostrar a rea de composta de diversas
janelas e opes. No topo temos a barra de menus, esquerda caixa de

5
ferramentas e no centro a linha do tempo, e na grande rea branca a rea de
trabalho.

Barra de ferramentas
Para exibir a barra de ferramentas no Flash, clique no Menu , Window,
Toolbars, Main

Na Barra de ferramentas alm dos botes padres como Novo, Abrir, Salvar,
etc..., temos botes exclusivos do FLASH como, por exemplo, Encaixar
(formato de im) que auxilia no posicionamento dos elementos na tela do filme.

6
Caixa de Ferramentas
A caixa de Ferramentas do Flash 8 composto de quatro
subdivises: Ferramentas (Tools), Exibir (View), Cores (Colors) e
Opes (Options).
A rea de ferramentas composta dos botes de desenho e
manipulao dos desenhos feitos na rea de desenho do FLASH.
A rea Exibir permite modificar a forma de visualizar a rea de
desenho do Flash permitindo mover o desenho ou ampli-lo com a
lupa.
Na rea de cores podemos definir cores de linhas e cores de
preenchimento dos desenhos feitos no FLASH.
Opes tratam das opes de desenho selecionado.
Ainda com relao caixa de ferramentas, ao posicionar a ponta do
mouse sobre uma ferramenta ela mostra o nome da ferramenta e
uma letra entre parnteses , ao pressionar a tecla correspondente
letra ela ser marcada como ativa automaticamente.

Linha do Tempo
A Linha do tempo utilizada na criao de animaes. Atravs dela podemos
definir qual ser a mudana e/ou caminho a ser especificado pelo objeto do
filme. Podemos travs de a linha tempo utilizar camadas para melhor
agrupamento e movimento dos objetos.

A Timeline composta dos seguintes elementos, na parte superior temos o

nome do arquivo aberto. Na direita temos o boto de controle de cenas e

de controle de objetos do Flash e no final a opo de ZOOM da rea de

7
edio .
Abaixo temos as opes de visualizao de camadas: mostrar / ocultar,
bloquear / desbloquear e visualizar somente traos: .
Abaixo temos as camadas criadas: .
Ao lado de cada camada temos os quadros de nossa animao, quando um
quadro possui um objeto observe que o mesmo apresenta uma bolinha
preenchida, quando o mesmo apresentar uma bolinha vazada um quadro
vazio e quando o mesmo apresentar um a significa que nesse quadro temos
aes (aes so blocos de cdigos dentro de nossa animao).

No final do empilhamento de camadas temos os botes que nos permitem criar


as camadas do Flash. Criar uma camada normal, criar uma camada GUIA, criar
uma pasta (permite armazenar camadas dentro delas e no final da linha excluir
uma camada.
A barra da linha do tempo exibe os quadros da animao onde esto cursor
vermelho na barra indica o quadro selecionado, possvel clicar sobre o
quadro para selecionar o mesmo. No canto direito da barra temos o boto onde

podemos definir a aparncia da barra da Timeline .


Na parte de baixo temos as opes de Onion Skin (veremos mais a frente) o
nmero do frame selecionado, a velocidade de nosso filme (12fps), 12 Frames
per second (Quadros por segundo). Significa que nosso filme apresenta 12
quadros de animao por segundo.
Caso voc venha a produzir um filme em flash para ser exibido
em um DVD, TV ou para ser introduzido em algum filme. Ser
necessrio mudar a sua velocidade para 30FPS. Animaes que
contenham muito brilho, ou efeitos de com objetos piscando
aconselhvel utilizar 24FPS.

Bibliotecas
As Bibliotecas do Flash so objetos armazenados que podem ser utilizados
posteriormente. Existem as Bibliotecas do Flash que podem ser usadas em
qualquer filme e existe a biblioteca do filme atual, ou seja, smbolos criados

8
para o filme atual.
Para poder visualizar as Bibliotecas do Flash, escolha Menu Window, Common
Library e escolher o tipo de objeto a ser utilizado.
E para chamar as bibliotecas do filme atual escolha Menu Window, Library ou
somente a combinao das teclas CTRL+L.

Painis
A forma de trabalhar com os objetos do Macromedia Flash atravs de
Painis, quando aberto o programa estes painis localizam-se na direita de sua
rea de Trabalho e podem ser redimensionados, arrastados e retirados da tela.
Para poder chamar os painis use o Menu Window.

rea de Trabalho
Uma das primeiras coisas a serem feitas ao iniciar um filme do Macromedia
Flash definir as propriedades de sua tela, como tamanho, cor e velocidade ao
qual o seu filme vai trabalhar, estas propriedades pode ser alteradas atravs da
barra de propriedades abaixo de sua tela. Esta barra muda conforme o objeto

9
que est selecionado.

Ferramentas de Desenho e suas propriedades


A primeira ferramenta a ferramenta seta utilizada para selecionar os
objetos de sua rea de trabalho, podemos selecionar os objetos clicando sobre
eles ou simulando um contorno em forma de retngulo sobre o objeto a ser
selecionado.
Os objetos no Flash diferenciam contorno de preenchimento
ento se voc clicar no meio de um objeto voc apenas
selecionar o preenchimento. Para poder selecionar ambos
necessrio um duplo clique ou simular um contorno sobre ambos com a
ferramenta seta.
A ferramenta ao lado da seta em forma de uma flecha branca a ferramenta

subselecionar que permite trabalhar com os ns de seu objeto.

Abaixo temos a ferramenta FreeTransform . Ao clicar sobre ela , ser


mostrado alas de dimenso em volta de seu objeto. Na parte de Options da
caixa de ferramentas ele mostra as opes da ferramenta.

10
A primeira opo a Rotate and Skew, que permite rotacionar e inclinar a
ferramenta.
A segunda opo Scale permite dimensionar a forma selecionada. Se
redimensionar seu objeto com a tecla ALT pressionada ao dimensionar para
um lado ele faz a mesma dimenso para o outro lado.
A terceira opo a opo Distort que permite distorcer seu objeto em
perspectiva. A ltima opo a Envelope que vai permitir editar o objeto com
curvas de bezier.
Caso voc j tenha convertido seu objeto em smbolo as opes disponveis
sero somente Rotate and Skew e Scale.

Ao lado temos a ferramenta Gradient Transform Tool , veremos o uso


dessa ferramenta posteriormente.

Abaixo temos a ferramenta Linha que permite que se trace linhas e


podemos tambm unir os ponto de uma linha criando assim polgonos.
Estando com o a ferramenta encaixar (Im) ligada - o mesmo
encontra-se caixa de propriedades e na barra de ferramentas -
ao traar ele mantm uma bolinha na extremidade da linha e
quando encaixar ele tambm a mostrar, isso far tambm
com que as linhas sempre saiam retas na vertical e diagonal. Esta ferramenta
tambm auxiliar na criao de quadrados e circunferncias. Tambm manter
uma grade invisvel em sua tela - o que muitas vezes atrapalha - para o
posicionamento de objetos. Para evitar o uso do im voc pode deslig-lo ou
ento utilizar as setas de seu teclado para o posicionamento.
A verso 8 do Flash trouxe uma nova ferramenta que permite desenhar os

objetos como grupos a ferramenta Object Drawing . Caso essa


ferramenta esteja desligada ao desenhar um objeto sobre um existente o novo
objeto substituiria a parte sobreposta.
Ao lado da ferramenta linha temos a ferramenta Lao que permite fazer
selees irregulares em nossos objetos.

11
Na linha de baixo a ferramenta da esquerda a ferramenta caneta que permite
criar curvas Bezier no Flash e alterar os pontos de um objeto do Flash. Abaixo
temos um retngulo e depois do mesmo ter sido alterado com a ferramenta
caneta.

Ao lado da ferramenta caneta temos a ferramenta Texto.As opes de Texto


podem ser Esttico, Dinmico e de Entrada.
Texto Esttico: o texto simples com todas as possibilidade de Formatao.

Texto Dinmico: o texto que recebe informaes de uma varivel, ou seja,


ele l o texto de um arquivo qualquer que contenha uma varivel igual a sua,
exemplo de usos para leitura de variveis de scripts, ASP, PHP, HTML e at
mesmo de arquivos TXT, como por exemplo, para textos em barras de
rolagem.

Texto de Entrada: Permite que se crie uma caixa de texto e que a mesmo
comporte-se como campo de formulrios, ele permite que o usurio insira
informaes que sero repassadas tambm atravs de variveis.

12
Ferramenta Elipse : Permite desenhar crculos e elipses no seu filme.

Retngulo : O retngulo possui como mais uma opo a possibilidade de se


desenhar um retngulo com cantos arredondados. Ao selecionar a ferramenta

retngulo esta opo aparece na caixa de opes . Esta mesma opo


aparece ao dar-se um duplo clique na ferramenta retngulo.

Quando precisar desenhar um retngulo com cantos


arredondados e no souber seu ngulo desenhe seu retngulo e
sem soltar o mouse v arredondando seus cantos com as setas
direcionais.

Junto ferramenta retngulo temos a ferramenta Polystar Tool que


permite desenhar polgonos e estrelas. Essa mudana pode ser feita atravs
do boto Options na barra de propriedades.

Ao chamar as ferramentas Oval e retngulo e polgono na caixa


de propriedades sero mostradas as propriedades de cor de
contorno, cor de preenchimento e tipo de linha. Ao clicar no
boto personalizar ser aberto uma nova janela onde teremos mais algumas
opes da ferramenta Trao.

13
A ferramenta lpis permite desenhar linhas em sua rea de desenho ao
selecionar a ferramenta linha na caixa de opes abrem-se as opes de
linhas: Acertar, Suavizar e Tinta.

A ferramenta ao lado temos a ferramenta pincel que permite traos com de


preenchimentos, na caixa de opes abre-se s possibilidades de
preenchimento, tipos de pinceis e dimetros de pinceis.
As opes dessa ferramenta so:
Paint Normal: Pinta o objeto por onde o pincel for
passado;
Paint Fills: Pinta somente preenchimentos;
Paint Behind: Pinta somente fora do objeto;
Paint Selection: Pinta somente o que est
selecionado;

14
Paint Inside: Permite pintar somente dentro.

Abaixo temos a ferramenta Tinteiro que permite pintar a cor de contorno


dos objetos. Basta selecion-la e aplicar a cor desejada diretamente na linha
de contorno de seus objetos.

Ao lado dela temos a ferramenta Balde de Tinta que permite modificar a


cor de preenchimento dos objetos O Flash possui para preenchimento as cores
da paleta WEBSAFE e tambm alguns gradientes existentes. Na caixa de
opes tambm podemos definir como deve ser aplicado o preenchimento, em
todo o objeto , ou com lacunas.
Quando se trabalha com preenchimentos necessrio que se chame paleta
Misturador de Cores, Nesta paleta podemos definir se o preenchimento ser
slido, linear, radial ou bitmap. Podemos tambm atribuir a cor atravs de seu
cdigo RGB, ou hexadecimal, alm de aplicar um canal Alpha.

Na paleta Color a opo padro inicial Solid onde podemos definir as cores
de contorno e preenchimento pela escolha da cor, cdigos RGB e
Hexadecimal. A opo Alpha define o grau de transparncia da cor. Na opo
TYPE temos como padro SOLID, ao clicar nessa opo podemos mudar para
linear que aplicar ao objeto selecionado
Ao escolher opo SOLID , ser mostrado na opo COLOR a barra de cores
gradiente.

15
Voc pode observar que temos na opo gradiente duas alas de cores, para
alterar a cor de qualquer uma das alas de gradiente, basta clicar sobre ela e
escolher a cor desejada. Podemos acrescentar uma ala de gradiente a nossa
paleta de cores basta clicar entre uma delas, ele vai criar as outras alas de
cores.

Para retirar uma das alas basta apenas clicar sobre a ala, manter o mouse
pressionado e arrastar para fora da linha.

Ao clicar na ferramenta Gradient Transform Tool , permite alterar a


posio do gradiente dentro de nosso objeto. Ao selecionar o objeto com o
gradiente e clicar na ferramenta ele vai mostrar uma ala quadrada e uma
redonda em volta do gradiente.

A ala quadrada permite aproximar / afastar as cores gradientes, a ala em


crculo permite rotacionar o gradiente.
Podemos tambm escolher a opo RADIAL, ao escolher opo RADIAL

16
podemos aplicar as mesmas opes do gradiente LINEAR. Podemos tambm
definir a opo de gradiente e preencher nosso objeto com o balde de tinta.

A ultima opo chama-se Bitmap, que permite com o conta-gotas capturar o


bitmap. Caso no exista uma imagem dentro do Flash, ao escolher a opo
Bitmap ele vai solicitar que se escolha a imagem para servir como
preenchimento.

A ferramenta conta-gotas permite capturar a cor de um objeto e aplicar


dentro de outro, por exemplo, se voc importar um bitmap para dentro do flash
e depois desejar aplicar este bitmap como preenchimento de um objeto clique
sobre o bitmap com o conta gotas, a ferramenta modifica-se imediatamente
para o balde de tinta e voc pode preencher onde desejar.

A ferramenta ao lado o apagador funciona como uma borracha, o cuidado


como apagar necessrio utilizar as opes desta ferramenta , onde voc
poder apagar somente contornos, somente preenchimentos. A torneira paga
todo um preenchimento ou todo um trao. Para apagar todos os objetos
existentes em sua rea de Trabalho, basta dar um duplo clique sobre a
ferramenta borracha.

Manipulando Objetos
Ao desenhar no Flash, podemos manipular nossos objetos, tanto na forma,
como contorno e preenchimentos.
Ao desenharmos linhas, polgonos, retngulos e elipses, podemos alterar a sua
forma facilmente com a ferramenta seta.
Por exemplo, se clicarmos diretamente na linha a mesma ser selecionada,

17
mas se aproximarmos o cursor da linha o mesmo se transformar em uma
curva, ao pressionarmos o boto do mouse e arrastarmos transformaremos
nossa linha em uma curva, o mesmo vale para todos os objetos. Em retngulos
ao aproximarmos de suas extremidades ele tambm apresentar um vrtice
permitindo que se crie pontas.
Ao manipular textos necessrio um processo um pouco mais detalhado, os
textos no so criados como vetores, e para que se possam alterar as formas
dos textos necessrio primeiro transform-los em vetores. Aps criar o seu
texto, basta selecion-lo com a ferramenta seta e desmembr-lo (Menu
Modificar, Desmembrar ou CTRL+B). A primeira vez que se desmembrar um
texto ele vai quebrar em letras, retira o processo de desmembrar para ele se
transformar em Vetor.
O seu texto passou a ser um vetor ento podemos acrescentar gradientes, e
alterar a sua forma.
Importante: Depois de convertido em vetor no mais possvel alter-lo como
texto.

No logotipo acima alm de aplicarmos cores de preenchimento gradiente em


um texto desmembrado, tambm utilizamos a opo de agrupar (Menu
Modificar) e de Ordem, (Menu Modificar).
Outra opo de manipulao muito importante a manipulao de alinhamento
de objetos (Menu Window, Align ou Menu Modify Align), pois quando iniciarmos
o nosso trabalho com animaes , existe um cuidado muito grande com
posio de nossos objetos.
A opo To Stage da paleta Align permite alinhar e / ou distribuir os
elementos de acordo com o palco.

18
Trabalhando com objetos externos
No Flash alm de criar seus prprios objetos podemos tambm inserir novos
objetos dentro de nossos filmes.
O Flash importa quase todos os formatos grficos, tendo como destaque o
PNG (Melhor formato para arte no Flash, isso permite uma integrao muito
forte como Macromedia Fireworks), O PSD (Photoshop), Formatos de bitmaps
(BMP, GIF, JPG, etc...) arquivos de udio como WAV, MP3, AU, formato de
vdeo AVI, MOV, MPEG, imagens vetoriais como criadas pelo Adobe Illustrator,
Macromedia Freehand, AutoCAD, alm de programas que permitem criar em
SWF como Discreet Plasma, ToomBoom e Swift 3D.
Ao importar um objeto o mesmo ser colocado na biblioteca de smbolos do
programa.
Ao importa vetores e metaarquivos (WMF), voc pode desmembr-lo e trat-lo
como um objeto do Flash. J arquivos Bitmaps ser necessrio trat-los como
bitmap, se for necessrio convert-los em vetores necessrio Traar o
Bitmap, ou seja, transform-lo em vetor. A perca de qualidade na imagem
infelizmente ocorrer.
Na prxima imagem temos um imagem Bitmap e depois de ser traada. e ao
lado temos um carro em WMF que importado como objetos agrupados e
depois de desmembrada.

19
SMBOLOS
Para podermos trabalhar com animaes no FLASH necessrio que quase
todos os elementos sejam convertidos para smbolos, pois atravs de
smbolos que podemos definir qual o comportamento do smbolo:
Os trs smbolos do FLASH so Grficos , Botes e Clipes de Filme .
Voc pode criar o objeto e depois convert-lo em Smbolo ou atravs do menu
Insert Convert to Symbol cri-lo e depois adicionar ao filme. Ao criar um
smbolo ele vai automaticamente para a Biblioteca de Smbolos.
Para converter um objeto existente em smbolo basta apenas apertar a tecla de
funo F8.

Os tipos de Smbolos:
Grfico: Este o tipo mais bsico de smbolo, pois ele praticamente esttico,

20
embora possa receber aes para ele, muito utilizado tambm dentro dos
outros smbolos.
Boto: Este smbolo pode receber valores diferentes para estado do boto,
normal, ao rola sobre, pressionado e oculto, muito utilizado para chamar
aes.
Clipe de Filme: Este tipo de smbolo permite que se crie um filme dentro do
smbolo com a vantagem de que ele carrega todo o clipe de filme primeiro e
mostra o mesmo no filme todo de uma vez.

Ao desenhar seu objeto e pressionar F8, (Menu , Modify Convert to Symbol) ele
abre a tela acima, onde necessrio dar um nome ao smbolo (ele sempre
trar um nome genrico , como symbol??), o nome aconselhvel manter uma
nomenclatura que facilite a sua identificao. Por exemplo Grficos colocar
GRnome, boto BTnome, Clipe de Filme MCnome. No caso do clipe de filme
usa-se MC (Movie Clip), dessa forma que a comunidade de designers e
programadores em Flash chama o Clipe de Filme. Abaixo do nome temos a

21
escolha do tipo de smbolo. Ao lado do tipo de smbolo temos a posio de seu
centro de Registro, ao padro no canto superior esquerdo, esse centro de
registro necessrio, pois a partir dele que seu objeto carregado.
Ao clicar na opo Advanced, abre-se as opes de exportao de nosso
objeto para cdigo. Usaremos esse recurso mais a frente.
Mesmo depois de pronto podemos alterar as propriedades de nossos smbolos
atravs da biblioteca (atalho CTRL+L ou Menu Window Library), ou mesmo ele
estando dentro do filme principal, em ambos os casos basta apenas clicar
sobre o smbolo com o boto direito do mouse e depois escolher editar para
ambos os casos, e estando o smbolo no filme podemos edit-lo tambm no
local e em uma nova janela.
Embora a funo inicial do Clipe de Filme era conter animaes
para se evitar timelines extensas quando fosse necessrio uma
animao de repetio e grficos para objetos estticos,
atualmente convencionou-se utilizar somente Clipes de Filme mesmo para
objetos estticos. A razo para essa mudana pelo fato de que posso
controlar meu Clipe de Filme atravs de programao (linguagem actionscript)
e aplicao de filtros e mistura de camadas.
Ao criar um smbolo, podemos manipul-lo pela barra de propriedades.

Na barra de propriedades podemos definir a posio X e Y de nosso objeto, a


sua largura (W) e altura (H), o comportamento do objeto. Onde est Instance
Name, um campo utilizado para dar nome de instncia ao objeto, esse
campo ser utilizado em actionscript. A opo SWAP permite substituir o
smbolo na rea de edio por outro existente na biblioteca.

22
A opo Color permite modificar as propriedades de cor e transparncia do
smbolo. As opo so:
Brightness Brilho, o brilho natural do objeto 0%, ao colocar em -
100% ele retira todo o brilho (preto) e 100% ele adiciona todo o brilho
(100%).
Tint Preenchimento, permite preencher o seu objeto com qualquer cor
com grau de transparncia.
Alpha Permite acrescentar transparncia aos smbolos.
Advanced Permite trabalhar as cores RGBA do smbolo.

A opo Blend permite aplicar mistura de objetos. necessrio que cada


objeto esteja em sua camada.
Use Runtime Bitmap Caching, permite criar um bitmap de seu objeto em
tempo de execuo.

23
Filtros
A verso 8 do Flash trouxe uma inovao esperada h muito tempo que so
filtros para serem aplicados aos smbolos. Uma nica observao, os filtros s
podem ser aplicados a Clipes de Filme e Textos.
Para aplicar um filtro, selecione seu smbolo e clique no boto Add Filter .
As opes so:
Drop Shadow Aplica uma sombra ao seu objeto.

A opo Blur permite trabalhar o sombreamento do smbolo, o cadeado


fechado faz com que ao alterar-se uma das opes mudam-se as duas. Ao
clicar no cadeado, o mesmo ficar aberto e assim ser possvel alterar o
Blur de forma independente. A opo Strenght trabalha a disperso da
sombra. Podemos alterar a qualidade da sombra em Quality, podemos
alterar a cor, o ngulo e a distncia da sombra. A opo Knockout trabalha
a mscara do smbolo. Inner Shadow aplica a sombra Interna e a opo
Hide Object, oculta o smbolo deixando somente o filtro sendo mostrado.
Blur Permite desfocar seu smbolo, podemos alterar as propriedades
de desfoque e qualidade do mesmo.
Glow Permite aplicar brilho ao seu smbolo.
Bevel Atravs dessa opo podemos aplica chanfros e entalhes em
nosso smbolo. Na opo Type, podemos definir ele como Inner, Outer e
Full.
Gradiente Glow Permite aplicar um brilho gradiente aos smbolos.
Gradiente Bevel Permite aplicar Chanfros Gradiente aos smbolos.
Adjust Color Permite trabalhar os ajustes de cores do smbolos como
Brilho, Contraste,Saturao e Matiz (Hue).
A terceira guia Parameters, ser utilizada com componentes.

24
ANIMAO
Animao Quadro a Quadro
A animao quadro a quadro funciona de maneira semelhante a um desenho
animado, ou seja, para cada movimento do objeto dever ser colocado o
mesmo dentro de quadro.
Para entendermos melhor este processo crie uma circunferncia na sua rea
de desenho. Observe que ao desenhar o objeto no filme do Flash , no primeiro
quadro aparece uma bolinha preta , mostrando que no quadro existe um objeto.
Para inserir uma instncia deste mesmo objeto no prximo quadro, clique com
o boto direito do mouse no prximo quadro e escolha Inserir Quadro Chave
(tecla de atalho F6). Ele repete o mesmo smbolo. Modifique a cor de seu
smbolo. Repita este processo at o quadro 12, alterando a cor de seu objeto a
cada quadro. Isto far com que sua animao possua 1 segundo. Para testar
aperte as teclas CTRL+ENTER, isso testa o seu filme e gera um arquivo com a
extenso SWF.
O arquivo de projeto do Flash possui a extenso FLA, ou seja, ao
salvar seu arquivo ele ser salvo com essa extenso. Para poder
incluir seu arquivo em uma pgina HTML ser necessrio
transform-lo para o formato SWF, isso pode ser feito atravs do teste de seu
filme (CTRL+ENTER). Caso voc utilize o Dreamweaver ele possui um recurso
de insero do SWF na pgina que vai gerar todo o cdigo necessrio para a
exibio do SWF. Podemos tambm gerar todo o HTML pelo prprio Flash
atravs do recurso de publicao que veremos mais adiante.
Quando se trabalhar com animao quadro a quadro no se converte
os objetos em smbolos.

Animao com Interpolao de Movimento


A animao quadro a quadro perfeita, pois voc tem um total controle sobre o
filme, mas ao mesmo tempo ela demorada, pois muitas vezes sua animao
ter 200 quadros ou mais ento isso se tornaria demorado e com mais
possibilidades de erro, embora em muitos filmes necessrio que as

25
animaes sejam feitas quadro a quadro.
Uma forma de se automatizar este processo atravs da animao com
Interpolao, ou seja, podemos definir a posio inicial e afinal de nosso objeto
e depois podemos fazer a animao.
Comece um novo filme e cria uma circunferncia com preenchimento ao seu
gosto e transforme-a em um smbolo.
Crie um novo quadro no quadro 12.
Para podermos criar a interpolao de movimento podemos clicar com o boto
direito no quadro 1 e escolher Create Motion Tween, ou podemos utilizar a
barra de propriedades, clique no inicio de sua animao na Timeline (no caso
no quadro 1) e na barra de propriedades na opo Tween coloque Motion.

Observe na timeline que ele vai gerar uma seta indicando nossa animao e
preenche os quadros com uma cor lils. Ele tambm apresenta como quadros
preenchidos somente o primeiro e o ltimo quadro de sua animao. Clique no
ltimo quadro e mude seu smbolo de posio na rea de desenho. Se voc
arrastar o cursor vermelho pela animao voc poder ver como est sua
animao. Estando no primeiro quadro e pressionando ENTER ele tambm
apresenta sua animao. Para ver a animao em looping pressione
CTRL+ENTER. Para poder andar quadro a quadro de sua animao , voc

26
pode pressionar as teclas com sinal de maior (>) e menor (<) no teclado.

Onion Skin
Quando se cria uma animao muitas vezes temos a necessidade de ficar indo
e vindo atravs dos quadros para termos uma idia melhor de como est
ficando a animao, o que causa uma grande perca de tempo. mas para
facilitar todo este processo o FLASH possui um processo chamado Onion Skin.
Com ele podemos editar o quadro atual enquanto observamos o quadro que
est logo abaixo dele ou at mesmo editar diversos quadros simultaneamente.
O quadro atual aparece com as cores normais, enquanto os quadros anteriores
aparecem com as cores apagadas, como se estivssemos sendo vistos atravs
de uma folha de papel vegetal. Somente o quadro atual pode ser modificado,
os quadros apagados no podem ser alterados.
Para utilizar o efeito basta clicar sobre o boto Papel de Transferncia.
Os botes so Papel de Transparncia, Estruturas Seqenciais em Papel de
Transparncia, Editar Vrios Quadros e Modificar Marcadores de
Transparncia.

Caso precise mudar a trajetria de sua animao , clique no quadro a ser


alterado e arraste seu smbolo de posio. Observe que ele cria um novo
quadro chave no quadro onde voc modificou a trajetria do smbolo.

27
Propriedades da barra de ferramentas do quadro

Ao selecionar um quadro chave, podemos definir suas propriedades pela barra


de ferramentas.
Em Frame Label, podemos definir um rtulo para nosso frame. Na opo
Tween podemos definir como Motion (para animao de interpolao de
movimento) ou Shape (para animao de interpolao de forma). A opo
Ease permite suavizar a sua animao. Ao colocar em 100 (out) ele vai
suavizar o final da animao. Ao colocar em -100 (in) ele vai acelerar o final da
animao. A verso 8 do FLASH permite agora trabalhar a acelerao do filme
atravs da opo Edit. Ele vai permitir que voc altere a sua animao com
curvas de Bezier.

28
A opo Rotate permite rotacionar seu smbolo na animao no sentido horrio
(CW) ou anti-horrio (CCW). Ao escolher uma das formas de rotao ser
possvel tambm definir a quantidade de voltas .
A opo Orient to Path utilizada quando se utiliza animao por guias ,
veremos esse tipo de animao mais adiante.
A terceira coluna ser utilizada para aplicao de udio em nosso filme.

Camadas
Ao iniciarmos um filme do FLASH, existe apenas uma camada e um nico
quadro, Para melhor administrarmos um filme necessrio que se crie dentro
de um filme vrias camadas.
Ao criarmos camadas para uso em nosso filme a camada superior sempre ser
a que sobrepor s demais. Para criarmos mais camadas basta apenas clicar
sobre o boto em formato do sinal de mais, ou atravs do menu Insert. Para
modificar o nome de uma camada, basta apenas dar um duplo clique sobre o
nome da camada e digitar o novo nome.

Camadas Guia
Um dos grandes atrativos da animao com Interpolao possibilidade de
criar caminhos para a animao do objeto este processo chamado Linha
Guia.
Para especificar este caminho existem dois cuidados importantes, quando voc
cria um smbolo voc pode observar que na parte central do smbolo aparece
um sinal de mais (+) este sinal deve coincidir com a linha guia. O segundo
cuidado que a linha dever ser criada na camada da linha guia para no
ocorrer defeitos na animao.
Vamos criar uma animao que far o desenho de uma bola "quicando" no
filme.
Primeiro, crie um smbolo no formato de uma circunferncia e crie uma
interpolao at o quadro 40.
Clique no boto Adicionar Camada Guia ou clique no Menu Insert Motion
Guide, depois clique no primeiro quadro da camada guia (observe que ela
mostra um arco) e com a ferramenta lpis faa retas conforme abaixo.

29
Um cuidado sempre certificar-se que a linha guia foi desenhada na camada
guia, pois comum desenhar a linha na camada guiada.
Posicione a bola com centro em cima de sua linha, arraste-a no quadro 40 no
final de suas linhas e teste o seu filme. Para dar um pouco mais de realismo ao
seu movimento envergue as linhas.
A linha guia no aparece em seu filme.

Podemos fazer com que dois ou mais objetos sigam as linhas guias e podemos
tambm alterar o ponto central de nosso smbolo. Basta dar um duplo clique
sobre o mesmo e mudar o smbolo de posio em relao ao ponto central.
Dois Objetos na mesma Guia

30
Podemos fazer com dois objetos sigam a mesma guia, podemos at fazer com
que dois objetos sigam a mesma guia, alterando o seu centro ou a sua posio
na camada.
Vamos fazer com que um objeto circulo um texto, simulando uma volta
passando pela frente do objeto e depois por trs do mesmo objeto.
Primeiro crie o seu texto como exemplo na apostila criamos um texto cromado.
Primeiro digite o seu texto (com letra forte e grande). Duplique o seu texto e na
cpia coloque cor cinza claro (ser sombra de nosso texto). No texto original
desmembre o texto, selecione a ferramenta linha, escolha uma cor de linha
branca e divido o seu texto ao meio no sentido horizontal.
Selecione a parte superior de seu texto e pinte com um gradiente linear de
cima para baixo (Somente na parte selecionada). No exemplo usei de azul
escuro para azul claro.
Selecione a parte de baixo e pinte de baixo para cima com outro gradiente
linear, no exemplo usei de marrom para vermelho.
Selecione a ferramenta apagador com a opo somente linhas e apague a
linha que usamos para dividir o nosso objeto. Selecione todo o texto e agrupe-o
(CTRL+G).
Posicione a sombra abaixo de seu texto cromado , use as setas direcionais
para posicion-la melhor em seu texto, selecione ambos e converta-o em
smbolo grfico.

Crie um smbolo grfico em formato de uma esfera com preenchimento


gradiente radial e deixe-o armazenado na biblioteca de smbolos.
Crie as seguintes camadas, Texto, Bola e uma camada guia acima da bola.
a camada da guia faa uma arco oval em volta de seu texto conforme a figura.

31
Na camada da bola arraste o smbolo da bola para a sua camada e posicione o
smbolo junta linha guia, conforme j esta na figura acima.
Na camada bola crie quadros chaves nos quadros 10,20,25,35,45 e nas
camadas texto e guia somente no quadro 45.
Crie as interpolaes de movimento entre os quadros na camada bola.
No quadro 10 posicione a bola um pouco acima na linha guia e duplique o seu
tamanho.

Nos quadro chaves seguintes posicione a sua circunferncia conforme figura


abaixo, No quadro 35 ao contrrio do que foi feito no quadro 10, diminua a sua
bola para a metade de seu tamanho.

O prximo passo fazer com que a bola na volta passe por trs de seu texto,
ento cria uma nova camada chamada bola2 abaixo da camada texto.

32
Aps ter criado a nova camada necessrio fazer com que a camada texto e a
nova camada tambm fiquem guiadas, Clique sobre cada uma delas com o
boto direito e chame a opo propriedades, depois marque a opo guiada,
este processo deve ser feito para as duas camadas.
Na camada bola selecione dos quadro 25 ao 45 (se for necessrio comece pelo
final da camada bola, pegando um quadro vazio).
Copie estes quadros (Boto direito , copiar quadros).
Clique no quadro 25 da camada bola 2 e cole os quadros (boto direito colar
quadros).
Na camada bola 2 se ficaram quadros a mais aps o 45. selecione-os e
apague-os,
Na camada bola apague os quadros 26 ao 45.
Teste o seu filme e observe que aps o quadro 25 a bola vai passar atrs do
texto.

33
Mscaras
Criar mscaras uma maneira simples de revelar seletivamente partes da
camada acima ou abaixo da cena. Isso requer marcar uma camada como
camada de mscara e as camadas abaixo como camadas mascaradas.
Para criar a sua mscara desenhe ou importe algum objeto para seu palco.
Crie uma nova camada e desenhe o objeto que vai mascarar o objeto da
camada de baixo. Na camada de cima clique com o boto direito do mouse e
escolha MASK.

Observe que ele deixa visvel somente onde os objetos se interceptam. Veja
abaixo a rea de edio natural e depois com a mscara aplicada.

Ao aplicar a mscara as suas camadas so bloqueadas e a camada de baixo

faz um recuo.

34
Essa camada recuada, chamada de camada Mascarada (MASKED).

Interpolao de Forma
A interpolao de forma uma tcnica usada nos efeitos de morfismo que
podem ser feitos usando-se transformaes de instncias, como rotao,
redimensionamento ou distoro. Preenchimento, contorno, gradientes e alfa
so todos atributos que podem ser aplicados na Interpolao de forma.
Como exemplo bsico inicial, crie um retngulo no palco de seu filme, depois
crie um quadro chave no quadro 12 e apague o retngulo e desenhe uma
circunferncia.
Clique no quadro 1 de sua linha do tempo. Na caixa de propriedades abaixo da
tela, no campo interpolao onde est none escolha SHAPE, observe que
na linha do tempo ao invs de aparecer uma cor lils aparece uma core verde-
claro, isso identifica uma interpolao de forma.

A interpolao de forma ao contrrio da Interpolao de


movimento, os objetos no devem ser convertidos em smbolos.
Imagens vetoriais importadas como, por exemplo, clip-arts em
wmf, devem ser desmembrados e imagens bitmaps, devem ser
traadas.

Trabalhando com imagens importadas


Inicialmente vamos importar duas imagens em wmf (por exemplo, podemos
utilizar clip-arts do MS Office se voc o tiver instalado em seu computador).

No exemplo em questo vamos transformar um smbolo no formato de

35
interrogao em uma lmpada, este exemplo poderia ser usado em um banner.
Coloque a interrogao no quadro 1 e desmembre-a (CTRL+B), crie o quadro
chave no quadro 40 e insira a lmpada, redimensione-a para que fique com as
mesmas dimenses da interrogao e desmembre-a tambm, apague a
interrogao deste quadro e crie a interpolao de forma.
Para podermos trabalhar como ser feita a forma de nossos objetos podemos
acrescentar referncias entre as formas.
Clique no menu Modify, Shape, Add Shape Hint, Vai aparecer em ambas s
imagens uma bolinha vermelha com a letra a, estas so as referncias, voc
pode arrast-las para qualquer posio dentro de seu desenho e isto far com
que a sua forma mude a trajetria durante a modificao.
Pode-se acrescentar quantas referncias de forma forem necessrias. entre
um objeto e outro. Uma referncia de forma somente para dois objetos, se,
por exemplo, voc tem um objeto que se transforma em outro e depois este
segundo transforma-se em um terceiro, a referncia de forma colocada no
primeiro, serve somente para o primeiro e o segundo, para o terceiro
necessrio acrescentar do segundo para o terceiro.
Quando voc pretende aplicar referncia de forma em bitmaps, aconselhvel
programas externos ao flash como, por exemplo, o Winmorph que permite
fazer a mudana de forma entre duas fotos e export-la como swf.
Mas o prprio flash possui uma possibilidade de se trabalhar com formas, que
a possibilidade de se traar o bitmap. Aps inserir a imagem, Menu Modify,
Bitmap, Trace Bitmap.

Se a sua imagem for, por exemplo, uma caricatura, voc ainda conseguir
bons resultados, mas se for uma fotografia, o resultado poder ser desastroso.

36
BOTES
Na verdade, os botes so clipes de filme interativos compostos por quatro
quadros. Quando voc seleciona o comportamento de boto para um smbolo,
o Flash cria uma Linha de Tempo com quatro quadros. Os primeiros trs
exibem os trs estados possveis do boto, enquanto o quarto defina sua rea
ativa. Na realidade, a Linha de Tempo no reproduzida, simplesmente reage
ao movimento do ponteiro s aes, passando para o quadro apropriado.
Para tornar um boto interativo em um filme, coloque uma instncia do smbolo
do boto no Palco e atribua aes instncia. Voc pode adicionar aes aos
botes diretamente no smbolo, ou na linha do tempo , sendo que nesse caso
necessrio dar um nome de instncia ao smbolo de boto.
Cada quadro na Linha de Tempo de um smbolo de boto tem uma funo
especfica:

O primeiro quadro o estado UP (Para cima), representa o boto que ser


visvel ao abrir o filme do flash.
O segundo quadro o estado OVER (Sobre), representa a aparncia do boto
quando o ponteiro esta sobre ele.
O terceiro quadro o estado DOWN (Para baixo), que representa a aparncia
do boto ao ser clicado.

37
O quarto quadro o estado HIT (rea), que defina a rea que responder ao
clique com o mouse. Essa rea invisvel no filme.
Ao transformar um texto em boto essa rea devera sempre ser preenchida
com um objeto como por exemplo um retngulo cobrindo o texto para que todo
o texto fique clicvel.

CLIPES DE FILME
Clipes de Filme mais conhecidos como Movie Clips ou somente MC so
pequenos trechos de animao que funcionam independentes da linha do
tempo do filme principal. Podem conter sons, controles interativos, instncias
de outros MCS. Podem ser controlados atravs de botes, por aes de
quadros, ou por outros MCS, podem ainda ser utilizados na criao de botes
animados.
Uma das grandes vantagens dos MCS voc pode edit-los separadamente
do filme principal, facilitando a organizao da animao, alm de que o MC
carregado por completo no filme.
Clique no Menu Insert e escolha New Symbol e escolha Movie Clip, d um
nome para ele e depois clique em OK. Observe que a rea do filme no possui
inicio e fim e no centro do MC aparece o ponto de registro, importante
sempre se basear neste ponto, .
Crie um tipo de animao ao seu critrio. Salve o filme e volte cena principal.
Chame a biblioteca de smbolos CTRL+L , observe que o smbolo do MC
possui na sua visualizao a opo de boto play ou seja, voc pode
visualizar a animao mesmo antes de inserir o MC.
Vamos criar uma simulao de pingos dgua em nosso filme, comece um novo
filme e atribua a ele um fundo de cor azul.
Depois clique no menu Inserir, novo Smbolo, Clipe de filme, no centro de seu
clipe de filme desenhe uma circunferncia em uma cor escura de contorno com
tamanho pequeno, sem preenchimento, converta esta circunferncia em
smbolo grfico.
Crie uma quadro chave no quadro 20 e aumente o seu tamanho em +- 5 vezes
e aplique um alfa de 0%.
Crie mais quatro camadas. Selecione todos os quadros da camada 1 e copie-

38
os (Boto direito, copiar quadros)
Clique no quadro 5 da camada 2 e cole os quadros. Clique no quadro 10 da
camada 3 e cole os quadros e siga assim at a ltima camada.

SONS
No Flash, possvel utilizar os sons de vrias maneiras. Voc pode criar sons
reproduzidos continuamente, independentemente da Linha de Tempo, ou pode
sincronizar a animao com uma trilha sonora. Voc pode anexar sons a
botes para torn-los mais interativos e faz-los aumentar e diminuir para obter
uma trilha sonora apurada.
possvel usar sons em bibliotecas compartilhadas para vincular um som de
uma biblioteca a vrios filmes. Tambm possvel usar sons em objetos de
som para controlar sua reproduo com o ActionScript.
O Flash armazena os sons na Biblioteca juntamente com os bitmaps e
smbolos. Como nos smbolos, basta uma cpia de um arquivo de som para
utiliz-lo de vrias maneiras no filme.

39
Para adicionar o som ao seu filme aps importar ele para dentro do FLASH,
arraste ele para o quadro onde ele dever ser iniciado.

Ao adicionar um som a sua linha do tempo, podemos controlar a sua execuo


pela barra de propriedades. Clique no quadro onde foi inserido o udio.

Observe que ele mostrar o arquivo de udio que est sendo carregado, caso
tenha mais de um arquivo de udio em sua biblioteca voc poder alterar o
arquivo por essa opo.
Podemos tambm aplicar efeitos em nosso som
A opo None no aplica quaisquer efeitos ao arquivo de som. Escolha essa
opo para remover os efeitos aplicados anteriormente.
A opo Left Channel/Right Channel reproduz o som somente no canal
esquerdo ou direito.
A opo Fade Left to Right/Fade Right to Left desloca o som do canal
esquerdo para o direito e do direito para o esquerdo.
A opo Fade-in aumenta gradualmente a amplitude de um som pela sua
durao.
A opo Fade-out diminui gradualmente a amplitude de um som pela sua
durao.
A opo Custom permite que voc crie seus prprios pontos de entrada e de
sada do som usando Editar Envelope.

40
Escolha uma opo de sincronizao no menu pop-up Sinc:
A opo Event sincroniza o som com a ocorrncia de um evento. Um evento
de som reproduzido totalmente quando o respectivo quadro-chave inicial
exibido pela primeira vez, independentemente da Linha de Tempo, mesmo se o
filme parar. Os sons de evento so misturados quando voc reproduz o filme
publicado.Um exemplo de evento de som um som reproduzido quando um
usurio clica em um boto.
A opo Start idntica Event, exceto pelo fato de que, se o som j estiver
em reproduo, ser iniciada uma nova instncia desse som.
A opo Stop silencia o som especificado.
A opo Stream sincroniza o som , ao se importar um vdeo e precisar incluir a
trilha sonora, deixar essa opo marcada.
Embora se torne fcil conseguir sons na Internet e em CDS
multimdia hoje em dia, muitas vezes voc precisar editar o seu
prprio som, por exemplo, uma frase, a ser dita ao clicar sobre um
boto, ou uma parte de uma msica para introduo de seu site,
aconselhvel para isso o uso de programas externos como, por exemplo, o
SoundForge, que permite trabalhar com praticamente todos os formatos de
sons e recortar msicas para o seu projeto, ele tambm possui efeitos
diferenciados para o som, deixando para o Flash o som j pronto para ser
utilizado.

41
VDEOS
Entre os diversos formatos populares para vdeo digital que o Flash importa
esto o QuickTime, MPEG, AVI e DV. Alm de importar possvel adicionar
interatividade, animaes e figuras do Flash e em alguns casos possvel
aplicar interpolaes de movimento.
Para importar um vdeo, Menu File Import, Import Vdeo e vai aparecer uma cx
de dilogo, onde voc deve selecionar o seu filme. Caso o seu filme venha a
ser puxado de um servidor de Streaming Flash necessrio marcar a
segunda opo e direcionar o caminho do servidor.

Na segunda etapa necessrio que voc defina como voc quer importar seu
vdeo para o flash.
Progressive download from a web Server: ele vai converter seu vdeo
para o formato FLV e vai gerar uma tela de apresentao do vdeo. Ao

42
ser executado no navegador ele vai carregando seu filme e exibindo-o
no navegador.
Stream from Flash Vdeo Streaming Service: Far a exibio de seu
vdeo a partir de um servidor de Flash Media service. Requer que o seu
provedor de hospedagem fornea esse servio.
Stream from Flash Communication Server: requer que o seu provedor de
hospedagem fornea esse servio.
Embed vdeo in SWF and play in timeline: Ele importa o vdeo sem
alterao e cria para ele os quadros na linha do tempo. Essa opo
recomendada quando o objetivo no somente exibir o vdeo e sim
trabalhar com ele no filme.
Deixe marcado a primeira opo e clique em NEXT.
Na terceira etapa, podemos definir a codificao do vdeo e ao clicar na opo
Advanced possvel definir CODEC de compresso e at mesmo fazer cortes
em seu filme (Crop and Trim)

No vamos alterar nenhuma propriedade e clique em NEXT.


Defina agora o SKIN (pele) que deseja para ser o player de seu filme.

43
Ao final clique em fisnish e ele far a converso do filme, esse processo poder
ser lento de acordo com o tamanho de seu filme e recursos de seu
computador.

Ao terminar de importar o filme ele apresentar o skin do vdeo , esse skin faz
parte do componente do Flash, FLVPlayback, voc pode alterar as
propriedades de execuo de seu filme atravs da barra de propriedades,
clicando na guia Parameters.

44
Para poder ver o seu filme, necessrio testar seu filme . Menu Control Test
Movie (CTRL+ENTER).

O processo de importao EMBED (quarta opo dos modos de importao)


que deve ser usado quando o vdeo necessitar interao (aconselhvel
importar em um Clipe de Filme), vai gerar uma linha do tempo para o filme. O
cuidado nesse tipo de importao com o tamanho do filme.

45
AES
Aes so scripts utilizados pelo FLASH para dar mais interatividade aos filmes
e um melhor controle sobre os mesmos, a linguagem de scripts do FLASH
conhecida ActionScript, quem j estiver familiarizado com linguagens de
programao se sentir bem vontade com esta linguagem que como o C++, o
JavaScript Orientada a Objetos.
Mas quem no programador no precisa se preocupar, pois em nosso curso
vamos estudar apenas as aes bsicas, j que um estudo mais profundo da
linguagem exigira conhecimento de lgica de programao.

O painel Aes
Menu Window, Actions (F9)

Para se trabalhar com o painel de aes podemos trabalhar com o modo de


Script Assistance ligado , que facilita a colocao das aes onde o Flash nos
mostra as aes definidas por grupos. Ou com o mesmo desligado onde voc
deve digitar todo o seu cdigo, importante lembrar que a ActionScript faz
diferenciao entre maisculas e minsculas.
As aes podem ser aplicadas a smbolos ou diretamente na linha do tempo.
Quando se aplica aes a smbolos necessrio definir qual ser o evento no
smbolo que vai chamar a ao.
A linguagem Actionscript possui algumas verses:
A verso 1: Contem as aes mais comuns a animaes flash como comando
para parar, ir para determinado quadro, abrir uma URL ou arquivo, etc..., essa
verso era a padro at a verso MX. Em nossa apostila vamos utilizar

46
algumas das aes de actionscript1.
A verso 2: Possui elementos de programao avanado como utilizao de
classes. A utilizao dessa verso de actionscript iniciou-se na verso MX 2004
A verso 3: trar novos elementos ao Flash, atualmente ela utilizada pelo
Adobe FLEX.
Para entendermos melhor o uso de nossas aes, crie um smbolo de boto no
quadro 1 da camada 1.

Crie uma nova camada e a partir do quadro 2 (clique no quadro 2 com o boto
direito e escolha Insert Keyframe) dessa camada crie uma animao.

47
Ao testar nosso filme aparece rapidamente o boto do quadro 01 e inicia-se a
animao, ao terminar repete-se o processo. Vamos interagir com nossa
animao. Faremos com que o nosso filme inicie no quadro 1 e somente
mostre a animao aps o boto do quadro 01 ser clicado, e ao terminar a
animao ele abra o endereo da Adobe .
Para que nosso filme fique parada no quadro 01 ser necessrio incluir em
nosso filme uma ao STOP no filme, como vamos acrescentar a ao para o
filme , ela deve ser inserida na timeline. Quando se trabalha com aes na
timeline aconselhvel sempre ter uma camada somente para as aes e
sempre acima de todas as demais.

Clique no primeiro quadro da camada aes, e chame o painel de aes (tecla


F9),caso o boto Script Assistance no esteja clique sobre ele.
Na parte direita do painel de aes, clique na pasta Global Functions, depois
em Timeline Controls, d um duplo clique na ao STOP.

Ao testar o filme voc poder observar que o filme est parado, agora vamos
acrescentar a ao para que a animao se inicie ao clicar no boto. Clique no
boto que temos no quando 1 e chame o painel de aes. Dentro de Global
Functions / Timeline Control e de um duplo clique na opo goto. A ao goto
possui duas opes Go to And Play , que direciona o filme para o quadro

48
selecionado e executa a Timeline, e a opo Go to And Stop, que direciona o
filme para o quadro selecionado e para o filme.
Ao escolher essa opo ele mostrar a seguinte ao.

Observe que ele apresenta na primeira linha um evento de mouse no boto, no


caso on (release) que significa que a ao ser executada ao soltar o mouse.
Para que se possa definir o evento de mouse para o boto clique na linha on
(release).

As opes disponveis so:


Press: executa a ao ao boto ser pressionado;
Release: executa a ao a boto ser solto;
Release Outside: executa a ao ao boto ser solto fora;
Key Press: executa a ao ao ser pressionada a tecla definida na caixa;
Roll Over: executa a ao ao posicionar o mouse sobre o boto;
Roll Out: executa a ao ao retirar o mouse do boto;
Drag Over: executa a ao ao arrastar o boto;
Drag Out: executar a ao ao terminar o arrasto do mouse.

49
A segunda linha nos mostra que ele vai direcionar para o quadro 2 e executa a
linha do tempo.

Ao clica sobre a segunda linha ele muda as propriedades do painel de aes,


ele mostra as opes Go to and play e Go to and stop, qual a cena para a
ao. Current Scene , corresponde a cena atual. A opo Type, permite definir
um quadro pelo nmero, pelo nome, avanar um frame, ou retornar um frame.
A opo Frame, onde deve-se colocar o quadro de destino.
Ao testar seu filme e clicar no boto voc pode observar que ele executa a
animao e volta ao inicio do filme.
Acrescente uma ao STOP ao final de seu filme. Para isso clique no ltimo
quadro da camada aes de seu filme com o boto direito do mouse e escolha
Insert Keyframe, depois no painel de aes acrescente uma ao stop nesse
quadro.

Vamos agora acrescentar o nosso filme a ao para que ao finalizar a


animao ele abra uma URL ou arquivo.
Continue com o ultimo quadro da camada de aes selecionado, no painel de

50
aes clique na pasta Browser / Network e d um duplo clique na ao getURL.
Clique sobre a ao getURL e nas opes defina no campo URL o que deve
ser aberto (no caso usamos http://www.adobe.com.br), toda URL a ser aberta
necessita que seja colocado o http. No campo window, deve ser preenchido o
tipo de janela, se for deixado em branco abre o endereo na mesma janela.

Relembrando alguns itens importantes:


Aes a serem realizadas para todos os elementos do filme devem ser
colocadas em quadros na linha do tempo.
Aes a serem aplicadas em botes deve-se primeiro selecionar o objeto e
somente depois aplicar as aes.

PRE-CARREGADORES
Todo o cuidado que voc investe na criao de interatividade complexa com
vrias linhas de Tempo ser desperdiado caso o seu usurio tenha que
esperar muito tempo para que seja feito o download da animao atravs da
WEB, muitas vezes fazendo com que o usurio desista de abrir a pgina.
Podemos evitar a perca de usurios criando animaes curtas que os
entretenha e dispare o filme principal somente quando o filme tiver sido
carregado.
Os pr-carregadores devero ser pequenos j que voc quer que eles sejam
carregados quase que instantaneamente e devem ser informativo, deixando
seus espectadores cientes do que os espera ou de quanto tempo eles tero de
aguardar.

51
Criando um carregador simples
Vamos criar um carregador simples. O primeiro quadro deve ser destinado a
animao do preloader. Crie um clipe de filme que deve conter a sua animao
do preloader, lembrando que essa animao deve ser leve. Crie duas camadas
em seu filme, uma para aes e outra para o filme.

No painel de aes desligue a opo script assistance e coloque a seguinte


ao:
if (_framesloaded>=_totalframes) {
gotoAndPlay (2);
} else {
gotoAndPlay (1);
}

Explicando a ao:
if (_framesloaded>=_totalframes) { Verifica se os quadros carregados de seu
filme maior ou igual ao total de quadros de seu filme.
gotoAndPlay (2); Caso a ao acima seja real ele direciona para o quadro 2
onde temos nossa animao.

52
} else {
gotoAndPlay (1);
} Caso a quantidade de quadros ainda no tenha sido toda carregada ele
volta ao quadro 1. Isso se repete at que o filme tenha sido todo carregado.

APLICAO STAND ALONE


Podemos utilizar o Flash para aplicaes executveis, ou seja, podemos usar
todos os recursos do Flash para criao de aplicaes executveis. Esse
recurso muito utilizado para criao de CD- multimdia. Basta apenas aps
terminar o seu filme no assistente de publicao marcar a opo Windows
Projector.

A ao utilizada pelo Flash para esse recurso FSCOMMAND que est dentro
do painel de aes na pasta Browser / Network.
A instruo FS Command nos permite enviar comandos de dentro do FLASH

53
para outros programas externos a ele.
Com ele podemos controlar o Stand-Alone Player do Flash e qualquer outra
aplicao que possuir controles Active X como o JavaScript na WEB, o
Director, O Visual Basic, o C++ e outros.
O FS Command nos permite especificar dois parmetros: commands e
arguments. Existem comandos e argumentos pr-definidos que podemos usar
sem termos que digitar e que funcionam somente para o Stand Alone Player.
O Stand Alone e Player um recurso do Flash que nos permite basicamente
visualizar uma animao sem precisar utilizar o Flash.
Esse recurso reproduz as animaes exatamente como elas iro aparecer num
Browser ou em uma aplicao Active X. Quando clicamos sobre um arquivo
com extenso SWF o Stand Alone Player abre uma janela e reproduz a
animao, sem abrir o Flash. Esta janela chamada de PROJETOR.
Podemos tambm publicar o filme como projetor, este assunto veremos mais
adiante.

Abaixo seguem os comandos do FS Command

Quit - Fecha o Projetor


Fullscreen (true ou false) - True exibe a animao em tela cheia, False retorna
ao tamanho normal
Allowscale (true ou false) - True permite que a animao seja escalada de
forma que ela preencha todo o tamanho do projetor. False a animao sempre
ser exibida em seu tamanho original sem poder ser escalada.
Showmenu (true ou false) - True permite a exibio completa do boto direito
no projetor. False exibe somente a opo about flash player no projetor.
Exec (caminho do arquivo) - Executa um aplicativo do projetor.

54
CENAS
Podem ser entendidas como partes de uma animao. Cada cena pode conter
seus prprios objetos/ personagens, e automaticamente se colocam em ordem
uma aps outras, podem tambm ser chamadas atravs de botes ou atravs
de aes colocadas diretamente nos quadros.
Depois de criada a cena podemos nomear as cenas de forma que ela possa
identificar sua funo dentro da animao. Para criar uma nova cena clique no
Menu Insert Scene, e para alterar o nome de uma cena Menu Modify, Scene.
Para um entendimento maior das cenas ser necessrio trabalhar
tambm com aes. Atualmente o uso das cenas tem sido mais
restritos a animaes Flash para multimdias em CDs, HD, etc...,
para swfs a serem apresentados na WEB, elas vo consumir muito
espao, ento ela tem sido substituda por aes de carregamentos de filme,
por este motivo no ser dada uma nfase maior sobre este elemento do
Flash.

PUBLICAO DO FILME
A publicao resultado final de seu trabalho no Flash , para publicar o seu
trabalho, basta apenas clicar no Menu File, Publish. O resultado ser um
documento HTML com o cdigo de insero do para o arquivo swf do Flash.
Para podermos definir quais as propriedades de nossa publicao, clique no
Menu File, Publish Settings.

55
A primeira guia trs a possibilidade dos formatos a serem definido como projeto
final de seu trabalho:
Flash (swf) Este o formato do arquivo de filme como resultado final;
HTML: Gera o documento HTML de seu filme ;
GIF: este formato permite gerar de seu filme gifs estticos e gifs animados do
mesmo, sendo que quando estticos podemos definir qual ser o looping e a
qualidade final.
JPG: Permite que seja gerado de sua animao uma imagem em JPG, e
qualidade de exportao.
PNG: Permite exportar o filme neste formato que embora seja menos utilizado
pode ser utilizado para imagens em seu cdigo HTML , o formato padro do
Fireworks.
Windows Projector: Aqui podemos gerar um arquivo executvel de seu filme o
que dispensa a necessidade de plug-ins e do Flash para se visualizar a
animao , este projetor somente para Windows.

56
Macintosh Projector: Funciona da mesma maneira que para o Windows , s
que para a plataforma MAC.
Quick Time: Permite gerar de sua animao um filme no formato .mov.
A guia Flash permite definir a verso do Flash Player para seu filme, ordem de
carregamento do filme, verso de actionScript. Em options podemos, gerar um
relatrio do filme, proteger contra importao (Quando essa opo est
desmarcada possvel importar um SWF dentro de outro filme), omitir aes
de rastreamento, permitir debug dos cdigos do filme, comprimir o filme,
proteger seu filme com senha, definir a qualidade do JPEG e qualidade do
udio.

A terceira guia HTML, permite definir para qual sada Flash ser o filme,
permite detectar a verso do Flash. Dimenses do filme, definir a exibio filme
(playback), qualidade do filme, modo de janela (Window mode), alinhamento,
escala do swf no HTML.

57
CONCLUSO
Como pode ser visto nas pginas acima o Flash uma poderosssima
ferramenta de criao multimdia. O objetivo do material foi ensinar as
principais caractersticas do software como ferramenta de design e animao
para web. O flash possui um recurso poderosssimo que dever estar sendo
cada vez mais explorado pelos novos recursos WEB disponveis.

58

Você também pode gostar